Talking about HTML5 and web App

With the rapid rise of mobile devices, the development of the app market is also growing rapidly, the current iOS and Android platform of the total number of apps also reached 1 million, according to AAWP reported that the number of Windows phone application market has exceeded 80,000, promoted to become the third largest application platform. Mobile data analysis company Flurry in the 2011 App Trends report, people spend more time on apps than they do when browsing the web.

The future of the app market presents a bright picture, and for mobile developers, the application of different platforms need to develop different apps to support, both in the update and maintenance need a certain cost. So more people think of the HTML5 Web App, and the current mainstream operating system iOS, Android, and Windows Phone's browsers all support HTML5 most of the features and highlight HTML5 's position on the future mobile device side. So what's the future for HTML5, and next we'll talk about HTML5 and Web apps:

When it comes to web apps, we have to think first of the native app, what are the advantages and disadvantages of this app, the IPA we download in the App Store, and the apk that we downloaded in the Google Play store or other Web sites that belong to the native app?

Advantages of Native App:

1, excellent user experience and gorgeous interactive operation, can provide different user experience for different platforms;

2, can not be limited by network speed, save bandwidth cost;

3, access to local hardware equipment and resources;

4, the profit model is clear.

Native app's Disadvantage:

1, the transplant between different platforms trouble;

2, maintenance of multiple versions of the higher cost;

3, need to pass the third party audit;

4, the profit needs to be divided with the third party.

For native app, Web app is good to make up for these disadvantages, developers just understand the HTML5, CSS3, JS and device API can be completed in the application of multiple terminal equipment and platform operation, a good guarantee of the application of cross-platform consistency, relative to the native App development costs are lower, while updates are easier to maintain, and users have little installation costs and are more free and open. But any new technology always has its pros and cons, and Web apps itself encounters problems with user experience, UI effects, and invoking local devices and resources.

Although the 2 models have their own advantages, with the rapid development of mobile devices and HTML5, Microsoft and jobs are aware that only HTML5 is the future of the Web. The HTML5 mobile web has risen to 4th place, according to a survey published by Appcelerator, a well-known mobile cloud platform company.

As we all know, HTML5 not only brings us more semantic tags, but also new features such as canvas graphics, audio video, local storage, off-line applications, and geographic location.

Next we look at the features that HTML5 brings from the app's perspective:

Feature one, canvas drawing

Canvas is similar to the role of Flash in the Web page, is a new tag introduced by HTML5, but it does not have the ability to paint, but only for JavaScript to provide a region to draw the image, you can use JavaScript to draw graphics, edit the image. A canvas drawing tool, such as harmony, uses its unique brush style to draw some fine pencil sketch styles on the iphone and Andriod phones.

can refer to: http://www.html5rocks.com/en/tutorials/canvas/integrating/

Many HTML5 sites also use canvas to implement painting features and online image editing functions, such as Sketchpad, an online artboard, with all the features similar to Windows brushes; Cloudcanvas, based on HTML5 free online image editing software, can realize the AI and ps of some vector and bitmap editing function.

Feature two, local Storage (locally stored)

We know that many app downloads are installed based on a local offline cache, without requesting a Web site. Web storage A good solution to the previous cookie size can not exceed 4K embarrassment and different browsers for each domain name under the limit of the number of cookies. Web storage can be divided into local storage and session Storage,local storage provides 5MB of storage space, while Sessiong storage is not even restricted. Not only can you load cached data to speed up startup and display when you start the app, but you can also reduce network traffic and run the app offline.

Google previously used Google Gears browser plugin to solve the offline use of Web applications, such as offline use of Gamil, with the browser to HTML5 the new standard of support, gears also gradually abandoned. Google reader is currently using HTML5 offline technology to allow users to read the most recently viewed articles in their subscriptions offline.

Characteristics III, geolocation (geo-positioning)

The Geolocation API is a newly added API Specification for the consortium, which can be used to get the user's geographic location through a browser. The browser version requirements are relatively high, currently able to support browsers have ie9.0+, ff3.5+, safari5.0+, chrome5.0+, opera10.6+. You can get the user's information through the GetCurrentPosition method under Geolocation

Navigator.geolocation.getCurrentPosition (getpositionsuccess, getpositionerror);

The GoogleMaps API can also be integrated to monitor the user's location to show the user's exact location on the map. The specific use of everyone can Google, the corresponding introduction of more documents, this is no longer described.

At present, the positioning characteristics of mobile devices are more embodied in the social type of LBS applications, such as micro-letter, mobile phone QQ, micro-blog, Google map and so on.

Features four, audio video

HTML5 defines two new label videos and audio, audio and video free embedded pages, making the form of multimedia more flexible. Especially in the iphone and ipad for Flash's not supported,

HTML5 audio and video is particularly important. At the same time HTML5 embedded code more concise, such as video on the Web site, calling Flash requires a long piece of code:

Then use HTML5 code with just one line:

Features v. Better support for CSS3

CSS3 is not a HTML5 feature, but new features for CSS3 such as: Border-radius, Border-image, Box-shadow, transform, transitions, animation, User-interface the best performance in HTML5 browsers.

The students who have used path will be amazed at the interactive performance

Take a look at the same animation effect that Victor has achieved with pure CSS3 abroad. http://namepk.sinaapp.com/blog/path/

In addition to the HTML5 features listed above, there are a number of important features such as WebGL, SVG, Form, Web SQL Database, Web Worker, Web Socket, Drag&drop, etc., which are no longer described in one by one,

At present, the specification of HTML5 is still in the development and discussion, in the application of web App development process, we still encounter performance problems such as page rendering, the compatibility of different models and web browser kernel, access to hardware resources of mobile devices, etc. The industry also has a lot of such as PhoneGap, Sencha Touch, Jquery Mobile device development framework, as well as html5+native shell-style app such as NetEase blog Android client, A variety of new technology attempts and mainstream browser and the major intelligent operating system for the HTML5 characteristics of support, HTML5 future development in mobile terminals will undoubtedly make everyone more looking forward.

Author: bobe

Article Source: Tencent GDC