Realtime Web Apps in 2014 & Beyond
Upcoming SlideShare
Loading in...5
×
 

Realtime Web Apps in 2014 & Beyond

on

  • 620 views

It has been possible to instantly push information from a web server to a web browser for at least 10 years, but this technology has finally gone mainstream thanks to technologies like WebSockets and ...

It has been possible to instantly push information from a web server to a web browser for at least 10 years, but this technology has finally gone mainstream thanks to technologies like WebSockets and solutions like SignalR, socket.io, Faye and Pusher. In this sessions I'll cover the past, present and future of client/server communication technology, the realtime web and provide a number of use cases and demonstrations of how the technology is actually used today (it's not just chat and spaceship games).

Statistics

Views

Total Views
620
Views on SlideShare
574
Embed Views
46

Actions

Likes
1
Downloads
9
Comments
0

2 Embeds 46

https://twitter.com 41
http://www.slideee.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Realtime Web Apps in 2014 & Beyond Realtime Web Apps in 2014 & Beyond Presentation Transcript

  • Realtime Web Apps In 2014 & Beyond Phil @leggetter
  • Realtime Web Apps ↓ s/Web/Internet ↓ Realtime Internet Apps
  • Internet Usage (per day) † 200 billion emails 7 million blog posts written 500 million tweets 55 million Facebook status updates 5 billion Google+ +1's 60 million Instagram photos posted 33 million hours of Netflix watched 200 million hours of YouTube watched 2 billion minutes spent on Skype
  • The Internet... 1. is the communications platform 2. is becoming the entertainment platform
  • When do we need Realtime?
  • Data Is there a timely nature to the data?
  • User Experience Is there a timely nature to the experience?
  • Realtime is required when there's a Need or Demand for: Up to date information Interaction to maintain engagement
  • These aren't new Needs or Demands
  • HTTP, Browsers & Servers made it Difficult
  • What made it difficult? HTTP - request/response paradigm Keeping persistent HTTP connections alive No cross-browser XMLHttpRequest 2 connection limit No browser cross origin support General cross browser incompatibilities
  • Hacks & Tricks Java Applets Flash HTTP Hacks
  • Driving Forces behind the Hacks?
  • Realtime Going Mainstream
  • A Realisation & Demonstration of Value
  • Accessible Realtime Technology
  • Improved Server Power Processors and Memory are cheaper & faster More data can be processes Connections can be dealt with Scaling is easier
  • Web Browser Capabilities and Consistency Cross browser XMLHTTPRequest support CORS Server Sent Events / EventSource WebSocket WebRTC
  • Software Choice Lots of language & runtime options More open source solutions Hosted 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 Solutions Server/Server WebHooks Client/Server WebSocket-only or HTTP-only solutions Peer-to-Peer SockJS Engine.IO Primus simpleWebRTC PeerJS
  • 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 Solutions Self Hosted Hosted Socket.IO Faye XSockets GoInstant Hydna PubNub Pusher Realtime.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 Solutions Self Hosted: Hosted: SignalR on Windows Azure? dNode SignalR Java.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 Solutions Self Hosted: + Hosted: DerbyJS Meteor CouchDB pouchdb Firebase Google Drive Realtime API GoInstant Realtime.co Simperium
  • Choosing a Solution
  • Beyond
  • Network Infrastructure Reliablity Speed Beyond HTTP
  • More "Things"!
  • 0:32
  • And APIs...
  • Use Realtime Twilio SendGrid MailChimp Iron.io GitHub Trello ... APIs for APIs Fanout.io
  • IoT Platforms SmartThings NinjaBlocks EvryThing SKYNET.im
  • MQTT MQTT is a machine-to-machine (M2M)/"Internet of Things" connectivity protocol. MQTT HiveMQ Eclipse Paho
  • Multi-Device Experiences
  • Watch_Dogs
  • 1:07
  • Realtime Internet Apps = Internet of Things = Web Browsers + Web Servers + Native Apps + Devices +
  • Thanks! Questions? Phil @leggetter BladeRunnerJS j.mp/realtime-sotr14 j.mp/realtime-tech-guide