In the traditional web, a web page is inherently NOT in real time. When you request a web page, it sends a request to the web site and sends back the results. Once your page is displayed, its now fundamentally out of date until you hit the refresh button and reload the page.
As front end technologies such as HTML 5, Javascript, JQuery, etc. become more sophisticated, web developers have started enabling a more real time experience that supports sharing, collaborating and interacting in real time with both the server providing information and other clients.
A simple example is Twitter – if you leave your twitter page up in your browser, you’ll periodically see these messages in real time as new tweets arrive:
Why is the Real Time Experience an important evolution from traditional web metaphors?
- Discussion boards become chat rooms
- Document libraries become co-authoring
- Reports become interactive dashboards
- Activity walls become real time activity feeds
- Notifications after the fact become real time alerts
- Web “pages” become applications
- Pictures become real time animations
As we add multiple devices all working together to respond to events, having each one having to poll the server to receive updated information becomes a broken metaphor – we need to be able to PUSH messages out to clients instead. The server becomes a message broker instead of a message generator as clients send each other messages.
Microsoft has developed a framework for developing real time web applications called Signal-R. Version 2.0 of the framework has been out since the fall of 2013 and there is an excellent tutorial site here. It provides a framework for allowing for continual remote function calls between clients and servers using .NET and JavaScript.
The connection between client and server is persistent (e.g. real time) and allows you as a developer to build applications that can push messages to a set of connected clients. The protocols used to push these messages vary depending on the browser and the framework will automatically upgrade or downgrade the protocol based on what the browser can support.
The other key component to making the real time web work are JavaScript frameworks that can update the screen based on the incoming information pushed from the server. Frameworks such as JQuery, JQuery.UI, etc.
There are lots of JavaScript libraries that could be used as front end rendering layers for presenting data in real time. Here are a few examples:
- Heatmap.js provides rendering of heatmaps based on incoming data. Imagine rendering a heatmap based on a group of people’s clicks, mouse movements, or other signals in real time?
- Data-Driven Documents: provides rendering of datasets – imagine these beautiful renderings being updated in real time based on data pushed from the server?
- Cubism.JS: provides rendering of time series in real time.
- Raphael.JS: provides rendering of vector graphics using simple JavaScript. This could be a very nice animation library for use in real time massive collaborative applications.
- Paper.js: provides a full vector graphics scripting framework based on HTML 5 canvas.
Here are some good examples of real time web applications that could be enabled using Signal-R and other real time web frameworks.
JABBR
- Real time chat application using Signal-R as the framework.
Office Web Apps
The new Office Web App supports co-authoring of documents in real time.
Murally
- Group collaboration using virtual sticky notes, images and activities in real time.
LucidChart
Group collaboration on development of flowcharts
