The Evented Web

  • 7,235 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,235
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
1
Likes
22

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