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

Hijacking Hacker News with Ember.js

Hijacking Hacker News with Ember.js

EmberConf 2015

22bb3e56828870ee9a0dd93aeadbe04a?s=128

Godfrey Chan

March 03, 2015
Tweet

Transcript

  1.   @chancancode Wednesday, 4 March, 15

  2. Wednesday, 4 March, 15

  3. Wednesday, 4 March, 15

  4. BEFORE AFTER image courtesy of TOM DALE “THE FACE OF

    OUR NATION” Wednesday, 4 March, 15
  5. Wednesday, 4 March, 15

  6. Wednesday, 4 March, 15

  7. Wednesday, 4 March, 15

  8. Wednesday, 4 March, 15

  9. 52 °F Wednesday, 4 March, 15

  10. 52 °F 52 °Freedom Wednesday, 4 March, 15

  11. 52 °F 52 °Freedom DEGREES OF FREEDOM Wednesday, 4 March,

    15
  12. 52 °F 52 °Freedom 11 °cDEGREES OF FREEDOM Wednesday, 4

    March, 15
  13. 52 °F 52 °Freedom 11 °CANADA 11 °cDEGREES OF FREEDOM

    Wednesday, 4 March, 15
  14. 52 °F 52 °Freedom 11 °CANADA 11 °cDEGREES OF FREEDOM

    “It is currently 11 degrees, in canada.” Wednesday, 4 March, 15
  15. var isEmpty = false; var isLoaded = true; Wednesday, 4

    March, 15
  16. var isEmpty = false; var isLoaded = true; var emptyEh

    = false; var loadedEh = true; Wednesday, 4 March, 15
  17. >> require 'canada' => true >> [].empty_eh? => true >>

    [1,2,3].empty_eh? => false Wednesday, 4 March, 15
  18. gem install canada Wednesday, 4 March, 15

  19. alias npm=gem npm install canada Wednesday, 4 March, 15

  20. Wednesday, 4 March, 15

  21. To Rem 3 Terrible Hacks Wednesday, 4 March, 15

  22. To Rem 3 Terrible Hacks LOL Wednesday, 4 March, 15

  23. You Should A Design Pattern ace Wednesday, 4 March, 15

  24. You Should A Design Pattern YASSS ace Wednesday, 4 March,

    15
  25. This Slide? What Colors Are Wednesday, 4 March, 15

  26. This Slide? What Colors Are POLL Wednesday, 4 March, 15

  27. Wednesday, 4 March, 15

  28. DS.Adapter Wednesday, 4 March, 15

  29. ADAPTER PATTERN Wednesday, 4 March, 15

  30. Wednesday, 4 March, 15

  31. Wednesday, 4 March, 15

  32. Wednesday, 4 March, 15

  33. Wednesday, 4 March, 15

  34. var CanadianSensor = { getTemperature: function() { // Measures temperature

    in °C } }; Wednesday, 4 March, 15
  35. function FreedomMonitor(sensor) { setInterval(function() { // Expects °F if (sensor.readTemperature()

    > 100) { ... } }, 1000); }; var CanadianSensor = { getTemperature: function() { // Measures temperature in °C } }; Wednesday, 4 March, 15
  36. function CanadianAdapter(sensor) { this.sensor = sensor; }; CanadianAdapter.prototype = {

    readTemperature: function() { return this.sensor.getTemperature() * 1.8 + 32; } }; // Use it! new FreedomMonitor( new CanadianAdapter(CanadianSensor) ); Wednesday, 4 March, 15
  37. DEMO TIME! Wednesday, 4 March, 15

  38.  chancancode / hn-reader Wednesday, 4 March, 15

  39. GETTING THE DATA Wednesday, 4 March, 15

  40. Wednesday, 4 March, 15

  41. $.get("/news").then( function(html) { var stories = []; $(html).find("tr .title a").each(

    function (_, $link) { stories.push({ title: $link.text(), url: $link.attr('href') }); }); ... return stories; }); Wednesday, 4 March, 15
  42. Ember Data ( DATA STORE ) JSON API ( DATA

    SOURCE ) Wednesday, 4 March, 15
  43. Ember Data ( DATA STORE ) HACKER NEWS HTML SCRAPPER

    ( DATA SOURCE ) Wednesday, 4 March, 15
  44. Ember Data ( DATA STORE ) HACKER NEWS HTML SCRAPPER

    ( DATA SOURCE ) Wednesday, 4 March, 15
  45. DS.Adapter DS.Serializer Wednesday, 4 March, 15

  46. App.StoryAdapter = DS.Adapter.extend({ findAll(store, type, id) { return $.get("/news"); }

    }); App.StorySerializer = DS.Serializer.extend({ extractArray(store, type, payload) { var stories = []; $(payload).find("tr .title a").each( ... ); return stories; } }); Wednesday, 4 March, 15
  47. FIXING THE URLS Wednesday, 4 March, 15

  48. Wednesday, 4 March, 15

  49. / Wednesday, 4 March, 15

  50. / /stories/ Wednesday, 4 March, 15

  51. / /stories/ /stories/9132815/ Wednesday, 4 March, 15

  52. / /stories/ /stories/9132815/ /stories/9132815/COMMENTS/ Wednesday, 4 March, 15

  53. “IDEAL” URLS /stories /stories?filter=latest /stories/9132815/comments /stories/9132815/comments?highlight=9133317 Hacker News URLS /news

    /newest /item?id=9132815 /item?id=9133317 Wednesday, 4 March, 15
  54. Ember ROUTER HACKER NEWS URLS Wednesday, 4 March, 15

  55. Ember ROUTER ( ACTUAL APP STATES ) HACKER NEWS URLS

    ( SERIALIZED APP STATES ) Wednesday, 4 March, 15
  56. Ember ROUTER ( ACTUAL APP STATES ) HACKER NEWS URLS

    ( SERIALIZED APP STATES ) Wednesday, 4 March, 15
  57. History LOCATION /stories /stories?filter=latest /stories/9132815/comments /stories/9132815/comments?highlight=9133317 HASH LOCATION #/stories #/stories?filter=latest

    #/stories/9132815/comments #/stories/9132815/comments?highlight=9133317 Wednesday, 4 March, 15
  58. Ember.HistoryLocation Ember.HashLocation Wednesday, 4 March, 15

  59. App.HackerNewsLocation = Ember.HistoryLocation.extend({ getURL: function() { if (this._super() === "/news")

    { return "/stories"; } else if (...) { ... } }, formatURL: function( logicalPath ) { if (logicalPath === "/stories") { return "/news"; } else if (...) { ... } } }); App.Router.reopen({ location: 'hacker-news' }); Wednesday, 4 March, 15
  60. PREFERENCES Wednesday, 4 March, 15

  61. Ember ROUTER <p>{{ localStorage.zomg }}</p> LOCAL STORAGE localStorage.getItem(“zomg”) Wednesday, 4

    March, 15
  62. LOCAL STORAGE localStorage.getItem(“key”); localStorage.setItem(“key”, value); $(window).on(“storage”, ...); EMBER.OBSERVABLE obj.get(“key”); obj.set(“key”,

    value); obj.addObserver( ... ); Wednesday, 4 March, 15
  63. App.LocalStorage = Ember.Object.extend({ init: function() { $(window).on("storage", Ember.run.bind(this, "_onStorageEvent") );

    }, unknownProperty: function(key) { return localStorage.getItem(key); }, setUnknownProperty: function(key, value) { localStorage.setItem(key, value); return true; }, _onStorageEvent: function(e) { this.notifyPropertyChange(e.key); }, willDestroy: function() { $(window).off("storage"); } }); Wednesday, 4 March, 15
  64. THE POSSIBILITIES Wednesday, 4 March, 15

  65. HTML <div> <span> <img> Cocoa UIView UITextView UIImageView Wednesday, 4

    March, 15
  66. Wednesday, 4 March, 15

  67. COCOA BARS! Wednesday, 4 March, 15

  68. $ cd cocoabars $ git status # On branch master

    # # Initial commit # nothing to commit (create/copy files and use "git add" to track) Wednesday, 4 March, 15
  69.   @chancancode Wednesday, 4 March, 15

  70. Wednesday, 4 March, 15

  71. Here is the URL you are looking for: https://github.com/chancancode/hn-reader Wednesday,

    4 March, 15
  72. A few awesome things didn’t make it to the slides.

    I’ll be tweeting, stay tuned. Wednesday, 4 March, 15
  73. I’d like to dedicate this talk to my favourite teacher

    and life-mentor, Miss Shirley Ngai. Wednesday, 4 March, 15
  74. Thank you EmberConf team for putting this together! Wednesday, 4

    March, 15
  75. And of course, thank you Ember contributors for making this

    amazing framework. Wednesday, 4 March, 15
  76. Huge thanks to those who beta tested my app and

    tolerated the “dry” runs of my talk. Wednesday, 4 March, 15
  77. And finally, thank YOU for sitting through my first-ever conference

    talk and being awesome! Wednesday, 4 March, 15
  78. One more thing. Wednesday, 4 March, 15

  79. <canvas> bars Wednesday, 4 March, 15

  80. Wednesday, 4 March, 15

  81. (Yes, that’s it.) Wednesday, 4 March, 15

  82. Wednesday, 4 March, 15