Your SlideShare is downloading. ×
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~

3,010

Published on

Ruby勉強会@札幌-27 での発表資料です。 …

Ruby勉強会@札幌-27 での発表資料です。
* http://rubysapporo.doorkeeper.jp/events/5190

Rubyist が Ember.js を始めるための参考に。

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,010
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
10
Comments
0
Likes
14
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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!! *
  • 8. 2013.11.11 Ember.js ハンズオン http://www.deos.co.jp/SK010.html
  • 9. https://idobata.io Idobata
  • 10. 東京Node学園祭2013 2013.10.26 http://nodefest.jp/2013/
  • 11. Comming soon... 札幌市中央区Ruby会議01 2014.02.08 13:00
  • 12. */
  • 13. よろしく お願いします
  • 14. 佐藤 竜之介(Ryunosuke SATO) Sapporo.jsRuby勉強会@札幌-27 はじめる Ember.js!! ~ Getting started with Ember.js ~ 2013.09.28 もっと!
  • 15. http://emberjs.com/
  • 16. Ember.js 1.0 released!
  • 17. 今日の目標 * Ember.js が何かわかる * Ruby と一緒に使うことができる Ember.js について...
  • 18. 今日の話 * Ember.js って何? * Ember.js と Ruby
  • 19. 今日の話 * Ember.js って何? * Ember.js と Ruby
  • 20. 最近の web アプリでは、 画面遷移がなく一画面でリア クティブに操作できるアプリ ケーションを見る機会が増え ました
  • 21. 例えば...
  • 22. Travis CI
  • 23. Discourse
  • 24. Idobata
  • 25. なんでこんなリッチなアプリ ケーションを作るのか?
  • 26. ユーザ体験
  • 27. でも、作るのは大変...
  • 28. jQuery でのアプローチ
  • 29. * HTML + CSS + JS の密結合 * データの多重管理問題 * DOM based architecture * global な jQuery 関数による view の密結合 * Event の開放漏れ * DOM の開放漏れ などなど... 大変なところ
  • 30. 破綻した経験があるでのは? jQuery based architecture そう、とても変更に弱いのです
  • 31. 責務による分割 メンテナンス性!!
  • 32. TodoMVC http://todomvc.com/
  • 33. Ember.js のアプローチ
  • 34. Router Controller View Template Model URL とアプリケーションの対応づけ アプリケーションコンテキストを保持 画面表示 ブラウザに表示される部分 永続化されているオブジェクト
  • 35. Router Controller View Template Model URL ブラウザ 1. オブジェクトを取得 2. コントローラを用意 4. テンプレートを描画 ユーザ入力 遷移 3. オブジェクトとテンプレートをバインド
  • 36. Router Controller View Template Model URL ブラウザ 1. オブジェクトを取得 2. コントローラを用意 4. テンプレートを描画 ユーザ入力 遷移 3. オブジェクトとテンプレートをバインド 開発者は 必要な部分だけを作る
  • 37. Ember.js がやっていること 必ず必要になる処理をサポート 強力な命名規約 オブジェクトと表示のバインド
  • 38. DOM 管理 -> フレームワーク オブジェクトの監視 -> フレームワーク 使ってて気持ちいいか -> 開発者 適切な役割分担
  • 39. プログラマがアプリの本質に 集中できるよう、それ以外の 部分をサポートしてくれる!!
  • 40. ここまでが、Ember.js の 基本的な考え方
  • 41. チェックポイント * すごいアプリケーションを作るための フレームワークです * プログラマーが快適に開発することを サポートしてくれます 「Ember.js って何?」
  • 42. 今日の話 * Ember.js って何? * Ember.js と Ruby
  • 43. さぁ、ここからは実際に Ember.js をはじめてみよう! Ruby と一緒に
  • 44. 対象バージョン Ember.js 1.0.0 2013.09.28 現在、最新の安定版
  • 45. ざっくりと基礎について -- ここから --
  • 46. http://emberjs.com/ Starter kit
  • 47. 関連ライブラリのセットアップ 前準備 jQuery 1.10.2 Handlebars 1.0.0 Ember.js 1.0.0
  • 48. アプリケーションの初期化 Account = Ember.Application.create();
  • 49. http://emberjs.com/ 続きは demo を
  • 50. ざっくりと基礎について -- ここまで --
  • 51. http://tricknotes.github.io/demo-for-osc2013do/ Demo アプリケーション
  • 52. 一から始める方はこちらを!! http://www.slideshare.net/tricknotes/getting-started-with-emberjs はじめる Ember.js
  • 53. 今日は Ruby と一緒に始めます
  • 54. なんで Ruby と?? コミュニティ 文化
  • 55. 今日は、このデモアプリをさらに 実践的にしていきましょう
  • 56. ファイルを適切に分割したい case 1
  • 57. 1 ファイルだとちょっと... https://gist.github.com/tricknotes/6556505 ファイル数が増え過ぎるのも...
  • 58. コンポーネントが分割されていて も、ファイルを分けられないと、 あんまり嬉しくない とくに template !!
  • 59. ember-rails https://github.com/emberjs/ember-rails for rails application
  • 60. 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
  • 61. 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 .
  • 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 <scripe src=”application.js”></script> HTML からは 1 ファイルを読むだけ (application.js) //= require_tree .
  • 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 handlebars はファイル (+ディレクトリ)名を テンプレート名としてコンパイル
  • 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 <h1>帳票一覧</h1> {{#unless this}} まだ帳票は作成されていません {{/unless}} <ul> {{#each}} <li> #{{id}}: {{date createdAt}} {{#link-to 'sheet' this}} 内容を見る {{/link-to}} </li> {{/each}} </ul> テンプレート単位でファイルに分割できる
  • 65. ember-middleman for static site https://github.com/tricknotes/ember-middleman
  • 66. だいたい同じ感じ 途中で飽き 作成中なので 一緒にやりたいひと募集中
  • 67. Asset pipeline 強力ですね!!
  • 68. ここからは Rails 前提で 進めていきます
  • 69. 関連ライブラリの バージョンを管理したい case 2
  • 70. ember-source handlebars-source (jquery-rails) ember-rails に含まれている!!
  • 71. (application.js) //= require jquery //= require handlebars //= require ember //= require_tree . application.js に追記するだけ
  • 72. アップデートが簡単!! bundle update で Ember.js が更新される Asset pipelin ++
  • 73. handlebars 以外の 選択肢がほしい case 3
  • 74. 「HTML のタグ書くのが面倒!!」 というひと向けに...
  • 75. haml で handlebars を記述 hamlbars https://github.com/jamesotron/hamlbars
  • 76. <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 内容を見る
  • 77. jade 風に handlebars を記述 emblem-rails https://github.com/alexspeller/emblem-rails
  • 78. <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’} 内容を見る
  • 79. erb 派は handlebars のままで!
  • 80. Backend サーバを rails で作りたい case 4
  • 81. Ember.js と API をつなぐ部分 Ember Data Ember.Model (他にもいろいろあるけど...)
  • 82. Ember Data 空前の魔改造ブーム 生まれ変わっている途中 これからに期待!! https://github.com/emberjs/data
  • 83. API とのやりとりで、 JSON の scheme と JS の scheme をいちいち考えるのは けっこう手間
  • 84. ActiveModel::Serializers https://github.com/rails-api/active_model_serializers
  • 85. Ember Data + ActiveModel::Serializers = なんとなくいい感じに JSON の scheme を扱ってくれる
  • 86. 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 側のシリアライザ
  • 87. { “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
  • 88. JS 側でのオブジェクトの保存 var sheet = Account.Sheet.createRecord(); sheet.save(); Ember Date が backend サーバに リクエストを投げて保存する
  • 89. Ember アプリをテストしたい case 5
  • 90. Capybara . ├── capybara-webkit ├── Poltergeist │ └── teaspoon ├── selemiun-webdriver └── (konacha) Ruby の JS テストツールたち
  • 91. Capybara . ├── capybara-webkit ├── Poltergeist │ └── teaspoon ├── selemiun-webdriver └── (konacha) Ruby の JS テストツールたち
  • 92. Poltergeist https://github.com/jonleighton/poltergeist
  • 93. Poltergeist * PhantomJS の Capybara driver * JS の debugger が使える * テスト実行時に JS のエラーを検知できる * スクリーンショットが撮れる
  • 94. 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
  • 95. 単体テストは...? konacha teaspoon ember-testing うーん、よくわかりません
  • 96. rails 版のソースコードはこちらに https://github.com/tricknotes/ruby-sapporo-workshop-27-demo
  • 97. 今日のまとめ * Ember.js はすごいアプリケーションを 作るためのフレームワークです * 快適に開発する手助けをしてくれます * Ruby のツールと相性がいいです * 開発ツールはかなり整っているで、 この機会に始めてみましょう!
  • 98. 今日話さなかったこと * Ember.js 自体について * サーバからエラーのハンドリング * Ember Data の闇
  • 99. 難しいところ * 学習コストが高い * 日本語の情報が少ない * そもそも 1.0 の情報が少ない
  • 100. for more information...
  • 101. http://emberjs.com/guides/
  • 102. http://stackoverflow.com/tags/ember.js/
  • 103. http://discuss.emberjs.com/
  • 104. ぜひみなさんも、 Ember.js を使った 快適なアプリケーション開発を 体感してみてください!!

×