• Like
  • Save

Real Time, Real Fast

  • 2,409 views
Uploaded on

Rich Web Experience 2011 Keynote

Rich Web Experience 2011 Keynote

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,409
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. presents Real-Time Real-Fast© SitePen, Inc. All Rights Reserved
  • 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. Real Time Apps Enterprise Consumer Reporting Multi-Player Games Monitoring Drawing Collaboration Chat Trading© SitePen, Inc. All Rights Reserved
  • 4. Evolution of Web App Development https://secure.flickr.com/photos/bytemarks/4733371072/sizes/l/in/photostream/© SitePen, Inc. All Rights Reserved
  • 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. 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. We Want Morehttps://secure.flickr.com/photos/dylans/5206483166/ © SitePen, Inc. All Rights Reserved
  • 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. Multifarious Experiences© SitePen, Inc. All Rights Reserved
  • 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. "Why come you dont have real-time?"Justin Smith, Idiocracy, 2006© SitePen, Inc. All Rights Reserved
  • 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. https://secure.flickr.com/photos/dichohecho/3793637658/ © SitePen, Inc. All Rights Reserved
  • 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. Choice: Clients dojox.socket jQuery MooTools Socket.io js.io ...© SitePen, Inc. All Rights Reserved
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. When? Sometime between now and 2015. http://caniuse.com/websockets© SitePen, Inc. All Rights Reserved
  • 29. Rolling Your Own© SitePen, Inc. All Rights Reserved
  • 30. Persevere + Node.js© SitePen, Inc. All Rights Reserved
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Deferred / Promise API Deferred API Deferred then cancel resolve reject promise Promise API then cancel© SitePen, Inc. All Rights Reserved
  • 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. 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. OpenCoWeb© SitePen, Inc. All Rights Reserved
  • 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. Hosted Services© SitePen, Inc. All Rights Reserved
  • 50. Pusher© SitePen, Inc. All Rights Reserved
  • 51. Google App Engine Channel & Hangout APIs© SitePen, Inc. All Rights Reserved
  • 52. Gnip© SitePen, Inc. All Rights Reserved
  • 53. Game Closure© SitePen, Inc. All Rights Reserved
  • 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. © SitePen, Inc. All Rights Reserved
  • 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. Thanks! Q&A SitePen sitepen.com Dojo Toolkit dojotoolkit.org Twitter: @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved