You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by Hanks10100 <gi...@git.apache.org> on 2017/11/28 11:28:24 UTC
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
GitHub user Hanks10100 opened a pull request:
https://github.com/apache/incubator-weex-site/pull/17
[WEEX-86][doc] update tutorial document
Update tutorial document.
+ What is Weex?
+ Overview
+ Native Components
+ Native Modules
+ Write Once, Run Everywhere
+ Support Multiple Front-End Frameworks
+ Create Your Own App
+ Set up
+ Develop
+ Build and Run
+ Debug
Here is the source https://github.com/Hanks10100/incubator-weex-site/blob/doc-guide/source/guide/index.md
You can merge this pull request into a Git repository by running:
$ git pull https://github.com/Hanks10100/incubator-weex-site doc-guide
Alternatively you can review and apply these changes as the patch at:
https://github.com/apache/incubator-weex-site/pull/17.patch
To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:
This closes #17
----
commit 58012ea85b8fc2b8af139955004d33d37caa3730
Author: Hanks <zh...@gmail.com>
Date: 2017-11-28T11:24:40Z
[WEEX-86][doc] update tutorial document
----
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153679562
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
--- End diff --
should be written
a mocked phone shell.
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153680403
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
--- End diff --
This example renders...
on the mobile device, you need to install the ...
Then scan your page's QR code with your playground app or your own app (with the QR scan feature to load scanned URL with Weex SDK), and you will see the rendered result on your device.
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153680833
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
--- End diff --
to describe the styles of a component, and those styles are scoped forcibly in Weex
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by asfgit <gi...@git.apache.org>.
Github user asfgit closed the pull request at:
https://github.com/apache/incubator-weex-site/pull/17
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153682355
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
-In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
+Here are some documents on how to extend native components and native modules of Weex:
+
++ [Extend Web Render](./extend-web-render.html)
++ [Extend Android](./extend-android.html)
++ [Extend iOS](./extend-ios.html)
### Write Once, Run Everywhere
-You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
+Yes, Weex can build both Android, iOS and web apps with a single codebase.
-### More Examples
+balala.
+
+You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
## Support Multiple Front-End Frameworks
-Vue.js 2.0 and Rax
+Front-end frameworks are the syntax layer of weex, they are decoupled with native render engines. Weex isn't binding with any specific front-end frameworks, instead, Weex can bring native capabilities to them.
--- End diff --
syntax layer of Weex,
they are decoupled from native render engines.
Weex does not bind with ..., instead, it brings ...
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153682061
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
-In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
+Here are some documents on how to extend native components and native modules of Weex:
+
++ [Extend Web Render](./extend-web-render.html)
++ [Extend Android](./extend-android.html)
++ [Extend iOS](./extend-ios.html)
### Write Once, Run Everywhere
-You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
+Yes, Weex can build both Android, iOS and web apps with a single codebase.
--- End diff --
Weex can build for Android, iOS and Web from a single codebase.
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153681794
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
--- End diff --
does not rely on the UI, Weex wraps them into ...
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153681359
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
--- End diff --
Weex uses the native widgets.
on each mobile platform,
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153681650
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
--- End diff --
you need to implement them on each platform and keep their behaviors to be consistent.
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153681142
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
--- End diff --
Weex implements render engines both on iOS and Android and ...
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153682771
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
-In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
+Here are some documents on how to extend native components and native modules of Weex:
+
++ [Extend Web Render](./extend-web-render.html)
++ [Extend Android](./extend-android.html)
++ [Extend iOS](./extend-ios.html)
### Write Once, Run Everywhere
-You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
+Yes, Weex can build both Android, iOS and web apps with a single codebase.
-### More Examples
+balala.
+
+You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
## Support Multiple Front-End Frameworks
-Vue.js 2.0 and Rax
+Front-end frameworks are the syntax layer of weex, they are decoupled with native render engines. Weex isn't binding with any specific front-end frameworks, instead, Weex can bring native capabilities to them.
+
+Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/) as its internal front-end framework.
-~~You can call it *"Weex VR"*, but it has nothing with the *Virtual Reality*.~~
++ **Vue.js** is a progressive front-end framework for building user interfaces.
++ **Rax** is a front-end framework with largely React-compatible APIs.
+
+> Vue.js and Rax are already integrated into Weex SDK, you don't need to require them manually.
-Those frameworks are packaged into Weex SDK, you don't need to require them manually. upgrade.
+However, Vue and Rax aren't the only options, it's possible to integrate your favorite front-end framework into Weex. There is a document *[Extend JS Framework](./advanced/extend-js-framework.html)* that describes how to implement it, but the process is still very complicated and tricky. To achieve it, you need to understand many underlying details about the js-native bridge and native render engines.
-Weex isn't binding with any specific front-end frameworks, the DOM operations will convert into render directives send to native render engine. Weex can give the ability of rendering native components to them.
+You can read *[Front-End Frameworks](./front-end-frameworks.html)* to learn more details.
## Create Your Own App
-Weex offered a command line tool, [weex-toolkit](), to help developers to get start easily.
+> The following steps assume you have already known the foundational knowledge of Node.js and npm. If you are not familiar with them, you can visit [https://docs.npmjs.com/](https://docs.npmjs.com/) to learn more about npm.
+
+Weex provide a command line tool, the [weex-toolkit](http://weex-project.io/tools/toolkit.html), to help developers to get start easily. It can help you create a starter project, setup iOS and Android development environments, debug, install plugins and so on.
+
+Currently, the `weex-toolkit` only supports to create the Vue.js project. The `rax-cli` maybe helpful if you want to use Rax. Please visit [Rax's official website](https://alibaba.github.io/rax/) for more details.
--- End diff --
only supports the creation of
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153682847
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
-In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
+Here are some documents on how to extend native components and native modules of Weex:
+
++ [Extend Web Render](./extend-web-render.html)
++ [Extend Android](./extend-android.html)
++ [Extend iOS](./extend-ios.html)
### Write Once, Run Everywhere
-You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
+Yes, Weex can build both Android, iOS and web apps with a single codebase.
-### More Examples
+balala.
+
+You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
## Support Multiple Front-End Frameworks
-Vue.js 2.0 and Rax
+Front-end frameworks are the syntax layer of weex, they are decoupled with native render engines. Weex isn't binding with any specific front-end frameworks, instead, Weex can bring native capabilities to them.
+
+Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/) as its internal front-end framework.
-~~You can call it *"Weex VR"*, but it has nothing with the *Virtual Reality*.~~
++ **Vue.js** is a progressive front-end framework for building user interfaces.
++ **Rax** is a front-end framework with largely React-compatible APIs.
+
+> Vue.js and Rax are already integrated into Weex SDK, you don't need to require them manually.
-Those frameworks are packaged into Weex SDK, you don't need to require them manually. upgrade.
+However, Vue and Rax aren't the only options, it's possible to integrate your favorite front-end framework into Weex. There is a document *[Extend JS Framework](./advanced/extend-js-framework.html)* that describes how to implement it, but the process is still very complicated and tricky. To achieve it, you need to understand many underlying details about the js-native bridge and native render engines.
-Weex isn't binding with any specific front-end frameworks, the DOM operations will convert into render directives send to native render engine. Weex can give the ability of rendering native components to them.
+You can read *[Front-End Frameworks](./front-end-frameworks.html)* to learn more details.
## Create Your Own App
-Weex offered a command line tool, [weex-toolkit](), to help developers to get start easily.
+> The following steps assume you have already known the foundational knowledge of Node.js and npm. If you are not familiar with them, you can visit [https://docs.npmjs.com/](https://docs.npmjs.com/) to learn more about npm.
+
+Weex provide a command line tool, the [weex-toolkit](http://weex-project.io/tools/toolkit.html), to help developers to get start easily. It can help you create a starter project, setup iOS and Android development environments, debug, install plugins and so on.
+
+Currently, the `weex-toolkit` only supports to create the Vue.js project. The `rax-cli` maybe helpful if you want to use Rax. Please visit [Rax's official website](https://alibaba.github.io/rax/) for more details.
-### Setup
+### Set up
Make sure you have already installed the [Node.js](https://nodejs.org/), and then install the `weex-toolkit` globally.
```bash
npm install weex-toolkit -g
```
-It will add a `weex` command to your global path, run `weex --help` can see the manual of all its sub commands. The most useful command is `weex create [project-name]`:
+It will add the `weex` command to your global path. Then you can use `weex create` to create a starter project:
```bash
weex create awesome-app
```
-After doing that, you'll get a standard **Weex + Vue.js** project under the `awesome-app` folder.
-
-> Currently, the `weex-toolkit` only supports to create Vue.js project. If you want to use Rax, the `rax-cli` maybe helpful, please go to [Rax's official website](https://alibaba.github.io/rax/) for more details.
+After doing that, you'll get a standard **Weex + Vue.js** project under the `awesome-app` folder of current path.
### Develop
+The next step is get into the path, install dependencies, and start.
--- End diff --
is to navigate into the generated directory,
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153681878
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
--- End diff --
and supports the integration of the existing ...
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153678737
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
--- End diff --
are separated from ...
any specific front-end framework, it mainly supports...
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153682106
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
-In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
+Here are some documents on how to extend native components and native modules of Weex:
+
++ [Extend Web Render](./extend-web-render.html)
++ [Extend Android](./extend-android.html)
++ [Extend iOS](./extend-ios.html)
### Write Once, Run Everywhere
-You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
+Yes, Weex can build both Android, iOS and web apps with a single codebase.
-### More Examples
+balala.
--- End diff --
??? If the content is not ready, just leave this part to be blank.
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153681252
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
--- End diff --
you are not able to use all of them, instead, you can only use ...
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153681014
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
--- End diff --
which is not 'HTMLElement'
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by acton393 <gi...@git.apache.org>.
Github user acton393 commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153683837
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
--- End diff --
should we talk about web modules here?
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153680887
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
--- End diff --
Here are more ...
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153678641
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
--- End diff --
both for web and native.
is just the same as rendering ...
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153682532
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
-In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
+Here are some documents on how to extend native components and native modules of Weex:
+
++ [Extend Web Render](./extend-web-render.html)
++ [Extend Android](./extend-android.html)
++ [Extend iOS](./extend-ios.html)
### Write Once, Run Everywhere
-You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
+Yes, Weex can build both Android, iOS and web apps with a single codebase.
-### More Examples
+balala.
+
+You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
## Support Multiple Front-End Frameworks
-Vue.js 2.0 and Rax
+Front-end frameworks are the syntax layer of weex, they are decoupled with native render engines. Weex isn't binding with any specific front-end frameworks, instead, Weex can bring native capabilities to them.
+
+Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/) as its internal front-end framework.
-~~You can call it *"Weex VR"*, but it has nothing with the *Virtual Reality*.~~
++ **Vue.js** is a progressive front-end framework for building user interfaces.
++ **Rax** is a front-end framework with largely React-compatible APIs.
+
+> Vue.js and Rax are already integrated into Weex SDK, you don't need to require them manually.
-Those frameworks are packaged into Weex SDK, you don't need to require them manually. upgrade.
+However, Vue and Rax aren't the only options, it's possible to integrate your favorite front-end framework into Weex. There is a document *[Extend JS Framework](./advanced/extend-js-framework.html)* that describes how to implement it, but the process is still very complicated and tricky. To achieve it, you need to understand many underlying details about the js-native bridge and native render engines.
--- End diff --
are not the only options,
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153683548
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
-In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
+Here are some documents on how to extend native components and native modules of Weex:
+
++ [Extend Web Render](./extend-web-render.html)
++ [Extend Android](./extend-android.html)
++ [Extend iOS](./extend-ios.html)
### Write Once, Run Everywhere
-You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
+Yes, Weex can build both Android, iOS and web apps with a single codebase.
-### More Examples
+balala.
+
+You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
## Support Multiple Front-End Frameworks
-Vue.js 2.0 and Rax
+Front-end frameworks are the syntax layer of weex, they are decoupled with native render engines. Weex isn't binding with any specific front-end frameworks, instead, Weex can bring native capabilities to them.
+
+Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/) as its internal front-end framework.
-~~You can call it *"Weex VR"*, but it has nothing with the *Virtual Reality*.~~
++ **Vue.js** is a progressive front-end framework for building user interfaces.
++ **Rax** is a front-end framework with largely React-compatible APIs.
+
+> Vue.js and Rax are already integrated into Weex SDK, you don't need to require them manually.
-Those frameworks are packaged into Weex SDK, you don't need to require them manually. upgrade.
+However, Vue and Rax aren't the only options, it's possible to integrate your favorite front-end framework into Weex. There is a document *[Extend JS Framework](./advanced/extend-js-framework.html)* that describes how to implement it, but the process is still very complicated and tricky. To achieve it, you need to understand many underlying details about the js-native bridge and native render engines.
-Weex isn't binding with any specific front-end frameworks, the DOM operations will convert into render directives send to native render engine. Weex can give the ability of rendering native components to them.
+You can read *[Front-End Frameworks](./front-end-frameworks.html)* to learn more details.
## Create Your Own App
-Weex offered a command line tool, [weex-toolkit](), to help developers to get start easily.
+> The following steps assume you have already known the foundational knowledge of Node.js and npm. If you are not familiar with them, you can visit [https://docs.npmjs.com/](https://docs.npmjs.com/) to learn more about npm.
+
+Weex provide a command line tool, the [weex-toolkit](http://weex-project.io/tools/toolkit.html), to help developers to get start easily. It can help you create a starter project, setup iOS and Android development environments, debug, install plugins and so on.
+
+Currently, the `weex-toolkit` only supports to create the Vue.js project. The `rax-cli` maybe helpful if you want to use Rax. Please visit [Rax's official website](https://alibaba.github.io/rax/) for more details.
-### Setup
+### Set up
Make sure you have already installed the [Node.js](https://nodejs.org/), and then install the `weex-toolkit` globally.
```bash
npm install weex-toolkit -g
```
-It will add a `weex` command to your global path, run `weex --help` can see the manual of all its sub commands. The most useful command is `weex create [project-name]`:
+It will add the `weex` command to your global path. Then you can use `weex create` to create a starter project:
```bash
weex create awesome-app
```
-After doing that, you'll get a standard **Weex + Vue.js** project under the `awesome-app` folder.
-
-> Currently, the `weex-toolkit` only supports to create Vue.js project. If you want to use Rax, the `rax-cli` maybe helpful, please go to [Rax's official website](https://alibaba.github.io/rax/) for more details.
+After doing that, you'll get a standard **Weex + Vue.js** project under the `awesome-app` folder of current path.
### Develop
+The next step is get into the path, install dependencies, and start.
```bash
cd awesome-app
npm install
-npm run start
+npm start
```
-It will start a web server on the `8080` port. You can open `http://localhost:8080/index.html` to see the result rendered on the web. Besides, You can also open the `http://localhost:8080/preview.html` to preview the web render result in iframe and with a QR code generated on the right, which you can use the [Weex plaground app]() to scan it to see the render result on the mobile.
+It will start a web server on the `8081` port.
+
+You can open `http://localhost:8081` to see the render result on the web. Besides, You can also open `http://localhost:8081/preview.html` to preview the web render result in iframe and with a QR code generated on the right. Use the [Weex playground app](http://weex-project.io/playground.html) to scan it and you'll see the render result on the phone.
![Preview]()
+The source code is located in `src/` folder. You can develop it as normal Vue.js project.
+
### Build and Run
+By default, the `weex create` command doesn't create the iOS and Android project, but you can use `weex platform add` to add them.
+
```bash
weex platform add ios
weex platform add android
```
+Depends on your network environment, it may take a while, please be patient.
+
+In order to develop the app on your local machine, you need to set up mobile development environments. For iOS, you should install [Xcode](https://developer.apple.com/xcode/). And for Android, you should install [Android Studio](https://developer.android.com/studio/index.html). If the development environments are ready, run the commands below could launch your app on the simulator or real device.
--- End diff --
When the development environments are ready,
run the commands below to launch your app on the simulator or the device.
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by Hanks10100 <gi...@git.apache.org>.
Github user Hanks10100 commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153685253
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
-In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
+Here are some documents on how to extend native components and native modules of Weex:
+
++ [Extend Web Render](./extend-web-render.html)
++ [Extend Android](./extend-android.html)
++ [Extend iOS](./extend-ios.html)
### Write Once, Run Everywhere
-You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
+Yes, Weex can build both Android, iOS and web apps with a single codebase.
-### More Examples
+balala.
--- End diff --
It's my fault. It's a placeholder, I think I should write more but forgot it.
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153682428
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
-In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
+Here are some documents on how to extend native components and native modules of Weex:
+
++ [Extend Web Render](./extend-web-render.html)
++ [Extend Android](./extend-android.html)
++ [Extend iOS](./extend-ios.html)
### Write Once, Run Everywhere
-You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
+Yes, Weex can build both Android, iOS and web apps with a single codebase.
-### More Examples
+balala.
+
+You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
## Support Multiple Front-End Frameworks
-Vue.js 2.0 and Rax
+Front-end frameworks are the syntax layer of weex, they are decoupled with native render engines. Weex isn't binding with any specific front-end frameworks, instead, Weex can bring native capabilities to them.
+
+Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/) as its internal front-end framework.
-~~You can call it *"Weex VR"*, but it has nothing with the *Virtual Reality*.~~
++ **Vue.js** is a progressive front-end framework for building user interfaces.
++ **Rax** is a front-end framework with largely React-compatible APIs.
--- End diff --
with React-compatible APIs.
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153683181
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
-In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
+Here are some documents on how to extend native components and native modules of Weex:
+
++ [Extend Web Render](./extend-web-render.html)
++ [Extend Android](./extend-android.html)
++ [Extend iOS](./extend-ios.html)
### Write Once, Run Everywhere
-You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
+Yes, Weex can build both Android, iOS and web apps with a single codebase.
-### More Examples
+balala.
+
+You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
## Support Multiple Front-End Frameworks
-Vue.js 2.0 and Rax
+Front-end frameworks are the syntax layer of weex, they are decoupled with native render engines. Weex isn't binding with any specific front-end frameworks, instead, Weex can bring native capabilities to them.
+
+Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/) as its internal front-end framework.
-~~You can call it *"Weex VR"*, but it has nothing with the *Virtual Reality*.~~
++ **Vue.js** is a progressive front-end framework for building user interfaces.
++ **Rax** is a front-end framework with largely React-compatible APIs.
+
+> Vue.js and Rax are already integrated into Weex SDK, you don't need to require them manually.
-Those frameworks are packaged into Weex SDK, you don't need to require them manually. upgrade.
+However, Vue and Rax aren't the only options, it's possible to integrate your favorite front-end framework into Weex. There is a document *[Extend JS Framework](./advanced/extend-js-framework.html)* that describes how to implement it, but the process is still very complicated and tricky. To achieve it, you need to understand many underlying details about the js-native bridge and native render engines.
-Weex isn't binding with any specific front-end frameworks, the DOM operations will convert into render directives send to native render engine. Weex can give the ability of rendering native components to them.
+You can read *[Front-End Frameworks](./front-end-frameworks.html)* to learn more details.
## Create Your Own App
-Weex offered a command line tool, [weex-toolkit](), to help developers to get start easily.
+> The following steps assume you have already known the foundational knowledge of Node.js and npm. If you are not familiar with them, you can visit [https://docs.npmjs.com/](https://docs.npmjs.com/) to learn more about npm.
+
+Weex provide a command line tool, the [weex-toolkit](http://weex-project.io/tools/toolkit.html), to help developers to get start easily. It can help you create a starter project, setup iOS and Android development environments, debug, install plugins and so on.
+
+Currently, the `weex-toolkit` only supports to create the Vue.js project. The `rax-cli` maybe helpful if you want to use Rax. Please visit [Rax's official website](https://alibaba.github.io/rax/) for more details.
-### Setup
+### Set up
Make sure you have already installed the [Node.js](https://nodejs.org/), and then install the `weex-toolkit` globally.
```bash
npm install weex-toolkit -g
```
-It will add a `weex` command to your global path, run `weex --help` can see the manual of all its sub commands. The most useful command is `weex create [project-name]`:
+It will add the `weex` command to your global path. Then you can use `weex create` to create a starter project:
```bash
weex create awesome-app
```
-After doing that, you'll get a standard **Weex + Vue.js** project under the `awesome-app` folder.
-
-> Currently, the `weex-toolkit` only supports to create Vue.js project. If you want to use Rax, the `rax-cli` maybe helpful, please go to [Rax's official website](https://alibaba.github.io/rax/) for more details.
+After doing that, you'll get a standard **Weex + Vue.js** project under the `awesome-app` folder of current path.
### Develop
+The next step is get into the path, install dependencies, and start.
```bash
cd awesome-app
npm install
-npm run start
+npm start
```
-It will start a web server on the `8080` port. You can open `http://localhost:8080/index.html` to see the result rendered on the web. Besides, You can also open the `http://localhost:8080/preview.html` to preview the web render result in iframe and with a QR code generated on the right, which you can use the [Weex plaground app]() to scan it to see the render result on the mobile.
+It will start a web server on the `8081` port.
+
+You can open `http://localhost:8081` to see the render result on the web. Besides, You can also open `http://localhost:8081/preview.html` to preview the web render result in iframe and with a QR code generated on the right. Use the [Weex playground app](http://weex-project.io/playground.html) to scan it and you'll see the render result on the phone.
--- End diff --
to preview the rendered result for Web in iframe.
You can also scan the QR code generated on the right using the Weex playground app then you'll see the rendered result on the mobile device.
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by Hanks10100 <gi...@git.apache.org>.
Github user Hanks10100 commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153686549
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
--- End diff --
Do you mean the `<web>` component? What's it for?
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153681943
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
-In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
+Here are some documents on how to extend native components and native modules of Weex:
--- End diff --
some documents about...
native modules for Weex:
---
[GitHub] incubator-weex-site pull request #17: [WEEX-86][doc] update tutorial documen...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/17#discussion_r153682682
--- Diff: source/guide/index.md ---
@@ -6,99 +6,156 @@ order: 1.1
version: 2.1
---
+<!-- toc -->
+
## What is Weex?
-> Weex is A framework for building Mobile cross-platform UIs.
+> **Weex is a framework for building high-performance mobile apps with modern web development experience.**
+
+Weex dedicates to enable developers to use modern web development experience to build both Android, iOS and web applications with a single codebase. In practice, you can use javascript and modern front-end frameworks to develop mobile apps after integrating the WeexSDK.
-Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
+The structure of Weex is decoupled, the render engines are separate from the syntax layer. Weex doesn't rely on any specific front-end frameworks, but mainly Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/).
+
+Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both on web and native. Productivity and performance can coexist in Weex. Writing Weex pages feels the same like writing web pages. Rendering Weex pages is just same with rendering native pages.
## Overview
-Here is an example writing in Weex and Vue.js:
+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 writing 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 the mock phone shell.
+
+Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in Weex and Vue.js:
-This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
+This example rendered a latter "Yo" in the center of the screen. If you want to preview the render result on the real mobile device, you could install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. And then, scan the QR code on the right of the online playground you will see the result rendered on your own device.
+
+Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.
+
+> The raw text node can only be placed in the `<text>` component, otherwise, it will be ignored.
+
+Within the `<style>` tag, you can write CSS to describe the styles of the component, and the styles are [**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) by force on Weex.
+
+~~[Here is more examples written in Weex and Vue.js](https://hanks10100.github.io/weex-vue-examples/)~~.
+
+### Native Components
+
+In the example above, the `<div>` and the `<text>` is rendered into corresponding native views on the mobile device, not `HTMLElement`.
+
+
+
+Weex implemented render engines in each end and provides a group of [built-in components](../references/components/) for basic usage. Based on these components, you can compose and wrap more custom components.
+
+Although the components in Weex look like HTML tags, you can't use all HTML tags, you can only use the built-in components and your custom components.
+
+Under the scene, Weex is using the native widgets. Although Weex emphasize the consistency of each end, we still embrace the platform's own behavior and UI differences. For example, [this `<switch>` component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look different on Android and iOS.
+
+
+
+If you want to use more native component other than the built-in components, you should have to implement it on each platform and be consistent. The most practical way is to integrate the existing native components to weex platform.
-You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
+### Native Modules
-### Native Component
+For those features which don't rely on the UI, Weex wraps it into **modules**. You can use `weex.requireModule('xxx')` to require them. It is a way to access native capabilities in javascript, such as network, storage, clipboard, and navigator. For example, you can [use `stream` module to fetch the star count of Vue.js](http://dotwe.org/vue/2ae062b6a04124a35bbe2da3b1e5c07b).
-
+Similarly, Weex also provides a group of [built-in modules](../references/modules/) for basic usage, and support to integrate the existing native modules to weex platform.
-In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
+Here are some documents on how to extend native components and native modules of Weex:
+
++ [Extend Web Render](./extend-web-render.html)
++ [Extend Android](./extend-android.html)
++ [Extend iOS](./extend-ios.html)
### Write Once, Run Everywhere
-You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
+Yes, Weex can build both Android, iOS and web apps with a single codebase.
-### More Examples
+balala.
+
+You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
## Support Multiple Front-End Frameworks
-Vue.js 2.0 and Rax
+Front-end frameworks are the syntax layer of weex, they are decoupled with native render engines. Weex isn't binding with any specific front-end frameworks, instead, Weex can bring native capabilities to them.
+
+Weex supports [Vue.js](https://vuejs.org/) and [Rax](https://alibaba.github.io/rax/) as its internal front-end framework.
-~~You can call it *"Weex VR"*, but it has nothing with the *Virtual Reality*.~~
++ **Vue.js** is a progressive front-end framework for building user interfaces.
++ **Rax** is a front-end framework with largely React-compatible APIs.
+
+> Vue.js and Rax are already integrated into Weex SDK, you don't need to require them manually.
-Those frameworks are packaged into Weex SDK, you don't need to require them manually. upgrade.
+However, Vue and Rax aren't the only options, it's possible to integrate your favorite front-end framework into Weex. There is a document *[Extend JS Framework](./advanced/extend-js-framework.html)* that describes how to implement it, but the process is still very complicated and tricky. To achieve it, you need to understand many underlying details about the js-native bridge and native render engines.
-Weex isn't binding with any specific front-end frameworks, the DOM operations will convert into render directives send to native render engine. Weex can give the ability of rendering native components to them.
+You can read *[Front-End Frameworks](./front-end-frameworks.html)* to learn more details.
## Create Your Own App
-Weex offered a command line tool, [weex-toolkit](), to help developers to get start easily.
+> The following steps assume you have already known the foundational knowledge of Node.js and npm. If you are not familiar with them, you can visit [https://docs.npmjs.com/](https://docs.npmjs.com/) to learn more about npm.
+
+Weex provide a command line tool, the [weex-toolkit](http://weex-project.io/tools/toolkit.html), to help developers to get start easily. It can help you create a starter project, setup iOS and Android development environments, debug, install plugins and so on.
--- End diff --
it can help you to create a starter project
---