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