In March 2018, Huawei and 9 mobile phone manufacturers, including Xiaomi, Oppo and Vivo, jointly released the fast Application Alliance standard. Fast application is a new type of application based on mobile hardware platform. It requires no installation, is point-and-use, and has native application experience (performance, system integration, interaction, etc.). At the same time, fast application has achieved standardization and unification among mobile phone manufacturers in terms of development specifications, ability access and developer services at the beginning of its birth, which has greatly reduced the adaptation cost of developers.

Compared with traditional applications, quick applications have the following characteristics:

  • Instant: Point-of-use, users do not need to wait

  • Everywhere: Deep integration with mobile usage scenarios, with entry points Everywhere (search, smart Assistant, smart Recommendation, app market, browser…)

  • Efficient: a quasi-front-end development method with high efficiency

The picture above shows the overall framework of fast application. Application form and scene entry are on the top, fast application engine is in the middle, and OS(operating system) infrastructure and hardware are on the bottom. At the level of execution path, there are standard HTML5 ways to support common Web scenes (generally through Webview components of the system or customized Webview), and JS (JavaScript) +Native ways to support lighter and faster experience. The following describes the architecture of the fast application engine in three aspects.

The front-end design of Kuaishi draws on and integrates the design ideas of mainstream front-end frameworks (Vue, React, etc.) : Applications are built in a component-based way, MVVM design mode with data binding as the core, performance is improved in the way of V-DOM, and a simple and clear vUe-like template is selected. At the same time, the layout has been streamlined. From the perspective of new application forms, mapping native UI, and open capabilities, a set of component and API specifications need to be defined to facilitate the development of this rapidly developed application.

As a complete application form, fast applications can be deeply integrated with the system, run as native applications, and interact with the system. There are two forms of quick application: full-screen independent application form and embedded card form. In the form of a standalone application, the user experience is like a native application, with complete life cycle management, page management, routing, etc. Quick applications can parasitize Android activities, pages parasitize Fragment, and manage instances through independent background services. The card is another form, embedded in every corner of the system as an independent local control through embedded SDK, lightweight display of dynamic content. In terms of security isolation, sandbox mechanism, process isolation, permission control, combined with the support of the operating system layer can achieve better security guarantee.

In terms of interactive experience, resource cost and stability, fast application introduces native rendering path to realize the effective combination of front-end development + native rendering and platform capabilities.

Different from other cross-platform frameworks of application layer, fast application is rooted in mobile system and can achieve deep integration from chip operating system to cloud. Taking the acceleration of startup performance as an example, the optimization of network link layer can greatly accelerate the startup speed of fast applications through the collaborative rendering of cloud and terminal. At the same time, the unique capabilities of the hardware platform can be integrated to further improve the experience. For example, huawei mobile AI chips can be combined to integrate NPU computing power into the fast application engine, so that AI scenarios (face recognition, image hyperclassification, etc.) can be executed with low latency and high performance on the end side, while effectively protecting user privacy and saving bandwidth.

Using startup acceleration as an example, let’s share some of the work done in experience optimization.

Instant user experience is one of kuaiapp’s core competitiveness. According to Google, pages open for more than three seconds lose 13% of users, and pages open for more than six seconds lose 60%. Conversely, a 1-second reduction in opening time increases conversion by 27%. At present, it takes about 2 seconds or even longer for the quick application to be fully displayed from the user’s click to the home page.

Startup process:

1) At the first startup, users click to trigger the download of the quick application package, and at the same time do the engine initialization related work. When the entire package is downloaded and verified, the JavaScript file for the first page that needs to be displayed is loaded and rendered. In this process, packet download is the bottleneck. According to the measured data, the packet download time of about 200K in normal network is at least 400 milliseconds, and the packet download time of 2M is more than 2 seconds.

2) Page rendering includes JavaScript loading, the execution of page and JavaScript framework logic, layout calculation, and finally the drawing of native UI controls. Among them, there will be one or more network requests to the application’s own three-party server when the logic in the page is executed, and the data returned by the request will drive the page to be rendered again until the content of the first screen is fully displayed.

Here, network request, JavaScript execution, typesetting and rendering are not simply serial relationships, but interweave together in parallel to affect the rendering performance of the whole page, and are strongly related to the logic of page design, network status and the running state of equipment.

Optimization of startup performance involves a lot of content, and two optimization schemes are mainly introduced here:

Streaming load – Solve network latency problem

To start a quick application for the first time, you need to download the QUICK application program package (RPK) from the cloud, decompress and verify the package, and then load and execute the corresponding JavaScript file. Excluding the effects of server response speed and network conditions, the download delay is proportional to the size of the file package. In order to reduce packet latency, we introduce the streaming loading method of end-cloud collaboration.

Streaming loading:

Streaming loading is to transfer the resources needed to start the network flow preferentially. After this part of the resources are transferred and decompressed and verified, the rendering of the home page can be immediately executed. Subsequent transfers of network streams continue until the download process is complete. The resources required to render the first time are often small, so streaming loads can significantly reduce download latency, and the larger the package, the greater the effect. Streaming loading needs to solve the following problems:

1) How do you decide what to download first?

Normal startup needs fixed resources (common resources, global configuration files, home page JavaScript files, images, etc.), which are placed in the front of the file when the application is packaged. When a non-home page is opened for the first time, we need to arrange the resources needed for that page to the front of the network stream during transmission.

2) What if I access an undownloaded resource?

The network condition is uncontrollable, and there is a certain probability of high delay. If you switch from page A to page B for the first time and the resources required by page B have not been downloaded, wait during the page hopping process and send A request to the service to schedule page B resources. After the resources on page B are downloaded, continue the page hopping process.

3) How to solve the signature problem?

In the original signature mode, the whole package is signed and the verification can be performed only after the whole package is downloaded, which cannot meet the requirements of streaming loading. To solve this problem, we introduce the two-level verification method: generate hash values for different fragments of the package separately, combine all hash values into a hash file, and sign the hash file. Before downloading the Hash file, transfer it first and verify the validity of the Hash file. In the streaming loading process, no matter which fragment is downloaded, the Hash value can be calculated immediately and compared with the corresponding Hash value in the Hash file to verify its validity.

Snapshot – Fixes first screen rendering issues

Rendering the home page is also a time-consuming process that involves JavaScript loading, page and JavaScript framework logic execution, layout calculation, and eventually native UI control rendering. Here we introduce a snapshot mechanism to speed up the rendering process.

Snapshot:

First, the desired page is pre-rendered in the cloud to generate a snapshot, an intermediate format for rendering. It does not require JavaScript operations, after parsing can directly and quickly for page data request, UI layout and drawing. The snapshot format is also very small after compression, with around 50K JavaScript files generating around 3K snapshots.

Because the snapshot file is very small, it can be distributed as part of the metadata of the quick application to the corresponding quick application startup portal. For example, when a user searches for a quick application in the app market, the snapshot is loaded with the name of the quick application and the package download link.

When the quick application is first loaded and started, the download address of the package and the snapshot file are sent to the quick application engine. When the engine requests the quick application package to be downloaded, it loads the parse snapshot and renders the first screen. When the package is downloaded, the standard rendering process continues on the basis of the snapshot.

Optimization effect display

In the case of “Look at The Comics”, these optimizations have reduced the cold startup time of the app currently reviewed by nearly half (from ~2 seconds to ~1 second), and more scenarios will be rolled out over time.

Point-of-use is the trend in applications and services. As a new application form, fast application achieves better user experience by combining dynamic front-end framework, native rendering capability, operating system and chip level integration. Of course, experience optimization, scene expansion is never ending, and we will continue to work hard and explore optimization to support a better experience.

Huawei Fast Application IDE is an integrated development environment for fast applications launched by Huawei. It provides fast application development, construction, debugging, testing, and release capabilities based on fast application vendor alliance standards.

Quick application development process:

  1. Prepare a mobile phone, a PC (Windows or apple)

  2. Install quick Application IDE: http://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_devprepare_install_tool

After the installation is complete, support for starting the IDE will see the following screen:

As you can see, this is a typical IDE structure, and then you start developing a quick application.

Create a quick application project, we use the most basic HelloWorld template, click the menu “file -> New Project”, enter the project information to complete the creation.

After the project is created, you can see the layout of the IDE’s main functions. This is a typical common IDE layout structure: the menu bar, the control bar, the resource management area, the code editing area, the preview area, the console area, these are common developers, easy to use.

It’s time to start coding. Here is a simple business logic for a movie review app: The front page of the app is a list of movies, click into it, you can view the corresponding movie reviews. First of all, we developed the movie list on the home page. We directly set Hello. Ux in the template as the home page of movie review, and then added a sub-page of movie review details named detail.ux. Place the required image resources in the Common directory. The review text is written in the UX source file. These actions can be done using the right click in the resource management area.

Next, configure the page and path, refer to the standard specification, add the detail page in the manifest. Json file router and display, change Hello to “movie review”, and add “details” at the same time.

At this point, the structure of the application is complete, and the coding is now complete. The first page needs to display the List of movies. Here we use the List[] array, and use the List component of the quick application to loop through the image $item.image and the title $item.title of the movie review. The goDetail() function jumps to the detail.ux movie review page when clicked. Here is a surprise, IDE coding assistance provides very good support, based on fast application standards, code association, complement, grammar detection and modification suggestions, definition and reference jump, are very good support, save a lot of standard syntax check work.

Complete the development of the front page of the movie review list, below is the detailed page of the specific movie review. Detail.ux is a detail page that uses a simple text component to display text, but it’s also possible to do more styling now, adding images or movie and video clips, and so on. Here we directly write a few movie review information, on the completion of the development of the details page.

Next is to see the running effect, click the “preview” control button, in the preview area can see the running effect, you can write code, while seeing the real-time running effect, this function is very practical, but also to solve the developer complained that there is no preview, not easy to develop the problem.

The debugging function of the fast application IDE provides Source breakpoint debugging, Element Element review, NetWork NetWork packet capture, Log analysis and other features. Click the debug button (F5) to start the debug process, as shown in the figure below. It is also a typical DevTools mode, which is more commonly used. Here breakpoint debugging and Inspect are tried.

Directly in the control bar, click the “debug” button to enter the debugging.

Click “Inspect” in the control bar, the mobile phone pushed will run, and a running box will pop up on the desktop. At this time, you can also pull out the mobile phone and continue to use it.

At this point, the development of the quick app is complete. Move on to other IDE features. There is a test button in the control bar. Click the test button. After successful login, click the “button” in the pop-up panel to generate automated test tasks with one click. About 10 minutes or so, the test is complete, you can also view the detailed test report. As can be seen from the test report, the test of Kuaiapp was carried out on the cloud, covering mainstream models and Android versions. The test items were also rich, and every test page was covered. You can see the detailed steps in the report. This solves the problem that there is no mobile phone coverage compatibility, and the test work is very practical.

Finally release fast application, you can directly enter this address: https://www.quickapp.cn/ you can release this fast application on the official website of the manufacturer alliance, bind the developer account of each manufacturer, release once can be used on the shelves of all the mobile phone manufacturers of the alliance.

Huawei Fast Application Team is responsible for the construction and research and development of fast application engine, fast application IDE and cloud fast application storage warehouse. Meanwhile, it provides basic capacity support for Huawei fast service and provides support for users to bring point-of-use services in all scenarios under the whole Huawei product ecosystem.