Some experience and summary of Hybrid app hybrid development

Write in front:

Because of business needs, access to a hybrid app hybrid development project. At that time was the first contact with mixed development, have some experience and summary, you are welcome to Exchange Learning ~

1. Overview of Hybrid development

Hybrid app mainly to js+native both call the main, from the development level to achieve "one-time development, multi-run" mechanism, become a truly suitable for cross-platform development. The Hybrid app combines the benefits of a good user experience with the native app, as well as the low cost benefits of Web apps using HTML5 cross-platform development.

At present, there are many hybrid app development successful applications, such as American Regiment, Iqiyi Art, and other well-known mobile applications, are using the hybrid app development model.

2, mobile application development of three ways to compare

There are currently three main ways to develop mobile applications:

• Native app: Native app (native app)
• Web App: Web App (mobile web)
• Hybrid app: Hybrid app (Hybrid app)

Figure 1: Three ways to develop mobile apps

As shown in 1, three mobile application development methods are compared as shown in table 2:

Table 2: Comparison of three mobile application development methods

3. Mixed Development Application Scenario

(1) Compromise considerations-if the enterprise uses the Hybrid development method, it can set native and the Web both the director. On the one hand, Native allows developers to take full advantage of all the different features and functions offered by modern mobile devices. On the other hand, all code written in the Web language can be shared across different mobile platforms, making development and routine maintenance processes centralized, short, and cost-effective.

(2) Internal skills-many businesses have web development skills. If you choose the Hybrid development approach, with the support of a suitable solution, Web developers can build apps with only web skills such as HTML, CSS, and JavaScript, while providing a Native user experience.

(3) Consideration of future--HTML5 availability and functionality is rapidly improving. Many analysts predict that it may become the default technology for developing front-end apps. If you use HTML to write most of the APP's code, and if you need it only with Native code, the company can ensure that today's input will not become obsolete tomorrow, as HTML becomes richer and can meet a wider range of mobile requirements for modern businesses.

4. Hybrid development Framework and Hierarchy Chart

Hybrid development Structure diagram

1) Mobile terminal Web shell ("shell"): Shell is a rendering engine that uses the operating system's API to create an embedded HTML. Shell's main function is to define the interface between the Android application and the Web page, allowing JavaScript in the Web page to call the Android app, providing the Android API for Web-based applications, and embedding the Web into Android apps.

2) Front-end interaction JS: including the basic function JS and business functions JS.

3) Front-end adapter: Suitable for different terminals: Pad, Android, iOS, WAP.

Hybrid Development Hierarchy Chart

1) Page load

1. The page container (Xdjawebview) class, which is the core and foundation of the whole framework, is mainly used to implement the loading of the page and to support the subsequent operation after the page loading, for example: File download, JS support, file upload, data cache, progress bar, etc.
2. Page loading interface: the page loading process tracking; For example: page load progress percentage, page loading, page loading error, page loading complete, etc.

2) JS call Android function

1. Web page: Page calls the specific method of JS interface;
2. JS Interface: Call the Android interface in one by one corresponding to the specific method;
3. Android interface: Directly invoke the integrated functions of the framework, or through the framework interface in the application system to customize functions (such as exit, return key response, etc.), where the upgrade function of the return or process information, can be obtained through the upgrade interface in the client.
4. Xdjaclienthelper: If you need to notify the method return value in the frame to the JS method, you can be implemented by the Xdjaclienthelper class;

3) Application system call JS function

The application system realizes the call of JS function through Xdjaclienthelper;

4) Application system call HDF function

The application system can call the framework Integrated tool class, Message prompt box, upgrade module and phone texting and other functions commonly used.

5. Performance optimization

1) Single page

Login, home page and common code (style file, JS file, page load loading code) and so on the index pages. Page display before the fake page (cut-out page), the first screen loaded, the fake page disappears.

Although the page is divided into different pages according to the business module, the display will be displayed on the same page as the index page. Specifically, the need for a feature page when the page in the form of Ajax request to the index page, the use is complete delete.

Using a page, the public CSS and JS will only be loaded once.

2) CSS, JavaScript

In the development of this hybrid development framework, CSS is all written in a single file.

CSS and jquery mobile related files are written on the index page header, the rest of the public JS written at the bottom of the index page. Prevent JS blocking page from 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 when users use.

3) @font-face

This hybrid development uses the @font-face to achieve the font of the icons, unified control of the color and size of the icons.

Use @font-face advantages: Reduce the amount of traffic caused by the use of images, greatly shorten the page response time, icons can be arbitrarily changed size and color, without causing distortion.

Use Note: All icons need to be in vector svg format.

Usage Limit: Applies only to flat-colored icons. The picture is still used for more complex pictures such as background maps.

4) Local Storage Localstorage

HTML5 Local storage localstorage, which is mainly used for storing recent query records in hybrid development.

Take home The most recent query, the user every time in the comprehensive query click a module, through the Localstorage icon and the corresponding function name stored, if the user does not clear, the data in the Localstorage is always present locally. The next time you open the app, read the latest query records from Localstorage.

The advantage of using localstorage is that it is faster to do no background interaction.

5) Asynchronous Ajax

Many implementations in this development are done by using AJAX. First, when the page is displayed, the frame is displayed, and then the content is loaded asynchronously, and secondly, in the paging function, a partial list of simple items is displayed, and the pull-up gets more content. Again, each time a new feature is opened, the page gets the content of the new page in AJAX form and shows it.

Asynchronous Ajax, the interactive experience is better. From a performance perspective, the speed is also faster.

Some experience and summary of Hybrid app hybrid development