Real-Time Web Apps in 2015 & Beyond
2 likes1,096 views
1) Real-time capabilities on the web have improved due to factors like increased internet usage, better server infrastructure, and more consistent browser capabilities. 2) Many applications now effectively require real-time functionality to provide up-to-date information and engage users. Real-time is becoming an expected part of the user experience. 3) Emerging technologies like the Internet of Things and event streaming APIs will further drive real-time experiences across more domains in the future. Real-time capabilities will continue integrating into more areas of applications and systems.
![Receive message
var socket = new eio.Socket('ws://localhost/');
socket.on('open', function(){
socket.on('message', function(data){
console.log(data);
});
});
Send Message
var engine = require('engine.io');
var server = engine.listen(80);
server.on('connection', function(socket){
socket.send('utf 8 string');
socket.send(new Buffer([0, 1, 2, 3, 4, 5])); // binary data
})
55 / 114](https://image.slidesharecdn.com/real-timewebappsin2015beyond-150718161546-lva1-app6891/85/Real-Time-Web-Apps-in-2015-Beyond-55-320.jpg)
Real-Time Web Apps in 2015 & Beyond
- 1. Real-Time Web Apps in 2015 & Beyond PHIL @LEGGETTER Head of Evangelism pusher.com 1 / 114 @leggetter
- 2. A bit about me Working with Real-Time Tech since 2001 Software Engineer APIs, SDKs, Docs, Developer Experience Blogger & Author Roles: Caplin Systems ESRI Caplin Systems Pusher Caplin Systems/BladeRunnerJS Pusher 2 / 114
- 3. 3 / 114
- 4. 4 / 114
- 5. Realtime Web Apps 5 / 114
- 6. Realtime Web Apps ↓ s/Web/Internet 6 / 114
- 7. Realtime Web Apps ↓ s/Web/Internet ↓ Realtime Internet Apps 7 / 114
- 9. Hard Realtime 9 / 114
- 10. 10 / 114
- 11. Firm/Soft Realtime 11 / 114
- 12. When do we need Realtime? 12 / 114
- 13. Data Is there a timely nature to the data? 13 / 114
- 14. You Have Real-Time Data Events === Real-Time Data Data Changes System Interactions User Interactions 14 / 114
- 15. 15 / 114
- 16. User Experience Is there a timely nature to the experience? 16 / 114
- 17. Realtime is required when there's a Need or Demand for: Up to date information Interaction to maintain engagement (UX) 17 / 114
- 18. These aren't new Needs or Demands But... 18 / 114
- 20. 20 / 114
- 21. 21 / 114
- 22. HTTP was better. But many wanted more. 22 / 114
- 23. 23 / 114
- 24. 24 / 114
- 25. 25 / 114
- 26. 26 / 114
- 27. HTTP wasn't enough! 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 27 / 114
- 28. Hacks & Tricks Java Applets Flash HTTP Hacks 28 / 114
- 29. 5 Things that have made Real-Time Mainstream? 29 / 114
- 30. 1. Social 30 / 114
- 31. 2. Improved Server Power Processors and Memory are cheaper & faster More data can be processes Connections can be dealt with (C10k problem) Scaling is easier 31 / 114
- 32. 3. Web Browser Capabilities and Consistency Cross browser XMLHTTPRequest support CORS Server Sent Events / EventSource WebSocket WebRTC 32 / 114
- 33. 33 / 114
- 34. Any Client Technology 34 / 114
- 35. 4. Software Choice Lots of language & runtime options More open source solutions Hosted services 35 / 114
- 36. 5. MASSIVE Increase in Internet Usage 36 / 114
- 37. 37 / 114
- 38. Internet Usage (per day) 200 billion emails 38 / 114
- 39. Internet Usage (per day) 200 billion emails 7 million blog posts written† 500 million tweets 39 / 114
- 40. 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 2 billion minutes spent on Skype 33 million hours of Netflix watched 200 million hours of YouTube watched 40 / 114
- 41. 41 / 114
- 42. 42 / 114
- 43. Max Williams (@maxthelion) - CEO, Pusher “I'm not sure I believe that there is such a thing as "realtime apps" any more. Apps either update instantly and smoothly, or they appear broken. I feel that "realtime" as a feature has moved down the Kano graph. It is much more of an expectation, than an "exciter". 43 / 114
- 44. 44 / 114
- 45. Real-Time is Essential because... 45 / 114
- 46. The Internet... 46 / 114
- 47. The Internet... 1. is the communications platform 47 / 114
- 48. The Internet... 1. is the communications platform 2. is becoming the entertainment platform 48 / 114
- 49. Realtime Apps in 2015 49 / 114
- 50. Realtime Apps in 2015 Communication Patterns Use Cases 50 / 114
- 51. Simple Messaging Notifications & Signalling 51 / 114
- 52. 52 / 114
- 53. 0:00 53 / 114 Internet ^5 Machine
- 55. Receive message var socket = new eio.Socket('ws://localhost/'); socket.on('open', function(){ socket.on('message', function(data){ console.log(data); }); }); Send Message var engine = require('engine.io'); var server = engine.listen(80); server.on('connection', function(socket){ socket.send('utf 8 string'); socket.send(new Buffer([0, 1, 2, 3, 4, 5])); // binary data }) 55 / 114
- 57. 57 / 114
- 58. PubSub (Complex Data) Activity Streams Live Polls/Surveys Data Visualizations Chat 58 / 114
- 59. 59 / 114
- 60. 60 / 114
- 61. 61 / 114
- 62. PubSub Subscribe var client = new Faye.Client('http://localhost:8000/'); client.subscribe('/messages', function(message) { alert('Got a message: ' + message.text); }); Publish client.publish('/messages', {text: 'Hello world'}); 62 / 114
- 63. Evented PubSub Subscribe var pusher = new Pusher( APP_KEY ); var channel = pusher.subscribe( 'messages' ); channel.bind( 'new_message', function( data ) { // Handle Update } ); channel.bind( 'message_updated', function( data ) { } ); Publish var data = {text: 'Hello world'}; pusher.trigger( 'messages', 'new_message', data ); 63 / 114
- 64. Self Hosted Socket.IO † Faye SocketStream XSockets † Hosted Hydna PubNub Pusher † Realtime.co PubSub Solutions † Evented PubSub solutions 64 / 114
- 65. 65 / 114
- 66. RPC/RMI Complex Client/Server Interactions Use Cases? 66 / 114
- 67. 67 / 114
- 68. 68 / 114
- 69. 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 ); 69 / 114
- 70. Self Hosted: dNode (Node, PHP, Java, Ruby, Perl) eureca.io (Node) Java.rmi Meteor (Node) SignalR (.NET) SocketStream (Node.js) XSockets (.NET) Hosted: SignalR/Windows Azure? RPC/RMI Solutions 70 / 114
- 71. 71 / 114
- 73. 73 / 114
- 74. 74 / 114
- 75. 0:00 75 / 114 Physical Collaborative Mapping
- 76. 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 }); 76 / 114
- 77. Self Hosted: CouchDB + pouchdb DerbyJS LowlaDB Meteor ShareJS Hosted: Firebase Flybase Google Drive Realtime API Realtime.co Simperium Syncano Data Sync Solutions 77 / 114
- 78. 78 / 114
- 79. How do you choose a solution? 79 / 114
- 80. Technology Considerations Team Skillset (language, infrastructure) Business Focus Native Mobile Support Stage of Development 80 / 114
- 81. Connection Strategy 81 / 114
- 82. Communication Patterns 82 / 114
- 83. 83 / 114
- 84. Watch my videos :) ForwardJS Feb 2015 FOWA London 2013 84 / 114
- 85. Beyond 85 / 114
- 87. Standardized Communication Patterns & Protocols SocketIO protocol DDP (Distributed Data Protocol) PubSub: MQTT? Evented PubSub? Other possible standards? 87 / 114
- 88. More "Things"! 88 / 114
- 89. 89 / 114
- 90. 0:00 90 / 114
- 91. The Physical Web 91 / 114
- 92. IoT Platforms SmartThings NinjaBlocks - announcement EvryThing SKYNET.im -> Octoblu And many existing real-time services... 92 / 114
- 93. And APIs... 93 / 114
- 94. APIs Twilio SendGrid MailChimp Iron.io GitHub Trello ... APIs for APIs Fanout.io Real-Time Evented APIs 94 / 114
- 95. 95 / 114
- 96. 96 / 114
- 97. 97 / 114
- 98. Real-Time Experiences Even More Essential Data Audio & Video 98 / 114
- 99. Real-Time Use Case Evolution Notifications & Signalling Activity Streams Data Viz & Polls Chat Collaboration Multiplayer Games 99 / 114
- 100. Notifications/Activity Streams -> Actions 100 / 114 The end of apps as we know it - Intercom
- 102. Event Streams 102 / 114
- 103. Unified UIs 103 / 114
- 104. Multi-Device Experiences 104 / 114
- 105. Watch_Dogs 105 / 114
- 106. 0:00 106 / 114
- 107. Summary 107 / 114
- 108. Summary Internet === Communications platform 108 / 114
- 109. Summary Internet === Communications platform Easier to innovate 109 / 114
- 110. Summary Internet === Communications platform Easier to innovate Everybody has real-time data Use it to build expected experiences If not, your apps will feel broken 110 / 114
- 111. Summary Internet === Communications platform Easier to innovate Everybody has real-time data Use it to build expected experiences If not, your apps will feel broken Future Improvements: Infrastructure & Standards IoT APIs Event Streams 111 / 114
- 112. Realtime Internet Apps === Internet of Things === Web Browsers + Web Servers + Native Apps + Devices + ... 112 / 114
- 113. Real-Time Web Apps in 2015 & Beyond Thanks! Feedback & Questions! PHIL @LEGGETTER Head of Evangelism pusher.com 113 / 114
- 114. References Pusher These slides - leggetter.github.io/realtime-internet-apps/ Mary Meeker's internet trend report Kano model DDP Protocol Socket.IO protocol MQTT Real-Time Web Tech Guide The end of apps as we know them - Intercom 114 / 114