You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ji...@apache.org on 2017/02/20 06:41:17 UTC
[28/50] [abbrv] incubator-weex git commit: * [doc] updated
guide/intro/how-it-works
* [doc] updated guide/intro/how-it-works
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/f9686073
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/f9686073
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/f9686073
Branch: refs/heads/master
Commit: f9686073c92143fbe6ee473609632b686128766b
Parents: 0d244c7
Author: Jinjiang <zh...@me.com>
Authored: Thu Feb 16 17:23:28 2017 +0800
Committer: Jinjiang <zh...@me.com>
Committed: Thu Feb 16 17:23:28 2017 +0800
----------------------------------------------------------------------
doc/source/cn/guide/intro/how-it-works.md | 38 +++++++---------
doc/source/guide/intro/how-it-works.md | 62 +++++++++++++++++++++++++-
2 files changed, 78 insertions(+), 22 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/f9686073/doc/source/cn/guide/intro/how-it-works.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/guide/intro/how-it-works.md b/doc/source/cn/guide/intro/how-it-works.md
index 19818a2..4480005 100644
--- a/doc/source/cn/guide/intro/how-it-works.md
+++ b/doc/source/cn/guide/intro/how-it-works.md
@@ -11,27 +11,24 @@ version: 2.1
## \u6574\u4f53\u67b6\u6784
-Weex \u8868\u9762\u4e0a\u662f\u4e00\u4e2a\u5ba2\u6237\u7aef\u6280\u672f\uff0c\u4f46\u5b9e\u9645\u4e0a\u5b83\u4e32\u8054\u8d77\u4e86\u4ece\u672c\u5730\u5f00\u53d1\u73af\u5883\u5230\u4e91\u7aef\u90e8\u7f72\u548c\u5206\u53d1\u7684\u6574\u4e2a\u94fe\u8def\u3002\u5f00\u53d1\u8005\u9996\u5148\u53ef\u4ee5\u5728\u672c\u5730\u60f3\u64b0\u5199 web \u9875\u9762\u4e00\u6837\u64b0\u5199\u4e00\u4e2a app \u7684\u9875\u9762\uff0c\u7136\u540e\u7f16\u8bd1\u6210\u4e00\u6bb5 JavaScript \u4ee3\u7801\uff0c\u5f62\u6210 Weex \u7684\u4e00\u4e2a JS bundle\uff1b\u5728\u4e91\u7aef\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u628a\u751f\u6210\u7684 JS bundle \u90e8\u7f72\u4e0a\u53bb\uff0c\u7136\u540e\u901a\u8fc7\u7f51\u7edc\u8bf7\u6c42\u6216\u9884\u4e0b\u53d1\u7684\u65b9\u5f0f\u4f20\u9012\u5230\u7528\u6237\u7684\u79fb\u52a8\u5e94\u7528\u5ba2\u6237\u7aef\uff1b\u5728\u79fb\u52a8\u5e94\u7528\u5ba2\u6237\u7aef\u91cc\uff0cWeexSDK \u4f1a\u51c6\u5907\u597d\u4e00\u4e2a JavaScript \u5f15\u64ce\uff0c\u5e76\u4e14\u5728\u7528\u6237\u6253\u5f00\u4e00\u4e2a Weex \u9875\u9762\u65f6\u6267\u884c\u76f8\u5e94\u7684 JS bundle\uff0c\u5e76\u5728\u6267\u884c\u8fc7\u7a0b\u4e2d\u4ea7\u751f\u5404\u79cd\u547d\u4ee4\u53d1\u9001\u5230 native \u7aef\u8fdb\u884c\u7684\u754c\u9762\u6e32\u67d3\u6216\u6570\u636e\u5b58\u50a8\u3001\u7f51\u7edc\u901a\u4fe1\u3001\u8c03\u7528\u8bbe\u5907\u529f\u80fd\u3001\u7528\u6237\u4ea4\u4e92\u54cd\u5e94\u7b49\u79fb\u52a8\u5e94\u7528\u7684\u573a\u666f\u5b9e\u8df5\uff1b\u540c\u65f6\uff0c\u5982\u679c\u7528\u6237\u6ca1\u6709\u5b89\u88c5\u79fb\u52a8\u5e94\u7528\uff0c\u4ed6\u4ecd\u7136\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u91cc\u6253\u5f00\u4e00\u4e2a\u76f8\u540c\u7684 web \u9875\u9762\uff0c\u8fd9\u4e2a\u9875\u9762\u662f\u4f7f\u7528\u76f8\u540c\u7684\u9875\u9762\u6e90\u4ee3\u7801\uff0c\u901a\u8fc7\u6d4f\u89c8\u5668\u91cc\u7684 JavaScript \u5f15\u64ce\u8fd0\u884c\u8d77\u6765\u7684\u3002
+Weex \u8868\u9762\u4e0a\u662f\u4e00\u4e2a\u5ba2\u6237\u7aef\u6280\u672f\uff0c\u4f46\u5b9e\u9645\u4e0a\u5b83\u4e32\u8054\u8d77\u4e86\u4ece\u672c\u5730\u5f00\u53d1\u73af\u5883\u5230\u4e91\u7aef\u90e8\u7f72\u548c\u5206\u53d1\u7684\u6574\u4e2a\u94fe\u8def\u3002\u5f00\u53d1\u8005\u9996\u5148\u53ef\u4ee5\u5728\u672c\u5730\u50cf\u64b0\u5199 web \u9875\u9762\u4e00\u6837\u64b0\u5199\u4e00\u4e2a app \u7684\u9875\u9762\uff0c\u7136\u540e\u7f16\u8bd1\u6210\u4e00\u6bb5 JavaScript \u4ee3\u7801\uff0c\u5f62\u6210 Weex \u7684\u4e00\u4e2a JS bundle\uff1b\u5728\u4e91\u7aef\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u628a\u751f\u6210\u7684 JS bundle \u90e8\u7f72\u4e0a\u53bb\uff0c\u7136\u540e\u901a\u8fc7\u7f51\u7edc\u8bf7\u6c42\u6216\u9884\u4e0b\u53d1\u7684\u65b9\u5f0f\u4f20\u9012\u5230\u7528\u6237\u7684\u79fb\u52a8\u5e94\u7528\u5ba2\u6237\u7aef\uff1b\u5728\u79fb\u52a8\u5e94\u7528\u5ba2\u6237\u7aef\u91cc\uff0cWeexSDK \u4f1a\u51c6\u5907\u597d\u4e00\u4e2a JavaScript \u5f15\u64ce\uff0c\u5e76\u4e14\u5728\u7528\u6237\u6253\u5f00\u4e00\u4e2a Weex \u9875\u9762\u65f6\u6267\u884c\u76f8\u5e94\u7684 JS bundle\uff0c\u5e76\u5728\u6267\u884c\u8fc7\u7a0b\u4e2d\u4ea7\u751f\u5404\u79cd\u547d\u4ee4\u53d1\u9001\u5230 native \u7aef\u8fdb\u884c\u7684\u754c\u9762\u6e32\u67d3\u6216\u6570\u636e\u5b58\u50a8\u3001\u7f51\u7edc\u901a\u4fe1\u3001\u8c03\u7528\u8bbe\u5907\u529f\u80fd\u3001\u7528\u6237\u4ea4\u4e92\u54cd\u5e94\u7b49\u79fb\u52a8\u5e94\u7528\u7684\u573a\u666f\u5b9e\u8df5\uff1b\u540c\u65f6\uff0c\u5982\u679c\u7528\u6237\u6ca1\u6709\u5b89\u88c5\u79fb\u52a8\u5e94\u7528\uff0c\u4ed6\u4ecd\u7136\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u91cc\u6253\u5f00\u4e00\u4e2a\u76f8\u540c\u7684 web \u9875\u9762\uff0c\u8fd9\u4e2a\u9875\u9762\u662f\u4f7f\u7528\u76f8\u540c\u7684\u9875\u9762\u6e90\u4ee3\u7801\uff0c\u901a\u8fc7\u6d4f\u89c8\u5668\u91cc\u7684 JavaScript \u5f15\u64ce\u8fd0\u884c\u8d77\u6765\u7684\u3002
## \u672c\u5730\u5f00\u53d1\u73af\u5883
-Weex \u7684\u672c\u5730\u5f00\u53d1\u73af\u5883\u57fa\u4e8e web \u5f00\u53d1\u4f53\u9a8c\u800c\u8bbe\u8ba1\uff0cweb \u5f00\u53d1\u8005\u53ef\u4ee5\u901a\u8fc7\u81ea\u5df1\u719f\u6089\u7684 HTML/CSS/JavaScript \u6280\u672f\u548c\u8bed\u6cd5\u5b9e\u73b0\u79fb\u52a8\u5e94\u7528\u7684\u754c\u9762\u3002\u540c\u65f6 Weex \u4e5f\u5bf9 Vue.js \u8fd9\u4e00\u975e\u5e38\u4f18\u79c0\u7684\u524d\u7aef\u6846\u67b6\u505a\u4e86\u5b98\u65b9\u7684\u652f\u6301\u3002
+Weex \u7684\u672c\u5730\u5f00\u53d1\u73af\u5883\u57fa\u4e8e web \u5f00\u53d1\u4f53\u9a8c\u800c\u8bbe\u8ba1\uff0cweb \u5f00\u53d1\u8005\u53ef\u4ee5\u901a\u8fc7\u81ea\u5df1\u719f\u6089\u7684 HTML/CSS/JavaScript \u6280\u672f\u548c\u8bed\u6cd5\u5b9e\u73b0\u79fb\u52a8\u5e94\u7528\u7684\u754c\u9762\u3002\u540c\u65f6 Weex \u4e5f\u5bf9 [Vue.js](https://vuejs.org/) \u8fd9\u4e00\u975e\u5e38\u4f18\u79c0\u7684\u524d\u7aef\u6846\u67b6\u505a\u4e86\u5b98\u65b9\u7684\u652f\u6301\u3002
\u9664\u6b64\u4e4b\u5916\uff0cWeex \u7684\u5de5\u7a0b\u8bbe\u8ba1\u4e5f\u662f web \u5f00\u53d1\u8005\u975e\u5e38\u719f\u6089\u7684\uff0c\u9996\u5148 web \u5f00\u53d1\u8005\u53ef\u4ee5\u4f7f\u7528\u81ea\u5df1\u719f\u6089\u7684 npm \u8fdb\u884c\u4f9d\u8d56\u7ba1\u7406\uff1b\u5176\u6b21 web \u5f00\u53d1\u8005\u5728\u901a\u8fc7\u9879\u76ee\u811a\u624b\u67b6\u521d\u59cb\u5316\u5de5\u7a0b\u3001\u5f00\u53d1\u3001\u8c03\u8bd5\u3001\u8d28\u91cf\u63a7\u5236\u7b49\u5404\u4e2a\u73af\u8282\uff0c\u90fd\u53ef\u4ee5\u53c2\u8003 web \u5f00\u53d1\u5df2\u6709\u7684\u6700\u4f73\u5b9e\u8df5\u3002
\u548c\u5982\u4eca web \u5f00\u53d1\u7684\u6700\u4f73\u5b9e\u8df5\u4e00\u6837\uff0cWeex \u4f1a\u628a\u4e00\u4e2a\u9875\u9762\u7684\u6e90\u4ee3\u7801\u5168\u90e8\u7f16\u8bd1\u6253\u5305\u6210\u4e00\u4e2a JS bundle\uff0c\u5728\u6d4f\u89c8\u5668\u4e2d\uff0c\u6211\u4eec\u9700\u8981\u628a\u8fd9\u4e2a JS bundle \u4f5c\u4e3a\u4e00\u6bb5 `<script>` \u8f7d\u5165\u7f51\u9875\uff0c\u5728\u5ba2\u6237\u7aef\u91cc\uff0c\u6211\u4eec\u628a\u8fd9\u6bb5 JS bundle \u8f7d\u5165\u672c\u5730\uff0c\u5e76\u901a\u8fc7 WeexSDK \u76f4\u63a5\u6267\u884c\u3002
-<!-- \u548c web \u5f00\u53d1\u7684\u5f02\u540c -->
+**\u76f8\u5173\u9605\u8bfb**
-<!-- \u548c vue \u5f00\u53d1\u7684\u5f02\u540c -->
-
-<!-- \u5982\u4f55\u521b\u5efa\u4e00\u4e2a\u65b0\u9879\u76ee -->
-
-<!-- \u5982\u4f55\u5728 native \u91cc debug -->
-
-<!-- \u5982\u4f55\u5728 html5 \u91cc debug -->
+* [Weex \u548c web \u5e73\u53f0\u7684\u5dee\u5f02](../../references/platform-difference.html)
+* [Vue 2.x \u5728 Weex \u548c web \u4e2d\u7684\u5dee\u5f02](../../references/vue/difference-with-web.html)
+* [\u5feb\u901f\u4e0a\u624b](../index.html)
+* [\u4f7f\u7528 Devtools](./devtools.html)
## \u4e91\u7aef\u90e8\u7f72\u548c\u5206\u53d1
@@ -45,22 +42,21 @@ Weex \u7684 iOS \u548c Android \u5ba2\u6237\u7aef\u4e2d\u90fd\u4f1a\u8fd0\u884c\u4e00\u4e2a JavaScript \u5f15\u64ce\uff0c\u6765
## \u5ba2\u6237\u7aef\u6e32\u67d3\u5c42
-Weex \u76ee\u524d\u63d0\u4f9b\u4e86 iOS \u548c Android \u4e24\u4e2a\u5ba2\u6237\u7aef\u7684 native \u6e32\u67d3\u5c42\u3002\u6bcf\u4e2a\u7aef\u90fd\u57fa\u4e8e DOM \u6a21\u578b\u8bbe\u8ba1\u5e76\u5b9e\u73b0\u4e86\u6807\u51c6\u7684\u754c\u9762\u6e32\u67d3\u63a5\u53e3\u4f9b JavaScript \u5f15\u64ce\u8c03\u7528\u3002\u5e76\u4e14\u7ed3\u5408 web \u6807\u51c6\u548c native \u7684\u7279\u70b9\u548c\u4f18\u52bf\u5b9e\u73b0\u4e86\u4e00\u5957\u7edf\u4e00\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\u3002\u5c24\u5176\u662f\u5728\u754c\u9762\u9996\u5c4f\u52a0\u8f7d\u65f6\u95f4\u3001native \u4e0b\u957f\u5217\u8868\u7684\u8d44\u6e90\u5f00\u9500\u548c\u590d\u7528\u60c5\u51b5\u3001CPU\u3001\u5185\u5b58\u3001\u5e27\u7387 \u7b49\u5173\u952e\u6307\u6807\u4e0a\uff0c\u90fd\u6709\u975e\u5e38\u4f18\u79c0\u7684\u8868\u73b0\u3002Weex \u5b98\u65b9\u5df2\u7ecf\u63d0\u4f9b\u4e86\u4e00\u7ec4\u5f00\u53d1\u8005\u6700\u5e38\u7528\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u4f46\u9762\u5bf9\u4e30\u5bcc\u591a\u6837\u7684\u79fb\u52a8\u5e94\u7528\u7814\u53d1\u9700\u6c42\uff0c\u56e2\u961f\u4e5f\u96be\u514d\u4f1a\u529b\u4e0d\u4ece\u5fc3\uff0c\u4e3a\u6b64\u6211\u4eec\u63d0\u4f9b\u4e86\u7075\u6d3b\u81ea\u7531\u7684\u6a2a\u5411\u6269\u5c55\u80fd\u529b\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u6839\u636e\u81ea\u8eab\u7684\u60c5\u51b5\u5b9a\u5236\u5c5e\u4e8e\u81ea\u5df1\u7684\u5ba2\u6237\u7aef\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u8fdb\u4e00\u6b65\u4e30\u5bcc Weex \u5728\u5ba2\u6237\u7aef\u4e0a\u7684\u80fd\u529b\u3002
-
-<!-- \u7ec4\u4ef6\u548c\u6a21\u5757\u548c web \u6807\u51c6\u7684\u533a\u522b -->
-
-<!-- \u5982\u4f55\u63a5\u5165 iOS -->
-
-<!-- \u5982\u4f55\u63a5\u5165 Android -->
+Weex \u76ee\u524d\u63d0\u4f9b\u4e86 iOS \u548c Android \u4e24\u4e2a\u5ba2\u6237\u7aef\u7684 native \u6e32\u67d3\u5c42\u3002\u6bcf\u4e2a\u7aef\u90fd\u57fa\u4e8e DOM \u6a21\u578b\u8bbe\u8ba1\u5e76\u5b9e\u73b0\u4e86\u6807\u51c6\u7684\u754c\u9762\u6e32\u67d3\u63a5\u53e3\u4f9b JavaScript \u5f15\u64ce\u8c03\u7528\u3002\u5e76\u4e14\u7ed3\u5408 web \u6807\u51c6\u548c native \u7684\u7279\u70b9\u548c\u4f18\u52bf\u5b9e\u73b0\u4e86\u4e00\u5957\u7edf\u4e00\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\u3002Weex \u5728\u6027\u80fd\u65b9\u9762\u7684\u8868\u73b0\u4e5f\u662f\u975e\u5e38\u4f18\u5f02\u7684\uff0c\u5c24\u5176\u662f\u754c\u9762\u9996\u5c4f\u52a0\u8f7d\u65f6\u95f4\u3001native \u4e0b\u957f\u5217\u8868\u7684\u8d44\u6e90\u5f00\u9500\u548c\u590d\u7528\u60c5\u51b5\u3001CPU\u3001\u5185\u5b58\u3001\u5e27\u7387 \u7b49\u5173\u952e\u6307\u6807\u3002\u5f53\u7136\uff0c\u5c3d\u7ba1 Weex \u5b98\u65b9\u5df2\u7ecf\u63d0\u4f9b\u4e86\u4e00\u7ec4\u5f00\u53d1\u8005\u6700\u5e38\u7528\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u4f46\u9762\u5bf9\u4e30\u5bcc\u591a\u6837\u7684\u79fb\u52a8\u5e94\u7528\u7814\u53d1\u9700\u6c42\uff0c\u56e2\u961f\u4e5f\u96be\u514d\u4f1a\u529b\u4e0d\u4ece\u5fc3\uff0c\u4e3a\u6b64\u6211\u4eec\u63d0\u4f9b\u4e86\u7075\u6d3b\u81ea\u7531\u7684\u6a2a\u5411\u6269\u5c55\u80fd\u529b\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u6839\u636e\u81ea\u8eab\u7684\u60c5\u51b5\u5b9a\u5236\u5c5e\u4e8e\u81ea\u5df1\u7684\u5ba2\u6237\u7aef\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u8fdb\u4e00\u6b65\u4e30\u5bcc Weex \u5728\u5ba2\u6237\u7aef\u4e0a\u7684\u80fd\u529b\u3002
-<!-- \u5982\u4f55\u6269\u5c55 iOS -->
+**\u76f8\u5173\u94fe\u63a5**
-<!-- \u5982\u4f55\u6269\u5c55 Android -->
+* [Weex \u7684\u7ec4\u4ef6\u548c\u6a21\u5757\u8ddf web \u6807\u51c6\u7684\u533a\u522b](../../references/web-standards.html)
+* [\u5982\u4f55\u4f7f\u7528 iOS](../../references/ios-apis.html)
+* [\u5982\u4f55\u4f7f\u7528 Android](../../references/android-apis.html)
+* [\u5982\u4f55\u6269\u5c55 iOS](../../references/advanced/extend-to-ios.html)
+* [\u5982\u4f55\u6269\u5c55 Android](../../references/advanced/extend-to-android.html)
## \u6d4f\u89c8\u5668\u6e32\u67d3
Weex \u9664\u4e86\u63d0\u4f9b iOS \u548c Android \u7684\u5ba2\u6237\u7aef\u6e32\u67d3\u5c42\u4e4b\u5916\uff0c\u8fd8\u57fa\u4e8e Vue 2.0 \u5bf9\u5b98\u65b9\u7684\u6240\u6709\u7ec4\u4ef6\u548c\u6a21\u5757\u8fdb\u884c\u4e86\u5c01\u88c5\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u57fa\u4e8e Vue 2.0 \u7528\u540c\u4e00\u5957\u6e90\u4ee3\u7801\u6784\u5efa\u51fa\u5728\u6d4f\u89c8\u5668\u4e2d\u76f8\u540c\u6548\u679c\u7684\u9875\u9762\u3002\u5e76\u4e14\u540c\u6837\u53ef\u4ee5\u6a2a\u5411\u6269\u5c55\u3002
-<!-- \u5982\u4f55\u4f7f\u7528 HTML5 \u7248\u672c -->
+**\u76f8\u5173\u94fe\u63a5**
-<!-- \u5982\u4f55\u6269\u5c55 HTML5 -->
\ No newline at end of file
+* [\u5982\u4f55\u4f7f\u7528 HTML5](../../references/html5-apis.html)
+* [\u5982\u4f55\u6269\u5c55 HTML5](../../references/advanced/extend-to-html5.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/f9686073/doc/source/guide/intro/how-it-works.md
----------------------------------------------------------------------
diff --git a/doc/source/guide/intro/how-it-works.md b/doc/source/guide/intro/how-it-works.md
index 5ccf72e..f67f8b4 100644
--- a/doc/source/guide/intro/how-it-works.md
+++ b/doc/source/guide/intro/how-it-works.md
@@ -9,4 +9,64 @@ version: 2.1
# How it works
-Work in progress.
\ No newline at end of file
+## Overall Structure
+
+Weex is a client-side technology on the surface, but in fact it connects the whole way from the local development environment to the cloud deployment and distribution.
+
+Developers can first write an app page just like writing a web page, and then compile the app page into a piece of JavaScript which is called Weex JS bundle.
+
+In the cloud, developers can deploy the generated JS bundle. And then it can be requested or pre-fetched from a mobile app with WeexSDK.
+
+The WeexSDK would prepare a JavaScript engine to run corresponding JS bundle when user opens a Weex page anytime. Usually the JS bundle will make some calls to native-side through Weex JS bridge. They let native-side render the user interface or handle user interactions, storage data, make network communications, call device powers and so on.
+
+Even if a user does not install the App, he can still open a same web page in the browser, using the same source code.
+
+
+
+## Local Development Environment
+
+The design of local development environment of Weex is based on the web development experience. It help web developers writing mobile app UI with their familiar HTML / CSS / JavaScript. At the same time Weex also do the official support to [Vue.js](https://vuejs.org/), a very great front-end framework.
+
+In addition, the management of a Weex project is also very familiar with a web project. First, web developers can use npm packages to manage dependencies. Second, web developers can refer to all best practices from every process of a web project such as scaffolding, development, preview, debugging, test etc.
+
+Also same as the best practice of web development, each Weex page will be built into a JS bundle. In the browser, we put JS bundle into the web page as a `<script>` tag. In the client, we put JS bundle into the local, and execute it in WeexSDK.
+
+**Links**
+
+* [Platform differences between Weex and web](../../references/platform-difference.html)
+* [Differences of using Vue between Weex with web](../../references/vue/difference-with-web.html)
+* [Get Started](../index.html)
+* [Using Devtools](./devtools.html)
+
+## Cloud Deployment & Distribution
+
+Weex JS bundle can be deployed and distributed as a static resource. Almost all current web development system and best practice can be applied to Weex directly such as generating JS bundle through CMS system or deploying JS bundle to static CDN, monitoring JS bundle traffic through server log, caching or pre-fetching JS bundle to reduce networking cost etc.
+
+## Client-side JavaScript Engine
+
+Both iOS and Android client-side of Weex run a JavaScript engine to execute JS bundles and send well defined instructions to the native render layers. We choose JavaScriptCore in iOS and v8 in Android which provide strong performance and stability.
+
+In order to make the mobile resources better utilized, we just run only one instance of JavaScript for all Weex pages. That is, all JS bundles share the same JavaScript instance, but each JS bundle context also isolated well by default in the runtime. We also put Vue 2.0 as a built-in JS Framework, developers do not have to pack it in each JS bundle, which save the size and time of networking.
+
+## Client Rendering Layer
+
+Weex offers both iOS and Android native rendering layers. Each of them are based on the Native DOM model and exposed to JavaScript APIs. At the same time we provide a set of native components and modules to use. Also Weex has high performance especially on first-screen loading time, memory cost and re-reuse of long list, etc.
+
+Although Weex has provided a group of most commonly used components and modules officially. But we definitely know they couldn't satisfy everyone. So we design our native render as extendable as possible. You can extend more components and modules on your own. We can build and share an Weex eco-system together.
+
+**Links**
+
+* [Differences between Weex and web standard](../../references/web-standards.html)
+* [Using Weex in iOS](../../references/ios-apis.html)
+* [Using Weex in Android](../../references/android-apis.html)
+* [Extend to iOS](../../references/advanced/extend-to-ios.html)
+* [Extend to Android](../../references/advanced/extend-to-android.html)
+
+## In the Browser
+
+Besides iOS and Android client, Weex also has a web version based on Vue 2.0. Developers can just use Vue 2.0 to build the same page in browsers.
+
+**Links**
+
+* [Using Weex in HTML5](../../references/html5-apis.html)
+* [Extend to HTML5](../../references/advanced/extend-to-html5.html)