Successfully reported this slideshow.

The Evented Web

22

Share

Upcoming SlideShare
Einstein finalist.nl
Einstein finalist.nl
Loading in …3
×
1 of 75
1 of 75

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

The Evented Web

  1. 1. The Evented Web webhooks, websockets and beyond pearson://re:mix April 14, 2011 Mike Brevoort Software Architect @ Pearson eCollege @mbrevoort Thursday, April 14, 2011
  2. 2. • The evented What? Why? • Webhooks • Websockets • Asynchronous I/O and node.js • Putting it all together Thursday, April 14, 2011
  3. 3. Semi-related points in time Thursday, 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.jpg Thursday, April 14, 2011
  6. 6. When we should have been doing this! http://www.tecacentre.net/funpics/funpics/flying_elephant.jpg Thursday, 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.jpg Thursday, April 14, 2011
  9. 9. the disconnected anonymous web Thursday, 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 @progrium Thursday, April 14, 2011
  12. 12. what is a Webhook? callbacks over HTTP ... an HTTP POST that occurs when something happens Thursday, April 14, 2011
  13. 13. Server Server Thursday, April 14, 2011
  14. 14. realtime instant data scalability performance throughput Thursday, April 14, 2011
  15. 15. realtime instant data scalability performance throughput Thursday, April 14, 2011
  16. 16. I got it! When something happens, I’ll just call you! So... relax Thursday, 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 @progrium Thursday, April 14, 2011
  20. 20. receive data in real time Superpoke /remove HTTP POST signed request Facebook User w/ user id removes app Thursday, 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/2713018257 Thursday, 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 it Thursday, 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 HERE Thursday, 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 messaging Thursday, April 14, 2011
  35. 35. Webhooks • powerful glue • plumbing of the evented web • empowering Thursday, April 14, 2011
  36. 36. Intermission Everything’s Amazing, Nobody’s Happy Thursday, April 14, 2011
  37. 37. Websockets Server Client Thursday, 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 Websockets Thursday, April 14, 2011
  40. 40. ck e ts e bso W enables “native” bidirectional communication between a server and a web browser Thursday, 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 protocol Thursday, 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 protocol Thursday, April 14, 2011
  45. 45. Why not comet? • an inefficient hack • 1/2 duplex • HTTP Overhead • latency http://websocket.org/quantum.html Thursday, 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.html Thursday, 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.html Thursday, 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.html Thursday, April 14, 2011
  49. 49. ckets Web so a protocol http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-03 Thursday, 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.com Thursday, 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/1642956 Thursday, 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 do Thursday, April 14, 2011
  55. 55. Traditional Web Servers just won’t do Thursday, 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/O Thursday, 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.pdf Thursday, 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 cycles Thursday, 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 • callbacks Thursday, 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-present Thursday, 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-present Thursday, 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 momentum Thursday, 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 anything Thursday, 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 mechanisms Thursday, April 14, 2011
  71. 71. e t. io o c k S Websocket HTML File Flash Socket JSONP Polling AJAX Polling & Multipart Thursday, 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 Webkit Thursday, 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 Recording Thursday, April 14, 2011
  74. 74. Anton.io? Prospero’s Brother extending Prospero to the “Browser Channel” alpha in development Thursday, April 14, 2011
  75. 75. Thank You (you’re free to fly now) Thursday, April 14, 2011

×