• Save
The Evented Web
Upcoming SlideShare
Loading in...5
×
 

The Evented Web

on

  • 6,691 views

pearson://re:mix 4/14/2011

pearson://re:mix 4/14/2011

Statistics

Views

Total Views
6,691
Views on SlideShare
6,585
Embed Views
106

Actions

Likes
22
Downloads
0
Comments
1

5 Embeds 106

http://code.pearson.com 98
http://pdn.makedatamakesense.com 5
https://twitter.com 1
http://leapf.org 1
http://partner.pearson.com 1

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

The Evented Web The Evented Web Presentation Transcript

  • The Evented Web webhooks, websockets and beyond pearson://re:mix April 14, 2011 Mike Brevoort Software Architect @ Pearson eCollege @mbrevoortThursday, April 14, 2011
  • • The evented What? Why? • Webhooks • Websockets • Asynchronous I/O and node.js • Putting it all togetherThursday, April 14, 2011
  • Semi-related points in timeThursday, April 14, 2011
  • 1990 HTML 1993 Common Gateway Interface (CGI) 1997 Java servlets 1999 XMLHTTP ActiveX control 2004 Gmail, “web 2.0” 2005 AJAX coined 2006 CometD/Bayeux 2010 Websockets Draft (Dec 2009)Thursday, April 14, 2011
  • Conditioned... ...to wait ...into a one sided conversation http://sites.google.com/site/davidnchung/StakeElephant.jpgThursday, April 14, 2011
  • When we should have been doing this! http://www.tecacentre.net/funpics/funpics/flying_elephant.jpgThursday, April 14, 2011
  • The traditional web Call Me... I won’t call you.Thursday, April 14, 2011
  • boiling yet? boiling yet? boiling yet? boiling yet? boiling yet? boiling yet? boiling yet? boiling yet? boiling yet? boiling yet? boiling yet? http://www.charlesculp.com/isleroyale07/BoilingWater_IMG_3487_800_160.jpgThursday, April 14, 2011
  • the disconnected anonymous webThursday, April 14, 2011
  • it’s all about events http://www.flickr.com/photos/cizake/4164756091/Thursday, April 14, 2011
  • I will call them Webhooks. And they will be good 2006 Jeff Lindsay @progriumThursday, April 14, 2011
  • what is a Webhook? callbacks over HTTP ... an HTTP POST that occurs when something happensThursday, April 14, 2011
  • Server ServerThursday, April 14, 2011
  • realtime instant data scalability performance throughputThursday, April 14, 2011
  • realtime instant data scalability performance throughputThursday, April 14, 2011
  • I got it! When something happens, I’ll just call you! So... relaxThursday, April 14, 2011
  • it’s simple “even a baby can do it”Thursday, April 14, 2011
  • user configurable event handling to infinity and beyond!Thursday, April 14, 2011
  • credit: Jeff Lindsay @progriumThursday, April 14, 2011
  • receive data in real time Superpoke /remove HTTP POST signed request Facebook User w/ user id removes appThursday, April 14, 2011
  • build change resolve issue script it!Thursday, April 14, 2011
  • receive data, do something, pass it on $ cat apple.txt | wc | mail -s "The count" joe@me.com http://www.flickr.com/photos/russmorris/2713018257Thursday, April 14, 2011
  • New Yo’ App event HTTP POST HT Order TP New PO ST Order Customer Yo’ Pays Warehouse HT TP Come and PO T S get itThursday, April 14, 2011
  • process data, give something in return like a typical API call but the contract is dictated by the caller g methin w hen so , I’m s happen send o going t you Y just tell me OK where Respond back with X OR call me back HEREThursday, April 14, 2011
  • Thursday, April 14, 2011
  • Webhook Standards? • Yes, it’s called HTTP • OK, but there are a few related conventions/standards including RESTFul webhooks, pubsubhubbub, etc “even a baby can do it”Thursday, April 14, 2011
  • http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  • http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  • http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  • http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  • http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  • http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  • http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  • Prospero A system-to-system messaging framework within Tempest similar to pubsubhubbub pub/sub evented messagingThursday, April 14, 2011
  • Webhooks • powerful glue • plumbing of the evented web • empoweringThursday, April 14, 2011
  • Intermission Everything’s Amazing, Nobody’s HappyThursday, April 14, 2011
  • Websockets Server ClientThursday, April 14, 2011
  • Websockets eb Server Browser w (the hard part)Thursday, April 14, 2011
  • eb Server Browser w Comet Silverlight Duplex Flash sockets WebsocketsThursday, April 14, 2011
  • ck e ts e bso W enables “native” bidirectional communication between a server and a web browserThursday, April 14, 2011
  • ck e ts e bso W W3C API and IETF Protocol Shares ports with HTTP/S (80, 443) Cross-Origin Works across firewalls, proxies and routers (theoretically)Thursday, April 14, 2011
  • m e t C o long held HTTP requests umbrella term for multiple techniques compatible aka “Ajax Push”, “Reverse Ajax”, “HTTP Streaming”Thursday, April 14, 2011
  • F la sh c k e ts S o raw TCP socket requires Flash runtime proxy and router woes can implement websocket protocolThursday, April 14, 2011
  • ig h t lv erl S i le x D u p socket or polling requires Silverlight sockets over ports 4502-4534 can implement websocket protocolThursday, April 14, 2011
  • Why not comet? • an inefficient hack • 1/2 duplex • HTTP Overhead • latency http://websocket.org/quantum.htmlThursday, April 14, 2011
  • C om et Polling http://publib.boulder.ibm.com/infocenter/wasinfo/v6r1/index.jsp?topic=/com.ibm.websphere.ajax.devguide.help/docs/PureAjax_pubsub_clients.htmlThursday, April 14, 2011
  • om et C Long Polling http://publib.boulder.ibm.com/infocenter/wasinfo/v6r1/index.jsp?topic=/com.ibm.websphere.ajax.devguide.help/docs/PureAjax_pubsub_clients.htmlThursday, April 14, 2011
  • om et C Keep-Alive Streaming http://publib.boulder.ibm.com/infocenter/wasinfo/v6r1/index.jsp?topic=/com.ibm.websphere.ajax.devguide.help/docs/PureAjax_pubsub_clients.htmlThursday, April 14, 2011
  • ckets Web so a protocol http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-03Thursday, April 14, 2011
  • ckets Web so an API var socket = new WebSocket("ws://host/socket/"); socket.onopen = function() { ! console.log("viva la socket!"); } socket.onmessage = function(msg) { ! console.log(msg);! } http://dev.w3.org/html5/websockets/Thursday, April 14, 2011
  • ckets eb so W Browser Support http://caniuse.comThursday, April 14, 2011
  • ckets Web so Security Flaw • secure Websockets (wss://) not affected • not specifically Websockets, rather affects all sockets over HTTP including Flash and Java • IETF study of 47,338 HTTP proxies tested found 0.37% and 0.017% were vulnerable to the two attack types • Browser vendors want to bulletproof Websocket wire protocol to handle even buggy implementations of intercepting proxies • Websocket protocol R6 introduced 2/6/2011, actively being reviewed. More info: http://tools.ietf.org/wg/hybi/ http://security.sys-con.com/node/1642956Thursday, April 14, 2011
  • ckets eb so W What about the server?Thursday, April 14, 2011
  • Traditional Web Servers just won’t doThursday, April 14, 2011
  • Traditional Web Servers just won’t doThursday, April 14, 2011
  • Why? All these webhooks and websockets mean orders of magnitude more concurrent, long lived connections Thread per connection is not scalable So much time is wasted waiting... on I/OThursday, April 14, 2011
  • Typical I/O Latency L1: 3 cycles L2: 14 cycles RAM: 250 cycles DISK: 41,000,000 cycles NETWORK: 240,000,000 cycles L1 L2 RAM Disk Network 0 60,000,000 120,000,000 180,000,000 240,000,000 300,000,000 http://nodejs.org/jsconf.pdfThursday, April 14, 2011
  • What’s wrong with this? var result = db.query("select * from T"); // wait for result // use result console.log( result[0].C ); waiting idle blocking for 240,000,000 cyclesThursday, April 14, 2011
  • Alternatively // the async way db.query("select * from T", function(result) { console.log( result[0].C ); });Thursday, April 14, 2011
  • Asynchronous IO • non-blocking • event loop • callbacksThursday, April 14, 2011
  • Apache vs Nginx asynchronous vs synchronous I/O event loop vs thread per connection http://blog.webfaction.com/a-little-holiday-presentThursday, April 14, 2011
  • Apache vs Nginx asynchronous vs synchronous I/O event loop vs thread per connection http://blog.webfaction.com/a-little-holiday-presentThursday, April 14, 2011
  • Some of the contenders (non-blocking, asyncronous I/O, event loop) • Twisted (python) • EventMachine (Ruby) • Node.js (javascript)Thursday, April 14, 2011
  • provide an easy way to build scalable network programs. • server-side Javascript • client-side development likeness • Javascript designed specifically to be used with an event loop • non-blocking libraries • FAST, underpinned by V8 • community momentumThursday, April 14, 2011
  • a different way of thinking var callback = function(response) { // do something with response }; obj.getSomething(data, callback);Thursday, April 14, 2011
  • Ummm... But, don’t I have to wait until more browsers support Websockets? http://www.flickr.com/photos/way2go/5536458691/Thursday, April 14, 2011
  • Thursday, April 14, 2011
  • Don’t be ridiculous. We can use fallbacks!Thursday, April 14, 2011
  • Don’t be ridiculous. We can use fallbacks! With Socket.io and rusty paperclip we can do anythingThursday, April 14, 2011
  • e t. io o c k S Socket.IO aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanismsThursday, April 14, 2011
  • e t. io o c k S Websocket HTML File Flash Socket JSONP Polling AJAX Polling & MultipartThursday, April 14, 2011
  • e t. io o c k S IE 5.5+ Firefox 3+ Chrome 4+ Safari 3+ Opera 10.6 Android Webkit iOS Safari WebOs WebkitThursday, April 14, 2011
  • Demo webhooks + websockets 2. New Call GET (webhook) 4. Respond Say + Record /twillio 5. Say 7. New Recording POST (webhook) 1. Call 6. Record /socket.io 3. Status 8. Recording (websocket) (websocket) 9. <audio/> GET RecordingThursday, April 14, 2011
  • Anton.io? Prospero’s Brother extending Prospero to the “Browser Channel” alpha in developmentThursday, April 14, 2011
  • Thank You (you’re free to fly now)Thursday, April 14, 2011