HTML5 Mobile cross-platform Application Development Framework Analysis

Mobile Cross-platform application development is an interesting topic. Throughout this field, various developers offer a variety of solutions, broadly divided into three categories:

1. Based on the HTML5 scenario. The program is represented by Phonegap/cordova. The basic idea is to address the current functional shortcomings of the HTML5 Standard, supplementing the definition of a more practical API (such as hardware access/system interaction, etc.), and then based on the platform's own web engine (such as iOS UIWebView, etc.), through the extension mechanism to implement these APIs, On this basis, a set of application packaging deployment system is provided. Intel's XDK is also part of such a scheme.
2. A scenario that encapsulates the native API mapping into a unified language API. The program is represented by Titanium, Xamarin, where titanium provides the C # API with JavaScript Api,xamarin. The advantage is that it is easier to achieve similar capabilities to native APIs, and the programming model/approach is similar to native applications.
3. There are industry-specific HTML5 API scenarios. Ludei's Cocoonjs, for example, is an interesting scheme designed to develop APIs specifically for 2d/3d games (iOS and Android support). It can be thought of as a subset of HTML5 graphics operations (Canvas +WEBGL), plus some extended APIs such as hardware access/advertising/in-app purchases/social network integration to achieve a complete game engine.

This article focuses on the advantages and disadvantages of HTML5-based alternatives, how to achieve better results, and some of the current progress.

Features of the HTML5 scheme

Native API mapping scenarios, such as titanium, Xamarin, have the advantage that functionality and performance are closer to the native system. However, due to the different system native API design there will be a lot of differences, API mapping still need a lot of trade-offs. At the same time, because these APIs are customized by these vendors, there is no standard, and the corresponding development resources (library/technical support/community, etc.) are relatively limited.

On the other hand, the enrichment of standardization and development resources is the greatest advantage of the HTML5 scheme, while the third party HTML5 framework tools such as Phonegap/cordova also greatly promote the development of HTML5 applications, they provide a convenient cross-platform application packaging/publishing services, a practical API, Flexible extensibility mechanisms, as well as the accumulation of rich third-party API implementations. The upstream of the new Api,phonegap/cordova can also quickly follow these standard APIs to open up the relevant capabilities once they begin to support some of the newer ones.

The main disadvantage of the HTML5 scenario is in terms of functionality and performance, mainly because the ability of the HTML5 application relies heavily on the system's own Web engine: iOS UIWebView, Android WebView, and the HTML5 capabilities of such components compared to Safari For IOS and Chrome for Android, it's going to be a bad one. 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.

The good news is that some third-party web engines have now appeared 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. In addition, for Tizen, the Firefox OS itself is HTML5 runtime plus extended API system, HTML5 application is a class citizen, in terms of function development compared to iOS, Android will be enhanced.

The third option, COCOONJS's advantage is to focus on 2d/3d game development, drawing performance is very good, such as painting 1000 sprites can also reach 60FPS, which is the vast majority of browsers/general HTML5 engine is not available. The disadvantage of this scheme is that, because its drawing operation simplifies many passes, it cannot do the interoperability with HTML5 DOM elements, and its HTML5 ability is only a subset, the function is limited. Currently COCOONJS has introduced another mode webview+ as a supplement to Android, webview+ chromium-based kernel plus Cordova API support for more general HTML5 capabilities.

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.

The webview+ of crosswalk and Ludei are conceptually more similar. webview+ is closed source, is not well evaluated at present; crosswalk developed by my team, is Open source (BSD license), based on the chromium core, focusing on support for HTML5 features and performance, with a release cycle of six weeks, supporting Cordova Api.

Currently Crosswalk's officially supported mobile operating systems include Android and Tizen, and there is no difference between using Crosswalk's Web application experience and native apps on Android 4.0 and above. The engine is now the recommended engine for many well-known HTML5 platforms and applications, including the Google Mobile Chrome App, the Intel XDK, famo.us and Construct2, and so on, and the future Cordova 4.0 plans to integrate the Web engine as well. However, unfortunately, due to limitations of iOS (iOS does not allow apps to use the jit--instant-build engine that uses third parties other than iOS UIWebView), there is currently no way for crosswalk to provide direct support. But this may change as HTML5 moves more broadly into the mobile market.

Summarize

Now the HTML5 app (plus API extensions) has been able to do a lot of things, such as educational applications, casual games, and so on. However, for those with real-time requirements of high, computationally large (such as involving a large number of element drawing, or parallel computing, etc.), complex 3D games, multiplayer online games/applications, etc. there are still many gaps. In addition, how to be more efficient in debugging/development/performance memory tuning HTML5 applications is another area that needs to be improved. However, these aspects are also evolving. I believe that the HTML5 will eventually become the mainstream mobile development platform in the near future .

HTML5 Mobile cross-platform Application Development Framework Analysis