Sunday, January 6, 2013

HTML5 features in a nutshell


HTML5 is a feature rich specification and it breaks the traditional browser model. It allows developers to code their application very differently. It is emerging as a paradise for developers and they don’t have to rely on external plugins to integrate rich features. Here is a list of interesting features and techniques which HTML5 brings to the browser stack.
·       Canvas - <canvas> element allows the browser to render bitmap and it opens a new dimension to the browser. One can render graphs, visual images, game graphics etc. The canvas is not a plain tag but API so one can leverage and draw shapes under the defined rectangle.

The developer needs to make a simple check to see the browser is supporting it or not by following simple call.
test_canvas = !!document.createElement('canvas').getContext

If test_canvas is “true” then the browser is supporting it and one can start leveraging it. API for canvas includes shapes, patterns, gradients, text etc. It supports 2d and 3d context as well. Canvas is a very powerful feature of HTML5 and widely getting used across applications and web sites.

·       Video - <video> element with the API is a key component of HTML5. It is the need of the time and in today’s world information is being converted into videos and gets circulated around. “CODEC” is a language for video and it converts it into streams which browser can process. HTML5 supports video formats and no external player or library is required to play them in HTML5 browsers. One needs to check which CODEC is supported before initiating the play calls.
document.createElement("video").canPlayType(‘----type----‘);

·       HTML5 storage – This is key feature added in HTML5 which allows user to store domain/site specific storage within the browser. It is like cookie which gets stored on browser storage stack and can be retrieved and used on anywhere on the DOM/page. It stays locally on the machine and can be accessed by JavaScript. It can be detected by using window ['localStorage'], if it’s not null then browser supports storage and developer can use it across an application or domain. This is the very interesting domain from a security perspective.

·       Web Workers – It allows browser to run some process in the background. The browser can code up a component in JavaScript and run it in the background. Hence, now we have a feature by which multiple threads can spawn off through a page and different activities can be carried out within the browser. For example, bringing mail, doing math processing, making network calls, and accessing Web storage and so on. Everything can happen seamlessly in the background and user will not notice these activities. This is a very powerful feature to build industrial strength applications within the browser using HTML5. We can check the support by following simple call.
test_worker=!!window.Worker;

                  We get “true” for above call and start implementing our threads through the worker.
·       Offline application support – HTML5 allows to cache pages within the browser. An application can make a list of pages and those pages get cached on local browser. These pages are getting loaded from the client itself and save network calls. Also, users can read those pages while offline and not connected on the Internet. This feature allows to store mails, documents etc. for offline usage. Any application can provide offline usage and no need of special functionalities like google gears or google offline support. The application can force any type of file for caching on browser like video, JavaScript, HTML etc. The developer can use following call to determine offline support.

test_offline = !!window.applicationCache;

·       Geolocation – Geolocation allows to determine your position on globe and can be used by application to localize the page. If you are from New York right now then you get apple shops nearer to you by leveraging geolocation. Geolocation can be fetched by your IP, wireless connection, mobile tower or dedicated GPS hardware if available. HTML5 call determines latitude and longitude from underlying call and passes it to the application. Following call gives a quick availability of the feature within the browser.

test_geolocation =!!navigator.geolocation

·       Web Forms & Input – HTML5 is having enhanced web forms which include various data types (email, URL, time etc.), place holder, auto focus, sliders, spinbox, pickers etc. It allows user to submit data easily and developer can use these controls to craft effective forms. Also, the form allows built in validation for those types as well.

·       History API – History API supports APIs like pushState and it allows navigating through browser history during the brower’s life cycle. HTML5 API controls its value and can feed across iframes as well.  Following call gives an availability of the feature within the browser.
test_history =!!history.pushState
·       Web Sockets – HTML5 allows pure TCP duplex connection through Web Socket APIs. The web Socket call has several key APIs which can open same origin or cross origin socket and start communication channel. Sockets can be controlled within the browser through JavaScript and APIs like “send” can be used. Also, the schema handler like ws:// being used for back channel communication. Following call gives an availability of the feature within the browser.
test_ws=!!window.WebSocket
·       File System API – HTML5 application can create a virtual file system on sandbox with a specific domain. On the system either temporary or permanent files can be created. Few APIs and blob are supported to create any type of files and directory. These files can be consumed during the application life cycle and allows power feature for developers. Following call gives an availability of the feature within the browser.

test_fs=!!(window.requestFileSystem || window.webkitRequestFileSystem)
Above is a limited list of features, HTML5 supports several more features in the current version and others are in pipe for future specifications. Features like IndexedDB, Web Messaging, Drag-Drop, XHR (level 2), Contacts API (microdata), File APIs etc. In a nutshell all these features and more provides a powerful platform for developers to create thick client applications which can run in any native browser without any plug-in support.