Hybrid APP Development Practice Summary

Introduction

With the rapid development of WEB technology and mobile devices, Hybrid technology has become one of the most popular solutions. A good hybrid architecture allows apps to have both the ultimate in experience and performance, as well as a flexible web-based development model, cross-platform capabilities, and a hot-update mechanism to think about whether the chickens are frozen.??。 This series of articles is a summary of the company's practice in this area!

Native APP Development Model

Native app, native app, app developed using native (i.e. Android or iOS). The application of good performance is no doubt, but most of the enterprises in the trial and exploratory period, the enterprise needs in a short time to quickly launch different functions, products to adapt to market demand and change. For Internet companies with professional development teams, the innovation is a problem, not to mention the application in the enterprise.
The disadvantages are:

1. The cycle of development, update, and maintenance is too long
2. Not cross-platform: both Android and iOS need to develop their own version of the platform-high cost of development;
3. Upgrade trouble: Each upgrade to download the installation package, Android is OK, anyway, no need to review, download it, but iOS is troublesome, release each version has to go through the App Store audit
4. Android and iOS are difficult to publish synchronously.

WEB APP Development Model

The rise of HTML5 technology has injected new life into web apps. But the essence of web app is respectability veneer, function not only can not compare with native app, user experience is well known malpractice. In the current iOS, Android system-led desktop portal in the form of a user to open the browser, and then access a URL, experience is not good, the user experience and the process of human loss caused by a large number of users.

Hybrid APP Development Model

The Hybrid app, commonly known as hybrid applications, is a mobile application that mixes native technology with Web technology for development. There are three main types of hybrid schemes that are popular today, mainly in the UI rendering mechanism:

1. Based on the WebView UI , most mainstream apps on the market are used, such as JS-SDK, Cordova, to achieve H5 and Native two-way communication through Jsbridge, giving H5 a certain level of native power.
2. Scenarios based on the Native UI , such as React-native, Weex. Based on the ability of H5 native API, the virtual DOM is passed through Jsbridge to Native and native rendering is used.
3. In addition, there are recently more popular small programs , but also through a more customized Jsbridge, and the use of dual-WebView dual-Threading mode to isolate the JS logic and UI rendering, the formation of a special development model, enhanced H5 and Native mixing degree, Improved page performance and development experience.

The above three kinds of solutions, in fact, is based on the Jsbridge completed communication layer, the 23rd kind of solution, in fact, can be seen on the basis of the programme one, continue to improve the application by different new technologies to the degree of mixing. Therefore, Jsbridge is also the most critical part of the entire hybrid application!

Technology selection

The selection of any technical solution should be based on usage scenarios and existing conditions. Based on the company's existing situation of several considerations, in the plan to further optimize, more suitable for our needs.

1. The feature of fast iterative, flexible development of demand web technology and the mechanism of hot update on line.
2. Product Core ability is a powerful photo, scan QR code, image upload and other functions, so simple H5 technology can do things very limited, can not meet the demand, through the Hybrid technology to strengthen H5, is a must.
3. The company does not have a very complex UI rendering requirement on its business, and the company already has a well-developed front-end framework and is already very mature, so we don't need a solution like RN.

results : React Native and Cordova have different design concepts for cross-platform applications and cater for different needs. Cordova is able to easily run existing single page WEB applications on different devices, at the cost of some performance loss. React Native applications will be closer to native applications, but some code will also need to be re-implemented for different systems. Because we have a mature set of front-end development framework, in order to reduce development costs and additional learning costs, we have adopted the Cordova!

Cordova Architecture

• The web App layer is the main place where developers write code, and the application is presented as a Web page that references the various web resources needed in a index.html local paging file, such as CSS, JavaScript, images, AV files, and so on. The configuration of the application is saved in the Metabase. config file.
• The WebView layer is used to present the user interface, the presentation of the Web page. For example, on the Android platform, Web page rendering is implemented through the WebView control.
• Plugins is primarily used to invoke the functionality of each platform native in JavaScript code. The Cordova project already contains some core plugin, such as batteries, cameras, contacts, etc. Developers can also develop custom plugin to implement the required functionality. The principle is that native get JavaScript environment context, and directly on the above Mount object or method, so that JS can be directly called, Android and IOS have the corresponding mount mode.

The overall technology stack and development environment used in Cordova development

The technology stack used is as follows:

• System Environment CentOS + Docker
• Continuous integration & Continuous delivery Jenkins + git
• NodeJs, NPM, Cordova, Android environment, MySQL database
• Mobile Hot Update code-push-cli + code-push-server self-run service
• Reverse proxy Nginx

Each Docker's division of responsibilities

• Jenkins ' Docker compiles Cordova to generate Android apk files and uploads the latest static resources to Code-push-server
• Code-push-server's Docker is responsible for resource updates
• MySQL database Docker primarily serves the Code-push-server
• Git is responsible for code management
• Nodejs Docker is responsible for downloading the Jenkins compiled apk file or the middle tier agent (and the Java Service communication) or serving the front-end SSR first screen rendering

Description

If the above technology stack is described clearly need a small space, so I will split the article:

1. Hybrid APP Development Practice Summary-opening (this article) 2. Cordova Environment Configuration and create the first Android APP3. Server-side Docker installation, Nginx, Jenkins, git services 4. Server-side code-push-server, MySQL service 5. The introduction of client Code-push plug-in and the use of CODE-PUSH-CLI 7. How to use a pure shell to write a command-line tool to quickly build a developer's environment and Android to debug a real machine

Hybrid APP Development Practice Summary