[
https://issues.apache.org/jira/browse/WEEX-86?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16270030#comment-16270030
]
ASF GitHub Bot commented on WEEX-86:
------------------------------------
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.
> Reorganize the structure of documents and website
> -------------------------------------------------
>
> Key: WEEX-86
> URL: https://issues.apache.org/jira/browse/WEEX-86
> Project: Weex
> Issue Type: Improvement
> Components: Project
> Reporter: Hanks Zhang
> Assignee: zhengshihan
>
> h1. Weex Document Index
> + contributing.md
> + development-process.md
> + who-is-using-weex.md
> + releasenote.md
> + resources.md
> h2. Guide
> + index.md
> + advanced
> + app-architecture.md
> + downgrade.md
> + page-architecture.md
> + path.md
> + use-vuex-and-vue-router.md
> + extend-android.md
> + extend-ios.md
> + extend-js-framework.md
> + extend-web-render.md
> + front-end-frameworks.md
> + integrate-devtool-to-android.md
> + integrate-devtool-to-ios.md
> + integrate-to-your-app.md
> + set-up-env.md
> + using-rax.md
> + using-vue.md
> h2. References
> + index.md
> + android-apis.md
> + ios-apis.md
> + js-framework-apis.md
> + js-service.md
> + weex-variable.md
> h3. Components
> + a.md
> + cell.md
> + div.md
> + image.md
> + indicator.md
> + input.md
> + list.md
> + loading.md
> + refresh.md
> + scroller.md
> + slider.md
> + switch.md
> + text.md
> + textarea.md
> + video.md
> + waterfall.md
> + web.md
> h3. Modules
> + animation.md
> + clipboard.md
> + dom.md
> + globalevent.md
> + meta.md
> + modal.md
> + navigator.md
> + picker.md
> + storage.md
> + stream.md
> + websocket.md
> + webview.md
> h2. WiKi
> + color-names.md
> + common-events.md
> + common-styles.md
> + css-units.md
> + design-principles.md
> + event-bubble.md
> + faq.md
> + gestures.md
> + index.md
> + platform-difference.md
> + text-styles.md
> h2. Tools
> + helpers.md
> + index.md
> + market.md
> + toolkit.md
--
This message was sent by Atlassian JIRA
(v6.4.14#64029)
