In-depth analysis of the development status of HTML5 in mobile development

"We are writing our next set of mobile products with HTML5. "Yes, a lot of people are playing with appcelerator these days, and I'm playing." "Well, but that's not the kind of HTML5 product I'm talking about. ”

Recently, I have a lot of similar conversations, probably because I am developing a set of HTML5 applications. Like the 2005 "AJAX", the term "HTML5" is not yet clearly defined, and it has been applied and even operational before it is determined what the advantages of the new technology are.

If you are in a company that is under the control of a manager who is passionate about new technology, if you are lucky, Mr. Bert, the comic character, may be very willing to sit in the small room next to you.

Two kinds of views

When people talk about HTML5 technology on mobile devices, they usually only have two different views.

From a perceptual point of view, the rendering process of HTML5 technology is mainly performed by browsers, applications that embed HTML5 parsers (such as PHONEGAP), applications that support bookmark opening methods, or mobile phone products (iphones and ipads). The advantage of this technology is the ability to reuse existing Web design, Web developers are also easier to use, while the product has a higher quality, more suitable for multi-platform products. It is also easier to debug and fix errors, and version updates are faster. This elimination, the advantage is its function, if you like PhoneGap the use of embedded architecture, then you will be a lot less trouble, disadvantage is its performance, this is HTML5 technology is facing the biggest problem.

From a rational point of view, HTML5 technology is to use the JavaScript engine to directly control local functions and change the browser components on mobile devices. The performance problems in HTML5 applications are more controlled by html/css rendering techniques than by JavaScript parsing. If used correctly, HTML5 technology can undoubtedly give you a lot of new performance effects. Examples of current use of HTML5 technologies include Appcelerator Titanium, Mobage/ngcore, Game closure, and Phoboslabs.

node. JS Toolkit

Take the Phoboslabs project as an example, when this project is done using WebKit's javascriptcore component, use the OpenGL rendering interface on the device side, and develop using the API of the HTML5 Canvas component at development time. This means that developers can develop and test his HTML5 game in a desktop browser that has a good support for canvas, and when he puts the game on a mobile device, the same excellent (and even better) performance will appear. The effect of this development with HTML5 is similar to the effect of developing with the node. JS Toolkit, when you use node. js, you only need to enable the JavaScript engine, and you simply add the node. JS component you need to use to your app.

Appcelerator's titanium details the concept of HTML5 technology, giving us an abstraction layer of a complete UI tool that allows it to be applied to build other game products. Meaning that a HTML5 app developer can create a button through the Appcelerator JavaScript UI library, and Appcelerator's internal logic converts the button to the Native Interface button for iOS. We can control the native button on the interface via JavaScript. In theory, developers may not need to write a objective-c code.

HTML5 technology has its advantages, and when you are still writing code with JavaScript, you can say goodbye to annoying html/css layout logic and style declarations. You can also say good-bye to those good debugging tools. But this technology also has a bad side, like HTML5 's game API Mobage there are some minor problems, the canvas component can be displayed in a relatively small screen interface, but if the screen slightly larger, like the appcelerator example, when debugging, You also need to consider the additional complexity of the interface layer. There are a lot of appcelerator negative comments here, and if you can keep those points in mind, then those negative comments can be understood.

The problem is still in the browser

The first challenge in developing a complete HTML5 phone application is to run too slowly. And the second big problem is the very stupid tool bondage, many components more or less in different browsers have some loopholes, such as jquery mobile navigation components, iOS innerHTML components of the vulnerability, so you need to reduce the functionality to avoid the vulnerability, Or maybe you'd like to take some time to fix these holes.

You can experiment on your own, and when you use only one or two libraries in an iOS app, plus a handful of JavaScript code that you write yourself, and no more JavaScript libraries, you'll find that the HTML5 app runs smoothly and completely, but with little functionality. PhoneGap's iOS project only takes 1-2 seconds to launch on IPhone 3GS. This fact can tell you that the most basic HTML5 applications are really smooth to run. So, when you find that some of your HTML5 applications take 10-15 seconds, or 15 seconds to load the entire program, it's a drag on some JavaScript libraries.

Two representative sets of UI libraries

A HTML5 mobile app programmer usually needs only two things: the first is the native platform and the Web interface of the graft layer, the second is the Mobile UI library.

PhoneGap has gradually become the default graft layer choice in recent years, allowing the HTML5 app to invoke mobile device cameras, access phone contacts, and read and write files via JavaScript. The most popular mobile UI library includes the jquery mobile and Sencha Touch.

JQuery Mobile is a project that was created last year, so it's very new, and obviously it's not mature enough. JQuery Mobile's navigation bar component is very bad, the page is significantly slower than the original paging function, if you do not refresh the browser, you will not be able to increment the contents of the list. While the PC desktop platform is tested, its CPU consumption is also very high (version is the Alpha 4 of jquery mobile). My project uses it primarily to consider relatively simple (easier to crack) because the library is built on jquery, so any senior web programmer is easy to get started with.

Sencha Touch is said to be more mature and faster than jquery mobile. But as soon as I see things of high complexity, I will not be disgusted with them unconsciously. Because the subconscious will tell me that there are a lot of features that I wouldn't use at all, but forcing them to load these extra things into my application, so that my overall performance of the application is a lot worse. Although I may be wrong, the most powerful mobile app on the PhoneGap app page is IGN dominate, which runs smoothly and it's based on Sencha touch, but I'm sure they've spent a lot of time optimizing the product.

Debug and Modify

In the development of HTML5 applications mentioned above, many people may have overlooked a point, in fact, debugging or modifying a HTML5 application is very simple. Any developer who has been involved in a large HTML5 development project can tell you that commissioning and maintenance account for almost 80% of the entire project life cycle, or even more. That said, when you hear a development tool claiming to be able to develop a chat app in 15 minutes, it might just give you 15 minutes to solve 20% of the work, the remaining 80%, you may have to spend more than 3 times times the energy to complete.

HTML5 The phone app has a touch problem while debugging because the console's log cannot be printed. So, if there is a bug or error in the JavaScript code, you need alert () error, otherwise you may not be able to find it. PHONEGAP fixes this problem by printing the console's modal logs via the Xcode console, but the functionality remains limited.

The most effective solution at the moment is weinre. Despite the loopholes, but it is able to run up, with it, you can also debug your mobile phone application ui,weinre is based on the WebKit Web Inspector, its mode tool backstage through the remote server to obtain and replace debugging code. Before three weeks, I had done some research on the code of the Web inspector, and I found it really easy to convert it to a remote debugger. Weinre development will be faster in the next few months, and some people may develop alternative products. We wait and see.

In the coming years, debugging Tools for HTML5 technology in mobile application development are undoubtedly becoming more important, which can solve the workload of most developers by 80%. Do you want to change your interface design with OBJECTIVE-C? Edit, then compile, run. Repeat these three steps until you are satisfied. This can take a day if you compile a lot of steps. Using HTML5 technology to achieve? Edit some CSS properties with weinre and test, you can continue debugging without even closing the application. To some extent, you can also debug your HTML5 phone app in a desktop browser. But trust me, your app may end up with a whole bunch of holes on your mobile device, so you have to use weinre.

Unfortunately, people often compliment a toolkit or a feature, but you seldom hear anyone praising a debugging tool as great. So I guess even though it's the most common tool used by HTML5 mobile programmers, we rarely hear it being discussed.

Summary: The present situation

Although this article is really a bit long, I still have to summarize:

1. There are only two ways to develop HTML5 applications in mobile devices, either by using the HTML5 syntax or by using only the JavaScript engine.
2. The way JavaScript engines are built makes it possible to make a mobile web game. Because the interface layer is complex, I have booked a UI toolkit to use.
3. Pure HTML5 mobile applications run slowly and are riddled with errors, but the results will improve. Although not many people are willing to do such an optimization, but still can try.
4. The biggest advantage of the HTML5 mobile app is that it can be debugged and modified directly on the Web. Developers of native applications may have to spend a great deal of effort to achieve the HTML5 effect, repeatedly coding, debugging and running, which is the first problem they have to solve.
5. Yes, HTML5 's transplant is very simple, but I assume everyone will make it an automated operation.

In-depth analysis of the development status of HTML5 in mobile development