APIs That Make Things Happen
                      WebHooks and the Evented Web




came from my previous talk? expecting ...
@progrium
                           #webhooks


this is my twitter username and a handy hashtag if you want to reference ...
quickly, about me
quickly, about me
What are webhooks?



can’t get very far without addressing this, since i’m sure most of you have no idea
what webhooks ar...
When something happens, perform
             HTTP POST with relevant data to a URL
                   that the user gives ...
command line: pipes. we used talk about the equivalent of pipes on the web and people say RSS! and I
say nooo.... it’s som...
Input                                                             Output
                                              Pro...
STDIN                                                     STDOUT
                                           Program




  ...
xargs
                                                                               wget
                  echo
         ...
cat




                                xargs
                                               wget
                  echo
 ...
cat           grep




             xargs
                                   wget
echo
                            mail


...
cat                 grep               mail




                                     xargs
                               ...
STDIN
                                             Program




but it doesn’t work without the output. it just breaks.
API
                                          Web App




unfortunately that’s how the web is today.
we can talk to web ap...
API                                                               Events
                                            Web A...
Event-driven programming
                          at the web ecosystem level




event-driven programming...
hence:
Evented Web



a web where when something happens in one system, something can happen in another:
trivially. you’ve all se...
function clickHandler() {
    alert("Click!");
}

element.addEventListener('click', clickHandler);
element.addEventListener('click', function() {
    alert("Click!");
});
element.addEventListener('click', function() {
    var name = $("input#name").val();
    if (name != "") {
        alert("...
element.addEventListener('click', function(event) {
    var name = $("input#name").val();
    if (name != "") {
        al...
twitter.addEventListener('newfollower', function(event) {
    var twitterUser = event.follower;
    var friends = facebook...
twitter.addEventListener('newfollower', function(event) {
    var twitterUser = event.follower;
    var friends = facebook...
twitter.addEventListener('newfollower', function(event) {
    var twitterUser = event.follower;
    var friends = facebook...
twitter.addEventListener('newfollower', function(event) {
    var twitterUser = event.follower;
    var friends = facebook...
twitter.addEventListener('newfollower', function(event) {
    var twitterUser = event.follower;
    var friends = facebook...
twitter.addEventListener('newfollower',
v                             eventHandler);
twitter.addWebHook('newfollower',
          'http://example.com/eventhandler');
twitter.addWebHook('friendupdate',
           'http://example.com/eventhandler');




some other events you could imagine ...
twitter.addWebHook('directmessage',
          'http://example.com/eventhandler');
twitter.addWebHook('myupdate',
           'http://example.com/eventhandler');




makes twitter an even more powerful plat...
MAILHOOKS
                         DEMO


let’s see this in action. mailhooks was one of the first “adapters” i built for t...
facebook should be added. pop quiz! what do you get when you combine facebook and
webhooks?
facehooks?
MORE DEMOS
                          (and then code)




create postbin, setup/show tender, pivotal tracker, twilio.
demo ...
webhooks are simple as you saw. their simplicity affords them to be used as a simple building
block in slightly more compl...
basically real-time feeds using webhooks as the core delivery mechanic.
a specific use case of webhooks for new content upd...
all these sites publish content with pubsubhubbub, meaning they all effectively have
webhooks for new content events... as...
simple mechanics, if done right, yield rich, emergent dynamics.
the emergent system with webhooks is the evented web.
The Evented Web
                               Programmable Web 2.0


                                       Web APIs




...
“In computer programming, hooking is
           a technique used to alter or augment the
           behavior of [a program...
here’s a video explaining hookpress, a plugin for wordpress that exposes their internal
hooks as webhooks and what that ca...
The Evented Web
                              Programmable Web 2.0


                                      Web APIs




  ...
twitter.addWebHook('newfollower',
           'http://example.com/eventhandler');




to the app that triggers it though, i...
twitter.addEventListener('newfollower', function(event) {
       var twitterUser = event.follower;
       var friends = fa...
twitter.addWebHook('newfollower',
           'http://example.com/eventhandler');




because it’s a URL you can just assum...
HTTP is the easiest
               way to trigger code



since cgi in 1993, http is essentially rpc. in fact, its the mos...
if writing webhooks is to be ubiquitous, we need to make it EASY to write them. you don’t
need all of app engine to write ...
so i built scriptlets, which is basically that. use php, python, javascript to write simple little
scripts hosted in the c...
here’s a wrapper that makes postbin work for pubsubhubbub
here’s a script used with hookpress to add comment notifications via notify.io to wordpress
this is the code i used for the clickhooks demo. you can see how simple it is, notify.io does
most of the work.
notify.io is a useful part of the ecosystem. it solves the notification part.
“how do you get events to the desktop?” pubsu...
NOTIFY.IO
                             DEMO


intro. twitter DM example. outlets. curl. NioCallback. DrEval...
What are webhooks?
                         Event callbacks over HTTP
                                           enabling ...
Infrastructure as
                      Education


i’m heavily interested in education -- hacker dojo, experiment in educ...
hole in the wall experiment. put a computer in a small city in india and see what happens.
turns out they learn and teach ...
“Creating content is not what's
          important. What is important is
          infrastructure and access.”
          ...
maybe wrong generation here, but many of the great programmers i know started
on something like these
programming was almost unavoidable on them.
i love this screen.
Programming is discovered.




today, the closest thing is myspace: css hacks to pimp your profile.
but while this IS progr...
Programming is discovered.




today, the closest thing is myspace: css hacks to pimp your profile.
but while this IS progr...
view page source is a huge reason why there are so many web people (esp frontend)
browser as a sandbox to explore and lear...
twitter.addEventListener('newfollower', function(event) {
      var twitterUser = event.follower;
      var friends = face...
The world is trending towards
     being programmable




USA Today on CES: “You’re going to be hard-pressed to find a new ...
@progrium
               #webhooks


questions...
Upcoming SlideShare
Loading in …5
×

APIs That Make Things Happen

13,157 views

Published on

40 minute talk at GlueCon 2010 that tries to focus more on the Evented Web idea.

Published in: Technology
  • Be the first to comment

APIs That Make Things Happen

  1. 1. APIs That Make Things Happen WebHooks and the Evented Web came from my previous talk? expecting talk about npr api? how many are developers? there will be code...
  2. 2. @progrium #webhooks this is my twitter username and a handy hashtag if you want to reference this talk
  3. 3. quickly, about me
  4. 4. quickly, about me
  5. 5. What are webhooks? can’t get very far without addressing this, since i’m sure most of you have no idea what webhooks are. they’re the basis of this talk.
  6. 6. When something happens, perform HTTP POST with relevant data to a URL that the user gives you. webhooks are event callbacks over http. the server/app calls your URL. that’s it. it’s not a protocol, there is no standard. it’s more like ajax: just a useful design pattern.
  7. 7. command line: pipes. we used talk about the equivalent of pipes on the web and people say RSS! and I say nooo.... it’s something else. (webhooks)
  8. 8. Input Output Program pipes are amazing in their simplicity. it’s all from a bit of infrastructure involving input and output
  9. 9. STDIN STDOUT Program STDERR stdin, stdout were available to reroute wherever the user wanted most common use was chaining commands together: piping feedback loop, which is the key to emergent systems
  10. 10. xargs wget echo mail grep wc cat so you had all these simple little programs, that might not even be useful alone
  11. 11. cat xargs wget echo mail grep wc string them together...
  12. 12. cat grep xargs wget echo mail wc
  13. 13. cat grep mail xargs wget echo wc and you have something more useful than just the sum of the parts. remember this because we’ll come back to it.
  14. 14. STDIN Program but it doesn’t work without the output. it just breaks.
  15. 15. API Web App unfortunately that’s how the web is today. we can talk to web apps, but they really can’t talk to us. its as if you had a telephone system where you could only make calls, but never receive them. unacceptable.
  16. 16. API Events Web App it’s not that they can’t, they just don’t. we need to start placing event hooks in them. if this were as ubiquitous as apis are today, we would have something amazing:
  17. 17. Event-driven programming at the web ecosystem level event-driven programming... hence:
  18. 18. Evented Web a web where when something happens in one system, something can happen in another: trivially. you’ve all seen twitter to facebook (or vice versa). that would almost not be worth making a service for, it would just be a line of code. let me show you with another example:
  19. 19. function clickHandler() { alert("Click!"); } element.addEventListener('click', clickHandler);
  20. 20. element.addEventListener('click', function() { alert("Click!"); });
  21. 21. element.addEventListener('click', function() { var name = $("input#name").val(); if (name != "") { alert("Hello, " + name); } });
  22. 22. element.addEventListener('click', function(event) { var name = $("input#name").val(); if (name != "") { alert("Hello, " + name + ". " + "I'm " + event.target.id); } });
  23. 23. twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames(); if (twitterUser['name'] in friends) { twitter.follow(twitterUser); } })
  24. 24. twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames(); if (twitterUser['name'] in friends) { twitter.follow(twitterUser); } })
  25. 25. twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames(); if (twitterUser['name'] in friends) { twitter.follow(twitterUser); } })
  26. 26. twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames(); if (twitterUser['name'] in friends) { twitter.follow(twitterUser); } })
  27. 27. twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames(); if (twitterUser['name'] in friends) { twitter.follow(twitterUser); } else if (twitterUser['following'] > 1000 && twitterUser['followers'] < twitterUser['following'] / 2) { twitter.block(twitterUser); } })
  28. 28. twitter.addEventListener('newfollower', v eventHandler);
  29. 29. twitter.addWebHook('newfollower', 'http://example.com/eventhandler');
  30. 30. twitter.addWebHook('friendupdate', 'http://example.com/eventhandler'); some other events you could imagine writing handlers for
  31. 31. twitter.addWebHook('directmessage', 'http://example.com/eventhandler');
  32. 32. twitter.addWebHook('myupdate', 'http://example.com/eventhandler'); makes twitter an even more powerful platform than it is
  33. 33. MAILHOOKS DEMO let’s see this in action. mailhooks was one of the first “adapters” i built for the evented web. in the evented web ecosystem, you can have very simple web services like this because integrating them together with webhooks is very easy... just like pipes led to simple programs.
  34. 34. facebook should be added. pop quiz! what do you get when you combine facebook and webhooks?
  35. 35. facehooks?
  36. 36. MORE DEMOS (and then code) create postbin, setup/show tender, pivotal tracker, twilio. demo clickhooks with postbin and and then show the code. http://2.latest.scriptletsapp.appspot.com/1w47Cs/run
  37. 37. webhooks are simple as you saw. their simplicity affords them to be used as a simple building block in slightly more complex systems like pubsubhubbub.
  38. 38. basically real-time feeds using webhooks as the core delivery mechanic. a specific use case of webhooks for new content updates. brad is here, he can tell you more...
  39. 39. all these sites publish content with pubsubhubbub, meaning they all effectively have webhooks for new content events... as a result, you can consume their content in realtime.
  40. 40. simple mechanics, if done right, yield rich, emergent dynamics. the emergent system with webhooks is the evented web.
  41. 41. The Evented Web Programmable Web 2.0 Web APIs Event Triggers Handler Scripts WebHooks how i think of the evented web: at the top, you have key to pw 1.0. then webhooks, consist of two parts: triggers of events in apps... and handler scripts. the webhooks are usually the scripts, but i use it to talk about that hole side: trigger and handler.
  42. 42. “In computer programming, hooking is a technique used to alter or augment the behavior of [a program], often without having access to its source code.” there’s a reason why it’s hooks, not callbacks or just “events”. i wanted to frame it with this idea. you can feed the result of a hook back into the system. this lets you build plugin systems etc that change behavior of web apps.
  43. 43. here’s a video explaining hookpress, a plugin for wordpress that exposes their internal hooks as webhooks and what that can do. matt mullenweg realized this is how wordpress.com can have user plugins like the open source version... this is now deployed on wordpress.com
  44. 44. The Evented Web Programmable Web 2.0 Web APIs Event Triggers Handler Scripts WebHooks i focus on the trigger side at talks since that’s the hard part: getting people to put in event triggers. as an ecosystem you need infrastructure for this other side of handler scripts.
  45. 45. twitter.addWebHook('newfollower', 'http://example.com/eventhandler'); to the app that triggers it though, it doesn’t matter. the idea is the handler is a URL...
  46. 46. twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames(); if (twitterUser['name'] in friends) { twitter.follow(twitterUser); } else if (twitterUser['following'] > 1000 && twitterUser['followers'] < twitterUser['following'] / 2) { twitter.block(twitterUser); } }) but this code has to live somewhere. i’ll come back to this, but i wanted to touch on a point about this indirection via url
  47. 47. twitter.addWebHook('newfollower', 'http://example.com/eventhandler'); because it’s a URL you can just assume its a web app/script on the other end, which is *key* to why the evented web is about http webhooks instead of something like xmpp. it turns out...
  48. 48. HTTP is the easiest way to trigger code since cgi in 1993, http is essentially rpc. in fact, its the most widely understood/used rpc in the world. now with everything in the cloud, web development being so popular, it’s the easiest way to get code to run. write a php script or ruby script. put it in the cloud for free, instantly. where? there’s free php hosting, app engine, heroku ... but we can make it better.
  49. 49. if writing webhooks is to be ubiquitous, we need to make it EASY to write them. you don’t need all of app engine to write a simple little hook script. so i imagined something like a pastebin site... only it runs code.
  50. 50. so i built scriptlets, which is basically that. use php, python, javascript to write simple little scripts hosted in the cloud. write it, save it, get a url to run it. perfect for webhook handler scripts.
  51. 51. here’s a wrapper that makes postbin work for pubsubhubbub
  52. 52. here’s a script used with hookpress to add comment notifications via notify.io to wordpress
  53. 53. this is the code i used for the clickhooks demo. you can see how simple it is, notify.io does most of the work.
  54. 54. notify.io is a useful part of the ecosystem. it solves the notification part. “how do you get events to the desktop?” pubsubhubbub for example also a gateway drug for webhooks...
  55. 55. NOTIFY.IO DEMO intro. twitter DM example. outlets. curl. NioCallback. DrEval...
  56. 56. What are webhooks? Event callbacks over HTTP enabling the Evented Web The Evented Web blends our existing ecosystem of web APIs with event-driven programming, creating a web that is both more programmable and real-time.
  57. 57. Infrastructure as Education i’m heavily interested in education -- hacker dojo, experiment in education. but also i think there are some huge lessons to be learned from hacker culture. one idea is this idea of infrastructure as education. OLPC -- not enough? no, it is.
  58. 58. hole in the wall experiment. put a computer in a small city in india and see what happens. turns out they learn and teach themselves how to use the computer. no guidance at all. "We need a faster processor and a better mouse."
  59. 59. “Creating content is not what's important. What is important is infrastructure and access.” —Sugata Mitra Montesorri Natural language Google. taking this idea, and returning to programming...
  60. 60. maybe wrong generation here, but many of the great programmers i know started on something like these
  61. 61. programming was almost unavoidable on them. i love this screen.
  62. 62. Programming is discovered. today, the closest thing is myspace: css hacks to pimp your profile. but while this IS programming, it’s doesn’t convey the POWER of programming. its not enough for people to “get” programming and want to become a programmer, BUT myspace style programming has relevance, expression, and... view source
  63. 63. Programming is discovered. today, the closest thing is myspace: css hacks to pimp your profile. but while this IS programming, it’s doesn’t convey the POWER of programming. its not enough for people to “get” programming and want to become a programmer, BUT myspace style programming has relevance, expression, and... view source
  64. 64. view page source is a huge reason why there are so many web people (esp frontend) browser as a sandbox to explore and learn. unfortunately its not the cool stuff. it’s not the stuff that changes the world.
  65. 65. twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames(); if (twitterUser['name'] in friends) { twitter.follow(twitterUser); } else if (twitterUser['following'] > 1000 && twitterUser['followers'] < twitterUser['following'] / 2) { twitter.block(twitterUser); } }) evented web gives us a sandbox to play with code that actually DOES cool and important things that are relevant to us. making the apps we use *do more* in a very personal and expressive way. i think this will help make programming discoverable again, which i think is sorely needed.
  66. 66. The world is trending towards being programmable USA Today on CES: “You’re going to be hard-pressed to find a new gadget or gizmo in 2010 that doesn’t also connect you to web services.” That’s just a step away from having apis and hooks. Imagine a world where everything has an API and webhooks. Programmers can use it all as building blocks, literally programming the world around them.
  67. 67. @progrium #webhooks questions...

×