You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2018/01/18 04:07:21 UTC
[1/2] incubator-weex-site git commit: * [doc] update documents about
front-end frameworks
Repository: incubator-weex-site
Updated Branches:
refs/heads/master 841771fc1 -> 59ae1c123
* [doc] update documents about front-end frameworks
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/074235ab
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/074235ab
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/074235ab
Branch: refs/heads/master
Commit: 074235abe7502e3fd607f7e8023cd81c487f873e
Parents: a4d6c39
Author: Hanks <zh...@gmail.com>
Authored: Tue Dec 26 10:56:38 2017 +0800
Committer: Hanks <zh...@gmail.com>
Committed: Sat Jan 13 21:09:53 2018 +0800
----------------------------------------------------------------------
source/guide/front-end-frameworks.md | 86 ++++---------------------------
source/guide/index.md | 4 +-
2 files changed, 13 insertions(+), 77 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/074235ab/source/guide/front-end-frameworks.md
----------------------------------------------------------------------
diff --git a/source/guide/front-end-frameworks.md b/source/guide/front-end-frameworks.md
index 4959a43..45fa4d2 100644
--- a/source/guide/front-end-frameworks.md
+++ b/source/guide/front-end-frameworks.md
@@ -2,96 +2,32 @@
title: Front-End Frameworks
type: guide
group: Overview
-order: 1.3
+order: 1.5
version: 2.1
---
<!-- toc -->
-Writing UIs in declarative way.
+
## Front-end Frameworks in Weex
-
+Front-end technologies seem flourishing and productive. Using front-end frameworks in production is a good way to manage apps wr. industry. collaborate, maintainable.
-Front-end technologies seem flourishing and productive. ~~Test, build, debug, tools, 3td-party libs.~~
+However, **Weex is not a front-end framework**. Indeed, front-end frameworks are just the syntax layer or DSL (Domain-specific Language) of Weex, they are decoupled from native render engines. In another word, Weex does not relay on any specific front-end frameworks, with the evolution of technology, Weex can integrate more widely used front-end frameworks as well.
-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.
+Currently, Weex mainly supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/), and those frameworks are already integrated into Weex SDK, you don't need to require them manually.
-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.
+> **Learn some basics of Vue.js or Rax could be very helpful when you are using Weex.**
## 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.
+Weex integrated the v2 version of Vue.js since WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) is released at 2016/02/17. Vue (pronounced /vjuː/, like view) is a progressive front-end framework for building user interfaces. Please refer to its [official website](https://vuejs.org/) for more information.
-#### 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()`.
+Please refer to [Use Vue.js on Weex](./use-vue.html) document to learn more technics about Weex and Vue.
## Rax
-Rax is a front-end framework with largely React-compatible APIs.
+Rax is a front-end framework with React-compatible APIs.
+
+Please refer to [Rax's official website](https://alibaba.github.io/rax/) to get more information.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/074235ab/source/guide/index.md
----------------------------------------------------------------------
diff --git a/source/guide/index.md b/source/guide/index.md
index 61184ac..e6b92c5 100644
--- a/source/guide/index.md
+++ b/source/guide/index.md
@@ -20,7 +20,7 @@ Another primary goal of Weex is to keep up with modern development technologies
## Overview
-If you just want to try Weex, You don't need to install anything. There is an [online playground](http://dotwe.org/vue/) of Weex, you can write single page examples on it without any configurations. The source code should be written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax, and the render result of the web platform will be displayed in a mocked phone shell.
+If you just want to try Weex, You don't need to install anything. There is an [online playground](http://dotwe.org/vue/) of Weex, you can write single page examples on it without any configurations. The source code should be written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax (as known as the `*.vue` files), and the render result of the web platform will be displayed in a mocked phone shell.
Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
@@ -62,7 +62,7 @@ Here are some documents about how to extend native components and native modules
+ [Extend Android](./extend-android.html)
+ [Extend iOS](./extend-ios.html)
-### Write Once, Run Anywhere
+### Write Once, Run Everywhere
Yes, Weex can build for Android, iOS and Web from a single codebase.
[2/2] incubator-weex-site git commit: Merge branch 'master' into
doc-fe
Posted by ha...@apache.org.
Merge branch 'master' into doc-fe
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/59ae1c12
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/59ae1c12
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/59ae1c12
Branch: refs/heads/master
Commit: 59ae1c123d0e734f335773c135891c2ec05d3a2f
Parents: 074235a 841771f
Author: Hanks <zh...@gmail.com>
Authored: Thu Jan 18 12:06:28 2018 +0800
Committer: GitHub <no...@github.com>
Committed: Thu Jan 18 12:06:28 2018 +0800
----------------------------------------------------------------------
package-lock.json | 1636 +++++++++++++-----
package.json | 11 +-
.../guide/advanced/use-vuex-and-vue-router.md | 6 +-
source/cn/guide/index.md | 2 +-
source/cn/guide/integrate-devtool-to-android.md | 7 +-
source/cn/references/broadcast-channel.md | 113 ++
source/cn/references/components/cell.md | 62 +-
source/cn/references/components/indicator.md | 89 +-
source/cn/references/components/list.md | 64 +-
source/cn/references/components/refresh.md | 186 +-
source/cn/references/components/web.md | 188 +-
source/cn/references/js-framework-apis.md | 67 -
source/cn/references/modules/animation.md | 133 +-
source/cn/references/weex-variable.md | 147 +-
source/cn/tools/toolkit.md | 246 ++-
.../guide/advanced/use-vuex-and-vue-router.md | 18 +-
source/guide/front-end-frameworks.md | 2 +
source/guide/integrate-devtool-to-android.md | 7 +-
source/guide/integrate-to-your-app.md | 128 +-
source/guide/set-up-env.md | 88 +-
source/guide/use-vue.md | 268 +++
source/references/broadcast-channel.md | 113 ++
source/references/components/cell.md | 4 +-
source/references/components/index.md | 24 +
source/references/components/indicator.md | 89 +-
source/references/components/list.md | 112 +-
source/references/components/refresh.md | 254 +--
source/references/components/web.md | 181 +-
source/references/images/BroadcastChannel.png | Bin 0 -> 50463 bytes
source/references/js_framework-apis.md | 67 -
source/references/modules/animation.md | 138 +-
source/references/modules/index.md | 20 +
source/references/weex-variable.md | 151 +-
source/resources.md | 49 +
source/tools/toolkit.md | 218 ++-
source/wiki/faq.md | 1 -
themes/weex/layout/_partial/article.ejs | 4 +-
themes/weex/layout/_partial/post/summary.ejs | 21 +-
themes/weex/source/css/partial/summary.scss | 4 +
themes/weex/source/js/common.js | 73 +-
40 files changed, 2833 insertions(+), 2158 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/59ae1c12/source/guide/front-end-frameworks.md
----------------------------------------------------------------------
diff --cc source/guide/front-end-frameworks.md
index 45fa4d2,a152303..a97ece0
--- a/source/guide/front-end-frameworks.md
+++ b/source/guide/front-end-frameworks.md
@@@ -12,19 -12,126 +12,21 @@@ version: 2.
## Front-end Frameworks in Weex
-Front-end frameworks are just the syntax layer of weex, they are decoupled from native render engines. That is to say, Weex does not relay on any specific front-end frameworks. Currently, Weex mainly supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/), and those frameworks are already integrated into Weex SDK, you don't need to require them manually.
+Front-end technologies seem flourishing and productive. Using front-end frameworks in production is a good way to manage apps wr. industry. collaborate, maintainable.
-Front-end technologies seem flourishing and productive. ~~Test, build, debug, tools, 3td-party libs.~~
+However, **Weex is not a front-end framework**. Indeed, front-end frameworks are just the syntax layer or DSL (Domain-specific Language) of Weex, they are decoupled from native render engines. In another word, Weex does not relay on any specific front-end frameworks, with the evolution of technology, Weex can integrate more widely used front-end frameworks as well.
-The DOM operations will convert into render directives and send to native render engine.
+Currently, Weex mainly supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/), and those frameworks are already integrated into Weex SDK, you don't need to require them manually.
-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.
+> **Learn some basics of Vue.js or Rax could be very helpful when you are using Weex.**
+ It is better to learn some basics of Vue.js or Rax before using Weex.
+
## Vue.js
-Vue (pronounced /vjuː/, like view) is a progressive front-end framework for building user interfaces.
+Weex integrated the v2 version of Vue.js since WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) is released at 2016/02/17. Vue (pronounced /vjuː/, like view) is a progressive front-end framework for building user interfaces. Please refer to its [official website](https://vuejs.org/) for more information.
-> **[Official Website](https://vuejs.org/)**
-
-Weex integrates with the v2 version of Vue.js since WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) (2016/02/17). If there is no special instructions, the "*Vue.js*" or "*Vue*" in this article all refers to "Vue.js v2".
-
-### Runtime-only Build
-
-If you are familiar with Vue.js, you should know that there are two available builds of Vue.js: [the **Runtime + Compiler** build and the **Runtime-only** build](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build). The difference between them is whether to include the compiler which is able to compile the `template` option at runtime.
-
-Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, Weex is using the runtime-only build of Vue.js for better performance and less code size.
-
-Specifically, the differences are as follows:
-
-+ The [`template`](https://vuejs.org/v2/api/#template) option is not supported when defining a component.
-+ Does not support using [`x-templates`](https://vuejs.org/v2/guide/components.html#X-Templates).
-+ Does not support using [`Vue.compile`](https://vuejs.org/v2/api/#Vue-compile).
-
-### Different Features
-
-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.
-
-#### Platform
-
-+ Weex is a multi-page app, the `Vue` instances are different in each pages.
-
-#### DOM
-
-Because there is no DOM on Android and iOS, the type of [`vm.$el`](https://vuejs.org/v2/api/#vm-el) property is not the DOM element (`HTMLElement`).
-
-Do not manipulate the generated (DOM) elements manually.
-
-#### Styles
-
-+ Scoped styles by default, by force.
-+ Single class selector.
-
-#### Events
-
-Event bubbling and capturing are not supported in Weex currently, therefore, [event modifiers](https://vuejs.org/v2/guide/events.html#Event-Modifiers) such as `.prevent`, ` .capture`, `.stop`, ` .self` are not supported on Weex native components.
-
-Moreover, the [keyboard event modifiers](https://vuejs.org/v2/guide/events.html#Key-Modifiers) and [system modifier keys](https://vuejs.org/v2/guide/events.html#System-Modifier-Keys), such as `.enter`, `.tab`, `.ctrl`, `.shift` mostly are meaningless on mobile device, which are also not supported in Weex.
-
-#### Supported Directives
-
-| Directive | Supported | Notes |
-| --------- | --------- | ----- |
-| [v-text](https://vuejs.org/v2/api/#v-text) | Yes | |
-| [v-pre](https://vuejs.org/v2/api/#v-pre) | Yes | |
-| [v-html](https://vuejs.org/v2/api/#v-html) | No | No HTML parser in Weex, and it's not good practice. |
-| [v-show](https://vuejs.org/v2/api/#v-show) | No | Not support `display: none;` yet. |
-| [v-if](https://vuejs.org/v2/api/#v-if) | Yes | |
-| [v-else](https://vuejs.org/v2/api/#v-else) | Yes | |
-| [v-else-if](https://vuejs.org/v2/api/#v-else-if) | Yes | |
-| [v-for](https://vuejs.org/v2/api/#v-for) | Yes | |
-| [v-on](https://vuejs.org/v2/api/#v-on) | Yes | |
-| [v-once](https://vuejs.org/v2/api/#v-once) | Yes | |
-| [v-bind](https://vuejs.org/v2/api/#v-bind) | Yes | |
-| [v-model](https://vuejs.org/v2/api/#v-model) | Yes | |
-| [v-cloak](https://vuejs.org/v2/api/#v-cloak) | No | Only support single class selector. |
-
-### weex-vue-render
-
-The [weex-vue-render](https://github.com/weexteam/weex-vue-render) implement the built-in components and modules of Weex on the web.
-
-### Single File Component
-
-[Single file component](https://vuejs.org/v2/guide/single-file-components.html) (as known as the `*.vue` files) of Vue is a special file format with a `.vue` extension. The template inside will be compiled into the `render` function at build time.
-
-Moreover, there are many [syntax highlight plugins](https://github.com/vuejs/awesome-vue#source-code-editing) for all kind of editors.
-
-> It's a good practice to use single file component syntax in Weex.
-
-Because of the platform difference and 利用 web 本身特性的性能, you have to compile your source file in two different ways:
-
-+ For the web platform, you can compile source files in any official way, such as [Webpack](https://webpack.js.org/) + [vue-loader](https://vue-loader.vuejs.org/en/) or Browserify + vueify.
-+ For Android and iOS platforms, you should use [weex-loader](https://github.com/weexteam/weex-loader) to compile the `*.vue` files.
-
-#### Using weex-loader
-
-[weex-loader](https://github.com/weexteam/weex-loader) is a [loader](http://webpack.github.io/docs/using-loaders.html) for webpack that can transform `*.vue` file into a plain javascript module for Android and iOS platform. All features and configurations of it are same with [vue-loader](https://vue-loader.vuejs.org/en/).
-
-One thing should be noted that if the *entry* option of your Webpack config is a `*.vue` file, you also need to pass an additional `entry` parameter.
-
-```js
-const webpackConfig = {
- // Add the entry parameter for the .vue file
- entry: './path/to/App.vue?entry=true'
-
- /* ... */
-
- use: {
- loaders: [{
- // matches the .vue file path which 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.** It's a good practice to using javascript file as the entry file of webpack config.
-
-```Js
-{
- entry: './path/to/entry.js'
-}
-```
+Please refer to [Use Vue.js on Weex](./use-vue.html) document to learn more technics about Weex and Vue.
## Rax