Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
webhooks
    jeff lindsay
WEBHOOKS
 AND   THE


FUTURE
OF THE WEB
problem
 solution
  examples
    implementation
         inspiration
               future
problem?
‣ notifications
‣ data syncing
‣ chaining
‣ modification
‣ plugins
‣ notifications
‣ data syncing
‣ chaining
‣ modification
‣ plugins
‣ notifications   “I wish I could get
                 notifications exactly
‣ data syncing   how I want.”
‣ chaining
‣ modi...
‣ notifications
‣ data syncing   “I wish my web apps
                 would keep overlapping
‣ chaining       data in sync....
‣ notifications
‣ data syncing
‣ chaining       “I wish I could make
‣ modification    another app do
‣ plugins        somet...
‣ notifications
‣ data syncing
‣ chaining
‣ modification    “I wish I could make
‣ plugins        this app work just
       ...
‣ notifications
‣ data syncing
‣ chaining
‣ modification
‣ plugins        “I wish I could let my
                 users exte...
}
‣ notifications
‣ data syncing
‣ chaining           programmability
‣ modification
‣ plugins
WEBHOOKS
WEBHOOKS

       Huh?
web•hooks |ˈwebˌhoŏks|
  pattern of enabling user-defined callbacks
  in web applications
us•er |ˈyoōzər|
call•back |ˈkôlˌbak|
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)

      ƒ(x)            ƒ(x)...
call•back |ˈkôlˌbak|
     Program
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)

      ƒ(x)            ƒ(x)...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)

      ƒ(x)            ƒ(x)...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)

      ƒ(x)            ƒ(x)...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)

      ƒ(x)            ƒ(x)...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)

      ƒ(x)            ƒ(x)...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)

      ƒ(x)            ƒ(x)...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)

      ƒ(x)            ƒ(x)...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)

      ƒ(x)            ƒ(x)...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
call•back |ˈkôlˌbak|
     Program
                        ƒ(x)
       ƒ(x)
               ƒ(x)
                           ...
“In computer programming, hooking is
a technique used to alter or augment the
behavior of [a program], often without
havin...
webhooks origin
subversion hooks

                repository
working copy


                    foo
subversion hooks

                repository
working copy


    foo             foo
subversion hooks

     repository




         foo
subversion hooks

           repository




bar            foo
subversion hooks

           repository




bar            foo
subversion hooks

           repository




bar            bar
subversion hooks

     repository
      pre-commit




          foo       bar




      post-commit
subversion hooks

     repository
      pre-commit




          foo       bar




      post-commit
subversion hooks
Does this user have
                        repository
   permission?

                         pre-commi...
subversion hooks

     repository
      pre-commit




          foo       bar




      post-commit
subversion hooks

     repository
      pre-commit




          bar       bar




      post-commit
subversion hooks

                       repository
                        pre-commit




                            bar...
subversion hooks

           repository




bar            bar
subversion hooks

                          repository
A new change was
committed by Jeff.




       bar                 ...
subversion hooks

                       repository




     bar                   bar




   Damn it Jeff,
you broke the ...
paypal ipn
paypal ipn
paypal ipn
webhooks
SO SIMPLE YOUʼLL THINK ITʼS STUPID
webhooks anatomy



         web app
webhooks anatomy



         web app

                   db
webhooks anatomy


        ui

         web app

                   db
webhooks anatomy


        ui

         web app

                   db
webhooks anatomy


        ui

         web app
        event
        event
                   db
        event
webhooks anatomy


        ui      api

         web app
        event
        event
                   db
        event
webhooks anatomy


        ui      api

         web app
        event
        event
                   db
        event
webhooks anatomy


        ui      api

         web app
        event
        event
                   db
        event
webhooks anatomy


           ui      api

           web app
           event
           event
                     db
  ...
webhooks anatomy


               ui      api

               web app
               event
               event
          ...
webhooks anatomy


        ui      api

         web app
        event
        event
                   db
        event
webhooks anatomy
webhooks anatomy




callback
webhooks anatomy




callback
webhooks anatomy




callback
webhooks anatomy




callback
webhooks anatomy




callback
examples
DEPLOY
PUSH
Hey guys, pull.
k
DEPLOY
PUSH
Hey guys, pull.
k
DEPLOY
Hooks?
http://myserver.com/script
http://myserver.com/script




   R
   ISTE
REG
PUSH
PUSH
Hey guys, pull.
k
OY
   PL
 E
D
1. define achievements here
2. add trigger pings to your backend
3. paste javascript into your layout
not done yet, but...




   QUESTIONS?
more examples
ecommerce



project hosting



notifications



plugins / platform
more examples
ecommerce



project hosting



notifications



plugins / platform
more examples
ecommerce



project hosting



notifications



plugins / platform
more examples
ecommerce



project hosting



notifications



plugins / platform
payoff               notifications
                     data syncing
 FOR THE DEVELOPER
                     chaining
    ...
payoff               notifications
                     data syncing
 FOR THE DEVELOPER
                     chaining
    ...
payoff               notifications
                     data syncing
 FOR THE DEVELOPER
                     chaining
    ...
payoff               notifications
                     data syncing
 FOR THE DEVELOPER
                     chaining
    ...
payoff               notifications
                     data syncing
 FOR THE DEVELOPER
                     chaining
    ...
payoff               notifications
                     data syncing
 FOR THE DEVELOPER
                     chaining
    ...
how to implement
1. design callback channels

  per noun     or   per verb on noun
     wiki              crud?
     project           inst...
2. create registration method

 web ui      or    api




            both? :)
3. choose payload format

  POST parameters


  JSON


  XML
4. add trigger code to events
5. consider these options
    queuing posts
      HMAC
        verification
          retry
             return data
     ...
ecosystem
protocol-droid
protocol-droid


    coming soon...
inspiration
Todos

        Basecamp
Hey, there’s an
event hook here!
Save
future
what to expect from webhooks
what to expect from webhooks


            sharing
what to expect from webhooks


                     sharing

   standardization
what to expect from webhooks


                     sharing

   standardization
what to expect from webhooks


                     sharing

   standardization




                tools
what to expect from webhooks


                     sharing

   standardization
                               integration...
what to expect from webhooks


                     sharing

   standardization
                               integration...
what to expect from webhooks
web of things
embedded devices are getting
more powerful and connected
web of things

 “API for everything”
programming literacy
  As programming becomes more important, it
  will leave the back room and become a key
  skill and a...
program the world

   cloud computing
           +
                         == near real “magic”
     web of things
      ...
problem
 solution
  examples
    implementation
         inspiration
               future
use webhooks!

   join the community
   http://webhooks.org
ok, itʼs over...




  QUESTIONS?
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Using Web Hooks
Upcoming SlideShare
Loading in …5
×

Using Web Hooks

48,603 views

Published on

A tech talk I gave at Pivotal Labs with an epic new deck.

Published in: Technology, Education

Using Web Hooks

  1. 1. webhooks jeff lindsay
  2. 2. WEBHOOKS AND THE FUTURE OF THE WEB
  3. 3. problem solution examples implementation inspiration future
  4. 4. problem?
  5. 5. ‣ notifications ‣ data syncing ‣ chaining ‣ modification ‣ plugins
  6. 6. ‣ notifications ‣ data syncing ‣ chaining ‣ modification ‣ plugins
  7. 7. ‣ notifications “I wish I could get notifications exactly ‣ data syncing how I want.” ‣ chaining ‣ modification ‣ plugins
  8. 8. ‣ notifications ‣ data syncing “I wish my web apps would keep overlapping ‣ chaining data in sync.” ‣ modification ‣ plugins
  9. 9. ‣ notifications ‣ data syncing ‣ chaining “I wish I could make ‣ modification another app do ‣ plugins something when I use this app.”
  10. 10. ‣ notifications ‣ data syncing ‣ chaining ‣ modification “I wish I could make ‣ plugins this app work just slightly differently.”
  11. 11. ‣ notifications ‣ data syncing ‣ chaining ‣ modification ‣ plugins “I wish I could let my users extend/build plugins for my app.”
  12. 12. } ‣ notifications ‣ data syncing ‣ chaining programmability ‣ modification ‣ plugins
  13. 13. WEBHOOKS
  14. 14. WEBHOOKS Huh?
  15. 15. web•hooks |ˈwebˌhoŏks| pattern of enabling user-defined callbacks in web applications
  16. 16. us•er |ˈyoōzər|
  17. 17. call•back |ˈkôlˌbak|
  18. 18. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  19. 19. call•back |ˈkôlˌbak| Program
  20. 20. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  21. 21. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  22. 22. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  23. 23. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  24. 24. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  25. 25. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  26. 26. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  27. 27. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  28. 28. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  29. 29. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  30. 30. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  31. 31. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  32. 32. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  33. 33. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  34. 34. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  35. 35. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  36. 36. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  37. 37. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  38. 38. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  39. 39. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  40. 40. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  41. 41. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  42. 42. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  43. 43. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  44. 44. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  45. 45. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  46. 46. call•back |ˈkôlˌbak| Program ƒ(x) ƒ(x) ƒ(x) Library ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x) ƒ(x)
  47. 47. “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.”
  48. 48. webhooks origin
  49. 49. subversion hooks repository working copy foo
  50. 50. subversion hooks repository working copy foo foo
  51. 51. subversion hooks repository foo
  52. 52. subversion hooks repository bar foo
  53. 53. subversion hooks repository bar foo
  54. 54. subversion hooks repository bar bar
  55. 55. subversion hooks repository pre-commit foo bar post-commit
  56. 56. subversion hooks repository pre-commit foo bar post-commit
  57. 57. subversion hooks Does this user have repository permission? pre-commit Is this change valid? foo bar post-commit
  58. 58. subversion hooks repository pre-commit foo bar post-commit
  59. 59. subversion hooks repository pre-commit bar bar post-commit
  60. 60. subversion hooks repository pre-commit bar bar Send a notice to IRC post-commit Try to build the project
  61. 61. subversion hooks repository bar bar
  62. 62. subversion hooks repository A new change was committed by Jeff. bar bar
  63. 63. subversion hooks repository bar bar Damn it Jeff, you broke the build!
  64. 64. paypal ipn
  65. 65. paypal ipn
  66. 66. paypal ipn
  67. 67. webhooks SO SIMPLE YOUʼLL THINK ITʼS STUPID
  68. 68. webhooks anatomy web app
  69. 69. webhooks anatomy web app db
  70. 70. webhooks anatomy ui web app db
  71. 71. webhooks anatomy ui web app db
  72. 72. webhooks anatomy ui web app event event db event
  73. 73. webhooks anatomy ui api web app event event db event
  74. 74. webhooks anatomy ui api web app event event db event
  75. 75. webhooks anatomy ui api web app event event db event
  76. 76. webhooks anatomy ui api web app event event db event callback
  77. 77. webhooks anatomy ui api web app event event db event callback
  78. 78. webhooks anatomy ui api web app event event db event
  79. 79. webhooks anatomy
  80. 80. webhooks anatomy callback
  81. 81. webhooks anatomy callback
  82. 82. webhooks anatomy callback
  83. 83. webhooks anatomy callback
  84. 84. webhooks anatomy callback
  85. 85. examples
  86. 86. DEPLOY
  87. 87. PUSH
  88. 88. Hey guys, pull.
  89. 89. k
  90. 90. DEPLOY
  91. 91. PUSH
  92. 92. Hey guys, pull.
  93. 93. k
  94. 94. DEPLOY
  95. 95. Hooks?
  96. 96. http://myserver.com/script
  97. 97. http://myserver.com/script R ISTE REG
  98. 98. PUSH
  99. 99. PUSH
  100. 100. Hey guys, pull.
  101. 101. k
  102. 102. OY PL E D
  103. 103. 1. define achievements here 2. add trigger pings to your backend 3. paste javascript into your layout
  104. 104. not done yet, but... QUESTIONS?
  105. 105. more examples ecommerce project hosting notifications plugins / platform
  106. 106. more examples ecommerce project hosting notifications plugins / platform
  107. 107. more examples ecommerce project hosting notifications plugins / platform
  108. 108. more examples ecommerce project hosting notifications plugins / platform
  109. 109. payoff notifications data syncing FOR THE DEVELOPER chaining modifications plugins
  110. 110. payoff notifications data syncing FOR THE DEVELOPER chaining modifications plugins
  111. 111. payoff notifications data syncing FOR THE DEVELOPER chaining modifications plugins
  112. 112. payoff notifications data syncing FOR THE DEVELOPER chaining modifications plugins
  113. 113. payoff notifications data syncing FOR THE DEVELOPER chaining modifications plugins
  114. 114. payoff notifications data syncing FOR THE DEVELOPER chaining modifications plugins one, simple solution
  115. 115. how to implement
  116. 116. 1. design callback channels per noun or per verb on noun wiki crud? project install/uninstall account pre-commit/post-commit plugin vs
  117. 117. 2. create registration method web ui or api both? :)
  118. 118. 3. choose payload format POST parameters JSON XML
  119. 119. 4. add trigger code to events
  120. 120. 5. consider these options queuing posts HMAC verification retry return data filtering validation
  121. 121. ecosystem
  122. 122. protocol-droid
  123. 123. protocol-droid coming soon...
  124. 124. inspiration
  125. 125. Todos Basecamp
  126. 126. Hey, there’s an event hook here!
  127. 127. Save
  128. 128. future
  129. 129. what to expect from webhooks
  130. 130. what to expect from webhooks sharing
  131. 131. what to expect from webhooks sharing standardization
  132. 132. what to expect from webhooks sharing standardization
  133. 133. what to expect from webhooks sharing standardization tools
  134. 134. what to expect from webhooks sharing standardization integration tools
  135. 135. what to expect from webhooks sharing standardization integration tools
  136. 136. what to expect from webhooks
  137. 137. web of things embedded devices are getting more powerful and connected
  138. 138. web of things “API for everything”
  139. 139. programming literacy 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
  140. 140. program the world cloud computing + == near real “magic” web of things + easier programmability
  141. 141. problem solution examples implementation inspiration future
  142. 142. use webhooks! join the community http://webhooks.org
  143. 143. ok, itʼs over... QUESTIONS?

×