Web application development has reached the next level with HTML5 and WebSockets. The revolutionary enhancements in web development technologies have equipped developers with modern tools and techniques. Using WebSockets they can create web applications which can send data not only from the client side but from the server side as well. Web applications with real-time data transfer can be created with a lot lower use of bandwidth. WebSockets by complementing HTML5 enhanced feature can make future applications powerful. Let's talk about the basics of the Web before understanding WebSockets in detail.
Let's see how the Web works:
In a nutshell, this is how the Web works. Browsers and servers are the most important entities of the Web. Browsers have engines that read HTML files and render web applications in the way HTML files are described. Different browsers such as Blink, Trident, Gecko, WebKit, and so on, have different engines to render the HTML of a page. Now servers are the one who are storing all the data and providing the same on user request.
In the beginning of the Web, pages were static. They only used to show content with minimal interactivity and functionality. But with the advancement in the standards of the Web along with the evolution of computers, efficient browsers, enhanced tools and libraries, creating web applications has now become very easy, and a lot of functionalities can be added very quickly.
Here is a simple definition of web applications—any application that runs on a browser is a web application. There are many web applications that we use in our daily routine to check mails, read news, watch videos, and so on. Web applications run in your browser and do not require much of your computer resources.
The Web is growing at a very high rate. Many companies are building their applications on the Web. The first and most important benefit is that it is independent of the operating system. You can run it on Windows, Mac, or Linux and it works the same, because the work is mainly done by the browsers and they are available for most operating systems.
As we have seen some examples of web applications, now the question here is where does WebSockets fit in these applications or any web application? Let us first understand something about application behavior; let us take an example of Gmail, which is basically a mailing client. The work of a mailing client is to fetch mails and display them. This sounds simple, but the problem arises when someone sends you a mail and you want that mail to be displayed right away. To implement such a functionality there are different ways, such as polling and long-polling, which are not efficient. So WebSockets solves the problem here by providing a server push facility. WebSockets provides functionality to push from both the client and server side, which makes it stand out.
We can treat WebSockets as a feature which enhances the experience of web applications. And with HTML5-enhanced features, we can create a dynamic and real-time application.
There are different ways of implementing data communication between a client and server. Flash, Comet, PusherApp, and so on provide us with the features needed to implement the data communication which WebSockets provides. Then the question arises that why should we go with WebSockets? There are many reasons for picking WebSockets over other methods, some of which are as follows:
In comparison to other means of data communication, WebSockets exhibits low latency, which decreases from nearly 150 ms to 50 ms.
WebSockets is a lightweight connection and uses low bandwidth.
It requires lesser developer effort in terms of learning and implementation in different technologies.
Ease of compilation when different technologies are used.
Code maintenance becomes easy with WebSockets.
WebSockets offers full-duplex connection support without much overhead.
Web applications have a lot of different features, and to support those features, we need browsers—not just ordinary but modern browsers. For a modern browser to support the advanced features provided by HTML5, it has to implement the HTML5 standard, because it has the latest features and functionalities. There are some versions of browsers that do not support HTML5 majorly because they have not implemented the HTML5 standards, either because they were developed earlier or they choose not to.
Faster page loading
Experimental Application Programming Interface or API
Support for latest features
Access to native resources
After eight years working on the HTML5 standard, W3 finalized the standard on October 28, 2014. This standard is going to be revolutionary for the future of the Web. The enhancements done to the HTML standard are revolutionary. Let us go through the main features of HTML5, which makes it a great standard for the Web:
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.
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:
Input: The following are the input types:
type="email": A field with inbuilt email validator
type="url": A field with inbuilt URL validator
type="number": A field with inbuilt number input restriction and validator
type="range": A range slider with max and min function
Datalist: It specifies a predefined list of options for list control.
Keygen: This element provides secure data submission using the public/private key method. From the security point of view, it is an excellent enhancement.
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
<table>. Examples of non-semantic elements include
<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.
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:
Viewport: This helps in adjusting the view of webpages based on devices. We can set a different scale level and so on.
Media queries: CSS as per the screen size; isn't it a brilliant feature? Now by using media queries the CSS styling can be changed at runtime. Responsive web design is a very important feature of modern Web. We need the content to be displayed as per the screen size, and it should adapt and show appropriate content eliminating the not so important content from the page for smaller size devices.
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.
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:
Rearranging items in a list
Moving items from one list to another
Dragging items around the canvas
Dragging a file from the computer to the browser
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.
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.