Some experiences and summary of hybrid development of HybridAPP

1, Overview of mixed development: HybridApp is mainly based on JS+Native mutual call, which realizes the mechanism of "one development and multiple operations" from the development level and becomes a real cross-platform development. HybridApp has the advantages of good user experience of NativeApp and low cost of cross-platform development of WebApp using HTML5. At present, many Hybridapp applications have been successfully developed, such as Meituan, iQiyi, WeChat and other well-known mobile applications, all of which adopt the HybridApp development model. 2. The three ways of mobile application development compare the ways of mobile application development. At present, there are three main ways: NativeApp: Local App: Web App: Web App (Mobile web)HybridApp: Hybrid App 1: The three ways of developing mobile applications are shown in Figure 1. The specific pairs of three mobile application development methods are shown in Table 2: Table 2: Comparison of three mobile application development methods 3. Compromise of mixed development application scenarios (1)-If enterprises use mixed development mode, they can integrate the advantages of both Native and web. On the one hand, Native allows developers to make full use of all the different features and functions provided by modern mobile devices. On the other hand, all codes written in Web language can be shared among different mobile platforms, which makes the development and daily maintenance process centralized, shorter and more economical and efficient. (2) Internal strength-Many enterprises have Web development skills. If the mixed development mode is chosen, with the support of appropriate solutions, Web developers can build an app by using Web skills such as HTML, CSS and JavaScript to provide a native user experience. (3) Considering that the usability and functions of HTML 5 are improving rapidly in the future. Many analysts predict that it may become the default technology for developing front-end applications. If most of the App's code is written in HTML, and only the native code is used when necessary, then the company can guarantee that their investment today will not be out of date tomorrow, because the HTML function becomes richer and can meet a wider range of mobile needs of modern enterprises. 4. Mixed development framework and hierarchical structure diagram 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 application and Web page, allow JavaScript in web page to call Android application, provide AndroidAPI for web-based application, and embed web into Android application. 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. The mixed development hierarchy diagram 1) page loading XdjaWebView class is the core and foundation of the whole framework, which is mainly used to realize page loading and provide support for subsequent operations after page loading, such as file downloading, js support, file uploading, data caching, progress bar and so on. Page loading interface: tracking the loading process of the page; Such as percentage of page loading progress, percentage of page starting loading, percentage of page loading errors, percentage of page loading completion, etc. 2)js calls the Android function webpage: the webpage calls the specific method in the js interface; JS interface: call the specific method in the android interface; 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 at the client through the upgrade interface. XdJaclienthHelper: If you need to notify the return value of the method in the js method framework, you can do it through the XdJaclienthHelper class; 3) the application system calls the js function, and the application system calls the JS function through XdjaClientHelper; 4) The application system calls the HDF function. The application system can call the tools, message prompt boxes, upgrade modules integrated in the framework, as well as the common functions such as calling and texting on mobile phones. 5, performance optimization 1) single page login, home page and * * * code (style file, JS file, page loading code) on the index page. The fake page (cut page) is displayed before the page is displayed, and disappears after the first screen is loaded. Although the page is divided into different pages according to the business module, it will be displayed on the same page, that is, the index page. Specifically, when a function page is needed, request the page from the index page in the form of AJAX and delete it after use. For a page, CSS and JS will be loaded only once. 2)CSS and JavaScript In the development of this mixed development framework, all CSS is written in one file. The related files of CSS and JqueryMobile are written at the top of the index page, and the rest are written at the bottom of the index page. Prevents JS from blocking page loading. Business logic JS is written at the bottom of each business page. After the development, CSS and JS need to be compressed to reduce the initial request time when users use them. 3)@font-face In this mixed development, @font-face is used to realize the font of icons and uniformly control the color and size of icons. Advantages of using @font-face: reduce the traffic caused by using pictures on the page and greatly shorten the page response time; Icons can be changed in size and color at will without distortion. Note when using: all icons need to be in vector SVG format. Usage restrictions: only applicable to flat solid color icons. More complicated pictures such as background pictures still use pictures. 4) Local storage LocalStorageHTML 5 local storage is mainly used to store the latest query records in mixed development. Take the recent home page query as an example. Whenever a user clicks a module in a comprehensive query, the icon and the corresponding function name are stored through LocalStorage. If the user does not clear it, the data in LocalStorage will always exist locally. The next time you open the application, read the latest query records from LocalStorage. The advantage of using LocalStorage is that it is fast and does not need background interaction. 5) Asynchronous AJAX In this development, many places are implemented with AJAX. First, when the page is displayed, the frame is displayed first, and then the content is loaded asynchronously; Secondly, in the paging function, some simple item lists are displayed first, and more contents can be 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, better interactive experience. In terms of performance, the speed is also faster.