adjust file structure and update drafts

_drafts/difference-with-web.en.md

@@ -1,5 +1,5 @@
 ---
-title: Difference with Web   
+title: Difference with Web
 type: references
 order: 10.1
 version: 2.1
@@ -9,7 +9,7 @@ version: 2.1
 
 ## Platform Differences
 
-Vue.js was designed for the Web platform at the begining. Although it can be based on Weex to develop native applications, there are still many differences between web and native. See [Platform Differences Between Weex and Web](../ platform-difference.html) for more details.
+Vue.js was designed for the Web platform at the beginning. Although it can be based on Weex to develop native applications, there are still many differences between web and native. See [Platform Differences Between Weex and Web](../ platform-difference.html) for more details.
 
 Due to those differences, Weex doesn't support those features in Vue.js (mostly are DOM-related):
 

_drafts/extend-js-framework.md

@@ -0,0 +1,168 @@
+---
+title: Extend JS framework
+type: guide
+group: Extend
+order: 6.4
+version: 2.1
+---
+
+# Extend JS framework
+
+This part of the extension of JS framework is still in the discussion, may be adjusted at any time, please pay attention.
+
+Weex wants to be able to respect as many developer development habits as possible.So, in addition to Weex official support Vue 2.0, the developer can also customize and horizontally extension their own or their favorite JS Framework.The steps to customize the JS Framework are as follows:
+
++ First you have a complete set of JS Framework.
++ Learn about Weex's JS engine feature support.
++ Adapting Weex's native DOM APIs.
++ Adapting Weex's initialization portal and multi-instance management mechanism.
++ Add your own JS Framework to the framework configuration of the Weex JS runtime. Then pack it.
++ Build JS bundles based on the JS Framework. You need to add a specific prefix comment so that the Weex JS runtime can recognize it.
+
+## Weex JS engine features support
+
++ Under iOS, Weex uses the JavaScriptCore that comes with the system, so the ES support depends on the version of the operating system.
+The current conservative judgments, ES5 features on the market mainstream iOS devices are perfectly supported, but some of the features of ES6 + is not supported.
+
++ Under Android, Weex uses the v8 kernel provided by UC. For performance and stability considerations, we are not using the latest version of the v8 kernel.The same conservative judgment, the ES5 feature can all support, including strict mode `Object.freeze` and so on.
+
++ The Weex JS engine does not support HTML DOM APIs and HTML5 JS APIs, including `document`, `set`Timeout`, and so on.
+
++ We added `Promise`'s polyfill, as well as the `console`'s polyfill.
+
++ In addition, in order to ensure that the JS engine can manage memory as much as possible, we have a generic global object for the `Object.freeze ()` freeze operation, which includes:
+
+ 	- `Object`
+	- `Object.prototype`
+	- `Array`
+	- `Array.prototype`
+	- `String.prototype`
+	- `Number.prototype`
+	- `Boolean.prototype`
+	- `Error.prototype`
+	- `Date.prototype`
+	- `RegExp.prototype`
+
+## Adapt to Weex's initial entry and multi-instance management mechanism
+
+The JS Framework provided by the developer needs to be packaged as a **CommonJS** package, and the package needs to be extension to the following methods:
+
+### Framework initialization
+
++ `init(config)`
+	- `config`
+		- `Document`
+		- `Element`
+		- `Comment`
+		- `TaskSender`
+		- `CallbackManager`
+
+This method places the Native DOM class and two auxiliary classes provided by Weex in the `config` parameter and allows the framework itself to be initialized.
+
+Tip: At the same time, the author can pass in a different `config` in the framework of the initialization time. This allows for framework testing or environmental simulation.
+
+#### Introduction to parameter format
+
++ `TaskSender`: wip…
++ `CallbackManager`: wip…
+
+### Register available native components and modules
+
++ `registerComponents(components)`
++ `registerModules(modules)`
+
+These two methods are called immediately after the frame is initialized. This framework will be able to know which components and modules the current client supports.
+
+#### Introduction to parameter format
+
++ `components: Array`: Describe the array of components, each of which includes:
+	+ `type: string`: Component name, for example `div`。
+	+ `methods: string[]`: Optional, a list of method names supported by this component. These methods can follow the native DOM APIs call.
++ `modules: Object`: Describe the hash table of a series of modules. Key is the module name, the value is an array. The elements of the array describe a method in the module. The information of the method includes:
+	+ `name: string`: Method name
+	+ `args: string[]`: Parameter number and type description
+
+**E.g:**
+
+```javascript
+registerComponents([
+  { type: 'web', methods: ['goBack', 'goForward', 'refresh']}
+])
+registerModules({
+  event: [
+    {name: 'openURL', args: ['string']}
+  ]
+})
+```
+
+### Multi - instance lifecycle management
+
++ `createInstance(instanceId, code, config, data, env)`
++ `refreshInstance(instanceId, data)`
++ `destroyInstance(instanceId)`
+
+Each Weex page has two stages: created and destroyed. At the same time in the Weex page running process, native can send messages to the Weex page. Different frameworks can follow their own ideas to achieve the message.
+
+#### Introduction to parameter format
+
++ `instanceId: string`: The unique id of the Weex page is generated by native.
++ `code: string`:The Wex page's JS bundle's code is passed through native.
++ `config: Object?`: The configuration information for the Wex page, such as the bundleUrl representing the bundle address, is generated by the native configuration. It has nothing to do with the contents of the JS bundle itself.
++ `data: Object?`: Native can import an external data when creating a Weex page. The JS framework can also generate different page content for the same JS bundle with different data.
++ `env: Object?`:The current environment information about the Weex page, the meaning of each field:
+	- `info: Object`: Framework information, see the "JS Bundle format requirements" later.
+	- `config: Object`:Equivalent to the third parameter of the method `config`
+	- `callbacks: CallbackManager`:  only `CallbackManager`instance of Weex page.
+	- `created: number`:The number of seconds that the Wex page was created.
+	- `framework: string`:The name of the framework used by the Wex page. Equivalent to `info.framework`.
+
+### Native communication
+
++ `receiveTasks(instanceId, tasks)`
+
+Native can use the `refreshInstance` method to send a message to the JS framework layer. But in many cases will use `receiveTasks` to send user events or methods callback to the JS framework.
+
+For example, if the user clicks on a button, native will send a `fireEvent` type of task to the JS framework, and then the JS framework will handle the corresponding event logic. This part of the working mechanism is related to the design of the `addEvent` in the native DOM interface.
+
+Another example is the user using fetch to send network requests. When the request is done at the native end, it will be sent to the JS framework with a callback type of task. Since native can not pass the function in JavaScript, it actually only sends a callbackId to the JS framework. This part of the working mechanism is related to the design of CallbackManager.
+
+#### Auxiliary method
+
++ `getRoot(instanceId): JSON`
+
+This method returns the full JSON description of the document body node. Developers can view the full native DOM tree as a result. The format of the specific return value is the same as the return method of the toJSON () method in the native DOM interface. This feature is used extensively as a developer tool extension.
+
+## Configure the JS Framework in WeexSDK
+### Prepare your JS Framework code
+
+```javascript
+// your-own-js-framework.js
+export function init (config) { ... }
+export function registerComponents (components) { ... }
+export function registerModules (modules) { ... }
+export function createInstance (id, code, config, data, env) { ... }
+export function destroyInstance (id) { ... }
+export function refreshInstance (id, data) { ... }
+export function recieveTasks (id, tasks) { ... }
+export function getRoot (id) { ... }
+```
+
+### Register a JS Framework
+
+```javascript
+import * as Vue from '...'
+import * as React from '...'
+import * as Angular from '...'
+export default { Vue, React, Angular };
+```
+And then packaged JS runtime, integrated into WeexSDK.
+
+#### JS Bundle format requirements
+
+**Framework info**
+The note(alias framework info) at the beginning of the JS Bundle file is very important. The format is as follows:
+
+```javascript
+// { "framework": "Vue" }
+```
+So that the Weex JS engine will know that the JS bundle needs to use the Vue framework to resolve.Similarly, Weex supports multiple frameworks.It will be based on js bundle notes to select the corresponding framework resolution.

_drafts/sandbox.md

@@ -0,0 +1,36 @@
+# Weex 多实例隔离机制
+
+## 需求
+
+隔离每个页面实例的执行环境，保障实例中的变量无法污染全局。
+
+## 污染点
+
+1. global javascript context
+2. global objects: `Object`, `Array`, `Array.prototype`
+3. (browser) global apis: `setTimeout`, `Promise`, `console`.
+4. weex, document
+5. Vue & Rax
+
+## 实现思路
+
++ 从客户端或引擎级别将页面的执行环境区分开。
+
+### 额外收获
+
++ 取消 **“用 js 执行 js”**（`new Function`）之后，更细粒度的代码分割、动态组件或模块都可以实现了。
+
+### 依然存在的风险点
+
++ console
++ Promise
++ timer
++ 回调函数
+
++ js service
++ weex 不是开放问题，用 freeze 可以防御
++ Vue 不是开发问题，用 freeze 可以防御。如果前端框架从 jsfm 中拆离，可彻底解决问题。
+
+## 增强方案
+
+## 更激进方案

source/guide/front-end-frameworks.md

@@ -4,9 +4,94 @@ type: guide
 group: Overview
 order: 1.3
 version: 2.1
-has_chapter_content: true
 ---
 
+<!-- toc -->
+
+Writing UIs in declarative way.
+
+## Front-end Frameworks in Weex
+
+![Vue and Rax](./images/vue-rax.png)
+
+Front-end technologies seem flourishing and productive. ~~Test, build, debug, tools, 3td-party libs.~~
+
+The structure of Weex is decoupled, it isn't relay on any specific front-end frameworks, the DOM operations will convert into render directives and send to native render engine.
+
+With the evolution of technology, even if Vue.js and React are not popular any more few years later, Weex can integrate the new widely-used front-end frameworks as well.
+
 ## Vue.js
 
+Using v2.x.x version of Vue.js.
+
+> If there is no special instructions, when I mentioned *Vue.js*, it actually refers *Vue.js 2.x.x*.
+
+### Runtime-only Build
+
+When using vue-loader or vueify, templates inside *.vue files are pre-compiled into JavaScript at build time. You don’t really need the compiler in the final bundle, and can therefore use the runtime-only build.
+
+Vue.js provides two available builds: the **Runtime + Compiler** build and the **Runtime-only** build. See its [official document](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build) for more information.
+
+Weex only required the runtime-only build of Vue.js for better performance and less code size.
+
+The specific differences are:
+
++ The `template` attribute is not supported when defining a component.
++ Does not support using `x-templates`.
++ Does not support using `Vue.compile`.
+
+### weex-vue-render
+
+### Compile `*.vue` files
+
+
+Because of the platform difference and 利用 web 本身特性的性能, you have to compile your source file in two different ways:
+
++ For the web, you can compile source files in any official way, such as Webpack + vue-loader or Browserify + vueify. and require the [weex-vue-render](https://www.npmjs.com/package/weex-vue-render), which is a group of Weex build-in components.
++ For Android and iOS, we've provided [weex-loader](https://github.com/weexteam/weex-loader) to compile the `*.vue` files. That is, use Webpack + weex-loader to generate the js bundle that is available for the native.
+
+#### Using `weex-loader`
+
+[weex-loader](https://github.com/weexteam/weex-loader) is a loader for Webpack, see the [official document](http://webpack.github.io/docs/using-loaders.html) to learn how to use it.
+
+One more thing should be reminded is that if the *entry file* of your webpack config is a `.vue` file, you also need to pass an additional ` entry` parameter, usually set to `true`.
+
+```Js
+module.exports = {
+  // Add the entry parameter for the .vue file
+  entry: './path/to/App.vue?entry=true',
+
+  // other configurations ...
+
+  module: {
+    loaders: [{
+
+      // matches the .vue file path that contains the entry parameter
+      test: /\.vue(\?^^]+)?$/,
+      loaders: ['weex-loader']
+    }]
+  },
+}
+```
+
+**You don't need to write those additional parameters if you are using `.js` file as entry file.** We recommend using javascript file as the entry file of webpack config.
+
+### Restrictions
+
++ Scoped styles by default, by force.
+
+Vue.js was designed for the Web platform at the beginning. Although it can be based on Weex to develop native applications, there are still many differences between web and native. See [Platform Differences Between Weex and Web](../ platform-difference.html) for more details.
+
+Due to those differences, Weex doesn't support those features in Vue.js (mostly are DOM-related):
+
++ Event bubbling and capturing are not supported.
+  + Event modifiers, such as `.prevent`,` .capture`, `.stop`,` .self` are meaningless in the native environment.
+  + The keyboard event modifiers, like `.{KeyCode | keyAlias}` is also meaningless. (see [docs in Vue.js](https://vuejs.org/v2/guide/events.html#Key-Modifiers))
++ The `v-html` and `v-text` directives are not supported.
++ Not support `v-show`, `v-cloak` and `<keep-alive>`, because Weex doesn't support `display:none;` yet.
++ `vm.$el` is Weex Virtual-DOM Element, not the `HTMLElement`.
++ No need to call `vm.$mount` manually, the entry component will mount to the root view of the native container by default. No need `Vue.mount()`.
+
 ## Rax
+
+Rax is a front-end framework with largely React-compatible APIs.