Playing with Ember.js

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

Yuya Saito Yuya Saito Yuya Saito @CSSRADAR @CSSRADAR @CSSRADAR @cyberagent
@cyberagent @cyberagent

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

What IS Ember.js? What Is Ember.js? What is Ember.js?

4JODF 4QSPVU$PSF͕ϕʔε ೥ੜ·Ε .PCJMF.FͳͲ"QQMF͕8FCΞϓϦʹར༻ 7FSTJPO

MVC: Ember.js MVC: Ember.js MVC: Ember.js

MODELS MODELS MODELS ΞϓϦͷσʔλߏ଄Λදݱ .PEFMಉ࢜ͷؔ࿈ΛؚΉ

Views Views Views ςϯϓϨʔτ )BOEMFCBSTKT ΠϕϯτϋϯυϦϯά %0.ͷΞοϓσʔτ

Controllers Controllers Controllers ΦϒδΣΫτϦετͷ؅ཧ Ϧετ಺ͷίϯςϯπ͸7JFXʹ ൓өͰ͖Δ

State Manager State Manager State Manager .7$ύʔπͷϛσΟΤʔλ ΞϓϦͷ஍ਤͰ͋Γɺ
φϏήʔλ

features features features

“Ember is a JavaScript framework for creating ambitious web applications
that eliminates boilerplate and provides a standard application architecture.” - emberjs.com/documentation

ຖճͷΑ͏ʹॻ͘ίʔυΛॻ͔ͳ͍ Eliminates Boilerplate

ඪ४తͳΞϓϦߏ଄ͷڙڅ Provides a standard application architecture

৅௃తͳͭͷಛ௃

૒ํ޲ͷ όΠϯσΟϯά 2-way binding 1

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"

ؔ਺ΛϓϩύςΟ ͷΑ͏ʹѻ͑Δ Computed properties 2

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"

ࣗಈͰߋ৽͢Δ ςϯϓϨʔτ Auto-updating Template 3

Gist of Ember.js Gist of Ember.js Gist of Ember.js

www.adobe.com/devnet/html5/articles/flame-on-a-beginners-guide-to-emberjs.html by Andy Matthews EmberTweets

<!doctype html> <html> <head> <title>Tweets</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link
rel="stylesheet" href="styles.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js"></script> <script src="http://cloud.github.com/downloads/emberjs/ember.js/ ember-0.9.6.min.js"></script> <script src="app.js"></script> </head> <body> <script type="text/x-handlebars"> <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> </script> </body> </html>

<body> <script type="text/x-handlebars"> <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> </script> </body>

App = Em.Application.create(); ΞϓϦωʔϜεϖʔεͷ࡞੒

App.SearchTextField = Em.TextField.extend({ insertNewline: function(){ App.tweetsController.loadTweets(); } }); ςΩετೖྗཝૹ৴Ϙλϯ

{{view App.SearchTextField placeholder="Twitter username" valueBinding="App.tweetsController.username"}} <button {{action "loadTweets" target="App.tweetsController"}}>Go!</button> ςϯϓϨʔτϒϩοΫ

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

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

<ol> {{#each App.recentUsersController.reverse}} <li> <a href="#" title="view again" {{action "searchAgain"
target="App.recentUsersController"}} >{{this}}</a> - <a href="#" title="remove" {{action "removeUser" target="App.recentUsersController"}} >X</a> </li> {{/each}} </ol> อଘͨ͠ݕࡧΩʔϫʔυͷදࣔ

App.Tweet = Em.Object.extend({ avatar: null, screen_name: null, text: null, date:
null }); 5XFFUTΛऔಘ͢ΔPCKFDU

$.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

<ul> {{#each App.tweetsController}} <li> <img {{bindAttr src="avatar"}} /> <span>{{date}}</span> <h3>{{screen_name}}</h3>
<p>{{text}}</p> </li> {{/each}} </ul> 5XFFUTΛදࣔ͢Δ5FNQMBUF

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

“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

What’s Next? What’s Next? What’s Next? What’s next? What’s Next?

READ the Docs READ the Docs READ the Docs READ
the Docs READ the Docs

http://emberjs.com/documentation/

೔ຊޠ༁ http://tinyurl.com/emberjs-doc

Thank You! Thank You! Thank You! Thank You! Thank You!

Playing with Ember.js

Playing with Ember.js

More Decks by Yuya Saito

Other Decks in Programming

Featured

Transcript