Slide 1
Slide 1 text
@chancancode
Wednesday, 4 March, 15
Slide 2
Slide 2 text
Wednesday, 4 March, 15
Slide 3
Slide 3 text
Wednesday, 4 March, 15
Slide 4
Slide 4 text
BEFORE AFTER
image courtesy of TOM DALE
“THE FACE OF OUR NATION”
Wednesday, 4 March, 15
Slide 5
Slide 5 text
Wednesday, 4 March, 15
Slide 6
Slide 6 text
Wednesday, 4 March, 15
Slide 7
Slide 7 text
Wednesday, 4 March, 15
Slide 8
Slide 8 text
Wednesday, 4 March, 15
Slide 9
Slide 9 text
52 °F
Wednesday, 4 March, 15
Slide 10
Slide 10 text
52 °F
52 °Freedom
Wednesday, 4 March, 15
Slide 11
Slide 11 text
52 °F
52 °Freedom
DEGREES OF FREEDOM
Wednesday, 4 March, 15
Slide 12
Slide 12 text
52 °F
52 °Freedom
11 °cDEGREES OF FREEDOM
Wednesday, 4 March, 15
Slide 13
Slide 13 text
52 °F
52 °Freedom
11 °CANADA
11 °cDEGREES OF FREEDOM
Wednesday, 4 March, 15
Slide 14
Slide 14 text
52 °F
52 °Freedom
11 °CANADA
11 °cDEGREES OF FREEDOM
“It is currently 11 degrees, in canada.”
Wednesday, 4 March, 15
Slide 15
Slide 15 text
var isEmpty = false;
var isLoaded = true;
Wednesday, 4 March, 15
Slide 16
Slide 16 text
var isEmpty = false;
var isLoaded = true;
var emptyEh = false;
var loadedEh = true;
Wednesday, 4 March, 15
Slide 17
Slide 17 text
>> require 'canada'
=> true
>> [].empty_eh?
=> true
>> [1,2,3].empty_eh?
=> false
Wednesday, 4 March, 15
Slide 18
Slide 18 text
gem install canada
Wednesday, 4 March, 15
Slide 19
Slide 19 text
alias npm=gem
npm install canada
Wednesday, 4 March, 15
Slide 20
Slide 20 text
Wednesday, 4 March, 15
Slide 21
Slide 21 text
To Rem
3 Terrible Hacks
Wednesday, 4 March, 15
Slide 22
Slide 22 text
To Rem
3 Terrible Hacks
LOL
Wednesday, 4 March, 15
Slide 23
Slide 23 text
You Should
A Design Pattern
ace
Wednesday, 4 March, 15
Slide 24
Slide 24 text
You Should
A Design Pattern
YASSS
ace
Wednesday, 4 March, 15
Slide 25
Slide 25 text
This Slide?
What Colors Are
Wednesday, 4 March, 15
Slide 26
Slide 26 text
This Slide?
What Colors Are
POLL
Wednesday, 4 March, 15
Slide 27
Slide 27 text
Wednesday, 4 March, 15
Slide 28
Slide 28 text
DS.Adapter
Wednesday, 4 March, 15
Slide 29
Slide 29 text
ADAPTER PATTERN
Wednesday, 4 March, 15
Slide 30
Slide 30 text
Wednesday, 4 March, 15
Slide 31
Slide 31 text
Wednesday, 4 March, 15
Slide 32
Slide 32 text
Wednesday, 4 March, 15
Slide 33
Slide 33 text
Wednesday, 4 March, 15
Slide 34
Slide 34 text
var CanadianSensor = {
getTemperature: function() {
// Measures temperature in °C
}
};
Wednesday, 4 March, 15
Slide 35
Slide 35 text
function FreedomMonitor(sensor) {
setInterval(function() {
// Expects °F
if (sensor.readTemperature() > 100) {
...
}
}, 1000);
};
var CanadianSensor = {
getTemperature: function() {
// Measures temperature in °C
}
};
Wednesday, 4 March, 15
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
DEMO TIME!
Wednesday, 4 March, 15
Slide 38
Slide 38 text
chancancode / hn-reader
Wednesday, 4 March, 15
Slide 39
Slide 39 text
GETTING THE DATA
Wednesday, 4 March, 15
Slide 40
Slide 40 text
Wednesday, 4 March, 15
Slide 41
Slide 41 text
$.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
Slide 42
Slide 42 text
Ember Data
( DATA STORE )
JSON API
( DATA SOURCE )
Wednesday, 4 March, 15
Slide 43
Slide 43 text
Ember Data
( DATA STORE )
HACKER NEWS HTML SCRAPPER
( DATA SOURCE )
Wednesday, 4 March, 15
Slide 44
Slide 44 text
Ember Data
( DATA STORE )
HACKER NEWS HTML SCRAPPER
( DATA SOURCE )
Wednesday, 4 March, 15
Slide 45
Slide 45 text
DS.Adapter
DS.Serializer
Wednesday, 4 March, 15
Slide 46
Slide 46 text
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
Slide 47
Slide 47 text
FIXING THE URLS
Wednesday, 4 March, 15
Slide 48
Slide 48 text
Wednesday, 4 March, 15
Slide 49
Slide 49 text
/
Wednesday, 4 March, 15
Slide 50
Slide 50 text
/
/stories/
Wednesday, 4 March, 15
Slide 51
Slide 51 text
/
/stories/
/stories/9132815/
Wednesday, 4 March, 15
Slide 52
Slide 52 text
/
/stories/
/stories/9132815/
/stories/9132815/COMMENTS/
Wednesday, 4 March, 15
Slide 53
Slide 53 text
“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
Slide 54
Slide 54 text
Ember ROUTER
HACKER NEWS URLS
Wednesday, 4 March, 15
Slide 55
Slide 55 text
Ember ROUTER
( ACTUAL APP STATES )
HACKER NEWS URLS
( SERIALIZED APP STATES )
Wednesday, 4 March, 15
Slide 56
Slide 56 text
Ember ROUTER
( ACTUAL APP STATES )
HACKER NEWS URLS
( SERIALIZED APP STATES )
Wednesday, 4 March, 15
Slide 57
Slide 57 text
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
Slide 58
Slide 58 text
Ember.HistoryLocation
Ember.HashLocation
Wednesday, 4 March, 15
Slide 59
Slide 59 text
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
Slide 60
Slide 60 text
PREFERENCES
Wednesday, 4 March, 15
Slide 61
Slide 61 text
Ember ROUTER
{{ localStorage.zomg }}
LOCAL STORAGE localStorage.getItem(“zomg”) Wednesday, 4 March, 15Slide 62
Slide 62 text
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
Slide 63
Slide 63 text
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
Slide 64
Slide 64 text
THE POSSIBILITIES
Wednesday, 4 March, 15
Slide 65
Slide 65 text
HTML
![]()
Cocoa
UIView
UITextView
UIImageView
Wednesday, 4 March, 15
Slide 66
Slide 66 text
Wednesday, 4 March, 15
Slide 67
Slide 67 text
COCOA BARS!
Wednesday, 4 March, 15
Slide 68
Slide 68 text
$ 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
Slide 69
Slide 69 text
@chancancode
Wednesday, 4 March, 15
Slide 70
Slide 70 text
Wednesday, 4 March, 15
Slide 71
Slide 71 text
Here is the URL you are looking for:
https://github.com/chancancode/hn-reader
Wednesday, 4 March, 15
Slide 72
Slide 72 text
A few awesome things didn’t make it to
the slides. I’ll be tweeting, stay tuned.
Wednesday, 4 March, 15
Slide 73
Slide 73 text
I’d like to dedicate this talk to my
favourite teacher and life-mentor,
Miss Shirley Ngai.
Wednesday, 4 March, 15
Slide 74
Slide 74 text
Thank you EmberConf team for
putting this together!
Wednesday, 4 March, 15
Slide 75
Slide 75 text
And of course, thank you Ember
contributors for making this
amazing framework.
Wednesday, 4 March, 15
Slide 76
Slide 76 text
Huge thanks to those who beta
tested my app and tolerated
the “dry” runs of my talk.
Wednesday, 4 March, 15
Slide 77
Slide 77 text
And finally, thank YOU for sitting
through my first-ever conference
talk and being awesome!
Wednesday, 4 March, 15
Slide 78
Slide 78 text
One more thing.
Wednesday, 4 March, 15
Slide 79
Slide 79 text
bars
Wednesday, 4 March, 15
Slide 80
Slide 80 text
Wednesday, 4 March, 15
Slide 81
Slide 81 text
(Yes, that’s it.)
Wednesday, 4 March, 15
Slide 82
Slide 82 text
Wednesday, 4 March, 15