Some experiences and summaries of hybrid APP cross-platform development in 2017-2018

Hybrid App mainly relies on mutual calls between JS and Native, and realizes the mechanism of "develop once, run in multiple places" from the development level, making it truly suitable for cross-platform development. Hybrid App combines the advantages of Native App's good user experience with the low-cost advantages of Web App's cross-platform development using HTML5.

At present, many Hybrid Apps have been successfully developed. For example, well-known mobile applications such as Meituan, iQiyi, and WeChat all adopt the Hybrid App development model.

1. Comparison of three methods of mobile application development

There are currently three main ways to develop mobile applications:

• Native App: Local application (native App)

• Web App: web application (mobile web)

• Hybrid App: Hybrid App

Figure 1: Three mobile application development methods

As shown in Figure 1, the specific comparison of the three mobile application development methods is shown in Table 2:

Table 2: Comparison of three mobile application development methods

2. Hybrid development application scenarios

(1) Compromise - If an enterprise uses a hybrid development approach, it can combine the strengths of both Native and web. On the one hand, Native allows developers to take full advantage of all the different features and functions provided by modern mobile devices. On the other hand, all code written in Web languages ​​can be shared between different mobile platforms, making the development and daily maintenance process centralized, shorter, and more cost-effective.

(2) Internal skills - Many companies have web development skills. If you choose a hybrid development approach, with the support of the right solution, web developers can build apps using only web skills such as HTML, CSS and JavaScript while providing a native user experience.

(3) Consider the future - HTML5 is rapidly improving in both usability and functionality. Many analysts predict that it may become the default technology for developing front-end apps. By writing the majority of an app's code in HTML and using native code only when necessary, companies can ensure that their investments today will not become obsolete tomorrow as HTML becomes more feature-rich and can meet a wider range of mobile requirements for modern businesses.

3. Hybrid development framework and hierarchical structure diagram

Hybrid development structure diagram

1) Mobile terminal web shell (hereinafter referred to as "shell"): The shell is a rendering engine that uses the operating system's API to create embedded HTML. The main function of the shell is to define the interface between Android applications and web pages, allow JavaScript in web pages to call Android applications, provide Android APIs for web-based applications, and embed the Web into Android applications.

2) Front-end interaction js: including basic function js and business function js.

3) Front-end adapter: adapt to different terminals: Pad, android, ios, wap.

Hybrid development hierarchy diagram

1) Page Loading

1. The page container (XdjaWebView) class is the core and foundation of the entire framework. It is mainly used to implement page loading and provide support for subsequent operations after the page is loaded, such as file downloading, js support, file uploading, data caching, progress bar, etc.

2. Page loading interface: Track the loading process of the page; for example: page loading progress percentage, page loading start, page loading error, page loading completion, etc.

2) JS calls Android functions

1. Web page: The page calls the specific method in the js interface;

2. JS interface: call the specific methods corresponding to each other in the Android interface;

3. Android interface: directly call the functions integrated in the framework, or customize the functions in the application system through the framework interface (for example, exit, return key response, etc.); the return result or process information of the upgrade function can be obtained in the client through the upgrade interface.

4. XdjaClientHelper: If you need to notify the js method of the return value of the method in the framework, you can use the XdjaClientHelper class to achieve it;

3) Application system calls JS function

The application system uses XdjaClientHelper to call js functions;

4) Application system calls HDF function

The application system can call the framework's integrated tools, message prompt boxes, upgrade modules, and common mobile phone functions such as making calls and sending text messages.

4. Performance Optimization

1) Single page

Login, home page and shared code (style files, JS files, page loading code) are placed in the index page. A fake page (transition page) is displayed before the page is displayed. After the first screen is loaded, the fake page disappears.

Although the pages are divided into different pages according to the business modules, they are displayed on the same page, namely the index page. Specifically, when a certain function page is needed, the page is requested to the index page in the form of AJAX, and deleted after use.

With one page, common CSS and JS will only be loaded once.

2) CSS, JavaScript

In this hybrid development framework development, all CSS is written in one file.

CSS and Jquery Mobile related files are written at the top of the index page, and other public JS are written at the bottom of the index page to prevent JS from blocking page loading. Each business logic JS is written at the bottom of each business page.

After development is completed, CSS and JS need to be compressed to reduce the initial request time when users use it.

3) @font-face

In this hybrid development, @font-face is used to implement icon fonts and uniformly control the color and size of icons.

Advantages of using @font-face: reducing page traffic caused by using images and greatly shortening page response time; icons can be changed in size and color at will without causing distortion.

Note: All icons need to be in vector SVG format.

Usage restrictions: Only applicable to pure color flat icons. More complex images such as background images should still use images.

4) Local Storage

HTML5 local storage LocalStorage is mainly used to store recent query records in hybrid development.

Take the recent query on the home page as an example. Every time a user clicks a module in the comprehensive query, the icon and the corresponding function name are stored in LocalStorage. If the user does not clear it, the data in LocalStorage will always be stored locally. The next time the app is opened, the recent query records will be read from LocalStorage.

The advantage of using LocalStorage is that it does not require background interaction and is fast.

5) Asynchronous AJAX

Many implementations in this development are implemented by using AJAX. First, when displaying a page, the frame is displayed first, and then the content is loaded asynchronously; second, in the paging function, a part of the list of simple items is displayed first, and more content is obtained by pulling up. Third, every time a new function is opened, the page obtains the content of the new page in the form of AJAX and displays it.

Asynchronous AJAX provides a better interactive experience and is also faster from a performance perspective.