Weex dynamic program and double eleven practice

At Weex Conf 2017 on January 12, 2017, the Weex team from the mobile Taobao mobile platform, together with Taobao's actual business, shared the Weex dynamic program and the dual eleven practices. This article first introduced Weex's overall architecture, and then focused on sharing. Weex's practice at the Double Eleven conference, and finally talked about Weex's business support, including AliWeex.

The following is a wonderful content:

Initial Weex

Weex is a high-performance cross-platform mobile development framework, the biggest advantage is to solve the two major mobile development pain points of frequent release and multi-end development. A set of code is perfectly adapted to IOS, Android, HTML5 and Web, which greatly improves the development efficiency while ensuring the user experience.

Weex is divided into three layers. The top layer is DSL. In the early days, it was similar to the expressions of html, css, and javascript. The front end is familiar with the expression to build the page. The middle layer is Virtual DOM. The Virtual DOM works on the framework's parsing engine and drives the bottom layer from top to bottom. The three-end implementation; the underlying architecture of IOS, Android, H5 RenderEngine, from the overall effect, Weex is a three-terminal solution, and ultimately the UI on each system platform is basically consistent.

The above picture shows the extended front-end collaboration diagram. The back-end mainly helps us to construct the JS Bundle from the Weex source file. After the transform, the JS Bundle is for the business code, and the JS Bundle is deployed to the back-end server. It is a three-terminal, can implement JS Bundle request to the back-end server, and run on the JSFramework. The underlying RenderEngine is built on the IOS native JSCore. On the Engine we use V8, which has a double-effect channel, which can be passed to callJS. , callNative to issue instructions.

The red mark in the figure is WeexKernel, which mainly contains the UI system. There are many important components in the UI system, such as List, Scroller, Slider, Image and other 15 components. We will further expand the components later, and we can see that at each Components also cover lifecycles, animations, and gestures to make the page more dynamic; based on a single page with a navigation Navigator that helps us with page flow; different pages need to interact, we provide a way for global events; At the same time, we combined the Network function, Data Store for data storage.

Below the application-level framework is Module, an extension of functionality. Then the following is the control of the entire performance, the right part is the adaptation layer, mainly the adaptation of the network layer picture library, the local development environment.

Double eleven venue practice

In 2016, Weex first opened Weex on a large scale. In total, Taobao + Tmall had a total of 1754 venue pages. Weex accounted for 99.6% of the total, about 1747. At the entrance of the most important Tmall main venue, 5 Tabs were Implemented with Weex, at the same time, in the Tmall and Taobao sub-sites, basically zero degradation.

Of course, the double eleven is not always smooth, and encountered some difficulties when using Weex to design the double eleven venue. It is roughly divided into four dimensions: complex page interaction, dynamic setting of atmosphere, second open and performance, and disaster tolerance mechanism.

Venue frame interaction

Non-Push mode frame Tab can be switched, smooth sliding, elevator on the top to help operate to locate each floor, and search box, browsing history of each tab to be saved; main venue - breakout venue - main venue The interactive mode adopts the Push mode, and the window needs to be continuously opened. The difficulty of this interaction is memory management and forward loading real-time.

On this basis, how do we design it? For a special module such as the main venue, use a single instance, from the top left hand to the home page to enter the main venue of the search box, jump to women's clothing, women's clothing then jump to men's clothing, men's clothing through the bottom navigation can cut out the main venue to locate must grab The page, in fact, shares an instance; when it is necessary to grab the women's venue, the Weex rendering container does not exceed 5, ensuring that the memory overhead is controllable; the forward jump is updated in real time, and the backward return history is saved.

Venue frame atmosphere

The double eleven points are the atmosphere of the main venue and the venue atmosphere. The main venue is divided into the build-up period, the warm-up period, and the official period. The build-up period needs to ensure that the operation can be configured in real time, and needs to support dynamic configurability; the venue atmosphere involves various industries, each industry has different interests, and the atmosphere needs to be based on the business. Come to customize. Among them, dynamic, effective and loading performance are difficult.

The essence of the venue framework is a framework that can be used to abstract the description. There is a tab at the bottom, there is navigation on the bottom, and there is a configurable withdrawal in the middle. The template and the interaction logic associated with it are preset locally by the preset method. When the JS Bundle is requested from the server, the network request is skipped, only the local rendering is required, the frame template is separated from the data, the template is preloaded, and the data is delivered.

The main venue atmosphere is the core configuration driver (navigation bar settings, independent tab style and URL delivery), and the venue atmosphere business calls NavigatorModule Api, which is more flexible.

Venue frame performance articles

We need to load five 200-pound normal pages, one panoramic site page, and one live site page in the venue frame.

The pressure measurement scheme is as follows:

1. The main link (Home-Store-Detail-Shopping Cart) does the operation once, the memory cache is full, and the memory value M0 is recorded;

2. Go to the Weex page and wait until the page is fully loaded, skip to the next Weex page;

3. Repeat step 2 to push all test scene pages onto the stack; panorama - p1p2p3p4 - live -p1p2p3p4.

get conclusion:

• Control the number of single page pits (150);

• Reduce the level of page elements;

• Android low-end machine panorama downgrade.

• Venue framework protection

In certain scenarios, Weex needs to provide the ability to downgrade to protect the business.

The downgrade plan is as follows:

1. Weex rendering container is downgraded;

2. The Weex page server configuration is downgraded.

Nowadays, the application of the Weex page is downgraded according to the operating system, application, and WeexSDK version. Depends on the degraded ability of JSFramework, it will be parsed and built by JSFramework in the process of container rendering. When parsing, it will compare the version rules. If the hit rule is executed, it will be downgraded, and vice versa.

Business support

Weex is more than a very large client such as Hand Amoy. In the coming year, we can see that there are more and more businesses in the group to connect Weex.

The business support center is concentrated in five aspects: reducing access costs, optimizing the development experience, improving the performance monitoring system, better page building platform, and optimizing the disaster recovery mechanism.

Service access

AliWeex general module or logic aggregation: including environment initialization, Weex module or component registration, Weex rendering main process, downgrade decision rules, etc. At the same time, AliWeex implements specification and standardization governance: adaptation layer protocol standardization definition, providing default interface implementation . Including network libraries, image libraries, performance monitoring, and more.

Performance monitoring

Performance monitoring is also very important. It needs constant tuning of data and exception capture, including the following two points:

1. Real-time sampling of performance data:

• JSFramework load time

• Network transfer load time

• First screen rendering time

2. Capture of exceptions or rendering errors:

• Resource request failure error

• js runtime exception

Establish plantform

The steps to build a platform are divided into the following three steps:

1. Componentized separation from the whole;

2. Define each component;

3. Combine the components organically.

Development experience (devTools)

Devtools makes it easy for us to do two things:

1. Breakpoint debugging;

2. Inspector, regardless of Native View Element, or Dom Element, or Network and console log.

With the help of these tools, it is only after the successful troubleshooting of the double eleven today, the front-end can smoothly locate the page layout.