Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mashing up JavaScript

Mashing up JavaScript

from Dutch PHP Conference 2012 with Sammy.js, OAuth2, OEmbed, PubsubHubbub and meteor

Bastian Hofmann

June 08, 2012
Tweet

More Decks by Bastian Hofmann

Other Decks in Technology

Transcript

  1. Mashing up JavaScript
    @BastianHofmann
    Advanced techniques for modern web applications

    View Slide

  2. Wtf?

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. • JavaScript Apps
    • CORS and OAuth2
    • Local Storage
    • OEmbed and Caja
    • WebSockets, ActivityStrea.ms and
    PubsubHubbub
    • What‘s next?

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. Questions? Ask!

    View Slide

  22. http://speakerdeck.com/u/bastianhofmann

    View Slide

  23. Let‘s write a JS App

    View Slide

  24. https://github.com/bashofmann/statusnet_js_mashup_2nd

    View Slide

  25. CSS
    Bastian

    View Slide

  26. http://twitter.github.com/bootstrap

    View Slide

  27. History & Bookmarking

    View Slide

  28. www.example.com#Page

    View Slide

  29. www.example.com/Page

    View Slide

  30. http://sammyjs.org/

    View Slide

  31. API Access

    View Slide

  32. View Slide

  33. Same Origin Policy

    View Slide

  34. Cross-Origin Resource
    Sharing
    Backend
    api.twitter.com
    Client
    client.net
    AJAX
    Access-Control-Allow-Origin: *
    http://www.w3.org/TR/cors/

    View Slide

  35. var html="";
    for (var i=0; i < viewers.length; i++) {
    html += "" + viewers[i].displayName
    + "";
    }
    html += "";
    document.getElementById("#div").innerHTML =
    html;
    Where is the error?

    View Slide

  36. Templates

    View Slide

  37. Mustache.JS
    https://github.com/janl/mustache.js
    }

    View Slide

  38. DEMO

    View Slide

  39. Authorization

    View Slide

  40. View Slide

  41. http://oauth.net/

    View Slide

  42. User-Agent Profile

    View Slide

  43. http://twitter.com/authorize?&clientId=...
    Open Popup
    lanyrd.com

    View Slide

  44. http://twitter.com/authorize?&clientId=...
    Open Popup
    lanyrd.com
    HTTPS GET
    twitter.co
    m/
    authorize

    View Slide

  45. http://twitter.com/authorize?&clientId=...
    Open Popup
    lanyrd.com
    Login
    twitter.co
    m/
    authorize

    View Slide

  46. http://twitter.com/authorize?&clientId=...
    Open Popup
    lanyrd.com
    Grant
    Permission
    twitter.co
    m/
    authorize

    View Slide

  47. lanyrd.com
    HTTPS Redirect
    RedirectURI#
    accessToken
    twitter.co
    m/
    authorize
    RedirectURI#
    accessToken
    lanyrd.com

    View Slide

  48. lanyrd.com
    RedirectURI#
    accessToken
    Parse Access Token from Fragment
    Send it to opening window
    Close popup lanyrd.com

    View Slide

  49. Same Origin Policy

    View Slide

  50. lanyrd.com
    HTTPS Ajax
    Request to API
    Access Token
    twitter.com

    View Slide

  51. Storing the access
    token

    View Slide

  52. Local Storage
    http://www.w3.org/TR/webstorage/

    View Slide

  53. DEMO

    View Slide

  54. Mash it up!

    View Slide

  55. cool video:
    http://www.youtube.com/
    watch?v=OFzkTxiwziQ

    View Slide

  56. OEmbed
    http://oembed.com/

    View Slide

  57. http://www.youtube.com/watch?v=OyJd2qsRkNk

    View Slide

  58. View Slide

  59. http://www.youtube.com/oembed?url=http%3A%2F
    %2Fwww.youtube.com%2Fwatch%3Fv
    %3DOyJd2qsRkNk&maxwidth=500&format=json

    View Slide

  60. {
    "provider_url":"http:\/\/www.youtube.com\/",
    "title":"Jupiter Jones -
    Das Jahr in dem ich schlief (Musik Video)",
    "html":"\u003cobject width=\"500\" height=\"306\"\u003e
    \u003cparam name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/
    OyJd2qsRkNk?version=3\"\u003e\u003c\/param\u003e\u003cparam name=
    \"allowFullScreen\" value=\"true\"\u003e\u003c\/param\u003e
    \u003cparam name=\"allowscriptaccess\" value=\"always\"\u003e
    \u003c\/param\u003e\u003cembed src=\"http:\/\/www.youtube.com\/v\/
    OyJd2qsRkNk?version=3\" type=\"application\/x-shockwave-flash
    \" width=\"500\" height=\"306\" allowscriptaccess=\"always
    \" allowfullscreen=\"true\"\u003e\u003c\/embed\u003e\u003c\/object
    \u003e",
    "author_name":"St182",
    "height":306,
    "thumbnail_width":480,
    "width":500,
    "version":"1.0",
    "author_url":"http:\/\/www.youtube.com\/user\/Stinkfist182",
    "provider_name":"YouTube",
    "thumbnail_url":"http:\/\/i4.ytimg.com\/vi\/OyJd2qsRkNk\/
    hqdefault.jpg",
    "type":"video",
    "thumbnail_height":360
    }

    View Slide

  61. cool video:

    View Slide

  62. http://embed.ly/

    View Slide

  63. View Slide

  64. Caja
    http://code.google.com/p/google-caja/

    View Slide

  65. DEMO

    View Slide

  66. Instant updates without
    reloading

    View Slide

  67. PubSubHubbub
    retrieves Atom feed with Hub URL
    Hub
    posts sth
    pings every
    subscriber
    subscribes
    for feed
    acks
    subscription
    http://code.google.com/p/pubsubhubbub/

    View Slide


  68. View Slide


  69. http://activitystrea.ms/schema/1.0/
    note
    http://status.net.xyz:8061/index.php/notice/20
    hello from client
    hello from client

    http://activitystrea.ms/schema/1.0/post
    activity:verb>
    2011-05-23T21:07:33+00:00
    2011-05-23T21:07:33+00:00

    52.52437 13.41053


    favorite="false"repeated="false">

    View Slide

  70. http://activitystrea.ms/

    View Slide


  71. View Slide

  72. PubSubHubbub
    retrieves Atom feed with Hub URL
    Hub
    posts sth
    pings every
    subscriber
    subscribes
    for feed
    acks
    subscription
    http://code.google.com/p/pubsubhubbub/

    View Slide

  73. http://nodejs.org/

    View Slide

  74. WebSockets
    http://dev.w3.org/html5/websockets/

    View Slide

  75. socket.io
    http://socket.io/

    View Slide

  76. http://search.npmjs.org/#/socket.io

    View Slide

  77. Browser Notifications

    View Slide

  78. retrieve Stream with Hub
    Ajax: request
    Subscription
    WebSockets:
    new Post
    subscribe at hub
    challenge
    ack
    new post
    Notification
    new post

    View Slide

  79. DEMO

    View Slide

  80. View Slide

  81. Meteor
    http://www.meteor.com

    View Slide

  82. https://github.com/bashofmann/meteor_shoutbox_demo

    View Slide

  83. DEMO

    View Slide

  84. http://meteor-shoutbox-demo.meteor.com/

    View Slide

  85. Rate and Comment
    https://joind.in/6233

    View Slide

  86. h"p://twi"er.com/Bas2anHofmann
    h"p://profiles.google.com/bashofmann
    h"p://lanyrd.com/people/Bas2anHofmann/
    h"p://speakerdeck.com/u/bas2anhofmann
    [email protected]

    View Slide