How WebHooks Will Make Us All Programmers

@progrium#webhooks

web developers? how many are frontend, how many are backend? twitter username. send me questions.

How WebHooks Will Make Us All

Programmers

has kathy sierra taught me nothing?

How WebHooks Will Make You A

G O D

alternative title

someday you may be asked if you’re a god and as we’ve learned from ghostbusters, you will want to be able to say yes.

The Evented Web

How WebHooks Will Make You A

G O D

evented programming

What are WebHooks?

Why should we all learn to program?

How do WebHooks foster programming?

What are WebHooks?

1

event callbacks over the web. the design pattern or architecture of letting users receive notifications over http. it’s not a spec or a protocol, it’s more along the lines of ajax: just an interesting way of doing things.

What are WebHooks?

1

event callbacks over the web. the design pattern or architecture of letting users receive notifications over http. it’s not a spec or a protocol, it’s more along the lines of ajax: just an interesting way of doing things.

command line: pipes. we talk about the equivalent of pipes on the web and people say RSS! and I say nooo.... it’s something else.

Program

Input Output

pipes are amazing in their simplicity. it’s all from a bit of infrastructure involving input and output

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

cat

xargs

wc

mailecho

grep

wget

so you had all these simple little programs, that might not even be useful alone

cat

xargs

wc

mailecho

grep

wget

string them together...

grepcat

xargs

wc

mailecho

wget

mailgrepcat

xargs

wc

echowget

and you have something more useful than just the sum of the parts

STDIN

Program

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

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. or anything else really.

Web App

API Events

it’s not that they can’t, they just don’t. we need to start placing event hooks in.

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("Hello, " + name); }});

element.addEventListener('click', function(event) { var name = $("input#name").val(); if (name != "") { alert("Hello, " + name + ". " + "I'm " + event.target.id); }});

getting people excited about evented programming.twisted, event machine, etc ... event driven programming.web hooks -> evented web

twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames();

if (twitterUser['name'] in friends) { twitter.follow(twitterUser); }})

twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames();

if (twitterUser['name'] in friends) { twitter.follow(twitterUser); }})

twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames();

if (twitterUser['name'] in friends) { twitter.follow(twitterUser); }})

twitter.addEventListener('newfollower', function(event) { var twitterUser = event.follower; var friends = facebook.getFriendsNames();

if (twitterUser['name'] in friends) { twitter.follow(twitterUser); }})

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); }})

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 writing handlers for

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

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

makes twitter an even more powerful platform than it is

MAILHOOKS DEMO

let’s see this in action. mailhooks was one of the first “adapters” i built for the evented web.

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

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.how many have heard of pubsubhubbub? how many know what it does?

not time to play the video, i know brett is here and they talked about it.basically real-time feeds using webhooks as the core mechanic.

not time to play the video, i know brett is here and they talked about it.basically real-time feeds using webhooks as the core mechanic.

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.

simple mechanics, if done right, yield rich, emergent dynamics.the emergent system with webhooks is the evented web.

Event Triggers

Web APIs Handler Scripts

The Evented Web(Programmable Web 2.0)

(WebHooks)

“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.”

Event Triggers

Web APIs Handler Scripts

The Evented Web(Programmable Web 2.0)

(WebHooks)

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

the idea is the handler is a URL... whatever. it doesn’t matter whats on the other end.

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); }})

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); }})

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

because its a url, because it’s http ... you already know how to define it. it’s a simple web app, or web script.

love it, hate it... its everywhere. commodity hosting. compared to classical cgi and perl, it was easy. no permissions or cgi-bins... just upload a file with ftp.

love it, hate it... its everywhere. commodity hosting. compared to classical cgi and perl, it was easy. no permissions or cgi-bins... just upload a file with ftp.

love it, hate it... its everywhere. commodity hosting. compared to classical cgi and perl, it was easy. no permissions or cgi-bins... just upload a file with ftp.

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.

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?” pubsubhubbub for examplealso a gateway drug for webhooks...

NOTIFY.IO DEMO

intro. twitter DM example. outlets. curl. NioCallback. DrEval...

What are WebHooks?

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.

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.

And so concludes the technical portion of the talk.

Questions so far?

Why should we all learn to program?

2

so many passionate programmers that are so smart and influential on society. gates, jobs, zuckerberg...exploration of thoughts on significance.sidenote: programming == holistic programming, not just “software engineering”

“ As programming becomes more important, it will leave the back room and become a key skill and attribute of our top intellectual and social classes, just as reading and writing did in the past.”

—Marc Prensky

programming is the new literacy. (rushkoff’s talk)i wanted to explore this idea further ...

technology.

Technology ==

Tools

anything useful created by the mind

think of a world without technology.humans might not survive denied technology.some might argue our evolution from prehuman to human was about fully leveraging/developing our ability to create and work with technology

we drove many major species into extinction and become the dominant species on earth... all with just a little bit of basic technology.

The most powerful force in the world.

kevin kelly concludes (among other things) that technology is the most powerful force int he world.

pow•er |ˈpou(-ə)r| capacity to cause change

best definition of power. simple. more useful.

i like to say that a kid with a laptop can change the world. what is it about the computer?

“The most remarkable tool we’ve ever come up with.”

—Steve Jobs

why?

Imagination Compiler

Computing is the ultimate sandbox for our mind, allowing us to explore, model and even execute whatever systems we can *imagine*, as long as we can figure out how to express them. This is programming.

don’t have time for this video, but it’s the introduction to the MIT course Structure and Interpretation of computer programs. Abelson goes over how computer science isn’t really a science, maybe more engineering or art... he relates it to magic. he also says it’s not about the computer. it’s fundamentally about formalizing intuitions about process. how to do things.

don’t have time for this video, but it’s the introduction to the MIT course Structure and Interpretation of computer programs. Abelson goes over how computer science isn’t really a science, maybe more engineering or art... he relates it to magic. he also says it’s not about the computer. it’s fundamentally about formalizing intuitions about process. how to do things.

Process?

intuitions about ... process?

Knowledge

well it turns out, process is the basis of knowledge. i could go on quite a while about knowledge, but to keep things on track, we’ll simplify it to this:knowledge is basically a collection of validated models, allowing us to know how to do things. how-to is process.

Knowledge==

Power

this now trite idea, first expressed by francis bacon... is something i had to revisit when i defined power as the capacity to cause change. because when framed like this it’s obviously more than a nice correlation: knowledge really *is* the capacity to cause change, therefore in some way, they actually are quite synonymous.

Knowledge==

Power

this now trite idea, first expressed by francis bacon... is something i had to revisit when i defined power as the capacity to cause change. because when framed like this it’s obviously more than a nice correlation: knowledge really *is* the capacity to cause change, therefore in some way, they actually are quite synonymous.

Programming is the language of power.

If knowledge is power, then programming is the language of power. Programming is the most precise expression of how-to knowledge. You don't just program to express so much as you program to run, to make happen.

Programming is about designing systems within the realm of computing, but as we trend towards ubiquitous computing, the boundary of "computing" and the rest of our world will start to disappear.

our idea of what a computer is...

has been unraveling right in front of us. abelson is right: it’s not about the “computer” ... it’s about something more. not even the “network”. i’m not exactly sure what it is... but

Programmers are the most potent technologists.

i would like to make this assertion. the industrial revolution was about mechanization. i think software and automation are the new mechanization. only this time it’s much greater -- software gives us more bang for buck in terms of change caused by effort. it was software that allowed celebrity conan obrien to, with one click, change a person’s life.

Technologists shape humanity.

and i think its undeniable how influential people are to society that can create and truly wield technology. but to bring it back to a little more concrete terms and where things are going:

The world is trending towardsbecoming 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. Magic indeed.

Wizards.

programmers become not unlike wizards ... and wizards are basically gods.

Why should we all learn to program?

Why should we all learn to program?

“Program or be programmed.”

The world is becoming increasingly programmable. The power of programming will eventually

outweigh any reason not to.

How do WebHooks foster programming?

3

obviously that kind of power, capacity to cause change, will be worthy of seeking out on its own once it becomes more obvious. what do webhooks and the evented web have to contribute? i think they’ll accelerate the process by making it more obvious, but there’s more.

this is more generally about education.

“Education is not the filling of a pail, but the lighting of a fire.”

—William Butler Yeats

framed my idea of education. inspiration and motivation are the real secrets to education. teaching is just a means to facilitate learning; learning happens by the individual.you need to inspire/convince the individual they want to learn ... and they will

“The truth is that reading, writing, and arithmetic only take about one hundred hours to transmit as long as the audience is eager and willing to learn.”

—John Taylor Gatto

world renowned school teacher corroborates this idea.

ackoff: one of the greatest thinkers of the 20th century that you probably haven’t heard of.greenberg: champion of the democratic school.

Infrastructure as Education

Village that not only didn't have access to computers, but didn't know English. Left the computer there with CDs (no Internet) and came back 3 months later. An 8 and 12 year old were playing a game on it and when they realized he had brought the machine, they said (in English): "We need a faster processor and a better mouse."

“Creat ing content i s not what ' s important. What is important is infrastructure and access.”

—Sugata Mitra

MontesorriNatural languageGoogle.taking this idea, and returning to programming...

how many of us started programming on something like these?

programming was almost unavoidable on them.how many of you experience a noticeable physiological reaction to this screen?

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 programmingeven though there’s automator on mac -- its sterile and limiting, pure utility. myspace style programming has relevance, expression, and... view source

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 programmingeven though there’s automator on mac -- its sterile and limiting, pure utility. myspace style programming has relevance, expression, and... view source

excellent viewsourceposse panel (missed it). my quick idea: 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.

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. the possibility space is much larger, and the language is richer, so it’s just begging for clever and creative exploration...

How do WebHooks foster programming?

it gives us a new sandbox to “play” with our web applications together in new and useful ways.it provides the infrastructure to *just code* like on apple II or commodore. No dev environs, nothing to install. building directly on the shoulders of giants to easily achieve cool, useful, relevant “hacks” that I think would hook anybody on at least the idea of programming.

How do WebHooks foster programming?

WebHooks and the Evented Web makeprogramming discoverable again

it gives us a new sandbox to “play” with our web applications together in new and useful ways.it provides the infrastructure to *just code* like on apple II or commodore. No dev environs, nothing to install. building directly on the shoulders of giants to easily achieve cool, useful, relevant “hacks” that I think would hook anybody on at least the idea of programming.

and that’s how i think, in the long run, webhooks and the evented web will help make us all gods with the ability to *program* the world around us.

@progrium#webhooks