web browsers & the realtime web

Web Browsers &the Realtime Web 

the past, present & future

Techmeetup Edinburgh ­ 08/02/2012

Who is this guy?Phil Leggetter

www.leggetter.co.uk

@leggetter

Developer Evangelist at Pusher

OverviewWhat is Realtime & the Realtime web

History of browsers & the Realtime web*

What technology can we use now?

Future

Questions

* ­ according to me

What is Realtime?

Source: Wikipedia: Realtime Computing

What is the Realtime web?

systems that are subject to a "real-time constraint"— e.g. operationaldeadlines from event to system response

The real-time web is a set of technologies and practices that enableusers to receive information as soon as it is published by its authors,rather than requiring that they or their software check a sourceperiodically for updates.

Source: Wikipedia: Realtime web

Publish & Subscribe

aliens

+Phil Search Images Videos Maps News Shopping Gmail More

Why the Realtime Webmatters

Opportunity

Convenience

Interaction

Engagement

History (according to me)My first Job = WOW!

Java Applets

<APPLET CODE="real_time_stuff.class" WIDTH=150 HEIGHT=15 MAYSCRIPT>

LiveConnect"Allows Java and JavaScript software tointercommunicate within a Web page"

Applets were a problem.Microsoft had to drop support their JVM (were sued).

Sun Microsystems releases kept breaking stuff.

Users/Sys adminsdidn't want toinstall plugins!

<frame> Polling

Source

<frame> Long­Polling

Source

<frame> Streaming

Source

XMLHttpRequestIE5 in 1999 via ActiveX

Slowly but surely adopted by all web browser

AllowsPolling

Long­Polling

Streaming

AJAX term coined in 2005The term Ajax was coined on 18 February 2005 byJesse James Garrett in an article entitled "Ajax: A NewApproach to Web Applications"

W3C working draft in 2006That's how fast technology used to move!

Crossdomain restrictionswww.example.com ­> www.example.com √subdomain.example.com ­> www.example.com√*www.example.com ­> www.leggetter.co.uk X**CORS (Cross Origin Resource Sharing)

Problem: Browser support (FF3.6+, IE8+ etc.)

* you need to set document.domain to be 'example.com'

** there are ways around this with JSONP

CometTerm 'coined' in 2006 by Alex Russell

Comet is a web application model inwhich a long-held HTTP request allows aweb server to push data to a browser,without the browser explicitly requestingit. Comet is an umbrella term,encompassing multiple techniques forachieving this interaction.

WebSocketsA protocol and an API

Single bi­directional connection

Supports cross domain communication

var ws = new WebSocket("ws://mywebsocketserver.com:80");ws.onopen = function() { // connection established};

ws.onmessage = function(data) { // receive a message ws.send("Yep, got: " + data); // send a message

ws.close();};

ws.onclose = function(ev) {};ws.onerror = function() {}; // ?

What can we use now?HTTP Polling √ß

HTTP Long­Polling √ß

HTTP Streaming √HTML5 WebSockets √*

* ­ See next slide

ß ­ Boo!

Also checkout: http://html5please.us | http://caniuse.com | http://html5readiness.com

WebSocket Support

Can use on IE6, IE7, IE8, IE9 and other oldermainstream browsers with web­socket­js Polyfil

Can use on Android with FlashLite or usingFirefox for Android and probably Chrome forAndroid.

Source: http://caniuse.com

How is thistechnology being

used now?

Realtime dataSports, Finance, betting, grids etc.

NotificationsAlerts or systemevents e.g. long runningprocess has completed (asyncweb).

Realtime comments

Activity streams

Live blogging

ChatProbably the No.1 use case

CollaborationDocument collaboration and synchronisation

Social TV2nd screen experiences, 2­Screen, Sit forwardTV

Multiplayer GamesGame actions

Player/object moves, etc

Game state changes

WordSquared

WordSquared (Map)

Iso City

Built on Isogenic Engine

Free Civ

Not available anymore ­ don't know why

Rawkets

Built by Rob Hawkes: Technology Evangelist at Mozilla.

Sierra Games

TechnologiesSelf Hosted:

socket.io ­ node.js

SockJS ­ Client library with multiple server options(node.js/erlang/lua/python)

FAYE ­ node.js/ruby

XSockets ­ .NET

PHP developer? No chance! Well, there are a few options.

Hosted (platform agnostic)Pusher

There might be others :o)

Full Guide here:http://www.leggetter.co.uk/real­time­web­technologies­guide

The future of Realtime Webtechnology

WebSocketsFull native browser support

Not just web browsers

UX considerations

Performance considerations

WebHooksWe still live in a HTTP World

Realtime server to server communication

The Internet of Things

Arduino's taking over theWorld!

Questions?/ThanksI'm putting together a realtime web workshop. Ifyou are interested in attending please give me ashout.

Pusher (@pusher) are hiringhttp://pusher.com/jobs

Mobile Evangelist, Developer Evangelist, Engineer,Head of Ops

Phil Leggetter, @leggetter