HTML5 has introduced some really cool Markups like Audio, Video, Canvas, Progress, etc. The complete list of new HTML5 markups can be found at w3schools. These new UI markups are no doubt very helpful and have made programmer's life much easier. But they can only be used in specific web applications. For example Audio/Video markups are useful in applications which provide such kind of content.
In this blog, I am going to cover some NON-UI features of HTML5 which can be used in almost all web applications. I am going to cover only the basics to provide an overview and help you get started. The code examples for each of them shall be covered in future blog posts.
Remember,
Markup + JavaScript APIs + CSS = HTML5
Here is the list of some cool Non-UI HTML5 features which can find space in almost all web applications (ofcourse, based on requirement).
CACHING application data is fundamental in nearly all applications, web or desktop.
Up until now, storing data in a web application required you either to store it on the server side and create some linking key between the client and the server—or it would be stored in cookies. The first approach has an unnecessary and undesirable performance impact. And cookies just suck when it comes to caching because they are overly complicated to use and their lifecycle has to be handled with workarounds.
HTML-5 has introduced new sophisticated web storage mechanisms - sessionStorage and localStorage.
SessionStorage -
Data cached using sessionstorage has a lifetime of a session. This means that it is available only for the current open window till it is closed. If you opened another window on the same domain, it wouldn't have access to that session data.
LocalStorage
It is based around the domain and spans all windows that are open on that domain. If you set some data on local storage it immediately becomes available on any other window on the same domain, but also remains available until it is explicitly deleted either by you as the web author or by the user. Otherwise, you can close your browser, reboot your machine, come back to it days later, and the data will still be there.
Persistent data without the hassle of cookies: having to reset the expiry again and again. More on this can be read in my another blog.
- Multi-threading with Web Workers
JavaScript has been a single-threaded language. This means that it does one thing at a time. In one of the ways, this has been a good thing about JavaScript because it makes programming much simpler where we know in what will be the sequence of execution. The problem is that there are times where JavaScript has too much to handle impacting the performance and we get dialogs like "Slow Script".
Web Workers solve this problem. This feature allows us to create another thread for processing something separately in parallel with the main JavaScript thread.
There are some restrictions on using Web Workers to make sure that integrity of the DOM structure is maintained. And this absolutely makes sense. Like
- Each Web Worker is defined in it's own JavaScript file that contains all the code required to do the job.
- They do not have access the DOM or any of the variables and functions of the main code.
- Web Worker communicates with the main thread via messages.
- Make your application available offline
HTML5 now allows you to make available your application content/pages even when the client (like tablet, smartphone) has gone offline. Isn't that Awesome?
For this to work, you need to create a manifest file containing list of all the resources (html, js, css, images) that your application needs. On finding this manifest in the <html> tag, browser will download all these resources into the local system and switch to these local resources if and when your device goes offline.
- With Web Sockets, no more server polling to check for updates.
Haven't we all faced this problem - We want to regularly check if there are updates (or status change) on the server to start any action on the browser. For example, in a browser based chat application, we want to keep check which all my friends have come online or have gone offline.
Web Sockets allows us to keep an open connection with a service on the server so that any time a new data is available on the service can be send to the client. It's like an open tunnel.
I hope this helps in getting a little excited about HTML5. I am! :smile:
