To help us better optimize mPaaS, get the original PPT to share: t.cn/EZVx3bx

background

Combined with the discussion on the In-depth Practice of Modularization and Decoupled development in ANT Financial SERVICE mPaaS shared last week, we have had a preliminary understanding of the design ideas of Alipay’s mobile terminal development architecture. Combined with the sharing in iWeb Wuhan station, this article will lead you to further understand the dynamic scheme design of mPaaS in mobile terminal.

First, the shared content will be divided into the following three aspects:

  1. The exploration of the dynamic scheme of Alipay;
  2. Nebula Framework analysis;
  3. MPaaS technology architecture and power

1. Exploration of alipay’s dynamic solution

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

Alipay has gradually developed from a tool-based application at the beginning to a platform-based application. Until now, it has become a super App with a multi-application ecology, more open and dynamic, and maintains strong features of high availability, high performance and high sensitivity. With the gradual expansion of apps, the architecture of the entire application is constantly adjusted to adapt to various features. The current alipay client architecture is shown in the figure:

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

The client adopts unified framework development, modular development mode, complete plug-in container, support module independent release, facilitate the parallel development of large-scale teams.

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

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

Nebula is alipay’s Mobile Hybrid solution with excellent external extensions, feature plugins, event mechanisms, JSApi customization and H5App push update management capabilities.

Main functions include:

  • Access to H5App background, convenient management of offline or online H5App, H5 application push, update.
  • Load the H5 pages and manage the individual pages according to the concept of sessions.
  • Android uses UCWebView, which can solve system-level Webview Crash. It has more reasonable memory management, faster network loading, and better compatibility. The problem of compatibility with different Webviews on Android is completely gone.
  • Support custom network library, custom network channel; Support custom keyboard, custom Native View replace H5 tag.
  • Provide rich built-in JSAPI, such as page push, pop, title setting and other functions; Support user – defined JSAPI and plug-in functions to extend business requirements.
  • Built-in buried point function, access to THE H5 monitoring platform, can see real-time page loading performance, error alarm and monitoring.

There is a dynamic solution is alipay small program:

Alipay mini program is a new development mode, which integrates the easy development, cross-platform and Native performance of H5, so that developers can quickly develop high-performance pages and provide excellent user experience. Through the use of Alipay small programs, developers have developed a large number of high-quality small programs for Alipay, which has enriched alipay’s ecological capabilities. Small programs open to developers more JSAPI and OpenAPI capabilities, through small programs can provide users with diversified and convenient services.

Nebula Framework

Nebula’s architecture, from top to bottom, consists of the H5 application layer, the service layer, and the native framework layer:

  • H5 application layer: developed based on HTML and JavaScript technology and running on THE H5 container, it has cross-platform features and can complete real-time hotfix function with the use of offline package.
  • The service layer: Provides high-level language apis for developers to use mobile system resources, including:
    • A Windows system that developers can use to create an 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 the start, end, and forced closure of applications in the mobile system
    • H5 container
  • Native framework layer: the base layer of a mobile system that provides standard apis for higher-level languages (such as Java and Object-C) to use the underlying hardware and contains a number of proprietary software libraries accessible for the hardware. When the upper layer calls a framework API to access the hardware, the phone system loads the corresponding software library.

At 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 in the container, H5Service, H5Session and H5Page

H5Service, H5Session and H5Page are extended from the H5CoreNode class. With H5Service as the root node, it forms a tree structure together with other classes to constitute the page flow and navigation. In general, H5Pages is a child node of H5Session and H5Sessions is a child node of H5Service, in any case only one root node of H5Service exists.

  • H5Service: a single global instance of H5Service in the lifetime of an H5 application. The following operations can be performed by:

    • Create and start a new Web Activity
    • Create and start a new Web page
    • Stores and reads data from the shared space
    • Register plug-ins and providers
    • Monitor the life cycle of the application

  • H5Session: An H5Session is a complete business process composed of a stack of H5Pages. For example, a checkout process includes: a summary of the shopping cart page, a checkout method selection page, and the last checkout confirmation page. All the pages can exist and operate independently, and H5Session is used to organize the pages and arrange them according to business logic to complete the business. When you create and start a new Web page using H5Service, a new H5Session instance will be created and shared for subsequent Web pages if no H5Session is currently available. You can remove pages from the H5Session until the stack is empty, or you can use the methods provided by H5Session to get the home page and listen for the lifetime of the H5Session.

  • H5Page: A page that users can see and touch and is one of the most important parts of the application lifecycle. You can load content via URLS, customize the look and behavior of pages with H5Param, and even embed the H5Page view in the same layout with other native UI widgets by getting the H5Page view hierarchy.

Here are some important components of an H5 container:

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

  • The Plugin manager manages plugins: If the existing JS API does not meet your business needs, you can also choose to create a new Plugin. You can use the new JS API in the Javascript layer by simply packaging the native code in the plugin and registering the plugin with the manager

  • The JS Bridge is a Bridge between the native layer and JavaScript: it translates JavaScript code into bytecode that runs in the system framework, and it also converts the data structures of the native layer into JavaScript objects that can be processed in the JavaScript layer. Nebula has made some refinements for the JS Bridge here:

    • In Android, js calls native communication via console.log. This is different from other containers, which are generally implemented by prompt. However, using prompt has two disadvantages:

      • Using Prompt will block the entire browser process. If native processing takes a long time, it will cause page feign death.
      • Prompt is a modal window that pops up at the UI level, which can cause a problem if native does not capture it. Once the page is placed in an environment other than this container, a weird prompt pops up. In Alipay, this problem once occurred. When tmall page was in Alipay app, due to different container mechanisms, bridge script in the page did not judge the environment. As a result, prompt modal dialog box appeared on the page when JS in the page called API, which seriously affected user experience. If you use console.log, you won’t have this problem. The console approach avoids the experience problems of incompatible environments and avoids the fake death of the page.

    • The timing of jSBridge injection is very important for performance because the business logic depends on the bridge, so all the business logic will not be triggered until the bridge is ready. Bridge JS itself takes a certain amount of time to run. However, because the H5 page life cycle and the container life cycle are independent of each other, where in the H5 life cycle this bridgeJS is injected is of great importance to performance.

    • For example, when the Webview sets the title, Android will emit an onReceivedTitle, shouldInterceptRequest, and so on. IOS will try to inject BridgeJS immediately after listening to webViewDidStartLoad events to make it run early in the H5 lifecycle. Through the injection in this way, the test shows that bridgeJS can be injected successfully within 50ms after the page loading starts.

  • Event Mechanism: Nebula provides an Event mechanism to manage the order in which events flow between H5Page, H5Session, and H5Service. An H5Event can occur at any level of H5Page, H5Session, or H5Service. Event dispatching completes event interception in two steps.

In this step, events are dispatched in the order H5Service -> H5Session or H5Page.

An event can be intercepted on any node (if interceptEvent() returns true), or processed on any node (if handleEvent() returns true) : If the event is intercepted or processed during the dispatch process, it is considered consumed and no longer circulates. 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 present an online page can easily be affected by the network environment, thus reducing the performance of an H5 page.

In Neblua we use offline package technology to solve this problem. Offline package is to package static resources including HTML, Javascript, CSS and other pages into a compressed package, and its directory structure is shown in the figure:

Using offline packages can make H5 applications in containers 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 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 user experience when opening H5 applications: The static resources on the page are embedded into the application and published in the 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 start to use the application immediately.

  • Implement dynamic updates: In the event of a new version or emergency release, you can put the modified resources into an offline package and update the configuration so that the application automatically downloads the updates. As a result, you can let users 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 the local or online resource. The H5 container first intercepts the request. After intercepting the request, the following occurs:

  1. The H5 container will use the local resource if there is one available locally to satisfy the request.
  2. If no local resource is available to satisfy the request, the H5 container uses the online resource. Therefore, the WebView is oblivious to whether the resource is local or online.

The download of the offline package depends on the user’s current network. Normally, offline packages are only downloaded in the background when you are connected to WIFI. Offline packages are not downloaded in the background if the user is on a mobile network. 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 was developed to solve scenarios where offline packages are not available. When each offline package is released, a corresponding online version is released in the CDN, and the directory structure is the same as the offline package structure. The fallback address is sent to the local device along with the offline package information. If the offline package is not properly downloaded, the client intercepts the page request and redirects to the corresponding CDN address to switch between the online and offline pages at any time.

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

  • User experience issues: When users see the file address, they will feel insecure and uncomfortable about the exposed address.
  • Security problem: The file protocol directly carries the local path, and any user can see the path of the file, which may cause security risks. Based on the above problems, the virtual domain name mechanism is used instead of directly using the file path to access. Virtual domain is a conform to the HTTPS URL Scheme specification domain name address, such as xxxxxxx.h5app.example.com

Nebula’s H5 containers and off-line packages are extremely optimized from the traditional Hybrid framework, giving the entire H5 application the following features:

  • Weakening of strong dependence on network links
  • Enhanced support for device capabilities
  • Enhanced user experience

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

It restructures the way the APP is developed, exposes a limited number of JSAPI interfaces, makes it easier to develop apps, and more convenient to take advantage of Alipay’s capabilities for distribution, promotion, and operation. The mini program is essentially an H5 App offline package, but with some features of its own.

  • Small program is for the third party App service, running in a separate process, its stability and flash back will not affect the main App, also support two-party App running in the main process.
  • Small programs are supported to keep alive, greatly improve the second open experience.

3. MPaaS technical architecture and power

Nebula has such an advantage that it can now be made available for external use as well as internal use by Ant Financial.

MPaaS is a 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 the mPaaS, Nebula’s H5 containers, JSAPI, Off-line packages, and small programs are output as a single component, configured in the client. Any App can add corresponding modules and integrate these functions through mPaaS plug-in. With such simple operations, your App can have the same powerful dynamic capability as Alipay.

At the same time, mPaaS provides a small program module, allows users to run on Alipay small program, seamless migration to their own App, achieve [cross-platform cross-application] development, improve code reuse capability Nebula componentized output, Dynamic updates are implemented with MDS (Mobile Publishing Service) provided by mPaaS.

The MDS service provided by mPaaS makes releasing updates as simple as sending an email.

MDS has the ability of intelligent gray release, which can be verified by multiple internal gray and external gray levels to ensure that the quality of released products is fully guaranteed before the official release. At the same time, it provides a variety of upgrade strategies, including a variety of rules such as designated population area, model, system version, network environment and so on. The larger the packet size is, the lower the success rate of the update is. In mPaaS, we adopt the incremental difference update capability to reduce data redundancy and device bandwidth, which has obvious advantages in mobile network conditions. At the same time, it ensures the high availability of the update function. The availability rate of the upgrade interface is up to 99.99%, and the online minute level is accessible.

Nebula’s ecosystem is based here, first within the group, where we have supported a number of products, but also through mPaaS, where we work with external clients to export our technical capabilities to them. Examples include the 12306 client, Guangfa Discovery Exciting Client, Shanghai Metro, Bank of Suzhou, and many more.

Especially for 12306, the overall client experience is better after using the mPaaS revision. The vast majority of the 12306 client is H5 technology, implemented using Nebula H5 containers with an offline package. From page opening speed to UI event response, the experience is almost native. In terms of update releases, the 12306 app pack has rarely been updated. According to the app Store’s release record, only two releases have been submitted this year, which is basically a dynamic way to complete iterations of the business.

Nebula H5 Container + Offline Package + Mini Program + MDS Want to get started? Welcome to download Android Demo:

  • Note: Scan code download is not supported for iOS users

If you have better ideas or suggestions about the specific practice of mPaaS mobile terminal dynamic, you are also welcome to discuss and communicate with us.

Past reading

The opening | modular and decoupling type development in ant gold mPaaS theorypractice probing depth,

Dependency Analysis Guide between Bundles of Koubei App

The source code analysis | ant gold suit mPaaS RPC calls under the framework of course”

Follow our public account, get first-hand mPaaS technology practice dry goods