Post on 17-May-2015
description
佐藤 竜之介(Ryunosuke SATO)Sapporo.jsRuby勉強会@札幌-27
はじめるEmber.js！！
~ Getting started with Ember.js ~
2013.09.28
もっと!
提供
Sapporo.js
Community for people who like JavaScript.
自己紹介
@tricknotesI am a software developer who love JavaScript and Ruby.
http://tricknotes.hateblo.jp/
I love OSS
I am a contributerof Ember.js
/* * advertising * about Ember.js * * !!Important!! *
2013.11.11Ember.js ハンズオン
http://www.deos.co.jp/SK010.html
Comming soon...
札幌市中央区Ruby会議012014.02.08 13:00~
*/
よろしくお願いします
佐藤 竜之介(Ryunosuke SATO)Sapporo.jsRuby勉強会@札幌-27
はじめるEmber.js！！
~ Getting started with Ember.js ~
2013.09.28
もっと!
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
そう、とても変更に弱いのです
責務による分割
メンテナンス性!!
Ember.js のアプローチ
RouterControllerViewTemplateModel
URL とアプリケーションの対応づけアプリケーションコンテキストを保持画面表示ブラウザに表示される部分永続化されているオブジェクト
Router
ControllerView
Template
Model
URL
ブラウザ
1. オブジェクトを取得2. コントローラを用意
4. テンプレートを描画
ユーザ入力
遷移
3. オブジェクトとテンプレートをバインド
Router
ControllerView
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 現在、最新の安定版
ざっくりと基礎について
-- ここから --
関連ライブラリのセットアップ前準備
jQuery 1.10.2Handlebars 1.0.0Ember.js 1.0.0
アプリケーションの初期化
Account = Ember.Application.create();
ざっくりと基礎について
-- ここまで --
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-railshttps://github.com/emberjs/ember-rails
for rails application
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
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 .
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 .
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 はファイル(+ディレクトリ)名を
テンプレート名としてコンパイル
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>
テンプレート単位でファイルに分割できる
ember-middlemanfor static site
https://github.com/tricknotes/ember-middleman
だいたい同じ感じ
途中で飽き 作成中なので一緒にやりたいひと募集中
Asset pipeline 強力ですね!!
ここからは Rails 前提で進めていきます
関連ライブラリのバージョンを管理したい
case 2
ember-sourcehandlebars-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 を記述
hamlbarshttps://github.com/jamesotron/hamlbars
<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 内容を見る
jade 風に handlebars を記述
emblem-railshttps://github.com/alexspeller/emblem-rails
<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’} 内容を見る
erb 派は handlebars のままで!
Backend サーバをrails で作りたい
case 4
Ember.js と API をつなぐ部分
Ember DataEmber.Model
(他にもいろいろあるけど...)
Ember Data空前の魔改造ブーム
生まれ変わっている途中これからに期待！！
https://github.com/emberjs/data
API とのやりとりで、JSON の scheme と JS の scheme をいちいち考えるのは
けっこう手間
ActiveModel::Serializershttps://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, include: trueend
Account.SheetSerializer = DS.ActiveModelSerializer.extend({ attrs: { orderLines: {embedded: 'always'} }});
Ruby 側のシリアライザ
JS 側のシリアライザ
{ “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
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 テストツールたち
Poltergeisthttps://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: '帳票登録')
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') endend
単体テストは...?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://stackoverflow.com/tags/ember.js/
ぜひみなさんも、Ember.js を使った
快適なアプリケーション開発を体感してみてください！！