Weex Conf 2017 on January 12, 2017, the Weex team from mobile Taobao mobile platform shared Weex dynamic plan and Double 11 practice combined with taobao’s actual business. This article first introduced the overall structure of Weex, and then focused on sharing Weex practice in the Double 11. Finally talked about Weex business support, including AliWeex and so on.

Here are the highlights:

The initial Weex

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



Weex is divided into three layers. The top layer is DSL, which is similar to the expression of HTML, CSS, javascript, so that the front end is familiar with the expression way to build the page; The middle layer is Virtual DOM, which works on the Framework’s parsing engine and drives the bottom three implementations from top to bottom. RenderEngine of IOS, Android, and H5 is constructed at the bottom. In terms of the overall effect, Weex is a three-terminal solution, and the UI on each system platform is basically the same.



The figure above shows the extended front and back end collaboration diagram. The back end mainly helps us how to build JS bundles from Weex source files, which are transferred by Transformer. JS bundles are for business code, and JS bundles are deployed to back-end servers. The foreground is also three-terminal, which can implement the back-end server to request JS bundles and run on the JS Framework. The underlying RenderEngine is a Framework. We use V8 on the IOS native JSCore Engine, which has a dual-effect channel. CallJS and callNative can be used to issue instructions.



The one marked in red in the figure is WeexKernel, which mainly contains UI system. There are many important components in UI system, such as List, Scroller, Slider, Image and other 15 components. We will further expand the components later. Life cycles, animations, and gestures are also covered on each component to make the page more dynamic; Based on a single page navigation Navigator, it can help us to carry out page flow; Different pages need to interact with each other, and we provide global events; At the same time, we combine the Network function and Data Store for Data storage.

Below the application level framework is Module, an extension of functionality. Then the following is to control the whole performance, the right part is the adaptation layer, mainly network layer image library adaptation, local development environment, etc..

 

Double 11 venue practice

In 2016, Weex was used on a large scale for the first time in the venue of Singles’ Day. There were 1754 pages in total on Taobao and Tmall, and Weex accounted for 99.6%, or about 1747 pages. At the entrance of the main venue of Tmall, where traffic is the most important, the 5 tabs are implemented with Weex. At the same time, the sub-venue of Tmall and Taobao basically achieves zero degradation.

Of course, singles’ Day has not been plain sailing, and there have been some difficulties in designing the venue with Weex. It can be roughly divided into four dimensions: complex page interaction, dynamic atmosphere setting, second on and performance, and disaster recovery mechanism.

Interactive session framework



Non-push frame Tab can be switched and slide smoothly. There is an elevator at the top to help operators locate each floor. There is also a search box, and browsing history of each Tab should be saved. In the main conference, sub-conference, and main conference, the Push mode is adopted and the window needs to be continuously opened. The difficulty of this interaction mode lies in memory governance and real-time forward loading.



How do we design on this basis? For the special module of the main venue, a single instance is adopted. Enter the search box of the main venue from the home page of Taobao in the upper left corner, jump to women’s clothing, and then jump to men’s clothing. When entering women’s wear from Birob, the number of Weex rendering containers should not exceed 5 to ensure controllable memory overhead. Forward jump updates in real time, and back to save historical records.

The atmosphere of the venue framework



Double eleven is divided into main venue atmosphere and sub-venue atmosphere. The main venue is divided into the publicity period, the warm-up period and the formal period. During the publicity period, it is necessary to ensure the real-time configuration effect of the operation and support dynamic configuration. The atmosphere of the sub-venue involves various industries, and the interests of each industry are different. The atmosphere needs to be customized according to the business. Among them, dynamic, practical and loading performance are difficult.



Venue framework is the essence of a framework that can be used to abstract description at the bottom of the Tab, with navigation, there is configurable withdrawals will template and the interactive logic associated with preset locally, by means of preset from the server to request JS Bundle, the requests will be ignored, just need local rendering, frame templates and the separation of data, Templates are preloaded and data is released.

The main atmosphere is driven by the core configuration (navigation bar Settings, independent TAB styles and URL placement), while the sub-atmosphere business calls the NavigatorModule Api, making it more flexible.

Venue framework performance section

We need to load five common pages of 200 pits, one panorama venue page and one live venue page simultaneously in the venue frame.

The pressure test scheme is as follows:

1. Main link (home page – shop – details – shopping cart) perform an operation to make the memory cache full and record the memory value M0;

2. Go to the Weex page. After the Weex page is loaded, go to the next Weex page.

3. Repeat Step 2 for all test scenario pages to be pressed. Panorama – P1p2p3P4 – Live broadcast – P1p2p3p4.

Conclusion:

  • Control the number of single page pits (150);
  • Reduce the hierarchy of page elements;
  • Android low-end panorama degraded.

Framework guarantee for the venue

In certain scenarios, Weex needs to provide the capability to degrade services.



The downgrade scenarios are as follows:

1. Weex rendering container degraded;

2. The Weex server configuration is degraded.



Weex pages are degraded according to the operating system, application, and WeexSDK version. Depending on the degrade capability of JSFramework, in the process of container rendering, it will be built by JSFramework parsing. When parsing, version rules will be compared. If the rules are matched, degradation will be performed, and otherwise normal rendering will be performed.

 

Business support



Weex is mainly used for super large clients such as Mobile shopping. In the coming year, we can see more and more businesses connected with Weex within the group.

The service support center focuses on the following five aspects: reducing access costs, optimizing development experience, improving performance monitoring system, improving page building platform, and optimizing DISASTER recovery mechanism.

Business access

AliWeex general module or logical 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 library, picture library, performance monitoring and so on.

Performance monitoring

Performance monitoring is also important, requiring continuous tuning through data and exception catching, including the following:

1. Real-time sampling of performance data

• JS Framework load time

• Load time of network transmission

• First screen rendering time

2. Catch exceptions or render errors:

• Resource request failed

• JS runtime exception

To level the playing field

The steps for building a platform are as follows:

1. Componentized separation from the whole;

2. Define each component;

3. Put components together.

Development Experience (devTools)



Devtools allows us to do two things:

1. Breakpoint debugging;

Inspector, either Native View Element, Dom Element, Network or Console log.

With the assistance of these tools, today’s double eleven smooth troubleshooting problems, the front end to smooth positioning page layout.