Websocket Essentials: Building apps with HTML5 websockets: Build your own real-time web applications using HTML5 WebSockets

One of the big features introduced in the HTML5 standard is media playback. We can now play audio/video directly using the browser. Earlier we used to use some plugins in order to play audio and video, which added another layer onto our web application. For example, YouTube used Flash player to play videos, but now we can play the videos directly. This feature has been a bigger advantage for applications which are completely built using HTML.

Along with playback of audio and video, we can also capture audio and video resources of the device. Accessing the camera and microphone can be done using the getUserMedia() API, but it is still not available to all browsers because it is an experimental feature; it is, however, a feature that is greatly needed. This API not only gives access to the desktop computer, but also to the camera and microphone in mobile and tablet devices. This is another feature which will remove the dependency on different plugins for media access and capturing.

Canvas gives you per pixel access for manipulation at runtime. So you can draw shapes, render graphs, color them, manipulate them, and even manipulate bitmap images per pixel, along with many more features. The canvas feature gives us an upper hand in drawing and making web applications just like Microsoft Paint (formerly Microsoft Paintbrush) or Adobe Photoshop.

The canvas element has a different set of methods to create drawings using lines, circles, boxes, text, graphics, and so on. JavaScript is used to draw in the canvas container.

There are many enhancements in form elements which help us create a great experience for the users and are easy to manage from the developers' perspective. Validation was a big problem earlier; we had to write our own code for it, but now it is a part of the elements. There are some enhancements which are made keeping mobile devices in mind, such as field type keyboard—for example, a dedicated keyboard for numeric fields. Some of the new elements are:

Semantics are elements which have a meaning. Every developer wants to code in a language that is easy to understand and implement. Semantics is what makes it easier to read and understand the code because it defines the meaning of that piece of element or tag. Some examples of semantic elements are <audio>, <video>, <form>, and <table>. Examples of non-semantic elements include <div> and <span>. We can see from the examples that non-semantic elements don't tell us about the content, while semantic elements tell us clearly about the content.

Some of the new semantics in HTML5 are as follows:

The addition of these new elements will help in making the code more readable and meaningful. And now let me introduce you to custom elements. Yes, now we can make our own custom elements using JavaScript, either by creating them from scratch or extending the default set of DOM elements by adding new behaviors to them. This way we can create different sets of reusable web components and use them across our web application. This feature adds meaning to the code and is a big advantage for large-scale applications to make reusable web components.

HTML5 and CSS3 standards are made keeping mobile devices in mind. There are many enhancements that optimize the code for mobile/tablet devices. Mobiles have evolved to an extent where they have become a part of our daily lives. We have started browsing the Internet more on mobile/tablet devices. And HTML5 has given a lot of power to the Web to match up to the modern Web requirements. HTML5 and CSS3 have some excellent features which can deliver the same content for all devices: desktop, mobile, and tablets. Some of the important features include the following:

The world is emerging with different technologies and we widely use online and web services in order to create an effective work space and a web world that will cater to our professional and personal needs. There are scenarios where you need websites to be accessible offline, that is, without an active internet connection on your device. This can be achieved using the offline storage functionality. Once you have opened a webpage, it is possible to put the data in cache so that next time you open it or for some reason your connection is lost, you can still open and use it.

The offline system is quite important when the data needs to be stored locally for the user. Mainly when it comes to reloading or restoring the pages if the system is in offline mode.

So, whenever we open a URL, it basically hits the server and then the server returns the requested file. Then, the browser renders the file which was given by the server. Now in case we are offline, the browser will take control, and instead of hitting the server to get the file, it loads the files from its local copy which was cached when we opened it earlier. There is also an API which tells us that we are online or offline. It is very helpful in case of mobile/tablet devices where the connectivity can be lost at any point of time.

There are many applications which use geolocation, such as Twitter, Facebook, Foursquare, Google Maps, and so on. The introduction of this feature as a part of HTML5 has made it easier for developers to get the location of their device.

Mobile and tablet devices have Global Positioning System (GPS), and using this API, the hardware of the device can be accessed. Let's take an example of an application where you want to find nearby hotels. Using GPS, your location can be detected and a corresponding list of nearby hotels can be provided. This feature has reduced the effort of developers in implementing features related to geolocation. And yes, it is a feature which needs users' permission to work. A prompt is given to the user to allow the web application to access their location details.

Drag and drop is a feature which was always there but could only be implemented using some plugins. The good news is that now it is a part of HTML5 standard. By leveraging this feature, a lot of new controls can be defined, as we also have the custom semantics feature which we can use to define our own custom controls.

Web applications use a lot of different controls or widgets to display the data in a more user-friendly way. For large-scale applications where lists and grids are the most important controls to display the data, drag and drop plays a very important role. Controls that show calendars or the timeline of a project need the drag-and-drop feature to make it more usable. Some of the basic interactions are:

There are many good examples of drag-and-drop features. Different companies have implemented and made their own component library, which implements the drag-and-drop feature. Some examples are Sencha, jQueryUI, KineticJS, Kendo UI, and so on.

Web workers are just JavaScript running in background. JavaScript is mainly used to manipulate the HTML of a webpage at runtime and uses only one main thread. Web workers have made it possible to run a piece of JavaScript code in the background without affecting the current process. Normally, whenever we run a process in JavaScript, it runs in a queue fashion, which means that one process is executed at a time. It blocks the whole UI for some time and you can't click on buttons as well. This has had a huge impact on the application performance. That is one of the reasons why bigger web applications hesitate in choosing HTML, but web workers will surely change this.

HTML pages are static; to make them dynamic and interactive, JavaScript is used. JavaScript is called the language of the Web. It is based on ECMAScript, and every browser runs JavaScript. All the interactivity from the clicking of a button, navigation to pages, calling services, and so on is done by JavaScript.

There are many frameworks built using JavaScript to make scripting easier to use: one of the majorly used frameworks is jQuery. It gives a user the flexibility to use DOM events, features, and API in a readable and meaningful way.

JavaScript is improving at a quick rate. Most developers are now using JavaScript for client-side handling. Introduction of the Node.js server has changed the scope of work of developers. Earlier, developers used different servers, and for that, they had to learn lot of different languages. Node.js removed that gap and gave developers a platform where they could build a server which is JavaScript based.

JavaScript servers built on the Node.js platform are quite simple to use and increase productivity as well. Developers can make a server and run it in very less time. Creating a server in Node.js is very easy and has many features, such as real-time data transfer using different packages available. There are many frameworks which are built for Node.js, such as Express.js, which helps in speeding up the development process.

Node.js is free platform and provides a lot of different packages which can be distributed freely. The Node Package Manager (NPM) manages the dependencies for an application. It also is a version manager.

With the growth in web applications, the need for real-time data which supports full-duplex communication has also increased. Real-time communication is always hard to implement, and people used Flash for the same. The reason Flash-like plugins are used is because this feature was missing in HTML standard. So whenever we wanted to implement such mechanisms in HTML, we used the polling mechanism, which is a very costly process in terms of performance.

HTML5 comes prepared for all the required features needs for a good web application. WebSockets is a part of HTML5 standard and the WebSocket API is fully available to be utilized.

WebSockets gives a full-duplex communication between the client and server, which basically allows data transfer easily and on need basis, unlike the polling mechanism where we keep hitting the server on an interval to check for changes. WebSockets can send data from the server or client side—basically a connection bridge is opened which allows data transfer from both sides. WebSockets has eliminated the use of third-party plugins giving HTML developers the ability to implement it directly using the WebSockets API.