1. Overview of mixed development

Hybrid App mainly uses JS+Native to call each other. From the development level, the mechanism of “one development, multiple operations” is realized, making it truly suitable for cross-platform development. Hybrid App has both the advantages of good user experience of Native App and low cost of cross-platform development of Web App using HTML5.

At present, many Hybrid apps have been successfully developed, such as Meituan, IQiyi, wechat and other well-known mobile apps, all adopting the development mode of Hybrid App.

2. Comparison of three ways of mobile application development

There are three main ways of mobile application development:

  • Native App: Native App
  • Web Apps: Web Applications (mobile Web)
  • A Hybrid App

 

Figure 1: Three mobile application development approaches

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

 

Table 2: Comparison of three mobile application development approaches

3. Mixed development application scenarios

(1) Compromise consideration — If enterprises adopt Hybrid development method, they can combine the advantages of both Native and Web. On the one hand, Native allows developers to take advantage of all the different features and functions that modern mobile devices offer. On the other hand, all code written in the Web language can be shared between different mobile platforms, making the development and routine maintenance process centralized, shorter, and more cost-effective.

(2) Internal skills — Many businesses have Web development skills. With a Hybrid approach, Web developers can build apps and provide a Native user experience by simply using Web skills such as HTML, CSS and JavaScript with the support of appropriate solutions.

(3) Think about the future — HTML5 usability and functionality are improving rapidly. Many analysts predict it could become the default technology for developing front-end apps. By writing most of the App code in HTML and using Native code only when needed, companies can ensure that their investments today will not become obsolete tomorrow as HTML becomes richer and can meet a wider range of mobile requirements for modern enterprises.

4. Mix development frameworks and hierarchies

Mixed development structure diagram

 

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

2) Front-end interactive JS: including basic function JS and business function JS.

3) Front-end adapter: suitable for different terminals: Pad, Android, ios, WAP.

Mixed development hierarchy diagram

 

1) Page loading

  1. Page container (XdjaWebView) class, is the core and foundation of the entire framework, mainly used to realize the loading of the page, and provide support for the subsequent operations after the page loading is completed, such as: file download, JS support, file upload, data cache, progress bar, etc.;
  2. Page loading interface: tracking the loading process of the page; For example, page loading progress percentage, page loading start, page loading error, page loading complete, etc

2) JS calls Android functions

  1. Web page: the page calls the specific method in the JS interface;
  2. JS interface: call specific methods corresponding to one of the Android interfaces;
  3. Android interface: directly invoke functions integrated in the framework, or customize functions in the application system through the framework interface (for example, exit, return key response, etc.); The result or process information of the upgrade function can be obtained through the upgrade interface on the client.
  4. XdjaClientHelper: If you need to notify a js method of the return value of a method in the framework, you can do so through the XdjaClientHelper class;

3) Application system call JS function

Application system through XdjaClientHelper to achieve the js function call;

4) The application system calls the HDF function

The application system can call the tool classes integrated with the framework, message prompt box, upgrade module, and common functions such as calling and sending messages on mobile phones.

5. Performance optimization

1) Single page

The login, home page, and common code (style files, JS files, page loading code) are placed in the index page. The Fake page (cut-scene 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 service modules, they are displayed on the same page, that is, the Index page. Specifically, when a functional page is needed, the page will be requested to the Index page in the form of AJAX, and deleted after use.

With a page, common CSS and JS are loaded only once.

2) CSS, JavaScript

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

The CSS and Jquery Mobile files are listed at the top of the Index page, and other common JS files are listed at the bottom of the index page. Prevents JS from blocking page loading. Each business logic JS is written at the bottom of each business page.

After development, CSS and JS need to be compressed to reduce the initial request time.

3) @ the font – face

In this mixed development, @font-face is used to realize the font of the icon, and unified control of the color and size of the icon.

Advantages of using @font-face: Reduce the page flow caused by the use of pictures, greatly shorten the page response time; ICONS can be changed in size and color without distortion.

Note when using: all ICONS need to be in vector SVG format.

Restrictions: Only applies to flat ICONS with solid colors. Images are still used for more complex images such as background images.

4) LocalStorage

HTML5 LocalStorage LocalStorage is mainly used to store recent query records in mixed development.

Take the home page recent query for example, users click a module in the comprehensive query every time, through LocalStorage icon and the corresponding function name stored, if the user does not clear, LocalStorage data is always local. Read the latest query records from LocalStorage the next time you open the application.

The advantage of using LocalStorage is that there is no background interaction and the speed is fast.

5) Asynchronous AJAX

Many of the implementations in this development are done using AJAX. First, when the page is displayed, the frame is displayed first, and then the content is asynchronously loaded. Secondly, in the paging function, part of the simple item list is displayed first, and more content is pulled up. Again, every time a new feature is opened, the page retrieves and displays the content of the new page in the form of AJAX.

Asynchronous AJAX, better interactive experience. It’s also faster from a performance standpoint.