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:
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:
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.
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.
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:
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:
The core part of the entire Nebula framework is the H5 container. Let’s take 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 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:
Only using traditional H5 technology to display online pages is vulnerable to the network environment, which reduces the performance of H5 pages.
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.
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 https://xxxxxxx.h5app.example.com
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.
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.
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.
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.
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.
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:
Note: IOS user code scanning and downloading is not supported temporarily