もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
•
14 likes•4,651 views
Ruby勉強会@札幌-27 での発表資料です。 * http://rubysapporo.doorkeeper.jp/events/5190 Rubyist が Ember.js を始めるための参考に。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
Similar to もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~ (20)
More from Ryunosuke SATO
Recently uploaded
Recently uploaded (8)
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
- 1. 佐藤 竜之介(Ryunosuke SATO) Sapporo.jsRuby勉強会@札幌-27 はじめる Ember.js！！ ~ Getting started with Ember.js ~ 2013.09.28 もっと!
- 2. 提供 Sapporo.js Community for people who like JavaScript.
- 3. 自己紹介
- 4. @tricknotes I am a software developer who love JavaScript and Ruby. http://tricknotes.hateblo.jp/
- 5. I love OSS
- 6. I am a contributer of Ember.js
- 7. /* * advertising * about Ember.js * * !!Important!! *
- 12. */
- 13. よろしく お願いします
- 14. 佐藤 竜之介(Ryunosuke SATO) Sapporo.jsRuby勉強会@札幌-27 はじめる Ember.js！！ ~ Getting started with Ember.js ~ 2013.09.28 もっと!
- 18. 今日の目標 * Ember.js が何かわかる * Ruby と一緒に使うことができる Ember.js について...
- 19. 今日の話 * Ember.js って何? * Ember.js と Ruby
- 20. 今日の話 * Ember.js って何? * Ember.js と Ruby
- 22. 例えば...
- 23. Travis CI
- 24. Discourse
- 25. Idobata
- 27. ユーザ体験
- 28. でも、作るのは大変...
- 29. jQuery でのアプローチ
- 30. * HTML + CSS + JS の密結合 * データの多重管理問題 * DOM based architecture * global な jQuery 関数による view の密結合 * Event の開放漏れ * DOM の開放漏れ などなど... 大変なところ
- 35. Ember.js のアプローチ
- 37. Router Controller View Template Model URL ブラウザ 1. オブジェクトを取得 2. コントローラを用意 4. テンプレートを描画 ユーザ入力 遷移 3. オブジェクトとテンプレートをバインド
- 38. Router Controller View Template Model URL ブラウザ 1. オブジェクトを取得 2. コントローラを用意 4. テンプレートを描画 ユーザ入力 遷移 3. オブジェクトとテンプレートをバインド 開発者は 必要な部分だけを作る
- 40. DOM 管理 -> フレームワーク オブジェクトの監視 -> フレームワーク 使ってて気持ちいいか -> 開発者 適切な役割分担
- 44. 今日の話 * Ember.js って何? * Ember.js と Ruby
- 62. Asset Pipeline $ tree . !"" application.js !"" controllers # !"" sheet_index_controller.js # $"" sheet_new_controller.js !"" models # !"" order_line.js # $"" sheet.js !"" router.js !"" routes # !"" sheets_index.js # $"" sheets_new.js $"" templates $"" sheets !"" index.js.handlebars $"" new.js.handlebars
- 63. Asset Pipeline $ tree . !"" application.js !"" controllers # !"" sheet_index_controller.js # $"" sheet_new_controller.js !"" models # !"" order_line.js # $"" sheet.js !"" router.js !"" routes # !"" sheets_index.js # $"" sheets_new.js $"" templates $"" sheets !"" index.js.handlebars $"" new.js.handlebars 自動で全部のファイルが結合される (application.js) //= require_tree .
- 64. Asset Pipeline $ tree . !"" application.js !"" controllers # !"" sheet_index_controller.js # $"" sheet_new_controller.js !"" models # !"" order_line.js # $"" sheet.js !"" router.js !"" routes # !"" sheets_index.js # $"" sheets_new.js $"" templates $"" sheets !"" index.js.handlebars $"" new.js.handlebars <scripe src=”application.js”></script> HTML からは 1 ファイルを読むだけ (application.js) //= require_tree .
- 65. Asset Pipeline $ tree . !"" application.js !"" controllers # !"" sheet_index_controller.js # $"" sheet_new_controller.js !"" models # !"" order_line.js # $"" sheet.js !"" router.js !"" routes # !"" sheets_index.js # $"" sheets_new.js $"" templates $"" sheets !"" index.js.handlebars $"" new.js.handlebars handlebars はファイル (+ディレクトリ)名を テンプレート名としてコンパイル
- 66. Asset Pipeline $ tree . !"" application.js !"" controllers # !"" sheet_index_controller.js # $"" sheet_new_controller.js !"" models # !"" order_line.js # $"" sheet.js !"" router.js !"" routes # !"" sheets_index.js # $"" sheets_new.js $"" templates $"" sheets !"" index.js.handlebars $"" new.js.handlebars <h1>帳票一覧</h1> {{#unless this}} まだ帳票は作成されていません {{/unless}} <ul> {{#each}} <li> #{{id}}: {{date createdAt}} {{#link-to 'sheet' this}} 内容を見る {{/link-to}} </li> {{/each}} </ul> テンプレート単位でファイルに分割できる
- 73. (application.js) //= require jquery //= require handlebars //= require ember //= require_tree . application.js に追記するだけ
- 74. アップデートが簡単!! bundle update で Ember.js が更新される Asset pipelin ++
- 77. haml で handlebars を記述 hamlbars https://github.com/jamesotron/hamlbars
- 78. <h1>帳票一覧</h1> {{#unless this}} まだ帳票は作成されていません {{/unless}} <ul> {{#each}} <li> #{{id}}: {{date createdAt}} {{#link-to 'sheet' this}} 内容を見る {{/link-to}} </li> {{/each}} </ul> %h1 帳票一覧 = hb ‘unless this’ do まだ帳票は作成されていません %ul = hb ‘each’ %li #{hb ‘id’}: = hb ‘date createdAt’ = hb ‘link-to “sheet” this’ do 内容を見る
- 79. jade 風に handlebars を記述 emblem-rails https://github.com/alexspeller/emblem-rails
- 80. <h1>帳票一覧</h1> {{#unless this}} まだ帳票は作成されていません {{/unless}} <ul> {{#each}} <li> #{{id}}: {{date createdAt}} {{#link-to 'sheet' this}} 内容を見る {{/link-to}} </li> {{/each}} </ul> h1 帳票一覧 unless this まだ帳票は作成されていません ul each li #{id}: #{date createdAt} #{link-to “sheet” this’} 内容を見る
- 83. Ember.js と API をつなぐ部分 Ember Data Ember.Model (他にもいろいろあるけど...)
- 85. API とのやりとりで、 JSON の scheme と JS の scheme をいちいち考えるのは けっこう手間
- 87. Ember Data + ActiveModel::Serializers = なんとなくいい感じに JSON の scheme を扱ってくれる
- 88. class SheetSerializer < ActiveModel::Serializer attributes :id, :created_at has_many :order_lines, embed: :objects, include: true end Account.SheetSerializer = DS.ActiveModelSerializer.extend({ attrs: { orderLines: {embedded: 'always'} } }); Ruby 側のシリアライザ JS 側のシリアライザ
- 89. { “sheet”: { “id”: 6, “created_at”: "2013-09-21T15:59:24.001Z", “order_lines”: [{ “id”: 10, “product_name”: "ガラナ", “unit_price”: 120, “count”: 10 }, { “id”: 11, “product_name”: "豆乳", “unit_price”: 98, “count”: 30 }] } } やりとりされる JSON の scheme
- 90. JS 側でのオブジェクトの保存 var sheet = Account.Sheet.createRecord(); sheet.save(); Ember Date が backend サーバに リクエストを投げて保存する
- 92. Capybara . ├── capybara-webkit ├── Poltergeist │ └── teaspoon ├── selemiun-webdriver └── (konacha) Ruby の JS テストツールたち
- 93. Capybara . ├── capybara-webkit ├── Poltergeist │ └── teaspoon ├── selemiun-webdriver └── (konacha) Ruby の JS テストツールたち
- 95. Poltergeist * PhantomJS の Capybara driver * JS の debugger が使える * テスト実行時に JS のエラーを検知できる * スクリーンショットが撮れる
- 96. feature 'sheet を管理できる', js: true do scenario 'sheet を作成できる' do visit root_path expect(page).to have_css('h1', text: '帳票登録') within all('#new-sheet tr')[1] do fill_in 'productName', with: 'ガラナ' fill_in 'unitPrice', with: '120' fill_in 'count', with: '3' end expect(page).to have_css('.total', text: '360') click_button '登録する' expect(page).to have_css('h1', text: '帳票一覧') expect(page).to have_css('li', text: '#1') end end
- 99. 今日のまとめ * Ember.js はすごいアプリケーションを 作るためのフレームワークです * 快適に開発する手助けをしてくれます * Ruby のツールと相性がいいです * 開発ツールはかなり整っているで、 この機会に始めてみましょう！
- 100. 今日話さなかったこと * Ember.js 自体について * サーバからエラーのハンドリング * Ember Data の闇
- 101. 難しいところ * 学習コストが高い * 日本語の情報が少ない * そもそも 1.0 の情報が少ない