This paper is mainly divided into the following three parts:

1. High availability performance challenges in the context of mobile Internet

This paper mainly introduces alipay APP in the rapid development stage of mobile Internet in recent years, one of its own changes and performance challenges.

2. Construction and evolution of Alipay Hybrid solution (H5 container & small program)

In order to deal with the challenges mentioned above, Alipay has gradually developed two sets of Hybri solutions, namely H5 container and small program.

3. Hybrid scheme uses mobile development platform mPaaS for external output

Through the mPaaS platform, people can also access to the Hybrid technology of Alipay.

High availability performance challenges in the context of mobile Internet

According to a published 2018 mobile Internet industry analysis report, the monthly active users of Alipay have surpassed QQ to become the second largest App in China.

At the beginning, Alipay was just a single application tool App, allowing users to complete alipay related business inquiries and operations on their mobile phones. Since 2013, Alipay has gradually transformed into a platform-type App, which is characterized by service-oriented, modular and component-based tools. At this time, Alipay’s business is not only about payment, but also provides customers with many life-related services, such as Yu ‘ebao and electricity payment. After 2015, Alipay will grow into a super App, which will face the challenge of open, dynamic and high availability. At this time, Alipay needs to support a large number of complex businesses, open its business capability and help partners with its own traffic.

The change from single application to super App actually reflects the change of a user’s demand for App. The essence of mobile Internet users’ demand is service, not App, and the apps frequently used by users are few. In the era of super App, the main challenges alipay faces are:

1. Support complex services

App business is increasingly complex, not only internal business, but also a large number of external partners. It is difficult to deal with the increasingly complex business scenarios if the traditional App development method is adopted.

2. Meet the requirements of rapid business iteration

Another feature of the current business is the need for rapid iteration. Changing policies and emergencies require us to quickly reach new business requirements to users. One of the biggest issues in App development, however, is App Store approval. Due to the existence of audit, the business developed on the App will have a unified schedule. For example, there will be a new version at the end of the month, so all the business progress will have to consider the schedule of the App.

3. Open platforms

As a super App, one of the most important characteristics is openness. Openness means sharing App traffic so that external partners’ businesses can reach users through Alipay, which is a problem of quality control. Alipay needs to ensure that these businesses are legal and compliant and protect users’ property security.

In the era of super apps, the use of pure Native development will encounter significant limitations. Pure Native development here refers to iOS development using Objective-C or Swift and Android development using Java or Kotlin. Pure Native development, changes in business logic need to reach users through the release of a new version, so it will face the problem of long release review cycle mentioned above. On the other hand, every time a user needs to use a new function, the App needs to be updated, which is a very expensive problem for the user, which will make it difficult for the new business to cover the user in a short time.

From the perspective of development, the development efficiency of pure Native is much lower than that of the front-end, and it requires both iOS and Android developers. The package size also needs to be considered. If the current alipay services are developed using Native, the package size will be increased several times, which further increases the upgrade cost of users. As an open platform, the permissions and version management of Native code can become extremely complicated, and the business of internal and external partners needs to be coordinated at the same time every release, and things can get very bad.

Therefore, at present, App development must be inseparable from the Hybrid scheme, which is the Hybrid development and combines the Native development and Web development technologies. After 20 years of development, Web development has separated the three parts of structure HTML, presentation CSS and behavior JS, so it has high development efficiency. Hybrid solution also has the feature of cross-platform, a copy of the code is released to iOS and Android at the same time, saving development time. Businesses developed based on Hybrid solutions can be released quickly, without considering the practice of APP release, giving businesses great flexibility. Compared to Web development, Hybrid solutions provide rich device apis that enable more business forms.

Construction and evolution of Alipay Hybrid scheme

At present, Alipay has two Hybrid solutions: HTML5 containers and small programs. Applets have only come out in the last few years, and the H5 container has been around for a long time, so let’s start with the H5 container.

• H5 container

In Alipay, the HTML5 container architecture is shown in the figure below:

The top layer is the browser, which is the common Web development environment, including HTML, CSS, JavaScript, and so on. As the middle layer, H5 container organically combines the browser and the underlying framework of Alipay. There are two very important concepts in H5 container: JSBridge and offline package, which will be described in more details later. The underlying framework of Alipay will provide Native capabilities to H5 containers, including RPC (remote procedure call, which is used to realize communication between APP and server), payment, scanning and so on.

• JSBridge

JSBridge is the cornerstone of H5 container. It Bridges JS environment and Native and realizes the two-way communication between Native code and browser environment. Native code can run JS by calling the interface provided by browser, so as to call JS functions and transfer parameters to JS environment, etc. However, the communication between browser and JS environment is realized by intercepting the requests of Native browser, which can be network requests or calls of some internal functions.

In traditional Web development scenarios, H5 pages fetch data in the background via HTTP GET or POST requests, using AJAX frameworks such as jQuery. But the JS function in the H5 page is open, can’t do some encryption logic, and can’t optimize the network at the same time. In recent years, with the spread of 4G and data cards, mobile networks have become faster and cheaper. Before that, a large number of users faced insufficient data, poor signal, and unstable network. These scenarios still exist today, and a pure Web solution cannot provide relevant optimization.

The JSBridge provided by the H5 container solves this problem by calling the Native RPC SDK through the JSBridge for all data that H5 pages need to fetch from the background. In this way, the data requested by the actual App is sent by THE RPC SDK, which can realize the functions of secure encryption, signature verification, weak network optimization and traffic optimization. These features of the Native layer are not perceived by Web page developers, so business developers can only focus on their own business development. Security is guaranteed by the underlying SDK of Alipay.

The H5 container provides two extensions:

1. JSAPI

JSAPI adds a Native function invocation interface to the H5 page. By implementing the handler mode in the customized JSAPI class, specific functions can be realized in Native form, such as calling Native encryption functions.

2. The event

The H5 container sends events when the status changes. By listening for H5 container-specific events, you can process the lifecycle of the H5 container, such as changing the color of the loading progress bar and modifying the navigation bar. Events provide greater customization and are perfectly suited to meet the various customization requirements for H5 containers.

• H5 container offline package

The H5 container offline package is key to the H5 container user experience.

When opening an online page in an APP, there is usually a blank screen phase when the browser needs to download HTML resources from the server. Due to the limitation of mobile network, this time can be very uncertain, usually take more than 300ms, the user will see the page blank screen in this time.

In order to optimize the user experience of H5 container and reduce the time of blank screen, Alipay introduced the offline package technology in H5 container. An offline package is a ZIP package that contains HTML, CSS, JS, and images required by the front-end page. When the H5 container opens the offline package page, it directly obtains resources from the offline package. This is the access time in milliseconds, eliminating the blank screen when the page is opened.

In Alipay, offline packages are divided into two types: ordinary business resource packages and public resource packages. First, let’s talk about the public resource pack. The public resource pack contains some frame JS, CSS, common images, etc., and only one copy of these resources is saved in the entire App. The service resource pack stores only the page static resources required by the service, and the services are independent and decoupled from each other. A business’s page resources come from both its business resource bundle and its common resource bundle, which optimizes App size.

In order to meet the needs of rapid release, H5 container offline package provides an update mechanism, with a single offline package as the update dimension. The size of a single offline package is controllable, usually less than 500KB. In this way, the update time of a single offline package is controllable and users are not aware of it. Fallback access comes into play in extreme network scenarios where new business resource packs have not been updated and we expect users to be using the latest business. A copy of each offline package resource is stored on the server. In the extreme scenario just mentioned, the user will access the fallback address of the server to obtain the resource, thus ensuring that the page is available.

Combined with the offline package mentioned earlier, the entire H5 container rendering flow is as follows. The user is not aware of the update and download of offline package resources, and the front end is not aware of whether the page access resources come from offline package or fallback address.

• UC Webview kernel

In order to improve the stability of H5 container, Alipay uses UC Webview on Android system. The crash rate and ANR rate of UC Webview are much lower than that of system browser, and the fragmentation problem of Android Webview is completely avoided. I believe that those of you who have done android front-end page compatibility can certainly appreciate the benefits of using a browser kernel.

As a mature Hybrid solution, H5 container can meet the requirements of most business scenarios, but it still has some limitations. The business development part of H5 container still maintains front-end development thinking. After all, the whole process is using front-end technology, which only needs to be integrated into APP to complete testing after the business development is completed. However, there are many key concepts in client development, such as ViewController for iOS, Activity for Android, etc., and a clear understanding of the client page stack is more helpful in developing H5 containers. At the same time, H5 containers also have a fatal problem that they cannot control the quality. The broad front-end specifications make the control extremely difficult.

• Alipay small program

In order to solve the limitations of H5 container and meet the current demand of APP sharing and opening, Alipay launched a new Hybrid solution: Alipay Mini program. Alipay mini program is a brand new open mode. It runs on alipay client and can be easily acquired and spread to provide better user experience for end users. Alipay applet is based on Web technology, so learning cost is low; One set of code supports both iOS and Android; And provides rich components and apis; Totally for APP development. At present, Alipay mini program has provided more than 2,000 open interfaces, with more than 2.5 billion API calls per day, more than 1 million partners and more than 100,000 active service providers.

Alipay mini program also supports several Ali-based apps, including Koubei, Autonavi and Dingding.

So how does alipay small program solve the limitations of H5 container? First, Alipay applet is based on a custom DSL language, not a front-end standard, but similar. The development of small programs under DSL rules does not support direct DOM manipulation. Such freedom under DSL rules can effectively carry out quality control. In addition, Alipay mini program can provide better performance, experience and compatibility than H5 mini program. It can replace the underlying framework without feeling and deal with the performance problems encountered.

At present, Alipay applet also supports the offline package technology used by the aforementioned H5 container, and also supports the extension mode of JSAPI and events, providing greater flexibility.

Alipay small program DSL language includes four parts:

• JSON

The file is used to provide applets related configuration. The concept of Page and Window is emphasized here, and the concept of enabling users to configure the navigation bar and other concepts in APP development.

• axml

Can be understood as a child program page HTML, does not support direct manipulation of DOM to ensure that the page logic is controllable.

• JS

It describes the code logic, provides the various life cycles required in the Page, and allows the developer to have the various concepts in the APP.

• acss

Similar to CSS in H5, support most CSS syntax, so that front-end development can quickly complete small program UI design.

At present, Alipay small program has been gradually open to individual developers, we can apply for opening, enjoy the flow of Alipay.

Hybrid solution uses mobile development platform mPaaS for external output

The Hybrid solution H5 container and small program deposited by Alipay have passed the practical rigorous business test. I believe you have already understood it through the previous introduction.

Developing a Hybrid framework from scratch requires a lot of manpower and repeated business validation, which is too costly for most companies. However, open source Hybrid frameworks such as Cordova, Weex, React Native, and Flutter have a fatal problem. They encounter problems in the framework layer and are difficult to obtain timely and effective technical support.

At present, Alipay’s Hybrid scheme has been exported through the mobile development platform mPaaS, which solves the aforementioned pain points and allows you to directly use the same set of framework layer codes with Alipay and provide timely technical support.

MPaaS is a one-stop mobile development solution, providing five components required for mobile development: MGS, MDS, MPS, MAS and MSS. These components are based on Alipay and have passed the test of actual business.

The Hybrid solution of mPaaS includes three parts mentioned above: H5 container, offline package and small program.

The mPaaS H5 container is a Hybrid MOBILE SDK that provides good external extensions to customize the JSAPI according to specific business requirements. Using UC Webview on Android has the ability to solve system-level Webview Crash.

The mPaaS H5 offline package preloads HTML static resource compression to the client or to the local via WIFI, and loads directly from the local when used to maximize performance. Combined with mPaaS MDS push service, grayscale release and forced update can be realized, making service development more flexible.

MPaaS applets can allow you to develop your own App using applets technology and build your own App ecosystem, that is to say, make it meet the ability of super App in one step. As the underlying use is alipay small program technology, you can seamlessly transfer Alipay small program to their App.

At present, the IDE of Alipay small program has supported multiple channels, including Alipay, mPaaS and Dingding. Click to switch and release the small program to the corresponding platform easily.

Click the link below to get the Demo source code and learn more about mPaaS HTML5 container & Offline package features and highlights.

• The Demo source address: https://github.com/alipay/mpaas-demo
• Demo application: http://mpaas2019.mikecrm.com/otOU1k1