Github user varunsob commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/172#discussion_r200237523
--- Diff: source/guide/index.md ---
@@ -10,124 +10,125 @@ version: 2.1
## What is Weex?
-> **Weex is a framework for building high-performance mobile applications
with modern web development experience.**
+> **Weex is a framework for building high-performance mobile applications
with a modern web development experience.**
-Weex dedicates to enable developers to use modern web development
experience to build both Android, iOS and web apps 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 modern web development experience to build
Android, iOS, and web apps with a single codebase. In practice, you can use
JavaScript and modern front-end frameworks to develop mobile apps after
integrating the WeexSDK.
-The structure of Weex is decoupled, the render engines are separated from
the syntax layer. Weex doesn't rely on any specific front-end framework, it
mainly supports [Vue.js](https://vuejs.org/) and
[Rax](https://alibaba.github.io/rax/).
+The structure of Weex is decoupled: the render engines are separated from
the syntax layer. Weex does not rely on any specific front-end framework;
however, Weex mainly 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 for 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 the same as rendering native
pages.
+Another primary goal of Weex is to keep up with modern development
technologies and platform capabilities both for web and native. Productivity
and performance can coexist in Weex. Writing Weex pages feels the same as
writing web pages. In fact, rendering Weex pages is the same as rendering
native pages.
## Overview
-If you just want to try Weex, You don't need to install anything. There is
an [online playground](http://dotwe.org/vue/) of Weex, you can write single
page examples on it without any configurations. The source code should be
written in Vue.js [single file
component](https://vuejs.org/v2/guide/single-file-components.html) syntax (also
known as the `*.vue` files), and the render result of the web platform will be
displayed in a mocked phone shell.
+If you just want to try Weex, you do not need to install anything. There
is an [online playground](http://dotwe.org/vue/) for Weex wherein you can write
single page examples without any installation or configuration. The source code
should be written in Vue.js [single file
component](https://vuejs.org/v2/guide/single-file-components.html) syntax (also
known as the `*.vue` files), and the rendered result from editor pane will be
displayed in a mock phone shell.
Here is an
[example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) written in
Weex and Vue.js:
-This example renders a word "Yo" in the center of the screen. If you want
to preview the rendered result on mobile devices, you need to install the [Weex
playground app](/tools/playground.html) or integrate Weex SDK into your own
app. 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.
+This example renders a word "Yo" in the center of the screen. If you want
to preview the rendered result on mobile devices, you need to install the [Weex
playground app](/tools/playground.html), or integrate Weex SDK into your own
app and 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). Thereafter, you will
see the rendered result on your 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.
+Within the `<template>` of the source code, you will notice the `<div>`
element, which is widely used on the web, and is also the generic container in
Weex. The `<text>` component, however, is provided by Weex and is 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 a
component, and those styles are
[**scoped**](https://vue-loader.vuejs.org/en/features/scoped-css.html) forcibly
in Weex.
### Native Components
-In the example above, the `<div>` and the `<text>` is rendered into
corresponding native views on the mobile device, which is not `HTMLElement`.
+In the example above, the `<div>` and the `<text>` elements are rendered
into corresponding native views on the mobile device. As such, they do not
implement the `HTMLElement` interface.
Weex implements render engines both on iOS and Android 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 are not able to
use all of them, instead, you can only use the built-in components and your
custom components.
-Under the scene, Weex uses the native widgets. Although Weex emphasize the
consistency on each mobile platform, we still embrace the platform's own
behavior and UI differences. For example, [the `<switch>`
component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look
different on Android and iOS (the appearance on the web simulates iOS).
+Behind the scenes, Weex uses native widgets. Although Weex emphasizes
consistency on each mobile platform, we still embrace the platform's own
behavior and UI differences. For example, [the `<switch>`
component](http://dotwe.org/vue/d96943452b6708422197c47920903823) may look
different on Android and iOS (the appearance on the web simulates iOS).
-If you want to use more native component other than the built-in
components, you need to implement them on each platform and keep their
behaviors to be consistent. The most practical way is to integrate the existing
native components to Weex platform.
+If you want to use additional native components, other than the built-in
components Weex provides, you need to implement them on each platform and keep
their behaviors consistent. The most practical way is to integrate the existing
native components to Weex platform. /_ need explanation _/
### Native Modules
-For those features which does not rely on the UI, Weex wraps them 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).
+For those features that do not rely on the UI, Weex wraps them into
**modules**. You can use `weex.requireModule('xxx')` to require them. Weex
modules provide easy access to 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 supports the integration
of the existing native modules to Weex platform.
+Similarly, Weex provides a group of [built-in
modules](../references/modules/) for basic usage, and supports the integration
of the existing native modules into the Weex platform.
Here are some documents about how to extend native components and native
modules for Weex:
-+ [Extend Web Render](./extend-web-render.html)
-+ [Extend Android](./extend-android.html)
-+ [Extend iOS](./extend-ios.html)
+- [Extend Web Render](./extend-web-render.html)
+- [Extend Android](./extend-android.html)
+- [Extend iOS](./extend-ios.html)
### Write Once, Run Everywhere
-Yes, Weex can build for Android, iOS and Web from a single codebase.
+Yes, Weex can build for Android, iOS, and Web from a single codebase.
Using the same source code across different platforms can dramatically
increase development productivity and simplify the testing, building, and
publishing processes. On this basis, Weex can combine the front-end's packaging
and testing process with the mobile's publishing and monitoring system to
improve development efficiency.
-> 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.
+> 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.
-Although Weex uses a single codebase, you can still write platform
specific codes. Weex provides `weex.config.env` and `WXEnvironment` (they are
strictly equal) to get the current runtime environment. You can use
`WXEnvironment.platform` to determine which platform the code is running on.
Except for the *platform*, `WXEnvironment` also contains other environmental
informations, such as *osVersion* and *deviceModel*, refer to *[Weex
variable](../references/weex-variable.html)* for the complete list.
+Although Weex uses a single codebase, you can still write platform
specific code. Weex provides `weex.config.env` and `WXEnvironment` (they are
strictly equal) to get the current runtime environment. You can use
`WXEnvironment.platform` to determine which platform the code is running on.
Except for the _platform_, `WXEnvironment` contains other information
pertaining to environment, such as _osVersion_ and _deviceModel_. Refer to
_[Weex variable](../references/weex-variable.html)_ for the complete list.
-## Support Multiple Front-End Frameworks
+## Support For Multiple Front-End Frameworks
-Front-end frameworks are syntax layer of weex, they are decoupled from
native render engines. Weex does not bind with any specific front-end
frameworks, instead, it brings native capabilities to them.
+Front-end frameworks are the syntax layer of Weex; therefore, they are
decoupled from native render engines. Weex does not bind with any specific
front-end frameworks, instead, Weex brings native capabilities to the front-end.
-Weex supports [Vue.js](https://vuejs.org/) and
[Rax](https://alibaba.github.io/rax/) as its internal front-end framework.
+Weex supports [Vue.js](https://vuejs.org/) and
[Rax](https://alibaba.github.io/rax/) as its internal front-end frameworks.
-+ **Vue.js** is a progressive front-end framework for building user
interfaces.
-+ **Rax** is a front-end framework with React-compatible APIs.
+- **Vue.js** is a progressive front-end framework for building user
interfaces.
+- **Rax** is a front-end framework with React-compatible APIs.
> Vue.js and Rax are already integrated into Weex SDK, you don't need to
require them manually.
-However, Vue and Rax are not the only options, it's possible to integrate
other your favorite front-end framework into Weex. There is a document *[Extend
JS Framework](./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.
+However, Vue and Rax are not the only options. It is entirely possible to
integrate your favorite front-end framework into Weex! There is a document
_[Extend JS Framework](./extend-js-framework.html)_ that describes how to
integrate a different front-end framework, the process, however, is still
complicated and tricky. You need to understand many underlying details about
the js-native bridge and native render engines in order to successfully
integrate an alternate front-end framework.
-You can read *[Front-End Frameworks](./front-end-frameworks.html)* to
learn more details.
+You can read _[Front-End Frameworks](./front-end-frameworks.html)_ for
more details.
## Create Your Own App
-> 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.
+> The following steps assume basic 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, and
[https://nodejs.org/en/docs/](https://nodejs.org/en/docs/) to learn more about
Node.js.
-Weex provide a command line tool, the [weex-toolkit](/tools/toolkit.html),
to help developers to get start easily. It can help you to create a starter
project, setup iOS and Android development environments, debug, install plugins
and so on.
+Weex provides a command line tool, the
[weex-toolkit](/tools/toolkit.html), to help developers get start easily. The
CLI 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 the creation of 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.
+Currently, the `weex-toolkit` only supports the creation of Vue.js
project. The `rax-cli` may be helpful if you want to use Rax. Please visit
[Rax's official website](https://alibaba.github.io/rax/) for more details.
### Set up
-Make sure you have already installed the [Node.js](https://nodejs.org/),
and then install the `weex-toolkit` globally.
+With [Node.js](https://nodejs.org/) installed, install `weex-toolkit` CLI
globally.
```bash
npm install weex-toolkit -g
```
-It will add the `weex` command to your global path. Then you can use `weex
create` to create a starter project:
+This will add the `weex` command to your global path, and will allow you
to generate new projects with the `weex create <project-name>` command.
+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 of current path.
+After doing that, a standard **Weex + Vue.js** project will be generated
inside the `awesome-app` folder in the current path.
### Develop
-The next step is to navigate into the generated directory, install
dependencies, and start.
+The next step is to navigate into the generated directory, install
dependencies, and start:
```bash
cd awesome-app
npm install
npm start
```
-It will start a web server on the `8081` port. You can open
`http://localhost:8081` to see the render result on the web. The source code is
located in `src/` folder. You can develop it as normal Vue.js project.
+`npm start` will start a web server on port `8081`. Open
`http://localhost:8081` in your browser of choice to see the rendered result of
your Weex app. The source code is located in `src/` folder. You can develop it
as normal Vue.js project.
-Besides, You can also open `http://localhost:8081/web/preview.html` 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](/tools/playground.html)
then you'll see the rendered result on the mobile device.
+Additionally, you can open `http://localhost:8081/web/preview.html` to
preview the rendered result on the web in an iframe. You can also scan the QR
code generated on the right using the [Weex playground
app](/tools/playground.html) then you'll see the rendered result on the mobile
device.
--- End diff --
"You can also scan the QR code generated on the right using the [Weex
playground app](/tools/playground.html) then you'll see the rendered result on
the mobile device." can be changed to "You can also scan the QR code generated
on the right using the [Weex playground app](/tools/playground.html) to see the
rendered result on the mobile device."
---
