佐藤 竜之介(Ryunosuke SATO)
Sapporo.jsRuby勉強会@札幌-27
はじめる
Ember.js!!
~ Getting started with Ember.js ~
2013.09.28
もっと!
提供
Sapporo.js
Community for people who like JavaScript.
自己紹介
@tricknotes
I am a software developer who
love JavaScript and Ruby.
http://tricknotes.hateblo.jp/
I love OSS
I am a contributer
of Ember.js
/*
* advertising
* about Ember.js
*
* !!Important!!
*
2013.11.11
Ember.js ハンズオン
http://www.deos.co.jp/SK010.html
https://idobata.io
Idobata
東京Node学園祭2013
2013.10.26
http://nodefest.jp/2013/
Comming soon...
札幌市中央区Ruby会議01
2014.02.08 13:00
*/
よろしく
お願いします
佐藤 竜之介(Ryunosuke SATO)
Sapporo.jsRuby勉強会@札幌-27
はじめる
Ember.js!!
~ Getting started with Ember.js ~
2013.09.28
もっと!
http://emberjs.com/
Ember.js 1.0 released!
今日の目標
* Ember.js が何かわかる
* Ruby と一緒に使うことができる
Ember.js について...
今日の話
* Ember.js って何?
* Ember.js と Ruby
今日の話
* Ember.js って何?
* Ember.js と Ruby
最近の web アプリでは、
画面遷移がなく一画面でリア
クティブに操作できるアプリ
ケーションを見る機会が増え
ました
例えば...
Travis CI
Discourse
Idobata
なんでこんなリッチなアプリ
ケーションを作るのか?
ユーザ体験
でも、作るのは大変...
jQuery でのアプローチ
* HTML + CSS + JS の密結合
* データの多重管理問題
* DOM based architecture
* global な jQuery 関数による view の密結合
* Event の開放漏れ
* DOM の開放漏れ
な...
破綻した経験があるでのは?
jQuery based
architecture
そう、とても変更に弱いのです
責務による分割
メンテナンス性!!
TodoMVC
http://todomvc.com/
Ember.js のアプローチ
Router
Controller
View
Template
Model
URL とアプリケーションの対応づけ
アプリケーションコンテキストを保持
画面表示
ブラウザに表示される部分
永続化されているオブジェクト
Router
Controller
View
Template
Model
URL
ブラウザ
1. オブジェクトを取得
2. コントローラを用意
4. テンプレートを描画
ユーザ入力
遷移
3. オブジェクトとテンプレートをバインド
Router
Controller
View
Template
Model
URL
ブラウザ
1. オブジェクトを取得
2. コントローラを用意
4. テンプレートを描画
ユーザ入力
遷移
3. オブジェクトとテンプレートをバインド
開発者は
...
Ember.js がやっていること
必ず必要になる処理をサポート
強力な命名規約
オブジェクトと表示のバインド
DOM 管理
-> フレームワーク
オブジェクトの監視
-> フレームワーク
使ってて気持ちいいか
-> 開発者
適切な役割分担
プログラマがアプリの本質に
集中できるよう、それ以外の
部分をサポートしてくれる!!
ここまでが、Ember.js の
基本的な考え方
チェックポイント
* すごいアプリケーションを作るための
フレームワークです
* プログラマーが快適に開発することを
サポートしてくれます
「Ember.js って何?」
今日の話
* Ember.js って何?
* Ember.js と Ruby
さぁ、ここからは実際に
Ember.js をはじめてみよう!
Ruby
と一緒に
対象バージョン
Ember.js 1.0.0
2013.09.28 現在、最新の安定版
ざっくりと基礎について
-- ここから --
http://emberjs.com/
Starter kit
関連ライブラリのセットアップ
前準備
jQuery 1.10.2
Handlebars 1.0.0
Ember.js 1.0.0
アプリケーションの初期化
Account = Ember.Application.create();
http://emberjs.com/
続きは demo を
ざっくりと基礎について
-- ここまで --
http://tricknotes.github.io/demo-for-osc2013do/
Demo アプリケーション
一から始める方はこちらを!!
http://www.slideshare.net/tricknotes/getting-started-with-emberjs
はじめる Ember.js
今日は Ruby と一緒に始めます
なんで Ruby と??
コミュニティ
文化
今日は、このデモアプリをさらに
実践的にしていきましょう
ファイルを適切に分割したい
case 1
1 ファイルだとちょっと...
https://gist.github.com/tricknotes/6556505
ファイル数が増え過ぎるのも...
コンポーネントが分割されていて
も、ファイルを分けられないと、
あんまり嬉しくない
とくに template !!
ember-rails
https://github.com/emberjs/ember-rails
for rails application
Asset Pipeline
$ tree
.
!"" application.js
!"" controllers
#   !"" sheet_index_controller.js
#   $"" sheet_new_controller....
Asset Pipeline
$ tree
.
!"" application.js
!"" controllers
#   !"" sheet_index_controller.js
#   $"" sheet_new_controller....
Asset Pipeline
$ tree
.
!"" application.js
!"" controllers
#   !"" sheet_index_controller.js
#   $"" sheet_new_controller....
Asset Pipeline
$ tree
.
!"" application.js
!"" controllers
#   !"" sheet_index_controller.js
#   $"" sheet_new_controller....
Asset Pipeline
$ tree
.
!"" application.js
!"" controllers
#   !"" sheet_index_controller.js
#   $"" sheet_new_controller....
ember-middleman
for static site
https://github.com/tricknotes/ember-middleman
だいたい同じ感じ
途中で飽き 作成中なので
一緒にやりたいひと募集中
Asset pipeline 強力ですね!!
ここからは Rails 前提で
進めていきます
関連ライブラリの
バージョンを管理したい
case 2
ember-source
handlebars-source
(jquery-rails)
ember-rails に含まれている!!
(application.js)
//= require jquery
//= require handlebars
//= require ember
//= require_tree .
application.js に追記するだけ
アップデートが簡単!!
bundle update で
Ember.js が更新される
Asset pipelin ++
handlebars 以外の
選択肢がほしい
case 3
「HTML のタグ書くのが面倒!!」
というひと向けに...
haml で handlebars を記述
hamlbars
https://github.com/jamesotron/hamlbars
<h1>帳票一覧</h1>
{{#unless this}}
まだ帳票は作成されていません
{{/unless}}
<ul>
{{#each}}
<li>
#{{id}}:
{{date createdAt}}
{{#link-to 'shee...
jade 風に handlebars を記述
emblem-rails
https://github.com/alexspeller/emblem-rails
<h1>帳票一覧</h1>
{{#unless this}}
まだ帳票は作成されていません
{{/unless}}
<ul>
{{#each}}
<li>
#{{id}}:
{{date createdAt}}
{{#link-to 'shee...
erb 派は
handlebars のままで!
Backend サーバを
rails で作りたい
case 4
Ember.js と API をつなぐ部分
Ember Data
Ember.Model
(他にもいろいろあるけど...)
Ember Data
空前の魔改造ブーム
生まれ変わっている途中
これからに期待!!
https://github.com/emberjs/data
API とのやりとりで、
JSON の scheme と JS の
scheme をいちいち考えるのは
けっこう手間
ActiveModel::Serializers
https://github.com/rails-api/active_model_serializers
Ember Data
+
ActiveModel::Serializers
=
なんとなくいい感じに JSON の
scheme を扱ってくれる
class SheetSerializer < ActiveModel::Serializer
attributes :id, :created_at
has_many :order_lines,
embed: :objects,
includ...
{
“sheet”: {
“id”: 6,
“created_at”: "2013-09-21T15:59:24.001Z",
“order_lines”: [{
“id”: 10,
“product_name”: "ガラナ",
“unit_p...
JS 側でのオブジェクトの保存
var sheet = Account.Sheet.createRecord();
sheet.save();
Ember Date が backend サーバに
リクエストを投げて保存する
Ember アプリをテストしたい
case 5
Capybara
.
├── capybara-webkit
├── Poltergeist
│ └── teaspoon
├── selemiun-webdriver
└── (konacha)
Ruby の JS テストツールたち
Capybara
.
├── capybara-webkit
├── Poltergeist
│ └── teaspoon
├── selemiun-webdriver
└── (konacha)
Ruby の JS テストツールたち
Poltergeist
https://github.com/jonleighton/poltergeist
Poltergeist
* PhantomJS の Capybara driver
* JS の debugger が使える
* テスト実行時に JS のエラーを検知できる
* スクリーンショットが撮れる
feature 'sheet を管理できる', js: true do
scenario 'sheet を作成できる' do
visit root_path
expect(page).to have_css('h1', text: '帳票登録'...
単体テストは...?
konacha
teaspoon
ember-testing
うーん、よくわかりません
rails 版のソースコードはこちらに
https://github.com/tricknotes/ruby-sapporo-workshop-27-demo
今日のまとめ
* Ember.js はすごいアプリケーションを
作るためのフレームワークです
* 快適に開発する手助けをしてくれます
* Ruby のツールと相性がいいです
* 開発ツールはかなり整っているで、
この機会に始めてみましょう!
今日話さなかったこと
* Ember.js 自体について
* サーバからエラーのハンドリング
* Ember Data の闇
難しいところ
* 学習コストが高い
* 日本語の情報が少ない
* そもそも 1.0 の情報が少ない
for more information...
http://emberjs.com/guides/
http://stackoverflow.com/tags/ember.js/
http://discuss.emberjs.com/
ぜひみなさんも、
Ember.js を使った
快適なアプリケーション開発を
体感してみてください!!
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
Upcoming SlideShare
Loading in...5
×

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

3,200

Published on

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,200
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
12
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×