Playing with Ember.js

Playing with Ember.js

31回 HTML5とか勉強会

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

July 11, 2012
Tweet

Transcript

  1. 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
  2. Yuya Saito Yuya Saito Yuya Saito @CSSRADAR @CSSRADAR @CSSRADAR @cyberagent

    @cyberagent @cyberagent
  3. 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
  4. What IS Ember.js? What Is Ember.js? What is Ember.js?

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

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

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

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

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

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

    φϏήʔλ
  11. features features features

  12. “Ember is a JavaScript framework for creating ambitious web applications

    that eliminates boilerplate and provides a standard application architecture.” - emberjs.com/documentation
  13. ຖճͷΑ͏ʹॻ͘ίʔυΛॻ͔ͳ͍ Eliminates Boilerplate

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

  15. ৅௃తͳͭͷಛ௃

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

  17. 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"
  18. ؔ਺ΛϓϩύςΟ ͷΑ͏ʹѻ͑Δ Computed properties 2

  19. 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"
  20. ࣗಈͰߋ৽͢Δ ςϯϓϨʔτ Auto-updating Template 3

  21. <script type="text/x-handlebars"> The President of the United States is {{MyApp.president.fullName}}.

    </script>
  22. Gist of Ember.js Gist of Ember.js Gist of Ember.js

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

  24. None
  25. <!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>
  26. <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>
  27. App = Em.Application.create(); ΞϓϦωʔϜεϖʔεͷ࡞੒

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

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

  30. 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
  31. 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
  32. <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> อଘͨ͠ݕࡧΩʔϫʔυͷදࣔ
  33. App.Tweet = Em.Object.extend({ avatar: null, screen_name: null, text: null, date:

    null }); 5XFFUTΛऔಘ͢ΔPCKFDU
  34. $.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
  35. <ul> {{#each App.tweetsController}} <li> <img {{bindAttr src="avatar"}} /> <span>{{date}}</span> <h3>{{screen_name}}</h3>

    <p>{{text}}</p> </li> {{/each}} </ul> 5XFFUTΛදࣔ͢Δ5FNQMBUF
  36. 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
  37. “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
  38. What’s Next? What’s Next? What’s Next? What’s next? What’s Next?

  39. READ the Docs READ the Docs READ the Docs READ

    the Docs READ the Docs
  40. http://emberjs.com/documentation/

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

  42. Thank You! Thank You! Thank You! Thank You! Thank You!