Shulou(Shulou.com)06/03 Report--

Editor to share with you the development of HTML5 in mobile development example analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's learn about it!

Two 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 carried out by browsers, applications with embedded HTML5 parsers (such as PhoneGap), applications that support bookmark opening, or mobile phone products (iPhone and iPad). The advantage of this technology is that the existing web design can be reused, Web developers are easier to use, and the products are of higher quality and more suitable for multi-platform products. It is also easier to debug and fix errors, and version updates are faster. The advantage is its power. If you use the embedded architecture like PhoneGap, then you will have a lot less trouble. The disadvantage is its performance, which is also the biggest problem facing HTML5 technology.

From a rational point of view, HTML5 technology is to use the JavaScript engine to directly control local functions and change browser components on mobile devices. However, the performance problems in HTML5 applications are more controlled by HTML/CSS rendering technology than generated by JavaScript parsing. If used correctly, HTML5 technology can undoubtedly give you a lot of new performance effects. Previous examples of using HTML5 technologies include Appcelerator Titanium, Mobage/ngcore, Game Closure, and PhobosLabs.

Node.js toolkit

Take the PhobosLabs project as an example, when the project is done using the JavaScriptCore component of WebKit, the OpenGL rendering interface is used on the device side, and the API development of HTML5's canvas component is used during development. That is, a developer can develop and test his HTML5 game in a desktop browser that has good support for canvas, and when he opens the game on a mobile browser, it will perform just as well (or even better). The effect of developing with HTML5 is very similar to that of using the Node.js toolkit. When using Node.js, you only need to enable the JavaScript engine, and you only need to add the Node.js components you need to use to your application.

Appcelerator's Titanium details the concept of HTML5 technology, showing us a complete abstraction layer of UI tools, which allows it to be applied to the generation of other game products. This means that a HTML5 application developer can create a button through Appcelerator's JavaScript UI library, and Appcelerator's internal logic converts this button into iOS's native interface button. We can control the native buttons on the interface through JavaScript. In theory, developers don't have to write a single line of Objective-C code.

HTML5 technology has its advantages, and while you are still writing code in JavaScript, you can say goodbye to the annoying HTML/CSS layout logic and style declarations. You can also say goodbye to those excellent debugging tools. But this technology also has a bad side, such as HTML5's game API Mobage has some glitches, canvas components can be displayed smoothly in a relatively small screen interface, but if the screen is a little larger, just like the example of Appcelerator, you also need to consider the additional complexity of the interface layer when debugging. There are a lot of negative comments from Appcelerator here, and if you can keep the above points in mind, then those negative comments can actually be understood.

The problem is still with the browser.

The first difficulty in developing a complete HTML5 mobile application is that it runs too slowly. The second problem is very stupid tool shackles, many components more or less in different browsers have some loopholes, such as jQuery Mobile navigation component, iOS innerHTML component vulnerabilities, so you need to reduce the function to avoid vulnerabilities, or you are willing to spend some time to fix these vulnerabilities.

You can do an experiment yourself, when you use only one or two interface libraries in an iOS application, coupled with a small amount of JavaScript code written by yourself, there are no more JavaScript libraries, and you will find that the HTML5 application runs smoothly and completely, but with little functionality. PhoneGap's iOS project takes only 1 to 2 seconds to be released and run on iPhone 3GS. This fact can tell you that the most basic HTML5 applications run really smoothly. So, when you find that some of the operations of your HTML5 app take 10-15 seconds, or when it takes 15 seconds to load the entire program, it's a drag on some JavaScript interface libraries.

Two sets of representative UI libraries

A HTML5 mobile application programmer usually needs only two things: the first is the grafting layer between the native platform and the web interface, and the second is the mobile UI library.

PhoneGap has gradually become the default grafting layer choice in recent years, allowing HTML5 applications to call mobile devices' cameras, access mobile phone contacts and read and write files through JavaScript. The most popular mobile phone UI libraries include jQuery Mobile and Sencha Touch.

JQuery Mobile is a project that was created only last year, so it is very new and obviously it is not mature enough. JQuery Mobile's navigation bar component is very bad, page flipping is obviously slower than the native page flip function, if you do not refresh the browser, you will not be able to increment the list content. When the PC desktop platform was tested, its CPU consumption rate was also very high (the version is jQuery Mobile's alpha 4). My project uses it mainly because it is relatively simple (easier to crack). Because the library is built on jQuery, it is easy for any experienced web programmer to use.

It is said that Sencha Touch is more mature and faster than jQuery Mobile. But as soon as I see things that are highly complex, I don't unconsciously hate them. Because the subconscious will tell me that there are a lot of features I won't use at all, but forcing these extra things into my app makes my overall performance much worse. Although I may be wrong, the most powerful mobile app on the PhoneGap app page is IGN Dominate, which runs smoothly and is based on Sencha Touch, but I'm sure they spent a lot of time optimizing the product.

Debug and modify

In the development of HTML5 applications mentioned above, many people may have overlooked the fact that it is very simple to debug or modify a HTML5 application. Anyone who has ever worked on a large HTML5 development project can tell you that debugging and maintenance take up almost 80% of the project life cycle or more. That is to say, when you hear a development tool claiming that you can develop a chat app in 15 minutes, it may only allow you to solve 20% of your work in 15 minutes, and the remaining 80%. You may have to spend more than three times as much energy to finish it.

The HTML5 mobile app has a touch problem during debugging because the log of the console cannot be printed. So, if there is a bug or error in the JavaScript code, you need to alert () to report the error, otherwise you may not be able to find it. PhoneGap fixes this issue by printing the console's mode log through the XCode console, but the functionality is still limited.

The most effective solution at present is weinre. Although full of loopholes, it can run, and with it, you can debug your mobile application at breakpoints. UI,weinre is based on WebKit's web page inspector, and its tuning tool backstage acquires and replaces debugging code through remote servers. Two to three weeks ago, I did some research on the code of the web inspector, and I found it really not difficult to convert it into a remote debugger. The development of Weinre will be faster in the next few months, and some people may also develop an alternative to it. We'll see.

In the next few years, the debugging tool of HTML5 technology in mobile application development will undoubtedly become more important, which can solve 80% of the workload of most developers. Do you want to change your interface design with Objective-C? Edit, compile, run. Repeat these three steps until you are satisfied. If there are a lot of recompiling steps, this can take a day. Using HTML5 technology to achieve? Edit some CSS properties with weinre and test them, and you can continue debugging without even closing the application. To some extent, you can also debug your HTML5 mobile app in a desktop browser. But trust me, your app may end up with a lot of vulnerabilities on mobile devices, so you have to use weinre.

Unfortunately, people often praise a toolkit or a feature, but you rarely hear people praise a debugging tool that is great. So I guess that even if it is the most commonly used tool for HTML5 mobile phone programmers, we seldom hear it discussed.

Summary: the current situation

Although this article is really a little long, I have to sum it up:

1. There are only two ways to develop HTML5 applications on mobile devices, either using all HTML5 syntax or just using the JavaScript engine.

The construction method of 2.JavaScript engine makes it possible to make mobile web games. Due to the complexity of the interface layer, I have subscribed to a UI toolkit to use.

3. Pure HTML5 mobile apps run slowly and are full of errors, but the effect of optimization will improve. Although not many people are willing to do such optimizations, they can still try.

The biggest advantage of 4.HTML5 mobile app is that it can be debugged and modified directly on the web page. Developers of native applications may need to spend a lot of effort to achieve the effect of HTML5, constantly repeating coding, debugging, and running, which is one of the first problems they have to solve.

5. Yes, the migration of HTML5 is very simple, but I assume that everyone will make this an automated operation.

The above is all the contents of the article "sample Analysis of HTML5's Development in Mobile Development". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.