Your SlideShare is downloading. ×
The Evented Web                           webhooks, websockets and beyond                                   pearson://re:m...
• The evented What? Why?                      • Webhooks                      • Websockets                      • Asynchro...
Semi-related                           points in timeThursday, April 14, 2011
1990              HTML            1993              Common Gateway                              Interface (CGI)           ...
Conditioned...          ...to wait                           ...into a one sided                                  conversa...
When we should have been                      doing this!                                 http://www.tecacentre.net/funpic...
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?...
the disconnected                           anonymous webThursday, April 14, 2011
it’s all about events                                              http://www.flickr.com/photos/cizake/4164756091/Thursday,...
I will call them                                Webhooks.                           And they will be good                 ...
what is a         Webhook?                           callbacks over HTTP                                   ... an HTTP POS...
Server   ServerThursday, April 14, 2011
realtime          instant data                            scalability                           performance               ...
realtime          instant data                            scalability                           performance               ...
I got it!                           When something                           happens, I’ll just                           ...
it’s simple                           “even a baby                            can do it”Thursday, April 14, 2011
user                                 configurable event handling        to       infinity                   and beyond!Thu...
credit: Jeff Lindsay @progriumThursday, April 14, 2011
receive data in real time                                                                 Superpoke                       ...
build              change                           resolve                            issue                           scr...
receive data, do something, pass it on                    $ cat apple.txt | wc | mail -s "The count"                      ...
New                                                          Yo’ App                                      event           ...
process data, give something in return                           like a typical API call                           but the...
Thursday, April 14, 2011
Webhook Standards?                      • Yes, it’s called HTTP                      • OK, but there are a few related    ...
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 w...
Webhooks                      • powerful glue                      • plumbing of the evented web                      • em...
Intermission                           Everything’s Amazing, Nobody’s HappyThursday, April 14, 2011
Websockets                      Server     ClientThursday, April 14, 2011
Websockets                eb                      Server             Browser              w                             (t...
eb                     Server                  Browser             w                           Comet           Silverlight...
ck e ts                           e bso           W                       enables “native” bidirectional                  ...
ck e ts                           e bso           W                             W3C API and IETF Protocol                 ...
m e t             C o                           long held HTTP requests                           umbrella term for multip...
F la sh                c k e ts             S o                           raw TCP socket                           require...
ig h t     lv erl S i         le x      D u p                           socket or polling                           requir...
Why not comet?           • an inefficient hack           • 1/2 duplex           • HTTP Overhead           • latency       ...
C    om et                                      Polling                           http://publib.boulder.ibm.com/infocenter...
om et  C                              Long Polling                           http://publib.boulder.ibm.com/infocenter/wasi...
om et  C              Keep-Alive Streaming                           http://publib.boulder.ibm.com/infocenter/wasinfo/v6r1...
ckets     Web               so                                  a protocol                                          http:/...
ckets     Web               so                                  an API          var socket = new WebSocket("ws://host/sock...
ckets      eb               so     W                           Browser Support                                            ...
ckets     Web               so                                 Security Flaw                      •    secure Websockets (...
ckets      eb               so     W                           What about the                              server?Thursday...
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  ...
Typical I/O Latency                                        L1: 3 cycles                                       L2: 14 cycle...
What’s wrong with                            this?                           var result = db.query("select * from T");    ...
Alternatively                      // the async way                      db.query("select * from T", function(result) {   ...
Asynchronous IO                      • non-blocking                      • event loop                      • callbacksThur...
Apache vs Nginx                               asynchronous vs synchronous I/O                              event loop vs t...
Apache vs Nginx                               asynchronous vs synchronous I/O                              event loop vs t...
Some of the                             contenders                                (non-blocking, asyncronous I/O, event lo...
provide an easy way to build scalable network programs.                 • server-side Javascript                 • client-...
a different way of                                thinking                            var callback = function(response) { ...
Ummm...                           But, don’t I have to wait until                             more browsers support       ...
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          ...
e t. io              o c k     S                       Socket.IO aims to make realtime apps                       possible...
e t. io              o c k     S                           Websocket           HTML File                           Flash S...
e t. io              o c k     S                           IE 5.5+      Firefox 3+                           Chrome 4+    ...
Demo                                        webhooks + websockets                                             2. New Call ...
Anton.io?                              Prospero’s Brother                              extending Prospero                 ...
Thank You                           (you’re free to fly now)Thursday, April 14, 2011
Upcoming SlideShare
Loading in...5
×

The Evented Web

8,108

Published on

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

Published in: Technology
1 Comment
22 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,108
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
22
Embeds 0
No embeds

No notes for slide

Transcript of "The Evented Web"

  1. 1. The Evented Web webhooks, websockets and beyond pearson://re:mix April 14, 2011 Mike Brevoort Software Architect @ Pearson eCollege @mbrevoortThursday, April 14, 2011
  2. 2. • The evented What? Why? • Webhooks • Websockets • Asynchronous I/O and node.js • Putting it all togetherThursday, April 14, 2011
  3. 3. Semi-related points in timeThursday, April 14, 2011
  4. 4. 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
  5. 5. Conditioned... ...to wait ...into a one sided conversation http://sites.google.com/site/davidnchung/StakeElephant.jpgThursday, April 14, 2011
  6. 6. When we should have been doing this! http://www.tecacentre.net/funpics/funpics/flying_elephant.jpgThursday, April 14, 2011
  7. 7. The traditional web Call Me... I won’t call you.Thursday, April 14, 2011
  8. 8. 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
  9. 9. the disconnected anonymous webThursday, April 14, 2011
  10. 10. it’s all about events http://www.flickr.com/photos/cizake/4164756091/Thursday, April 14, 2011
  11. 11. I will call them Webhooks. And they will be good 2006 Jeff Lindsay @progriumThursday, April 14, 2011
  12. 12. what is a Webhook? callbacks over HTTP ... an HTTP POST that occurs when something happensThursday, April 14, 2011
  13. 13. Server ServerThursday, April 14, 2011
  14. 14. realtime instant data scalability performance throughputThursday, April 14, 2011
  15. 15. realtime instant data scalability performance throughputThursday, April 14, 2011
  16. 16. I got it! When something happens, I’ll just call you! So... relaxThursday, April 14, 2011
  17. 17. it’s simple “even a baby can do it”Thursday, April 14, 2011
  18. 18. user configurable event handling to infinity and beyond!Thursday, April 14, 2011
  19. 19. credit: Jeff Lindsay @progriumThursday, April 14, 2011
  20. 20. receive data in real time Superpoke /remove HTTP POST signed request Facebook User w/ user id removes appThursday, April 14, 2011
  21. 21. build change resolve issue script it!Thursday, April 14, 2011
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. Thursday, April 14, 2011
  26. 26. 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
  27. 27. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  28. 28. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  29. 29. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  30. 30. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  31. 31. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  32. 32. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  33. 33. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  34. 34. Prospero A system-to-system messaging framework within Tempest similar to pubsubhubbub pub/sub evented messagingThursday, April 14, 2011
  35. 35. Webhooks • powerful glue • plumbing of the evented web • empoweringThursday, April 14, 2011
  36. 36. Intermission Everything’s Amazing, Nobody’s HappyThursday, April 14, 2011
  37. 37. Websockets Server ClientThursday, April 14, 2011
  38. 38. Websockets eb Server Browser w (the hard part)Thursday, April 14, 2011
  39. 39. eb Server Browser w Comet Silverlight Duplex Flash sockets WebsocketsThursday, April 14, 2011
  40. 40. ck e ts e bso W enables “native” bidirectional communication between a server and a web browserThursday, April 14, 2011
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. Why not comet? • an inefficient hack • 1/2 duplex • HTTP Overhead • latency http://websocket.org/quantum.htmlThursday, April 14, 2011
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. ckets Web so a protocol http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-03Thursday, April 14, 2011
  50. 50. 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
  51. 51. ckets eb so W Browser Support http://caniuse.comThursday, April 14, 2011
  52. 52. 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
  53. 53. ckets eb so W What about the server?Thursday, April 14, 2011
  54. 54. Traditional Web Servers just won’t doThursday, April 14, 2011
  55. 55. Traditional Web Servers just won’t doThursday, April 14, 2011
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. Alternatively // the async way db.query("select * from T", function(result) { console.log( result[0].C ); });Thursday, April 14, 2011
  60. 60. Asynchronous IO • non-blocking • event loop • callbacksThursday, April 14, 2011
  61. 61. 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
  62. 62. 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
  63. 63. Some of the contenders (non-blocking, asyncronous I/O, event loop) • Twisted (python) • EventMachine (Ruby) • Node.js (javascript)Thursday, April 14, 2011
  64. 64. 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
  65. 65. a different way of thinking var callback = function(response) { // do something with response }; obj.getSomething(data, callback);Thursday, April 14, 2011
  66. 66. Ummm... But, don’t I have to wait until more browsers support Websockets? http://www.flickr.com/photos/way2go/5536458691/Thursday, April 14, 2011
  67. 67. Thursday, April 14, 2011
  68. 68. Don’t be ridiculous. We can use fallbacks!Thursday, April 14, 2011
  69. 69. Don’t be ridiculous. We can use fallbacks! With Socket.io and rusty paperclip we can do anythingThursday, April 14, 2011
  70. 70. 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
  71. 71. e t. io o c k S Websocket HTML File Flash Socket JSONP Polling AJAX Polling & MultipartThursday, April 14, 2011
  72. 72. 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
  73. 73. 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
  74. 74. Anton.io? Prospero’s Brother extending Prospero to the “Browser Channel” alpha in developmentThursday, April 14, 2011
  75. 75. Thank You (you’re free to fly now)Thursday, April 14, 2011

×