Slide 1
Slide 1 text
Ember.js
Ember.js
Ember.js
Ember.js
Ember.js
Ember.js
2012-07-11 Vol.31 )5.-ͱ͔ษڧձ
Playing
Playing
PLaying
Playing
Playing
With
With
With
With
With
Slide 2
Slide 2 text
Yuya Saito
Yuya Saito
Yuya Saito
@CSSRADAR
@CSSRADAR
@CSSRADAR
@cyberagent
@cyberagent
@cyberagent
Slide 3
Slide 3 text
NO Agenda
NO Agenda
NO Agenda
NO Agenda
NO Agenda
Just Get To know
Just Get To Know
Just Get To Know
Just Get To KNOW
Just Get To Know
Ember.js
Ember.js
Ember.js
Ember.js
Ember.js
Slide 4
Slide 4 text
What IS Ember.js?
What Is Ember.js?
What is Ember.js?
Slide 5
Slide 5 text
4JODF
4QSPVU$PSF͕ϕʔε ੜ·Ε
.PCJMF.FͳͲ"QQMF͕8FCΞϓϦʹར༻
7FSTJPO
Slide 6
Slide 6 text
MVC: Ember.js
MVC: Ember.js
MVC: Ember.js
Slide 7
Slide 7 text
MODELS
MODELS
MODELS
ΞϓϦͷσʔλߏΛදݱ
.PEFMಉ࢜ͷؔ࿈ΛؚΉ
Slide 8
Slide 8 text
Views
Views
Views
ςϯϓϨʔτ )BOEMFCBSTKT
ΠϕϯτϋϯυϦϯά
%0.ͷΞοϓσʔτ
Slide 9
Slide 9 text
Controllers
Controllers
Controllers
ΦϒδΣΫτϦετͷཧ
Ϧετͷίϯςϯπ7JFXʹ
өͰ͖Δ
Slide 10
Slide 10 text
State Manager
State Manager
State Manager
.7$ύʔπͷϛσΟΤʔλ
ΞϓϦͷਤͰ͋Γɺ
φϏήʔλ
Slide 11
Slide 11 text
features
features
features
Slide 12
Slide 12 text
“Ember is a JavaScript framework for creating
ambitious web applications that eliminates
boilerplate and provides a standard application
architecture.”
- emberjs.com/documentation
Slide 13
Slide 13 text
ຖճͷΑ͏ʹॻ͘ίʔυΛॻ͔ͳ͍
Eliminates Boilerplate
Slide 14
Slide 14 text
ඪ४తͳΞϓϦߏͷڙڅ
Provides a standard application architecture
Slide 15
Slide 15 text
తͳͭͷಛ
Slide 16
Slide 16 text
ํͷ
όΠϯσΟϯά
2-way binding
1
Slide 17
Slide 17 text
MyApp.president = Ember.Object.create({
name: "Barack Obama"
});
MyApp.country = Ember.Object.create({
// ϓϩύςΟ໊ͷ࠷ޙʹ'Binding'ͱ༩͢Δͱ
// presidentNameʹόΠϯσΟϯάΛੜ͢Δɻ
presidentNameBinding: 'MyApp.president.name'
});
// Ember͕όΠϯσΟϯάΛղܾͨ͠ޙ...
MyApp.country.get('presidentName');
// ݁Ռ: "Barack Obama"
Slide 18
Slide 18 text
ؔΛϓϩύςΟ
ͷΑ͏ʹѻ͑Δ
Computed properties
2
Slide 19
Slide 19 text
MyApp.president = Ember.Object.create({
firstName: "Barack",
lastName: "Obama",
fullName: function() {
return this.get('firstName') + ' ' +
this.get('lastName');
// ҎԼͷϑϥάʹΑͬͯؔΛϓϩύςΟͷΑ͏ʹѻ͏
}.property()
});
MyApp.president.get('fullName');
// ݁Ռ: "Barack Obama"
Slide 20
Slide 20 text
ࣗಈͰߋ৽͢Δ
ςϯϓϨʔτ
Auto-updating Template
3
Slide 21
Slide 21 text
The President of the United States is
{{MyApp.president.fullName}}.
Slide 22
Slide 22 text
Gist of Ember.js
Gist of Ember.js
Gist of Ember.js
Slide 23
Slide 23 text
www.adobe.com/devnet/html5/articles/flame-on-a-beginners-guide-to-emberjs.html
by Andy Matthews
EmberTweets
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Tweets
<div id="frm">
<b>Load Tweets for: </b>
</div>
<div id="content">
<div id="recent">
<h3>Recent Users</h3>
</div>
<div id="tweets">
<h3>Tweets</h3>
</div>
</div>
Slide 26
Slide 26 text
<div id="frm">
<b>Load Tweets for: </b>
</div>
<div id="content">
<div id="recent">
<h3>Recent Users</h3>
</div>
<div id="tweets">
<h3>Tweets</h3>
</div>
</div>
Slide 27
Slide 27 text
App = Em.Application.create();
ΞϓϦωʔϜεϖʔεͷ࡞
Slide 28
Slide 28 text
App.SearchTextField = Em.TextField.extend({
insertNewline: function(){
App.tweetsController.loadTweets();
}
});
ςΩετೖྗཝૹ৴Ϙλϯ
Slide 29
Slide 29 text
{{view App.SearchTextField
placeholder="Twitter username"
valueBinding="App.tweetsController.username"}}
Go!
ςϯϓϨʔτϒϩοΫ
Slide 30
Slide 30 text
App.tweetsController = Em.ArrayController.create({
content: [],
username: '',
loadTweets: function() {
var me = this;
var username = me.get("username");
alert(username);
if ( username ) {
var url = 'http://api.twitter.com/1/statuses/
user_timeline.json'
url += '?screen_name=
%@&callback=?'.fmt(me.get("username"));
// push username to recent user array
App.recentUsersController.addUser(username);
}
}
});
"QQUXFFUT$POUSPMMFS
Slide 31
Slide 31 text
App.recentUsersController = Em.ArrayController.create({
content: [],
addUser: function(name) {
if ( this.contains(name) ) this.removeObject(name);
this.pushObject(name);
},
removeUser: function(view){
this.removeObject(view.context);
},
searchAgain: function(view){
App.tweetsController.set('username', view.context);
App.tweetsController.loadTweets();
},
reverse: function(){
return this.toArray().reverse();
}.property('@each')
});
"QQSFDFOU6TFST$POUSPMMFS
Slide 33
Slide 33 text
App.Tweet = Em.Object.extend({
avatar: null,
screen_name: null,
text: null,
date: null
});
5XFFUTΛऔಘ͢ΔPCKFDU
Slide 34
Slide 34 text
$.getJSON(url,function(data){
me.set('content', []);
$(data).each(function(index,value){
var t = App.Tweet.create({
avatar: value.user.profile_image_url,
screen_name: value.user.screen_name,
text: value.text,
date: value.created_at
});
me.pushObject(t);
})
});
5XFFUTΛऔಘ͢Δ"KBY
Slide 35
Slide 35 text
-
{{#each App.tweetsController}}
-
{{date}}
{{screen_name}}
{{text}}
{{/each}}
Slide 36
Slide 36 text
What IS Ember.js?
What Is Ember.js?
What is Ember.js?
MVC: Ember.js
MVC: Ember.js
MVC: Ember.js
features
features
features
Gist of Ember.js
Gist of Ember.js
Gist of Ember.js
Slide 37
Slide 37 text
“Ember’s philosophy is that by eliminating trivial
choices and making the answers conventional,
you can focus your energy on non-trivial
problems.”
- Tom Dale
Slide 38
Slide 38 text
What’s Next?
What’s Next?
What’s Next?
What’s next?
What’s Next?
Slide 39
Slide 39 text
READ the Docs
READ the Docs
READ the Docs
READ the Docs
READ the Docs
Slide 40
Slide 40 text
http://emberjs.com/documentation/
Slide 41
Slide 41 text
ຊޠ༁
http://tinyurl.com/emberjs-doc
Slide 42
Slide 42 text
Thank You!
Thank You!
Thank You!
Thank You!
Thank You!