apis that make things happen
DESCRIPTION
40 minute talk at GlueCon 2010 that tries to focus more on the Evented Web idea.TRANSCRIPT
![Page 1: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/1.jpg)
WebHooks and the Evented Web
APIs That Make Things Happen
came from my previous talk? expecting talk about npr api?how many are developers? there will be code...
![Page 2: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/2.jpg)
@progrium#webhooks
this is my twitter username and a handy hashtag if you want to reference this talk
![Page 3: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/3.jpg)
quickly, about me
![Page 4: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/4.jpg)
quickly, about me
![Page 5: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/5.jpg)
What are webhooks?
can’t get very far without addressing this, since i’m sure most of you have no ideawhat webhooks are. they’re the basis of this talk.
![Page 6: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/6.jpg)
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.
![Page 7: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/7.jpg)
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)
![Page 8: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/8.jpg)
Program
Input Output
pipes are amazing in their simplicity. it’s all from a bit of infrastructure involving input and output
![Page 9: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/9.jpg)
Program
STDIN STDOUT
STDERR
Program
stdin, stdout were available to reroute wherever the user wantedmost common use was chaining commands together: pipingfeedback loop, which is the key to emergent systems
![Page 10: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/10.jpg)
cat
xargs
wc
mailecho
grep
wget
so you had all these simple little programs, that might not even be useful alone
![Page 11: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/11.jpg)
cat
xargs
wc
mailecho
grep
wget
string them together...
![Page 12: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/12.jpg)
grepcat
xargs
wc
mailecho
wget
![Page 13: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/13.jpg)
mailgrepcat
xargs
wc
echowget
and you have something more useful than just the sum of the parts.remember this because we’ll come back to it.
![Page 14: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/14.jpg)
STDIN
Program
but it doesn’t work without the output. it just breaks.
![Page 15: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/15.jpg)
Web App
API
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.
![Page 16: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/16.jpg)
Web App
API Events
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:
![Page 17: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/17.jpg)
at the web ecosystem level
Event-driven programming
event-driven programming...hence:
![Page 18: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/18.jpg)
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:
![Page 19: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/19.jpg)
function clickHandler() { alert("Click!");}
element.addEventListener('click', clickHandler);
![Page 20: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/20.jpg)
element.addEventListener('click', function() { alert("Click!"); });
![Page 21: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/21.jpg)
element.addEventListener('click', function() { var name = $("input#name").val(); if (name != "") { alert("Hello, " + name); }});
![Page 22: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/22.jpg)
element.addEventListener('click', function(event) { var name = $("input#name").val(); if (name != "") { alert("Hello, " + name + ". " + "I'm " + event.target.id); }});
![Page 23: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/23.jpg)
twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames();
if (twitterUser['name'] in friends) { twitter.follow(twitterUser); }})
![Page 24: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/24.jpg)
twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames();
if (twitterUser['name'] in friends) { twitter.follow(twitterUser); }})
![Page 25: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/25.jpg)
twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames();
if (twitterUser['name'] in friends) { twitter.follow(twitterUser); }})
![Page 26: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/26.jpg)
twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames();
if (twitterUser['name'] in friends) { twitter.follow(twitterUser); }})
![Page 27: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/27.jpg)
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); }})
![Page 28: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/28.jpg)
twitter.addEventListener('newfollower', v eventHandler);
![Page 29: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/29.jpg)
twitter.addWebHook('newfollower', 'http://example.com/eventhandler');
![Page 30: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/30.jpg)
twitter.addWebHook('friendupdate', 'http://example.com/eventhandler');
some other events you could imagine writing handlers for
![Page 31: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/31.jpg)
twitter.addWebHook('directmessage', 'http://example.com/eventhandler');
![Page 32: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/32.jpg)
twitter.addWebHook('myupdate', 'http://example.com/eventhandler');
makes twitter an even more powerful platform than it is
![Page 33: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/33.jpg)
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.
![Page 34: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/34.jpg)
facebook should be added. pop quiz! what do you get when you combine facebook and webhooks?
![Page 35: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/35.jpg)
facehooks?
![Page 36: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/36.jpg)
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
![Page 37: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/37.jpg)
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.
![Page 38: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/38.jpg)
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...
![Page 39: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/39.jpg)
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.
![Page 40: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/40.jpg)
simple mechanics, if done right, yield rich, emergent dynamics.the emergent system with webhooks is the evented web.
![Page 41: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/41.jpg)
Event Triggers
Web APIs
Handler Scripts
The Evented WebProgrammable Web 2.0
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.
![Page 42: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/42.jpg)
“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.
![Page 43: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/43.jpg)
here’s a video explaining hookpress, a plugin for wordpress that exposes their internalhooks as webhooks and what that can do.matt mullenweg realized this is how wordpress.com can have user plugins likethe open source version... this is now deployed on wordpress.com
![Page 44: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/44.jpg)
Event Triggers
Web APIs
Handler Scripts
The Evented WebProgrammable Web 2.0
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.
![Page 45: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/45.jpg)
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...
![Page 46: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/46.jpg)
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 ona point about this indirection via url
![Page 47: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/47.jpg)
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...
![Page 48: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/48.jpg)
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.
![Page 49: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/49.jpg)
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.
![Page 50: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/50.jpg)
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.
![Page 51: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/51.jpg)
here’s a wrapper that makes postbin work for pubsubhubbub
![Page 52: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/52.jpg)
here’s a script used with hookpress to add comment notifications via notify.io to wordpress
![Page 53: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/53.jpg)
this is the code i used for the clickhooks demo. you can see how simple it is, notify.io does most of the work.
![Page 54: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/54.jpg)
notify.io is a useful part of the ecosystem. it solves the notification part. “how do you get events to the desktop?” pubsubhubbub for examplealso a gateway drug for webhooks...
![Page 55: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/55.jpg)
NOTIFY.IO DEMO
intro. twitter DM example. outlets. curl. NioCallback. DrEval...
![Page 56: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/56.jpg)
What are webhooks?
Event callbacks over HTTPenabling 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.
![Page 57: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/57.jpg)
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.
![Page 58: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/58.jpg)
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."
![Page 59: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/59.jpg)
“Creating content is not what's important. What is important is infrastructure and access.”
—Sugata Mitra
MontesorriNatural languageGoogle.taking this idea, and returning to programming...
![Page 60: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/60.jpg)
maybe wrong generation here, but many of the great programmers i know started on something like these
![Page 61: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/61.jpg)
programming was almost unavoidable on them.i love this screen.
![Page 62: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/62.jpg)
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, BUTmyspace style programming has relevance, expression, and... view source
![Page 63: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/63.jpg)
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, BUTmyspace style programming has relevance, expression, and... view source
![Page 64: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/64.jpg)
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.
![Page 65: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/65.jpg)
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.
![Page 66: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/66.jpg)
The world is trending towardsbeing 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.
![Page 67: APIs That Make Things Happen](https://reader034.vdocuments.mx/reader034/viewer/2022052321/5558227ad8b42a5e468b5070/html5/thumbnails/67.jpg)
@progrium#webhooks
questions...