Realtime Web Apps in 2014 & Beyond

Realtime Web Apps

In 2014 & BeyondPhil @leggetter

Realtime Web Apps

↓s/Web/Internet

↓Realtime Internet Apps

Internet Usage (per day)

†200 billion emails7 million blog posts written500 million tweets55 million Facebook status updates5 billion Google+ +1's60 million Instagram photos posted33 million hours of Netflix watched200 million hours of YouTube watched2 billion minutes spent on Skype

The Internet...1. is the communications platform

2. is becoming the entertainment platform

When do we need Realtime?

DataIs there a timely nature to the data?

User ExperienceIs there a timely nature to the experience?

Realtime is required when there's aNeed or Demand for:

Up to date informationInteraction to maintain engagement

These aren't new Needs orDemands

HTTP, Browsers & Servers made

it Difficult

What made it difficult?HTTP - request/response paradigmKeeping persistent HTTP connections aliveNo cross-browser XMLHttpRequest2 connection limitNo browser cross origin supportGeneral cross browser incompatibilities

Hacks & TricksJava AppletsFlashHTTP Hacks

Driving Forces behind the Hacks?

Realtime Going Mainstream

A Realisation & Demonstration of

Value

Accessible Realtime Technology

Improved Server PowerProcessors and Memory are cheaper & fasterMore data can be processesConnections can be dealt withScaling is easier

Web Browser Capabilities andConsistency

Cross browser XMLHTTPRequest supportCORSServer Sent Events / EventSourceWebSocketWebRTC

Software ChoiceLots of language & runtime optionsMore open source solutionsHosted services

Any Client Technology

Realtime Apps in 2014

Notifications & Signalling

Internet ^5 Machine

0:48

talky.io

Receive message

var sock = new SockJS( 'http://localhost:9999/sockjs' );

sock.onmessage = function( e ) {

console.log( 'message', e.data );

};

Send Message

var http = require('http');

sockjs = require('sockjs');

var hello = sockjs.createServer();

hello.on( 'connection' , function( conn ) {

conn.write( 'hello SockJS' );

} );

var server = http.createServer();

hello.installHandlers( server, { prefix:'/sockjs' } );

server.listen( 9999, '0.0.0.0' );

Simple Messaging SolutionsServer/Server

WebHooksClient/Server

WebSocket-only or HTTP-only solutions

Peer-to-Peer

SockJSEngine.IOPrimus

simpleWebRTCPeerJS

Lots of Data

0:55

Subscribe

var pusher = new Pusher( APP_KEY );

var channel = pusher.subscribe( 'game-overview' );

channel.bind( 'goal_scored', function( data ) {

// Handle Update

} );

channel.bind( 'time_updated', function( data ) {

} );

Publish

var pusher = new Pusher( APP_KEY );

var data = { team_id = 'manchester_city',

goals_scored: 2,

goal_scorer: 'Sergio Agüero' };

pusher.trigger( 'game-overview', 'goal_scored', data );

PubSub SolutionsSelf Hosted

Hosted

Socket.IOFayeXSockets

GoInstantHydnaPubNubPusherRealtime.co

Complex Client/Server

Interactions

Server

public class GameHub : Hub {

public void Move(Player p, int x, int y) {

// Check if move is allowed

// Call the broadcastMessage method to update clients.

Clients.All.playerMoved(p, x, y);

}

}

Client

$.connection.hub.start(); // async

var game = $.connection.gameHub;

game.client.playerMoved = function (player, x, y) {

// update game

};

game.server.move( me, x, y );

RMI SolutionsSelf Hosted:

Hosted:SignalR on Windows Azure?

dNodeSignalRJava.rmi

Collaborating on Data

Physical Collaborative Mapping

1:10

DataSync

var myDataRef = new Firebase('https://my-app.firebaseio.com/');

myDataRef.push( {creator: '@leggetter', text: 'Not a Test!'} );

myDataRef.on( 'child_added', function(snapshot) {

// Add the data

});

myDataRef.on( 'child_changed', function(snapshot) {

// Update the data

});

myDataRef.on( 'child_removed', function(snapshot) {

// Remove the data

});

Data Sync SolutionsSelf Hosted:

+ Hosted:

DerbyJSMeteorCouchDB pouchdb

FirebaseGoogle Drive Realtime APIGoInstantRealtime.coSimperium

Choosing a Solution

Beyond

Network InfrastructureReliablitySpeedBeyond HTTP

More "Things"!

0:32

And APIs...

Use RealtimeTwilioSendGridMailChimpIron.ioGitHubTrello...

APIs for APIsFanout.io

IoT PlatformsSmartThingsNinjaBlocksEvryThingSKYNET.im

MQTT

MQTT is a machine-to-machine(M2M)/"Internet of Things"connectivity protocol.

MQTTHiveMQEclipse Paho

Multi-Device Experiences

Watch_Dogs

1:07

Realtime Internet Apps =

Internet of Things =

Web Browsers +Web Servers +Native Apps +

Devices +

Thanks!

Questions?

Phil @leggetterBladeRunnerJS

j.mp/realtime-sotr14j.mp/realtime-tech-guide