[Data Collection] Weex Conf Review Collection: Handout PDF + Activity Video!
PDF sharing: Link: http://pan.baidu.com/s/1hr8RniG Password: fa3j
Official Tutorial: https://weex-project.io/cn/v-0.10/guide/index.html
preparation
It mainly introduces Weex, not the development side, so that we can fully understand what Weex is before we start development.
The following description is mainly taken from:
http://mp.weixin.qq.com/mp/homepage?__biz=MzAxNDEwNjk5OQ==&hid=1&sn=3b134d0bf2da529b90ede97e1f95a684#wechat_redirect
Native (native development)
Native App is a third-party application written and run based on the local operating system of smart phone such as iOS, Android, WP and using native program, also called native app.
Introducing Weex
Weex is a heavyweight project officially open sourced by Alibaba at the end of June this year. It can provide mobile applications with native performance and texture while providing web development experience. Weex runs a JavaScript engine on the client side, making it possible to dynamically schedule native rendering and system features. In addition, Weex also has many characteristics such as light weight, high performance, scalability, multi-terminal operation at one time, etc. It has been put into use in large-scale mobile applications with hundreds of millions of users such as mobile phone Taobao. Since its release, Weex has attracted the attention of a large number of domestic developers. At present, the number of stars on github has exceeded 5,600, and it once topped the github trending list.
Nowadays, many clients of Alibaba have faced a series of problems such as the package size is close to the critical value, and the experience of the big promotion event page (H5) is poor. Combining the technical highlights of Native and Web, and at the same time solving the business problems encountered by Ali, this is the objective environment in which Weex was born.
Two characteristics of Weex
Weex is a high-performance cross-platform mobile development framework independently developed by Alibaba. The biggest feature is that it solves the two major pain points of frequent release and multi-terminal R&D . A set of web code perfectly adapts to iOS, Android, H5, Web and other terminals, greatly liberating Developers at the same time ensure the user experience.
Wu Zhihua, senior technical expert of Alibaba and head of Weex, said: "We hope to make Weex a unified technical standard for mobile development and delivery. Just like the transition from desktop software to the Web in the PC era, Weex hopes to make technological progress in the mobile era through its own efforts. make a contribution."
Understand the process of Weex from *.we file to native page
Weex Architecture
- Tmall business: release site page through Zebra (event page building and publishing platform)
- Taobao business: publish site pages through Zebra and AWP (product page publishing platform), and use Rx for upper-layer DSL (open source soon)
- Preloading: Download the js-bundle of the venue to the client in advance. When the client accesses the Weex venue, the network IO is intercepted to the local file IO, which greatly speeds up the network loading speed. Preloading is the starting point for the actual combat in seconds ( Note: the most core work)
- Hand Tao, Hand Cat client, Weex is a part of the client, in fact, Weex, Native, H5 coexist in the client
- Weex SDK, business modules: Weex container and basic Components, Modules, business modules include live/on-demand components, panorama components
Expand the Weex architecture from top to bottom:
- Business, Weex business layer, the main battlefield of Weex Double 11 is Shou Tao and Shou Mao, in addition, a large number of clients have enabled or connected to Weex
- Middleware, Weex middleware layer, including providing publishing (Zebra, AWP), preloading (AWP), client access support (AliWeex), component library (SUI), game engine, chart library and other modules for Weex pages; among them Zebra , AWP, and preloading all directly participated in Double 11
- Tool, tool layer
- DevTools, the interface and interaction reuse Webkit Devtools, support elements, network, breakpoints, console, etc.
- Playground is convenient for developers to debug Weex pages, and is also a gathering place for Weex examples
- Cli, the Weex command line toolset
- More tools are still under construction, such as weex-pack to support one-click packaging into App
- DSL
- JS Framework, Weex's original DSL is based on a subset of Vuejs 1.0 syntax; a Vuejs 2.0-based version is currently being promoted in the community
- Rx, Weex DSL based on reactjs syntax
Engine, rendering engine, from the perspective of architecture design, Android/iOS/H5 RenderEngine is a rendering end that is independent and equal to each other, which is the basis for maintaining the consistency of the three ends. Of course, more design and quality assurance are required at the protocol implementation level.
Figure - Weex Architecture
Weex in action
Weex has been put into use in many Ali APPs such as Taobao and Tmall on mobile phones, and has undergone comprehensive tempering and polishing in large-scale and complex application scenarios. In the just past 2016 Double 11, nearly 2,000 pages were rendered by Weex, the venue coverage rate was as high as 99.6%, and the second opening rate of the main venue was as high as 97%, with excellent performance and stability.
Replacing HTML5 as the Alibaba mobile service delivery solution for Double 11 marks that Weex has entered a mature stage of large-scale application in engineering.
In 2016.11.11, among the 1754 Double 11 venue pages (Tmall and Taobao were counted), the number of Weex pages was 1747, accounting for 99.6%. 83.5%/78.3% versions (UV) of Hand Tao iOS/Android have enabled Weex venue respectively, and 91.7%/87.9% versions (UV) of Handmao iOS/Android respectively. Weex covers almost all double 11 venue business including the main venue, branch venues, branch venues, crowd venues, etc.
For the experience of the 2016 Double 11 venue, you can view the original screen recording file: WIFI | 4G | 3G | 2G | No network. When recording the screen, the main venue is already a preloaded version. The effect of WIFI and 4G is close. The effect of 2G depends on the network request speed of the data (the data request during screen recording is about 3.9s). In the case of no network, the bottoming data comes from the previous successful request. . You can view this video for fluency, from left are H5, iOS Weex, and Android Weex.
Actual combat in seconds
Among them: the loading time refers to the loading time of Weex js-bundle (downloaded from the network or locally); the rendering time of the first screen refers to the time from when the Weex page starts to render to the bottom of the first element beyond the first screen. The "first screen network time" mentioned below is the sum of the loading time and the first screen rendering time.
From the results of Double 11, it can be seen that preloading greatly improves the loading time, and its contribution to the second open rate is particularly prominent; but performance optimization is a long-term iterative process. Looking back, the key points of optimization are: preloading and first screen rendering optimization.
Preloading
Preloading solves one problem:
before the user accesses the page (H5/Weex), the static resources (HTML/JS/CSS/IMG...) of the page are packaged and downloaded to the client in advance; when the user accesses the page, the network IO is intercepted And replace it with local file IO; thus achieving a substantial improvement in loading performance.The change of the loading time after enabling preloading, make a rough calculation: for iOS, the average network performance is 296ms, and the preload is 18ms, and the network performance is improved by about 15 times; for Android, the average network is 696ms, and the preload is 54ms. The network performance is improved by about 12 times, but the absolute value is larger, and the contribution to the second opening of the Android venue is more prominent.
A total of 30 preloaded packages have been enabled at the Double 11 venue this time, with a total capacity of more than 20MB. Several pages (venue framework + main venue, etc.) with relatively stable business requirements and large traffic are independent packages, which ensures that the whole page can be opened in seconds. Contributions, other chapters are divided equally among the remaining packages. At the same time, the strategy of forced update is mainly adopted, that is, the new resource package (new release on the server) is directly read online before it is downloaded to the local, which can ensure the real-time performance of the business. On November 11, 2016, Android preloading accounted for 59.4% of the double 11 venues, and iOS was 62.5%, which was higher than the average level (but it could be higher).
- There are others, please refer to the official introduction
Support calling mobile device native API
In Weex, the native API of mobile devices can be called by registering and calling modules. Some of these modules are built-in Weex, such as clipboard, navigator, storage and so on.
"clipboard clipboard"
"navigator navigation control"
"storage local storage"
In order to maintain the versatility of the framework, Weex has limited built-in native modules, but Weex provides the ability to expand horizontally and can expand native modules. For specific extension methods, please refer to The iOS Extension and the Android Extension .
Some interfaces also exist in the browser environment, but you should pay attention to the compatibility of the browser when using it; for example, the clipboard function, for security reasons, most browsers restrict its use.
Weex Development-Weex officially joins hands with Vue to create a new model of mobile development
Yuxi You, author of Vue.js, said: "Weex chooses Vue as its JavaScript runtime framework is one thing that makes me very happy. Vue's component development model has been widely recognized by the web developer community, and the Vue development experience Extending to native platforms is something I've always wanted to do but haven't had the energy to do. I'm excited to think that Weex will allow developers to write common components across Web/Android/iOS using Vue's syntax. "
end
Starting from "Native and Web integration", the experience of Hybrid, React Native, WVC and then to Weex is quite dramatic; will it be Weex in the future? The answer is not important, only intoxicated.