Author: Liu Wentao

This article is produced by a member of YFE, please respect the original, please contact the public account (ID: yuewen_YFE) for authorization to reprint, and indicate the author, source and link.

At the beginning of this year, our company started the overseas tour of qidian brand, named “Webnovel”.

At present, PC/M station/App are all in rapid iteration. Qidian overseas App was developed based on Hybird technology. As the starting point of the front-end development of embedded page in overseas Hybird App, from the unfamiliar version 1.0.0 to the proficient version 2.0.0, the development method of embedded page in overseas version has been improving, striving to maximize the page performance and user experience of Native App.

Before explaining the specific implementation and optimization of embedded page in qiqiyuan Overseas App, let’s first understand the specific scheme of the implementation of the whole Hybird App.

I. Implementation scheme of Hybrid App

1. What is Hybrid App?

Hybrid App refers to an App between WebApp and native-App, which has both “advantages of good user interaction experience of Native App” and “advantages of cross-platform development of WebApp”.

2. Why Hybrid App

  1. Web implementation is relatively simple, a set of code, compatible at both ends;
  2. The product is still undergoing rapid iteration with great variables, while the cost of Native App development is relatively high.
  3. Web development time is shorter, reduce costs, can cope with rapid product iterations;
  4. The development method of Hybrid App has been well applied in other projects of the company, and the technical solutions have been settled.

The above points are the main reasons for the development of overseas App using Hybird mode.

Ii. Overall structure

1. Hybird implementation scheme

The Hybird App is developed using native iOS, native Andoird, and Web pages that are “embedded in the App.”

2. Complete SDK tools

  1. Offline package: Web page resources are embedded in App local storage in the form of offline packages. When accessing a page, the WebView does not need to make an additional network request for a locally stored resource. The only remaining requests are the Json dynamic data pulled by Ajax, the image resources carried by rendering this data, and the necessary buried requests. This allows Web pages to open quickly even on weak networks;

  2. Perfect JSSDK: Use JSSDK to interact with App, transparently and cross-platform use client capabilities, form an interactive closed loop, and give users a good interactive experience;

  3. Offline package packaging tool: The automatic package packaging tool can quickly produce offline packages. Without manual intervention, the correctness of App offline package can also be guaranteed;

  4. Perfect hot update mechanism: After the App client detects the offline package update, the client updates silently (users have no perception), which solves the problem that the Native App page cannot be patched and can only be issued to fix the Bug.

3. Perfect background system platform

  1. One-click packaging: visualized embedded offline package packaging tool, realizing one-click packaging to produce offline packages;

  2. Disaster recovery downgrade: Quickly roll back to the earlier version. If any problem occurs, quickly go offline to the new version.

  3. Data collection: perfect data collection platform, optimize user experience through data analysis;

  4. Gray update: Support gray update based on configuration;

  5. Continuous integration: the system platform is still in continuous integration, in order to provide a better development process;

Third, the optimization of embedded pages

Most of the pages of our overseas apps are implemented by Hybird. In terms of page performance and user experience close to Native apps to the maximum extent, I will focus on the following two parts:

  1. Global optimization of inline page – parallel loading of interface pages;
  2. Details page load optimization – localStorage;

1. Inline global optimization – interface page loading in parallel

The previous development method of inline page is to make Ajax request in JS to pull data, and then use template engine to splicing template, insert it into the page, and then render the page by WebView.

As you can see from the figure above, although the page is quickly displayed as a placeholder, the entire operation is sequential and the page cannot be seen until the Ajax data is returned. The time between the WebView and the Ajax request is wasted.

If we can send Ajax requests for the current page when the WebView launches, we can get our data ahead of time, and we can take advantage of the idle time between launching the WebView and sending Ajax requests. The above process now looks like this:

When the WebView starts, the App obtains the address of the Ajax request according to the Url address, so as to send the request in advance. When the request is sent out by the page itself, it intercepts Ajax and determines whether the data has been requested in advance. If so, render the page based on the data returned by the pre-requested Ajax; if not, continue sending Ajax and wait for the data to return before rendering the page.

In doing so, we take full advantage of the time between App WebView startup and Ajax sending to fetch data. Interface requests are loaded in parallel with the page, speeding up the page display.

Based on the previous data set, we can see that the average page display time is almost 300ms faster. Without affecting the normal page loading process, the serial operation is changed into parallel operation, which makes full use of spare time, greatly shortens the time of white screen of embedded page, and enables users to see the page content of our starting overseas App more quickly, with remarkable effect.

2. Detail page load optimization – localStorage

The interface and page resources are loaded in parallel, so that the speed of embedded page rendering is much faster, but due to the wide overseas user area, the interface loading time is uncertain, the page will still have a white screen, the next thing we need to do is specific page, special processing.

In the whole starting point of the overseas App page, the page view of the details page is relatively large, which is also an important page in the whole site, so the speed of page presentation is very important. Therefore, in this iteration, we mainly made special processing for the detail page.

First, let’s look at the business shape of the detail page. The data of the book details page is relatively stable and does not change frequently, but it takes time for the interface data to be returned. Therefore, can we make the data of the book details page be stored locally first in order to achieve a fast display effect, and at the same time, issue Ajax interface, and then correct the old data on the page when the data is returned?

For localStorage, we introduce localStorage for localStorage for the following reasons:

  1. The localStorage has a large data capacity.
  2. LocalStorage is a persistent storage;
  3. LocalStorage currently has good mobile browser support.

As can be seen from the figure above, when the user accesses the book details page for the first time, no corresponding book data page is displayed in the localStorage according to the normal logic, but at this time, we will cache this data in the localStorage. When the user accesses the detail page of the same book for the second time, we quickly find the information data of the corresponding book detail page in localStorage according to the Key value of bookId, and splicing the template based on the cached data to render the page. At the same time, the Ajax request is continued. When the data is returned, it is compared with the data of localStorage based on the Diff algorithm. If the data is consistent, no processing is done; if not, the page is re-rendered based on the new data and the data in localStorage is updated to return the data for the new Ajax. The comparison of specific effects is shown below. The left side is the one without secondary acceleration, and the right side is the one with secondary acceleration:

You can see that the placeholder is still visible the first time the page is displayed, but when the page is opened the second time it is directly displayed, the effect is very obvious.

The end ~ ~

I worked on the front-end development of Hybird page for more than half a year, and made a lot of optimization for the overseas version of App, in order to bring better experience to users. But there’s nothing we can do about Hybird’s technology’s own bottlenecks. Therefore, at present, our team is trying to transform the technology from Hybird to React Native, in order to further improve user experience.

The same continues the last share: a detail optimization can determine the quality of the product, good user experience, will attract more users, get more praise.

The following is the starting point overseas version of the visit address, please try hard to stamp stamp ~ ~ ~ 👇

Qidian Overseas App download: please go to Google Play/App Store [US] to download

The starting point for overseas web site: https://www.webnovel.com

Starting point overseas edition m station: https://m.webnovel.com

To share more, please follow YFE: