Hijacking Hacker News with Ember.js

EmberConf 2015

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