[
https://issues.apache.org/jira/browse/WEEX-86?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16270021#comment-16270021
]
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_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.
> 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)
