Mashing up JavaScript

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

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
    mail@bas2anhofmann.de
    

    View Slide