Real–Time Web Application Development and ASP.NET (Part I)

Hesam Seyed Mousavi, March 25, 2015

Source: Y.Planner

blog.mousavi.fr

 

The Internet is one of the most important inventions in history, and it has changed our lives for the better in many ways. For social creatures such as humans, nothing could be better than a fast method of communication with the world that enables multimedia content delivery with almost no delay.

hesam seyed mousavi real_time_web

In its few decades of existence, the Internet has evolved from a basic set of network clusters with simple operations to the foundation of almost everything in our world, providing opportunities to make billions of dollars.

Our mission in this book is to walk you (and other Microsoft web developers with a good background in ASP.NET and JavaScript) through a very recent technology called ASP.NET SignalR. It enables the creation of real-time, asynchronous web applications that are the most modern type of infrastructure for building sites to deliver content from servers to clients in real time and remove any latency. Clients sit on a page on your site and receive the newest updates in real time with no need to click anything or refresh the page. For example, on Facebook when somebody leaves a comment or likes one of your photos, you do not need to refresh the page to see the notification pop up and the red counter being updated. ASP.NET SignalR provides the foundation to develop such features.

The Internet started as a simple set of clusters with some computers connected to perform basic operations. It quickly became a very sophisticated network of servers all around the world that serve hundreds of millions (even billions) of clients.

There have been different kinds of changes on this worldwide network in different domains. In one area, Internet connections became faster and more reliable, enabling users to download and upload larger content so that it is now possible for users to download and upload high–quality multimedia content (e.g., videos) from their mobile Internet connections. It has also opened new doors for content providers and consumers.

In another area, Internet browsers evolved to be very sophisticated, and enabled features to facilitate the creation and delivery of content in more user-friendly ways. For at least a decade, the use of Asynchronous JavaScript and XML (AJAX) technologies has given a smoother user experience to end users, for example. In a third area, server technologies have evolved to also accommodate browser and connection advancements.

New programming languages and platforms have been introduced, along with many libraries that help simplify the process of web application creation for web developers. One of these recent advancements is the support for WebSockets. All the different trends on the Internet focused on providing a better user experience. We have moved from serving static HTML web pages to dynamic pages that can be updated based on users’ actions. We can then use client-side languages (mostly JavaScript) to process certain things on the browser and reduce the need to refresh a web page to get the new content. Currently, there is a more modern approach: real-time delivery of content from servers to clients that is possible by applying server-side technologies in conjunction with JavaScript. This is the area in which SignalR comes into play.

Why the Client-Side Experience Is More Important than Ever The concept of user has become the most important concept in today’s Internet. Almost all businesses, regardless of their size, know how important the user experience can be. They have moved their focus to making products, technologies, and software that is intuitive and simple enough to attract almost any user regardless of age, gender, cultural background, and so on.

An important part of the user experience is the speed of delivering content. Traditionally, the Internet was a set of web pages served on servers and received by clients. These pages included many static pages that could not react dynamically to users’ actions and dynamic pages that could render a dynamic content based on the inputs provided by users. Users had to send their actions to servers or request a particular Uniform Resource Locator (URL) from the server to receive HTML content. This was a very simple model and lacked the sophistication seen in modern web sites.

As the user experience became more important, web designers and developers came up with the idea of using JavaScript and XML in conjunction with partial content rendering on the servers to take advantage of the concept of AJAX. It would provide a smoother experience to users and deliver content to these users more quickly. In the past few years, however, this approach wasn’t good enough for the modern needs of the Internet. Even with AJAX, there was often a wait for users’ actions to update a portion of the page and deliver the content, so the speed of content delivery was very dependent on the speed of the users’ interactions.

This issue led web developers and designers to start thinking about sending the content from servers to clients as it arrives in real time, or at least invent mechanisms that simulate such a behavior. This process is called real–time web application development.

Real–Time Web Application Development
The term real-time software refers to the type of software that is subject to a soft or hard time constraint. By the nature of its business domain, this type of software must complete its processing within a particular timeframe. This time constraint can be strict to make it hard real-time software or flexible to make it soft real-time software. For example, aerospace software can be hard real-time software because it must finish its execution within a defined time interval; otherwise, operations might fail, and people’s lives can be in danger. In contrast, video players can be soft real-time software because it is not mission-critical if the processing does not finish on time (although it is important to process the videos in time to display them to users).

Although real-time software and real-time computing have been around for a long time, the term real-time web is relatively new. This concept, which was introduced in the past few years, focuses on real-time delivery of content to clients as soon as it is available. The real-time web is similar to soft real-time software because the delivery of content from the information source to consumers should occur in a short period of time to be considered real time (from a few milliseconds up to 1 second).

The real-time web was embraced by social networks and their need to update users with frequent status updates and content changes by friends and peers. Facebook and Twitter were among the first major sites on the Internet that pioneered in this area and implemented real-time web features.

Although the real-time web is primarily applied to soft and small updates to clients with short status updates, news headlines, and similar content, it is now also used for other purposes, such as real-time searching (more details to come in the next section). Google incorporated such features to provide real-time updates to its search results as they become available.

Examples of Real–Time Web Application Development
This section focuses on showcasing a few common examples of the real-time web to describe it and the applications it can have. One common misbelief about real–time web development technologies including SignalR is that they are designed mainly for building chat applications. The examples shown here correct this by describing different practical applications for these technologies.

Facebook
The real–time notification feature on Facebook (see Figure 1-1) is one of the best examples of the real-time web, and Facebook is a pioneer in this area. If you have a Facebook account, you have noticed the red color counter of new notifications being increased in real time while a toast appears in the bottom-left corner of new actions.

Whenever there is a new like, comment, post, or other type of notification associated with your account, you see a notification toast in the bottom that appears and disappears after a few seconds. At the same time, the counter of new notifications in red is updated. Facebook is using a combination of WebSockets and long polling to implement this feature. Note that Facebook uses a similar asynchronous mechanism to implement its chat system (in fact, Facebook chat and real-time notifications were rolled out together in early 2008). Facebook later enhanced its real-time features to include real-time updates to different parts of the site, such as new comments added to posts that appear in real time to users.

Such a sophisticated and reliable real–time web implementation for Facebook has an important value for its business. With the large number of users and high demand for the huge content provided by hundreds of millions of active users, the user experience is significantly improved by integrating such a real–time web ecosystem.

Technology-wise, Facebook has employed a very sophisticated custom implementation to achieve its unique business goals for the real-time web that relies on pushing the content from servers to clients. Facebook had to consider several factors, such as the large number of active publishers as well as consumers, along with keeping its data centers in sync and reducing the latency for users who are scattered throughout the world.

Twitter
Another popular social network using quick status updates is Twitter, which receives frequent updates from its users. Each user can then have many followers who want the most recent updates from that user and other users they are following. The speed of delivering these short status updates to clients is of vital importance for Twitter’s business because it can improve the user experience significantly. Just imagine how frustrated Twitter users would be if they had to refresh their Twitter feed every time they wanted a new update.

Twitter employs a real–time web infrastructure to display the most recent updates to users in real time (see Figure 1-2). This implementation is Twitter’s custom implementation that fits its needs. As new updates arrive in the user’s feed or search results, the user interface is updated with the counter of new updates that ask the user to click the counter link to fetch the most recent updates with an AJAX call (rather than refreshing the whole page).

Google Search
With the very fast pace of content production on the Internet, especially for trending topics, new articles and news items become available very quickly. Google uses its powerful indexing tools to capture these updates quickly. With the traditional user interface structure, after a user searched for a particular keyword, the results were presented from the original state of content repository in the Google database. To provide a better user experience, Google offered real–time search result updates in which search results were updated as new items became available, and users could see the most recent items.

Although Google was using its own real–time web implementation for real–time search results, it closed this feature in 2011 because the deal with Twitter expired for displaying the latest tweets in real time.

Google Docs
Another great example of the power of the real-time web and its impact is Google Docs, in which users have access to an online version of document-editing software for word processing, spreadsheets, and slides. Not only can users edit their own documents with the great features provided but they also can share their documents with others. The real power of the real-time web shines here: the updates made by one user are reflected in other users’ displays in real time, so multiple parties from different locations are allowed to collaborate on writing and editing documents.

Source: Y.Planner

blog.mousavi.fr

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s