Practice of Alipay mobile terminal dynamic program


The little ant said:

Previously shared modular and decoupled development in ant mPaaS depth practice discussion (want to know more about content, welcome to the official account: mPaaS)
Alipay has already got a preliminary understanding of the design idea of mobile terminal development framework. This article will lead you to further understand mpaas in combination with the sharing at iWeb Wuhan station
Dynamic scheme design at the mobile end.

The shared content will be divided into the following three aspects:

Exploration of Alipay dynamic program;

Nebula framework analysis;

Mpaas technology empowerment

1. exploration of Alipay dynamic program

Any technical solution is gradually explored in the development of business and the evolution of architecture. So let’s look at the evolution of Alipay architecture:

Practice of Alipay mobile terminal dynamic program

Alipay has gradually developed into a platform based application from the very beginning, and has been a super App until now. It has a multi application ecosystem, is more open and dynamic, and maintains high availability, high performance and high sensitivity. With the gradual expansion of app, the architecture of the whole application is constantly adjusted to adapt to various characteristics. The architecture of the current Alipay client is shown in the following figure:

Practice of Alipay mobile terminal dynamic program

The overall architecture is divided into five layers: container layer, component layer, framework layer, service layer and application layer.

The client adopts a unified framework for development, a modular development mode, a fully plug-in container, supports independent module release, and facilitates the parallel development of large-scale teams.

In this framework, our dynamic scheme is also included. There are two main frameworks for dynamic programming in Alipay: Nebula and applet.

Practice of Alipay mobile terminal dynamic program

These two solutions not only solve some universal problems such as the contradiction between the demand iteration speed and the release cycle, cross platform development and real-time release, but also effectively ensure the release quality, urgently stop online problems, but also help to establish a good open ecology.

Nebula is Alipay mobile terminal Hybrid solution, it provides a good external expansion function, with function plug-in, event mechanism, JSApi customization and H5App push update management capabilities.

Practice of Alipay mobile terminal dynamic program

The main functions include:

Access the h5app background to facilitate the management of offline or online h5app and realize the push and update of H5 applications.

Load the H5 page and manage each page according to the concept of session.

Android uses ucwebview and has the ability to solve system level WebView crash. It has more reasonable memory management, faster network loading and better compatibility. Completely bid farewell to the problem of compatibility with different webviews under Android.

Support custom network library and custom network channel; Support custom keyboard and replace H5 label with custom native view.

Provide rich built-in jsapi to realize functions such as page push, pop, title setting and so on; Support user-defined jsapi and plug-in functions to expand business requirements.

With embedded point function and access to H5 monitoring platform, you can see the performance, error alarm and monitoring of page loading in real time.

Another dynamic solution is the Alipay applet:

Practice of Alipay mobile terminal dynamic program

Alipay applet is a new development mode, which integrates H5’s easy development, cross platform and Native performance, enabling developers to quickly develop high-performance pages and provide excellent user experience. By using Alipay applet, developers have developed a large number of high-quality small programs for Alipay, which has enriched Alipay’s ecological capability. Applets provide developers with more jsapi and OpenAPI capabilities. Through applets, users can provide diversified and convenient services.

2. Analysis of nebula framework

The architecture of nebula is shown in the figure. From top to bottom, it is H5 application layer, service layer and native framework layer:

Practice of Alipay mobile terminal dynamic program

H5 application layer: a mobile application developed based on HTML and javascript technology and running on the H5 container. It has cross platform characteristics and can complete the function of real-time hot repair with the use of offline packages.

Service layer: it provides developers with high-level language APIs to use mobile system resources, including:

    Windows system, developers can use it to create application UI, including text, pictures, keys and customized view

    Resource management, through which developers can easily access non code resources such as multilingual text, pictures and layout

    Application lifecycle management, which determines the start, end and forced shutdown time of the application in the mobile phone system

    H5 container

Native framework layer: it is the basic layer of the mobile phone system. It provides standard APIs for high-level languages (such as Java and Object-C) to use the underlying hardware, and contains many proprietary software libraries for hardware access. When the upper layer calls a framework API to access the hardware, the mobile phone system will load the corresponding software library.

The core part of the entire Nebula framework is the H5 container. Let’s take a look at the structure of the H5 container:

Practice of Alipay mobile terminal dynamic program

There are three concepts in the container: h5service, h5session and h5page

H5service, h5session and h5page are all extended from the h5corenode class. With h5service as the root node, it forms a tree structure together with other classes to form the page flow and navigation. In general, h5pages is the child node of h5session and h5sessions is the child node of h5service. In any case, only one h5service root node exists.

H5service: it is the basic class for maintaining the global state of H5 applications in nebula. There is only one single global instance of h5service in the life cycle of H5 applications. The operations that h5service can perform include:

    Create and open a new web activity

    Create and open a new web page

    Storing and reading data from a shared space

    Register plug-ins and providers

    Monitor application lifecycle

H5Session:一个 H5Session 是由一叠 H5Pages 组成的完整业务流程。例如一个收银台的流程包括:一个购物车的小结页面,一个结账方式的选择页面,和最后一个结账确认页面。所有的页面都可以独立存在运作, H5Session 在其中的作用是把这些页面组织起立,按照业务逻辑把它们按序排列来完成业务。当你使用 H5Service Create and open a new web page 时,如果当前没有 H5Session 的话,一个新的 H5Session 实例将被创建,并为后续创建的 Web page 共享。你可以从 H5Session 中移除页面直到页面叠为空,也可以使用 H5Session 所提供的方法来获取首页,以及监听该 H5Session 的生命周期。

H5page: it is a page that users can see and touch, and it is also the most important part of the application life cycle. You can load the content through the URL, customize the appearance and behavior of the page with h5param, and even embed the h5page view and other native UI components into the same layout by obtaining the view hierarchy of h5page.

Here are some important components of H5 container:

API manager mainly manages JS APIs: many built-in JS APIs have been provided in Nebula for developers to use, such as manipulating UI, displaying dialog boxes and toast, and using network RCP services.

The plug-in manager mainly manages the plugin: if the existing JS API cannot meet your business needs, you can also choose to create a new plug-in. You just need to package the native code in the plug-in and register the plug-in in the manager to use the new JS API in the JavaScript layer

JS bridge is a communication bridge between the native layer and javascript: it translates JavaScript code into bytecode that can run in the system framework, and also converts the data structure of the native layer into JavaScript objects so that it can be processed in the JavaScript layer. Here, nebula has made some optimizations for JS bridge:

    In Android, JS calls native through console.log, which is different from other containers. Other containers are generally implemented through prompt, but using prompt has two disadvantages:

        Using prompt will block the whole browser process. If native processing takes a long time, it will cause the page to fake death.

        Prompt means that a modal window will pop up at the UI level. If it is not captured and processed in native, it will cause a problem. Once the page is placed in a non container environment, a strange prompt pop-up window will appear. In Alipay, there was this problem. When Tmall page was in Alipay app, due to the different container mechanism, the bridge script in the page did not judge the environment. When the JS called API in the page, the modal dialog box appeared on the page, which seriously affected the user experience, but if console.log was used, This problem will not occur. The console approach avoids the experience problems of incompatible environments and the fake death of pages.

    The timing of jsbridge injection. Because the business logic depends on the bridge, all business logic will be triggered after the bridge is ready, and the operation of bridge JS itself takes a certain time. Therefore, the impact of the timing of injection on performance is very important. However, because the life cycle of H5 page and container are independent of each other, the impact on performance of which phase of the H5 life cycle to inject this bridgejs is extremely important.

    Now in Alipay, the way to monitor H5 life cycle events is, for example, when Webview ends title, Android releases a onReceivedTitle, shouldInterceptRequest and other events. IOS will try to inject bridgejs immediately after webViewDidStartLoad events, after listening to these things, so that it can run as soon as possible in the H5 life cycle. Through this way of injection, after testing, bridgejs can be successfully injected within 50ms after the page loading starts at the earliest.

Event mechanism: Nebula provides a set of event mechanisms to manage the flow order of events between h5page, h5session and h5service. An h5event can occur at any layer of h5page, h5session or h5service. Event dispatch is divided into two steps to complete event interception.

The sequence of event dispatch in this step is h5service - > h5session or h5page.

The event can be intercepted at any node (if interceptevent() returns true) or processed at any node (if handleevent() returns true): if the event is intercepted or processed during dispatch, the event will be deemed to have been consumed and will not continue to circulate. If the event is still not intercepted or processed after the dispatch process, an error will be thrown to the caller for processing.

Only using traditional H5 technology to display online pages is vulnerable to the network environment, which reduces the performance of H5 pages.

In neblua, we use offline package technology to solve this problem. Offline package is to package static resources in pages including HTML, JavaScript, CSS, etc. into a compressed package. Its directory structure is shown in the figure:

Practice of Alipay mobile terminal dynamic program

Using offline packages can make H5 applications in the container have a near native experience. The main advantages are as follows:

Reduce the impact of the network environment on H5 applications: download the offline package locally, and then open it on the client to change the operation of opening the H5 page from network IO to disk IO. Loading offline packages directly from the local area not only gets rid of the impact of the network environment on H5 pages to the greatest extent, but also enhances the user experience.

Improve the user's experience of opening H5 application: embed the static resources in the page into the application and publish them by means of offline package. When users open the application for the first time, they don't need to rely on the network environment to download the resources, but start using the application immediately.

Realize dynamic update: when launching a new version or emergency release, you can put the modified resources into the offline package and let the application download updates automatically through the update configuration. Therefore, you can let users receive updates early without going through the app store audit.

The following describes the rendering process of offline packages. When H5 container sends a resource request, the URL used to access local resources or online resources is consistent. H5 container will intercept the request first. After intercepting the request, the following occurs:

If a local resource is available to satisfy the request, the H5 container will use the local resource.

If there is no local resource to satisfy the request, the H5 container will use the online resource. Therefore, WebView is insensitive whether the resource is local or online.

Practice of Alipay mobile terminal dynamic program

Downloading offline packages depends on the user’s current network. Generally, offline packages are downloaded in the background only when WiFi is connected. If the user is in the mobile network, the offline package will not be downloaded in the background. If the current user clicks the app and the offline package is not downloaded, the user must wait for the offline package to be downloaded before using it.

In order to solve the scenario that offline packages are not available, fallback technology came into being. When each offline package is released, a corresponding online version will be released synchronously on the CDN. The directory structure is consistent with the offline package structure. The fallback address will be distributed locally along with the offline packet information. When the offline package is not downloaded well, the client will intercept the page request and turn to the corresponding CDN address to switch the online page and offline page at any time.

So how to address local resources? We have designed a unique virtual domain name mechanism, which is only effective for offline applications. After the page is saved in the client, if WebView wants to access it, it is loaded and accessed locally through file schema. However, users can directly see the path of file in the address bar, which will lead to the following problems:

User experience problem: when users see the file address, they will feel insecure and uncomfortable about the exposed address.

Security problem: because the file protocol directly carries the local path, any user can see the file path where the file is located, which will have certain security risks. Based on the consideration of the above problems, the virtual domain name mechanism is adopted instead of directly using the file path. A virtual domain name is an HTTPS domain name address that conforms to the URL scheme specification, such as

The H5 container and offline package in nebula are extremely optimized based on the traditional hybrid framework, so that the whole H5 application has the following characteristics:

Weakening of strong dependence on network links

Enhanced support for device capabilities

Enhanced user experience

In terms of performance, Nebula has been tested by millions of users in Alipay, and crash and anr and other stability indicators are guaranteed. The Android platform is deeply customized based on ucwebview. The crash rate and anr are much lower than the system WebView, and has the ability to solve the system WebView problems. The figure shows the comparison of crash rate and anr rate between ucwebview and system WebView on Android. The advantage of stability is obvious.

Practice of Alipay mobile terminal dynamic program

Finally, look at the small program and Nebula Alipay applet to reuse Nebula container technology stack, redevelop the development mode, expose the limited jsapi interface, make app development simpler and more convenient to use Alipay’s ability, and then publish, promote and operate. The applet is essentially an H5 app offline package, but it has some characteristics of its own.

The applet serves the third-party app and runs in an independent process. Its stability and flash back will not affect the main app, and it also supports the second-party app to run in the main process.

The applet supports keeping alive and greatly improves the secondary opening experience.

3. Mpaas technical architecture and assistance

Nebula has such great advantages that it can be used not only internally but also externally.

First, what is mpaas? The full name of mpaas is mobile platform as a service. It is the original mobile R & D platform of ant gold suit. It originated from Alipay App’s mobile technology practice and thinking in the past 10 years. It provides cloud to end one-stop solution for mobile development, testing, operation and operation and maintenance. It can effectively reduce the technical threshold, reduce R & D costs, improve development efficiency, and help eco partners quickly build stable and high-quality mobile App.

Practice of Alipay mobile terminal dynamic program

In mpaas, we output modules such as the H5 container, jsapi, offline package and applet of nebula as a separate component and configure them in the client. Any App through the mPaaS plug-in, add the corresponding module, integrate these functions, only need such a simple operation, you can make your application as strong as Alipay dynamic capabilities.

Practice of Alipay mobile terminal dynamic program

At the same time, mPaaS provides a small program module that allows users to migrate small programs running on Alipay seamlessly to their own App, so as to develop [cross platform and cross application], improve the reusability of code, Nebula component output, and dynamically update MDS with mobile MDS service provided by mPaaS.

The MDS service provided by mpaas can make each update release as simple as sending e-mail.

Practice of Alipay mobile terminal dynamic program
Practice of Alipay mobile terminal dynamic program

MDS has the ability of intelligent gray-scale release. It can pass multiple verification of internal gray-scale and external gray-scale to ensure that the quality of released products is fully guaranteed before formal release. At the same time, it provides a variety of upgrade strategies, including a variety of rules such as designated population, region, model, system version and network environment. For offline packets, the download of updated offline packets has higher requirements for the network environment. The larger the packet size, the lower the update success rate. In mpaas, we use incremental differential update capability to reduce data redundancy and device bandwidth, which has obvious advantages under the condition of mobile network. At the same time, the high availability of the update function is guaranteed, the availability rate of the upgrade interface is 99.99%, and the online minute level is reached.

The following is the ecological basis of nebula. Firstly, within the group, we have supported many products. At the same time, through mpaas, we also cooperate with external customers to export our technical capabilities to them. Several typical cases include 12306 client, GF discovery wonderful client, Shanghai Metro, Bank of Suzhou, etc.
Practice of Alipay mobile terminal dynamic program

Especially for 12306, the overall experience of the client is better after the revision of mpaas. 12306 most of the clients use H5 technology. They use the nebula H5 container with offline packages to realize it. Whether it’s page opening speed or UI event response, the experience is almost native. In terms of update and release, the app package of 12306 is rarely updated. According to the release records on the app store, only two versions have been submitted this year, basically completing the iterative release of the business in a dynamic way.

To sum up, ant financial service mpaas implements the dynamic scheme of the mobile terminal through the way of “Nepal H5 container + offline package + applet + MDS”. Want to experience it? Welcome to the Android Demo:

Practice of Alipay mobile terminal dynamic program
Note: IOS user code scanning and downloading is not supported temporarily

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]