Alipay mobile terminal dynamic scheme practice

The little ant says:

A Discussion on the In-depth Practice of Modular and Decoupled Development in Ant Financial mPaaS (For more information, please follow our official account: mPaaS)

I have had a preliminary understanding of the design idea of alipay’s mobile terminal development architecture. In combination with the sharing in iWeb Wuhan station, this paper will lead you to further understand the dynamic scheme design of mPaaS in mobile terminal.

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

The exploration of alipay dynamic scheme;

Nebula Framework overview;

MPaaS technology enablement

Any technical solution is gradually explored in the evolution of business development and architecture, so let’s take a look at the evolution of Alipay architecture:

From a tool-based application at the beginning, Alipay has gradually developed into a platform application. Until now, alipay has become a super App. It has a multi-application ecosystem, which is more open and dynamic, and maintains the powerful characteristics of high availability, high performance and high sensitivity. As apps get bigger and bigger, the architecture of the entire App is constantly being adjusted to accommodate various features. The current alipay client architecture is shown in the figure below:

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

The whole client adopts a unified framework development, modular development mode, complete plug-in container, support module independent release, convenient large-scale team parallel development.

In such a framework, our dynamic scheme is also included. There are two main frameworks for dynamification in Alipay: Nebula and Applet.

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

Nebula is a Hybrid Solution for Alipay mobile that provides excellent external extensions with plug-ins, event mechanisms, JSApi customization, and H5App push update management capabilities.

The main features include:

• Access the H5App background to facilitate the management of offline or online H5App, and implement 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 said goodbye to the problem of compatible with different WebViews under Android.

• Support custom network library, custom network channel; Support custom keyboard, custom Native View to replace the H5 tag.

• Provides rich built-in JSAPI, such as page push, pop, title Settings and other functions; Support user-defined JSAPI and plug-in functions to expand business requirements.

• Built-in buried point function, access to H5 monitoring platform, can see page loading performance, error alarm and monitoring in real time.

There is also a dynamic scheme is alipay small program:

Alipay small program is a new development mode, integrating the easy development of H5, cross-platform, Native performance, so that developers can quickly develop high-performance pages, to provide excellent user experience. Through the use of Alipay small programs, developers have developed a large number of high-quality small programs for Alipay, enriching the ecological capacity of Alipay. Small programs provide developers with more CAPABILITIES of JSAPI and OpenAPI and provide users with diversified and convenient services through small programs.

The Nebula architecture is shown here, from top to bottom, at the H5 application layer, services layer, and native Framework layer:

• H5 application layer: developed based on HTML and JavaScript technology, it is a mobile application running on THE H5 container. It has the characteristics of cross-platform and can complete the real-time hot repair function with the use of offline package.

• Services layer: Provides developers with high-level language apis to use mobile system resources, including:

• Windows, which developers can use to create application UI, including text, images, buttons and custom views

• Resource management, through which developers can easily access non-code resources such as multilingual text, images and layouts

• Application lifecycle management, which determines when an application starts, ends, and is forced to shut down in the mobile system

• H5 container

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

The core of the Nebula framework is the H5 container. Here’s a look at the structure of the H5 container:

There are three concepts H5Service, H5Session and H5Page in the container

H5Service, H5Session and H5Page are all extensions of the H5CoreNode class. The ROOT node is H5Service, which together with other classes forms a tree structure for page flow and navigation. In normal cases, H5Pages is a child node of H5Session and H5Sessions is a child node of H5Service. In any case, only one H5Service root node exists.

• H5Service: is the Nebula basic class that maintains the global status of H5 applications. Within the lifetime of an H5 application, there is only one global instance of H5Service. H5Service can perform the following operations:

• Create and open a new Web Activity

• Create and open a new Web page

• Store and read data from shared space

• Register plug-ins and providers

• Listen for the application lifecycle

• H5Session: A H5Session is a complete service process consisting of a stack of H5Pages. For example, a checkout process includes: a shopping cart summary page, a checkout method selection page, and a final checkout confirmation page. All the pages can exist independently and H5Session is used to organize the pages to stand up and arrange them according to the business logic to complete the business. When you use H5Service to create and start a new Web page, if there is no H5Session, a new H5Session instance will be created and shared with subsequent Web pages. You can remove the page from the H5Session until the page stack is empty, you can also use the methods provided by THE H5Session to obtain the home page, and listen to the life of the H5Session.

• H5Page: the user can see and touch the page, and is the most important part of the application life cycle. You can load content via urls, customize the look and behavior of pages with H5Param, and even embed H5Page views in the same layout with other native UI widgets by taking the H5Page view hierarchy.

Here are some important components of an H5 container:

• The API Manager manages the JS apis: Nebula already provides a number of built-in JS apis for developers to use, such as manipulating the UI, displaying dialog boxes and toasts, and using web RCP services.

• The Plugin manager manages plugins: if the existing JS API doesn’t meet your business needs, you can also create a new Plugin. You simply package your native code in a plug-in, register the plug-in in the manager, and use the new JS API in the Javascript layer

• The JS Bridge is a Bridge between the native layer and Javascript: it translates Javascript code into bytecode that can be run in the system framework, and it also converts native layer data structures into Javascript objects that can be processed in the Javascript layer. Here Nebula makes a few optimizations for the JS Bridge:

• In Android, js calls native communication through console.log, which is different from other containers. Other containers usually implement prompt. However, using Prompt has two disadvantages:

1. Use Prompt to block the entire browser process, and if native takes too long to process, the page will be suspended.

2. Prompt is a mode window that pops up on the UI level, which will cause problems if it is not captured and processed in Native. Once the page is placed in a context other than the container, a weird Prompt popup appears. This problem once occurred in Alipay. When the Tmall page was in alipay APP, due to the different container mechanism, the Bridge script in the page did not judge the environment. As a result, prompt modal dialog box appeared on the page when JS called API, which seriously affected user experience. However, if you use console.log, this problem does not occur. The console approach avoids the experience problems of incompatible environments and also avoids page death.

• Jsbridge injection timing, because the business logic depends on the Bridge, so all business logic will be triggered after the Bridge is ready, and the Bridge JS itself runs for a certain period of time, so the injection timing is very important for performance. But because the H5 page life cycle and the container life cycle are independent of each other, the performance impact of injecting this piece of BridgeJS at which point in the H5 life cycle is extremely important.

  For example, when the Webview setting title ends, Android will release an onReceivedTitle, shouldInterceptRequest and other events. IOS will try to inject BridgeJS at webViewDidStartLoad events as soon as it listens for these events to run as early as possible in the H5 lifecycle. In this way, bridgejs has been successfully injected in tests as early as 50ms after the page starts loading.

• 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 intercept events.

  The order of sending events in this step is H5Service -> H5Session or H5Page.

  Events can be intercepted at any node (if interceptEvent() returns true) or handled at any node (if handleEvent() returns true) : If an event is intercepted or processed during dispatch, the event is considered consumed and no longer circulated. If the event is not intercepted or processed after the dispatch process, an error is thrown to the caller for processing.

Using only traditional H5 technology to display online pages is easily affected by the network environment, thus reducing the performance of H5 pages.

In Neblua we use offline package technology to solve this problem. Offline package is to pack static resources in a page, including HTML, Javascript, CSS, into a compressed package. Its directory structure is shown in the figure below:

Using offline package can make H5 application in container have nearly Native experience, and the main advantages are as follows:

• Reduce the impact of the network environment on H5 applications: Download the offline package to the local PC and open it on the client to change the operation of opening the H5 page from network I/O to disk I/O. Loading offline packages directly from the local, not only maximizes the impact of the network environment on the H5 page, but also enhances the user experience.

• Improve users’ experience in opening H5 applications: Static resources on the page are embedded in the application and released by offline package. When users start the application for the first time, they do not need to rely on the network environment to download the resources, but immediately start using the application.

• Implement dynamic updates: During a new release or emergency release, you can put the changed resources into an offline package and update the configuration for the application to download the updates automatically. As a result, you can allow users to receive updates early without having to go through the app store.

When an H5 container makes a resource request, it uses the same URL to access a local or online resource. H5 intercepts the request first. After intercepting the request, the following happens:

1. The H5 container uses local resources if there are resources available locally to fulfill the request.

2. If there are no local resources available to satisfy the request, the H5 container uses online resources. Therefore, a WebView is imperceptive whether the resource is local or online.

Offline package download depends on the user’s current network. In general, offline packages are downloaded in the background only when WIFI is connected. If the user is on a mobile network, the offline package is not downloaded in the background. If the current user clicks the APP and the offline package is not downloaded, the user has to wait for the offline package to be downloaded before using it.

Fallback technology comes into being to solve the problem of unavailable offline packages. When each offline package is released, an online version is synchronized to the CDN. The directory structure is the same as the offline package structure. The FALLback address will be delivered to the local device along with the offline package information. If the offline package is not downloaded, the client intercepts the page request and redirects the corresponding CDN address to switch between online and offline pages at any time.

So how to address local resources, we have designed a unique virtual domain name mechanism, only for offline applications. When the page is stored on the client, the WebView is accessed locally via file Schema. However, the user can see the path to file directly in the address bar, which can cause the following problems:

• User experience problems: When users see the file address, they may feel insecure and uncomfortable about the exposed address.

• Security: The file protocol carries a local path directly, so any user can see the path of the file, which may cause security risks. Based on the above problems, virtual domain name mechanism is adopted instead of using file path to access. Virtual domain is a conform to the HTTPS URL Scheme specification domain name address, such as https://xxxxxxx.h5app.example.com

Nebula’s H5 containers and offline packages are optimized for the traditional Hybrid framework with the following features throughout the H5 application:

• Weakening of strong dependence on network links

• Enhanced support for device capabilities

• Enhanced user experience

In terms of performance, Nebula has been tested with hundreds of millions of users in Alipay, crash and ANR, and other stability metrics. Android platform is deeply customized based on UCWebview. The crash rate and ANR amount are much lower than system WebView, and it has the ability to solve the problems of system Webview. The figure shows the comparison of crash rate and ANR rate between UCWebview and system Webview on Android terminal. The advantages of stability are obvious.

Finally, the Nebula Applet reuses the Nebula Container Technology stack to retool the development approach, exposing a limited number of JSapis, and making it easier to develop apps that take advantage of Alipay’s capabilities, distribute, distribute, and operate them. Applet is essentially an H5 App offline package, but with some features of its own.

• Small program is for third-party App service, run in an independent process, its stability and flash back will not affect the main App, also support two apps run in the main process.

• Small program is support live, greatly improve the second open experience.

Nebula has such an advantage that it is now available not only within Ant Financial but also externally.

First, what is mPaaS? MPaaS stands for Mobile Platform as a Service. Is the ant gold original research and development of mobile platform; it comes from alipay App nearly 10 years of mobile technology practice and thinking, for mobile development, testing, operation and operations with cloud to end one-stop solution, can effectively reduce the technical threshold, reduce development costs and improve development efficiency, to assist the ecological partners quickly set up stable and high quality mobile App.

In mPaaS, we output the Nebula H5 container, JSAPI, offline package, and applet modules as a single component, configured on the client side. Any App can add corresponding modules and integrate these functions through THE mPaaS plug-in. With such simple operations, you can make your application as dynamic as Alipay.

At the same time, mPaaS provides a suite of software packages with a Nebula component package that allows users to seamlessly transfer their software packages from alipay to their own App. With the Nebula component package, you can download the software packages for a variety of applications.

The MDS service provided by mPaaS can make every update as simple as sending an email.

The MDS has the capability of intelligent grayscale distribution. It can perform both internal and external grayscale verification to ensure that the product quality is fully guaranteed before being released. It also provides multiple upgrade policies, including rules for the specified population, region, model, system version, and network environment. For offline packages, the downloading of updated offline packages has higher requirements on the network environment, and the larger the size of the package, the lower the success rate of the update. In mPaaS, incremental differential update capability is adopted to reduce data redundancy and device bandwidth, which has obvious advantages under the condition of mobile network. At the same time, ensure the high availability of the update function, upgrade interface availability up to 99.99%, online minute level of contact.

At first, we have supported a number of products within Nebula, and through mPaaS, we have worked with external clients to export our technical capabilities to them, including the 12306 client, The Guangfa Discovery Brilliant Client, the Shanghai Metro, the Bank of Suzhou, and many more.

In particular, 12306, after the use of mPaaS revision, the overall client experience is better. The entire 12306 client is built with H5 technology in a Nebula H5 container with an offline package that provides a nearly native experience in both page opening speed and UI event response. In terms of update and release, 12306’s app package is rarely updated. According to the release record on AppStore, only two versions were submitted this year, which basically completed the iterative release of business in a dynamic way.

In summary, Ant Financial’s mPaaS is a dynamic solution for mobile with a Nebula H5 container + Offline package + applets + MDS. Want a hands-on experience? Welcome to download Android Demo:

Note: Scan code download is not supported for iOS users