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 consideration-- hybrid  development method, can set native  and Web both The director. On the one hand, NATIVE 

(2) Internal skills-- WEB  Span style= "font-family: the song Body;" > development skills. If you choose  , development method, With the support of appropriate solutions, WEB  , Span style= "FONT-FAMILY:CALIBRI;" >CSS&NBSP, and   javascript   et   skills, you can build   app 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 write Most of your App's code in HTML, and you use Native code only when you need it , Companies will be able to ensure that their investments today will not become obsolete tomorrow, as HTML functionality 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 (hereinafter referred to as "shell"): Shell It is the  API  html 's rendering engine. The main function of Shell is to define android interface between the application and the Web page, allowing the javascript call android application, provided based on web Span style= "font-family: the song Body;" The android api web embedding into android application.

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 entire framework, is primarily used to implement page loading and to support subsequent operations after the page is loaded, such as file downloads,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) JScalledAndroidfunction

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 in the framework, or Customize functions in the application system via the framework interface (for example, exit, return key response, etc. ) Where the return result or process information of the upgrade feature can be obtained through the upgrade interface in the client.
4. Xdjaclienthelper: If you need to notify the JS method of the method return value in the frame , you can pass the xdjaclienthelper class to implement;

3)Application System callsJSfunction

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

4)Application System callsHDFfunction

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, thefake 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 written in the index page header, the rest of the public JS written in 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, unifying the color and size of the icons.

Use @font-face Advantages: Reduce the amount of traffic generated 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 StorageLocalstorage

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)AsynchronousAJAX

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