Construction and principle analysis of HTML5 Mobile application development environment

Development environment Construction:

First, Android development platform to build

1. Installing Java Jdk:\\10.194.151.132\mewfile\tmp\adt
2. Configuring the Java JDK

1) New system variable, Java_home,c:\program files\java\jdk1.8.0_25

2) New system variable, Classpath,;%java_home%\lib;%java_home%\lib\tools.jar

3) Path,%java_home%\bin;%java_home%\jre\bin

4) test, Javac

1. Installing Apache Ant
2. Configure Apache Ant

1) New system variable, ant_home,c:\soft\apache-ant-1.9.4

2) Path,%ant_home%\bin

1. Configuring the Android SDK

Add the paths of tools and platform-tools in the SDK to path

1. Create a virtual machine

Second, installation Cordova

1. Install node. js
2. Install Cordova: Use the node. js npm command,c:\>npm install-g Cordova, to ensure that the NPM path exists in path, such as C:\Users\username\AppData\ roaming\npm
3. To create a HTML5 app:

Cordova Create Hello Com.example.hello HelloWorld

1. To add an application platform:

CD Hello

Cordova Platform Add Android

1. Create apps:

Cordova Build

1. Test the created app in a virtual machine

Cordova emulate Android

Third, install Hbuilder ( not necessary )

1. Installing Hbuilder
2. Import HTML5 application files generated by Cordova
3. Modify the code to debug in the virtual machine using Cordova emulate Android .

Principle analysis of HTML5 mobile application

The HTML5 Mobile application development framework, such as Cordova,ionic,hbuilder, mainly does two things when compiling a mobile application:

1. Integrated WebView components and browsers;
2. Package a list of resources that contain Web application files.

That is, based on the platform's own web engine, the HTML5 mobile app uses the system API to invoke the System browser's accelerator engine to load the page: iOS can call UIWebView to take advantage of the acceleration engine nitro acceleration, so you can use JavaScript on the front side to do large operations After Android4.4, the built-in WebView also changed from Android WebKit to chromium, which greatly improved performance.

The main disadvantage of the HTML5 Mobile application Development Framework is the functional and performance aspects, mainly because the ability of the HTML5 application relies heavily on the system's own Web engine: iOS UIWebView, Android WebView, etc. The HTML5 capabilities of such components are one-off compared to Safari for IOS and Chrome for Android. In addition, on the Android platform, due to the serious system fragmentation, different Android version of the WebView HTML5 ability also has a large difference, resulting in the corresponding HTML5 application consistency is difficult to guarantee. Fortunately, some third-party web engines have emerged to provide better functionality and performance than the system's default WebView, while Phonegap/cordova is also improving the architecture to introduce these better third-party web engines.

Overall, the ability of the HTML5 application relies heavily on the capabilities of the Web engine. As a result, both mobile operating system developers and developers of development tools continue to invest more effort in the direction of the Web engine.

Web engine

The Web engine can now be broadly divided into three different ways:

1. browsers, such as Safari/chrome/uc browser, etc.;
2. The system comes with Webview components, such as the above mentioned iOS UIWebView and Android Webview
3. Dedicated web Engine, such as Intel's Open source project crosswalk, Ludei's webview+

Browser mode is easy to understand, a HTML5 application is a Web page, the user opens a URL through the browser, and then into the browser's full-screen mode/app mode to operate, or by clicking on a pre-created shortcut to open the app. The performance of this approach depends on the browser's own support for HTML5, which is generally better than the WebView component, but the problem is that there are differences between browsers, and it is difficult to do a native-like experience with browser run HTML5 (app switch/Rights Management/system resource access/ integration, etc.) and rich API support.

The general usage of the WebView component approach is to publish the HTML5 application in a hybrid manner, which is the way the Phonegap/cordova scenario mentioned above is used. The problem has been mentioned above, mainly the WebView component itself on the HTML5 support capacity is insufficient.

A dedicated web engine can have better HTML5 functionality and performance support, and better consistency, and system integration like native applications can do better. The disadvantage of this approach is that developers need to package the Web engine with the application, resulting in a larger application size, so that some Web engines (such as crosswalk) also provide a "shared mode" that allows multiple applications to share a single web engine. The user is prompted to download the installation only if the app first starts and discovers that the system does not yet have the appropriate Web engine.

The current trend is to get rich API support through the Phonegap/cordova approach and to enhance HTML5 capabilities through a specially developed web engine.

Construction and principle analysis of HTML5 Mobile application development environment