2016 Qcon first day, Alibaba senior director, Taobao mobile platform, Ali Baichuan zhuang Zhuoran announced mobile terminal high performance dynamic program Weex instant internal test, and will open source in June. This news, a surge of emotion, present the program ape, siege lions have picked up the phone scan code, in order to feel the magic of Weex for the first time.
On the second day of the theme sharing, Alibaba front-end development expert Zhao Jinjiang and technical expert Xu Kai on Weex in-depth analysis. The following is a shorthand version of the speech.
What does Ali think about mobile development?
The biggest pain point facing mobile developers today is the extremely complex environment. For this, Zhuang zhuoran gives a formula: complexity of mobile development = number of applications × number of platforms × variety of models to be adapted.
How to solve this problem? Before we can solve the problem, we need to have a precise assessment of the future of mobile development.
Ali believes that the future of mobile development must be more balanced, meaning that it must have both performance and dynamics in order to meet the needs of future users. In addition, mobile development in the future will also be open and connected state, mobile Internet in the future will be based on a more popular technology system, no barriers between platforms, and easy to use.
So, Ali combined the current state of mobile development with its vision to launch Weex solutions.
In fact, Weex was put to the test at last year’s Singles Day event, and it did well. Up to now, Weex has been used by Ali technical team many times, and “create” a variety of rich scenes, the overall performance is very excellent.
All the interfaces of the mobile terminal are divided into various pages, and then the control logic of routing is set in the middle. At the same time, various capabilities of the mobile terminal are provided to developers through various apis. This is Ali’s understanding of the mobile development model.
Weex provides developers with a development experience through standardized things, including HTML, CSS and JS, which are very fast and easy to use. In addition, Weex syntax design respects Web standards.
The working principles of Weex
Weex was originally designed to work on three devices (iOS, Android and H5). The topmost DSL, which Ali generally calls Weex files (.we), is converted into JS-bundles in Transformer and deployed to the server, where the server is complete. On the client side, the first layer is jS-Framework, and finally RenderRengine.
The input is Virtual DOM and the output is native or H5 view. Restore it to the tree data structure in memory. Then create the view, bind the event to the view and set the basic properties of the view. Weex Render is split into three threads, with different threads doing different things and JS threads taking precedence over other threads for smoothness.
What is the performance, scalability and usability of Weex?
Performance wise, Ali did a lot of pressure tests on Weex. Weex performs very well in many areas, including load time, frame rate, memory consumption, AND CPU usage (including silent and peak).
Frame rates and load times are almost always mentioned when talking about performance, but often overlooked is the fact that Native UI development usually has no JS resources loaded on the server side. Weex will build JS into the client to avoid downloading problems and improve performance more effectively.
Compatibility is a very important issue in Weex, and this is how Ali addressed it.
The first is the single Test guarantee, including JS and H5 single Test, to ensure the most basic UT (Unit Test) itself brought by the meaning.
The second is the automation of UI, which is divided into two parts. One is the screenshot comparison, which compares the final results with the expected results. The second is Layout Results, including Model and other Layout classes, through the basic information to complete the test process.
In terms of scalability, Weex can write many pages and uses routing mechanisms to help developers chain pages together.
Weex has been open for internal testing and is being improved in terms of usability. Some work has already been done on Playground, debugging tools, scaffolding, AppHub, editors and more, and most of it will be done in May and June.
Finally, there are three working modes of Weex.
1. Full-page mode
Currently supports single page or whole App Weex development (not perfect, need to develop Router and life cycle management), this is the main mode, can be compared to RN.
2. Native Component mode
Use Weex as an iOS/Android component, analogous to ImageView. This kind of demand is all over the main link of mobile shopping, such as home page, main search results, transaction component, etc. The main body of this kind of Native page has been very stable, but the strong demand for local dynamic leads to frequent version issuance. Solving this kind of problem is also the focus of Weex.
3. H5 Component mode
Use Weex in H5, analogous to WVC. Some complex or special H5 pages cannot be fully converted to Weex full-page mode (or RN) in the short term, such as interactive pages and some complex channel pages. The solution to this pain point is to tweak the existing H5 page and introduce Native to solve the problems of long list memory explosion, poor scrolling, poor animation/gesture experience, etc.
In addition, WVC will be integrated into Weex as the H5 Components mode of Weex.
Baichuan.taobao.com is alibaba Group “cloud” + “end” core strategy is Alibaba Group wireless open platform, based on world-class back-end services and mature business components, through the opening of “technology, business and big data”, Provide mobile entrepreneurs with solutions that can quickly build apps, commercialize apps and improve user experience; At the same time, it provides diversified entrepreneurial services – physical space, incubation operation, venture investment, etc., providing comprehensive guarantee for mobile entrepreneurs.
About Alibaichuan
