Real Time, Real Fast

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.ﬂickr.com/photos/dylans/3439037456/

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

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.ﬂickr.com/photos/dylans/5916167025/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Real-Time Real-Fast Consider cost/bene ts of diﬀerent 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

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

Real Time, Real Fast

by SitePen

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Real Time, Real Fast Presentation Transcript