presents                                      Real-Time                                      Real-Fast© SitePen, Inc. All ...
Nice to Meet you      Dylan Schiemann                                      Co-Founder of Dojo Toolkit                     ...
Real Time Apps                                      Enterprise            Consumer                                        ...
Evolution of Web App Development  https://secure.flickr.com/photos/bytemarks/4733371072/sizes/l/in/photostream/© SitePen, I...
Evolution of Web App Development                                                                                     Web 1...
Evolution of Web App Development                                      Web 2.0                                         Smar...
We Want Morehttps://secure.flickr.com/photos/dylans/5206483166/    © SitePen, Inc. All Rights Reserved
Revolution: Separation of Data and UX                                                                           Users want...
Multifarious Experiences© SitePen, Inc. All Rights Reserved
Considerations for Modern Apps               Data vs. presentation               Context switching               Packaging...
"Why come you dont have real-time?"Justin Smith, Idiocracy, 2006© SitePen, Inc. All Rights Reserved
"Its really difficult"                                      Connection Options:                                      Long po...
https://secure.flickr.com/photos/dichohecho/3793637658/     © SitePen, Inc. All Rights Reserved
Choice: Servers and Services               Node.js                  Lightstreamer                      Persevere         C...
Choice: Clients               dojox.socket               jQuery               MooTools               Socket.io            ...
Modern Real Time Technologies               Real Time Applications                      Applications that give you informa...
Modern Real Time Technologies                                               Real-Time Centric                      Real-Ti...
Challenges               HTTP designed to be immediate request and response                      Requires long-lived respo...
Challenges               Dealing with network issues, temporary connectivity drops                      Especially 3G/4G a...
Real Time Application Pipeline               Loading the web application                      Minimize # of requests      ...
Biggest Challenges               Massive scale services (Twitter, Facebook, Google)               Real-time client-side to...
Transports                                                        Pros                                  Cons    WebSocket ...
WebSockets               Enables real-time web, or Comet               WebSocket is a technology providing for bi-directio...
Basic WebSocket Sample      // Open the socket      var socket = new WebSocket("ws://localhost:8080/services/infoPusher");...
WebSocket Progress             Initial drafts hampered by security and immature design                                    ...
Current Browser Support                                      Version 5 and up - Implements old 00 draft                   ...
Mobile Browser Support                                      iOS 4.2 and up - Implements old 00 draft                      ...
When? Sometime between now and 2015.                                      http://caniuse.com/websockets© SitePen, Inc. All...
Rolling Your Own© SitePen, Inc. All Rights Reserved
Persevere + Node.js© SitePen, Inc. All Rights Reserved
Persevere               REST server for HTML5/Ajax applications               JavaScript persistence framework            ...
Persevere Design Philosophy               Designed for applications with signi cant client-side logic               Thin-s...
Packages/Sub-Projects                                      Persevere consists of a number                                 ...
Tunguska             Persevere module for Node.js based Comet delivery             Supports WebSocket             Integrat...
Tunguska               Why Pub/Sub? It scales, well-understood               Wildcards/Globbing                      Named...
CometD               Java-based               Bayeux protocol for pubsub               Long-polling and WebSockets support...
dojox/socket.js                                              Connect to                                              WebSo...
dojox.socket               Wraps the WebSocket API with an API consistent with the               rest of the Dojo Toolkit ...
dojox.socket and Comet Servers               dojox.socket works with CometD, Socket.IO, Tunguska,               Hookbox, O...
dojox.socket Sample    // Create dojox.socket instance    var socket = new dojox.socket("/comet");    // Create open event...
Side-by-side  var socket = new WebSocket("ws://     var socket = new dojox.socket("/  localhost:8080/services/            ...
dojox.socket.Reconnect Sample      // Create dojox.socket instance      var socket = new dojox.socket("/comet");      // M...
Promising Async               Thinking asynchronously is challenging at rst               Promises/A CommonJS proposal:   ...
Deferred / Promise API               Deferred API                                      Deferred                      then ...
The result of then                The return of promise.then(someCallback) is a new promise for the                return ...
dojo.when (Deferred.when)               Handles either promises or values               First two arguments               ...
OpenCoWeb© SitePen, Inc. All Rights Reserved
OpenCoWeb Features               Open web technologies such as Dojo, cometD, Bayeux, and               WebSocket. The fram...
Hosted Services© SitePen, Inc. All Rights Reserved
Pusher© SitePen, Inc. All Rights Reserved
Google App Engine Channel & Hangout APIs© SitePen, Inc. All Rights Reserved
Gnip© SitePen, Inc. All Rights Reserved
Game Closure© SitePen, Inc. All Rights Reserved
Real-Time Real-Fast               Consider cost/bene ts of different transports               Minimize library weight, don’...
© SitePen, Inc. All Rights Reserved
SitePen: We help our clients build great apps.               Desktop and Mobile Web App Development, Design, Advice       ...
Thanks! Q&A     SitePen sitepen.com     Dojo Toolkit dojotoolkit.org     Twitter: @dylans @sitepen @dojo© SitePen, Inc. Al...
Upcoming SlideShare
Loading in...5
×

Real Time, Real Fast

2,557

Published on

Rich Web Experience 2011 Keynote

Published in: Technology, Business
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,557
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Real Time, Real Fast

  1. 1. presents Real-Time Real-Fast© SitePen, Inc. All Rights Reserved
  2. 2. Nice to Meet you Dylan Schiemann Co-Founder of Dojo Toolkit CEO, SitePen, Inc. President, Dojo Foundation @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved
  3. 3. Real Time Apps Enterprise Consumer Reporting Multi-Player Games Monitoring Drawing Collaboration Chat Trading© SitePen, Inc. All Rights Reserved
  4. 4. Evolution of Web App Development https://secure.flickr.com/photos/bytemarks/4733371072/sizes/l/in/photostream/© SitePen, Inc. All Rights Reserved
  5. 5. Evolution of Web App Development Web 1.0 Dumb client, smart server Focus on HTML & CSS, "separation of markup and presentation"© SitePen, Inc. All Rights Reserved https://secure.flickr.com/photos/dylans/3439037456/
  6. 6. Evolution of Web App Development Web 2.0 Smarter client, smart server, con ict Initial break of many paradigms Search indexing, history, navigation Didnt really account for mobile DOM-centric Ajax: sort of real-time© SitePen, Inc. All Rights Reserved
  7. 7. We Want Morehttps://secure.flickr.com/photos/dylans/5206483166/ © SitePen, Inc. All Rights Reserved
  8. 8. Revolution: Separation of Data and UX Users want access to data, info in a variety of experiences relevant to their current context Aggregation User Interfaces and experiences Challenging past assumptions statelessness, truly embracing REST abusing markup for "separation of markup and presentation" control and federation of data© SitePen, Inc. All Rights Reserved https://secure.flickr.com/photos/dylans/5916167025/
  9. 9. Multifarious Experiences© SitePen, Inc. All Rights Reserved
  10. 10. Considerations for Modern Apps Data vs. presentation Context switching Packaging Testing & monitoring Choice Real-time considerations Convenient APIs and approaches to development© SitePen, Inc. All Rights Reserved
  11. 11. "Why come you dont have real-time?"Justin Smith, Idiocracy, 2006© SitePen, Inc. All Rights Reserved
  12. 12. "Its really difficult" Connection Options: Long polling: XHR Forever Frame: iframe Script tags WebSockets ActiveXObject(“html le”) Mime Messaging Flash Remoting© SitePen, Inc. All Rights Reserved
  13. 13. https://secure.flickr.com/photos/dichohecho/3793637658/ © SitePen, Inc. All Rights Reserved
  14. 14. Choice: Servers and Services Node.js Lightstreamer Persevere Caplin Socket.io Pusher Connect/Express WebSync Flatiron GameClosure Hook.io SuperFeedr CometD/Jetty Gnip APE Hookbox© SitePen, Inc. All Rights Reserved
  15. 15. Choice: Clients dojox.socket jQuery MooTools Socket.io js.io ...© SitePen, Inc. All Rights Reserved
  16. 16. Modern Real Time Technologies Real Time Applications Applications that give you information as it happening Utilize Comet technologies to asynchronously receive messages from server How to get information to the user as fast as possible? Real-time technologies take us further than Ajax ever could© SitePen, Inc. All Rights Reserved
  17. 17. Modern Real Time Technologies Real-Time Centric Real-Time Supplemental Applications that are completely based Applications that work better with real- Design on real-time functionality time Examples Chat, Gaming Facebook, Google Docs Maintaining responsiveness over Keeping a lightweight footprint, un- Challenges various networks/technologies obstrusive Download size less important, use Approach fastest technology whatever the size. Use lightweight transports only© SitePen, Inc. All Rights Reserved
  18. 18. Challenges HTTP designed to be immediate request and response Requires long-lived response to enable asynchronously server- sent messages, many servers not designed for long-lived responses, scale poorly Creating a channel of communication on top of stateless layer Connection limits Long-lived HTTP response consumes a connection 2 on IE7 and earlier© SitePen, Inc. All Rights Reserved
  19. 19. Challenges Dealing with network issues, temporary connectivity drops Especially 3G/4G and public wi Handling different technologies in different browsers Some support progressive XHR, some WebSocket, etc. Cross-origin communication Many use off-board server for optimized Comet communication All while keeping the application fast, light.© SitePen, Inc. All Rights Reserved
  20. 20. Real Time Application Pipeline Loading the web application Minimize # of requests Utilize builds Minimize size of requests Your app should be mostly your app (your code, your images), not your framework Minimum needed for the browser Many modern browsers provide a lot Particularly mobile browsers (only send what is needed) Shouldn’t be sending XHR, ash modules for a mobile device that support WebSocket© SitePen, Inc. All Rights Reserved
  21. 21. Biggest Challenges Massive scale services (Twitter, Facebook, Google) Real-time client-side to server-side streaming Audio/video streaming from browser to server e.g. to record video straight from mobile web app to YouTube Managing large data BigTable, Protobuf, etc.© SitePen, Inc. All Rights Reserved
  22. 22. Transports Pros Cons WebSocket Fast, cross-domain, full duplex Only on some browsers, proxy issues Cross-domain and streaming XHR Available everywhere limitations, half-duplex Fast, cross-domain, full duplex, wide Flash Proprietary, heavy, mobile availability JSONP Cross-domain Half-duplex, no streaming© SitePen, Inc. All Rights Reserved
  23. 23. WebSockets Enables real-time web, or Comet WebSocket is a technology providing for bi-directional, full- duplex communications channels, over a single TCP socket. Standardized by the W3C/IETF: http://dev.w3.org/html5/websockets/ Uses the ws (unsecure) or wss (secure) protocol Provides open, close, error, and message events Provides send and close methods Browser support emerged in 2011© SitePen, Inc. All Rights Reserved
  24. 24. Basic WebSocket Sample // Open the socket var socket = new WebSocket("ws://localhost:8080/services/infoPusher"); // Create open event listener socket.onopen = function(e){ console.log("Socket opened successfully!"); } // Create message event listener socket.onmessage = function(event) { console.log("Message received!", event.data); } // Create close event listener socket.onclose = function(e){ console.log("Socket closed!"); } // Create error event listener socket.onerror = function(e){ console.log("Ooops! Error!",e); } // Send a message to the server socket.send("This is my message!"); // Close the socket socket.close();© SitePen, Inc. All Rights Reserved
  25. 25. WebSocket Progress Initial drafts hampered by security and immature design First major version that was implemented (in Chrome and Safari), prone to proxy hixie-75 confusion and cache poisoning hixie-76 Some xes, but still insecure. Transitioning to IETF-HIBY administration hybi-00 Major changes to handshake to achieve secure communication, implemented in hybi-07 Firefox 6 and MS’s HTML5 labs hybi-09 MS HTML5 Labs Firefox 7, Chrome 14, IE 10 Developer Preview hybi-10 hybi-17 Chrome 16© SitePen, Inc. All Rights Reserved
  26. 26. Current Browser Support Version 5 and up - Implements old 00 draft Version 14 and up has recent support None (HTML5 Labs extension, IE10 preview) Version 11 and up - Disabled by default, implements old 00 draft Version 6 and up has recent support© SitePen, Inc. All Rights Reserved
  27. 27. Mobile Browser Support iOS 4.2 and up - Implements old 00 draft Blackberry OS7 - Has recent support No Android browser support None Version 11 and up - Disabled by default, but implements old 00 draft Version 6 and up has recent support© SitePen, Inc. All Rights Reserved
  28. 28. When? Sometime between now and 2015. http://caniuse.com/websockets© SitePen, Inc. All Rights Reserved
  29. 29. Rolling Your Own© SitePen, Inc. All Rights Reserved
  30. 30. Persevere + Node.js© SitePen, Inc. All Rights Reserved
  31. 31. Persevere REST server for HTML5/Ajax applications JavaScript persistence framework Pluggable storage: MongoDB, Redis, CouchDB, MySQL, etc. Real-time data noti cations High performance, asynchronous, scalable End-to-end JavaScript SSJS: Extends Node.js or Narwhal+Jack (and soon Ringo) Choice is good.© SitePen, Inc. All Rights Reserved
  32. 32. Persevere Design Philosophy Designed for applications with signi cant client-side logic Thin-server applications, zero to minimal server-side code needed Standards-based, HTTP/REST Promise-based asynchronicity for scalability and composibility Modular design, JavaScript everywhere Each package can be used on its own Some can be used in browser too© SitePen, Inc. All Rights Reserved
  33. 33. Packages/Sub-Projects Persevere consists of a number of sub-projects Cohesively come together for full JavaScript end-to-end stack© SitePen, Inc. All Rights Reserved
  34. 34. Tunguska Persevere module for Node.js based Comet delivery Supports WebSocket Integrates with data model Uses pub/sub based delivery Distributed/multi-server AFL/BSD License (contributed to Dojo Foundation) https://github.com/kriszyp/tunguska© SitePen, Inc. All Rights Reserved
  35. 35. Tunguska Why Pub/Sub? It scales, well-understood Wildcards/Globbing Named events Distributed scaling Designed for Comet Integrates with Pintura JSGI-based RESTful web framework (HTTP middleware API) use message streams to make subscriptions, send messages Connecting to multiple servers for scalability© SitePen, Inc. All Rights Reserved
  36. 36. CometD Java-based Bayeux protocol for pubsub Long-polling and WebSockets support Strong scaling Works well with Dojo, jQuery, and general JS http://www.slideshare.net/Codemotion/comet-websocket- web-applications© SitePen, Inc. All Rights Reserved
  37. 37. dojox/socket.js Connect to WebSocket Receive server message Yes Check for WebSocket support message Connection failure (due to proxy) event No Make XHR Receive request response Very lightweight socket Fallback to XHR if not communication available WebSocket if available© SitePen, Inc. All Rights Reserved
  38. 38. dojox.socket Wraps the WebSocket API with an API consistent with the rest of the Dojo Toolkit Provides fallback for servers that don’t support WebSockets: dojox.socket.LongPoll Provides dojox.socket.Reconnect to automatically reconnect if disconnected Provides an on method which aliases socket.connect© SitePen, Inc. All Rights Reserved
  39. 39. dojox.socket and Comet Servers dojox.socket works with CometD, Socket.IO, Tunguska, Hookbox, Orbited, etc. http://www.sitepen.com/blog/2010/10/31/dojo-websocket/© SitePen, Inc. All Rights Reserved
  40. 40. dojox.socket Sample // Create dojox.socket instance var socket = new dojox.socket("/comet"); // Create open event listener socket.on("open",function(event){ console.log("Socket opened successfully!"); }); // Create message event listener socket.on("message",function(event){ console.log("Message received!", event, event.data); // Send a message back! socket.send("Received your message!"); }); // Customized headers var socket2 = new dojox.socket({ url: "/comet", headers: { "Accept": "application/json", "Content-Type": "application/json" } });© SitePen, Inc. All Rights Reserved
  41. 41. Side-by-side var socket = new WebSocket("ws:// var socket = new dojox.socket("/ localhost:8080/services/ comet"); infoPusher"); socket.on("open",function(event){ socket.onopen = function(e) console.log("Socket opened { console.log("Socket opened successfully!"); successfully!"); } }); socket.onmessage = function(event) socket.on("message",function(event) { { console.log("Message console.log("Message received!", event.data); received!", event, event.data); } socket.send("Received your socket.onclose = function(e) message!"); { console.log("Socket closed!"); } }); socket.onerror = function(e) { console.log("Ooops! Error!",e); } socket.send("This is my message!"); socket.close();© SitePen, Inc. All Rights Reserved
  42. 42. dojox.socket.Reconnect Sample // Create dojox.socket instance var socket = new dojox.socket("/comet"); // Make the socket reconnect if necessary socket = dojox.socket.Reconnect(socket);© SitePen, Inc. All Rights Reserved
  43. 43. Promising Async Thinking asynchronously is challenging at rst Promises/A CommonJS proposal: http://wiki.commonjs.org/wiki/Promises/A A promise is something that represents a value returned from an asynchronous operation© SitePen, Inc. All Rights Reserved
  44. 44. Deferred / Promise API Deferred API Deferred then cancel resolve reject promise Promise API then cancel© SitePen, Inc. All Rights Reserved
  45. 45. The result of then The return of promise.then(someCallback) is a new promise for the return value of someCallback When creating our own APIs we can leverage this functionality, returning the returned promise from .then // Make a request that returns metadata and an array of users var def = dojo.xhrGet({url: "/users", /*...*/}); // Create a new promise for just the users var users = def.then(function(data){ return data.users; }); // Hand back our users return users;© SitePen, Inc. All Rights Reserved
  46. 46. dojo.when (Deferred.when) Handles either promises or values First two arguments promiseOrValue callback When given a promise, it returns a promise for the return of the callback, like .then does© SitePen, Inc. All Rights Reserved
  47. 47. OpenCoWeb© SitePen, Inc. All Rights Reserved
  48. 48. OpenCoWeb Features Open web technologies such as Dojo, cometD, Bayeux, and WebSocket. The framework includes: JavaScript operation engine using operational transformation to resolve con icting, simultaneous changes JavaScript API for sending and receiving coweb events Python coweb server built on the Tornado web server Java coweb server built on cometd-java API documentation, tutorials, and examples Started by IBM, part of the Dojo Foundation© SitePen, Inc. All Rights Reserved
  49. 49. Hosted Services© SitePen, Inc. All Rights Reserved
  50. 50. Pusher© SitePen, Inc. All Rights Reserved
  51. 51. Google App Engine Channel & Hangout APIs© SitePen, Inc. All Rights Reserved
  52. 52. Gnip© SitePen, Inc. All Rights Reserved
  53. 53. Game Closure© SitePen, Inc. All Rights Reserved
  54. 54. Real-Time Real-Fast Consider cost/bene ts of different transports Minimize library weight, don’t send code that isn’t needed Use WebSocket when available Minimize round-trips when using HTTP Use a scalable architecture with constant time/space event distribution WebSocket is getting better, safer, and more ubiquitous© SitePen, Inc. All Rights Reserved
  55. 55. © SitePen, Inc. All Rights Reserved
  56. 56. SitePen: We help our clients build great apps. Desktop and Mobile Web App Development, Design, Advice Support & Training Strong advocates and contributors of FOSS Works with some amazing companies and organizations:© SitePen, Inc. All Rights Reserved
  57. 57. Thanks! Q&A SitePen sitepen.com Dojo Toolkit dojotoolkit.org Twitter: @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved

×