はじめる ember.js！！ ~ getting started with ember.js ~
DESCRIPTION
「はじめる Ember.js！！」OSC Hokkaido 2013 での講演資料です。TRANSCRIPT
佐藤 竜之介(Ryunosuke SATO)Sapporo.jsOSC Hokkaido 2013
はじめるEmber.js！！
~ Getting started with Ember.js ~
2013.09.14
Enjoy :-)
提供
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.9.28Ruby勉強会@札幌
http://ruby-sapporo.org/news/2013/07/31/workshop-27.html
2013.11.11Ember.js ハンズオン
http://www.deos.co.jp/SK010.html
*/
よろしくお願いします
佐藤 竜之介(Ryunosuke SATO)Sapporo.jsOSC Hokkaido 2013
はじめるEmber.js！！
~ Getting started with Ember.js ~
2013.09.14
Ember.js 1.0 released!
6ヶ月間の rc 時代初の安定版リリースはじめるなら、いま！
今日の目標
* 開発の手順を知ることができる* 基本的なコンポーネントを理解できる* 実際にはじめることができる!
Ember.js について...
今日の話* Ember.js って何?* Ember.js のはじめ方
今日の話* Ember.js って何?* Ember.js のはじめ方
最近の web アプリでは、画面遷移がなく一画面でリアクティブに操作できるアプリケーションを見る機会が増え
ました
例えば...
Travis CI
Discourse
Idobata
なんでこんな複雑なアプリケーションを作るのか？
使いやすさ
でも、作るのは大変...
web アプリケーションならではの難しいところのひとつ
JavaScript と DOM の距離が遠い
“ようこそ◯◯さん”
シンプルな例
シンプルな例JavaScript
DOM
DOM
入力
表示
入力したものがそのまま表示されてほしい!!
jQuery を使った例
コピーペーストにも対応!!jQuery を使った例
jQuery でのアプローチ
他にも困るところ...* DOM の変更で JS を修正* 他の場所に表示させるには...
やりたいことの割に複雑
破綻した経験があるでのは?
jQuery based architecture
そう、とても変更に弱いのです
今回のテーマは、もっとリッチなアプリケーション
別の解決が必要
Ember.js のアプローチ
Ember.js を使った例
簡潔で全く無駄のない記述!!
Ember.js を使った例
“当然” の部分を人間がコーディングしなくていい!!
DOM 管理 -> フレームワークオブジェクトの監視 -> フレームワーク
使ってて気持ちいいか -> 開発者
適切な役割分担
プログラマがアプリの本質に集中できるよう、それ以外の部分をサポートしてくれる!!
ここまでが、Ember.js の基本的な考え方
チェックポイント
* すごいアプリケーションを作るための フレームワークです* プログラマーが快適に開発することを サポートしてくれます
「Ember.js って何？」
今日の話* Ember.js って何?* Ember.js のはじめ方
さぁ、ここからは実際に Ember.js をはじめてみよう！
対象バージョン
Ember.js 1.0.0
2013.09.14 現在、最新の安定版
http://tricknotes.github.io/demo-for-osc2013do/
Demo アプリケーション
アプリケーション作成を行いながら Ember のモジュールを解説します
ひとつひとつ動作を確認しながら進めていきます
modules
modules
Getting started!!
関連ライブラリのセットアップ前準備
jQuery 1.10.2Handlebars 1.0.0Ember.js 1.0.0
関連ライブラリのセットアップ前準備
アプリケーションの初期化
create -> インスタンスの作成
extend -> オブジェクトの継承
補足
コンソールのログを確認して、Ember が動いているこ
とを確認する
下準備完了
簡単な画面を表示する
mission 1
入力画面を表示したい
入力画面のモックが表示された
一覧画面に遷移する
mission 2
リンクをクリックして一覧を表示したい
Router / Route* いわゆる URL を定義する* URL があると ”進む” / “戻る” が できる* URL を指定して画面を開ける* URL にアクセスされた先の初期化は Route で行なう
“/sheets” を定義する
“/sheets” で表示される画面を作る
画面遷移できるようになった
ここでデータモデルを考えておく
データモデルを考える
Sheet Order Line1 n
* 商品名* 単価* 個数
* 作成日時
データモデルを考えるSheet Order Line
初期値を決めておく
入力画面の初期表示を行なう
mission 3
binding
* オブジェクトの状態と表示を 同期する仕組み* オブジェクト同士にも使える
画面表示用にオブジェクトを用意する
オブジェクトと DOM を紐付ける
明細行が2行になった初期値が表示された
小計を表示する
mission 4
小計を勝手に計算してほしい
Computed property* あるプロパティ(複数可)の値を 元に別の値を求めたいときに使う* 関数ではなくプロパティのように 扱える
小計表示欄を追加
依存するプロパティと算出方法を宣言
リアルタイムで小計が計算される!!
合計を表示する
mission 5
合計も自動で計算してほしい
合計表示欄を追加
配列の中身に依存するので @each を使う
合計が自動で計算される!!
入力欄を増やせるようにする
mission 6
“行を追加” ボタンを動くようにしたい
controller
* ユーザからのアクションを受け付ける* モデルのプロキシとして振る舞う* アプリケーションコンテキストを保持する
ボタンを押した時のアクションを定義
アクションを定義して処理を記述する
行を追加できるようになった
入力欄を削除できるようにする
mission 7
“削除” ボタンを動くようにしたい
どの行を削除するか特定するため、アクションに引数を渡す
アクションを追加する
行を削除できるようになった
帳票を保存できるようにする
mission 8
保存場所を用意
ボタンを作成
アクションを追加する
登録が完了したら一覧へ遷移する
ここまでで console から確認してみる
帳票オブジェクトが保存されている
帳票一覧を表示する
mission 9
Route で帳票全件を用意する
sheets で全件表示
作成した帳票が表示される
帳票の詳細を表示する
mission 10
“詳細を見る” リンクを動くようにしたい
* オブジェクトに対応した URL を 発行する* URL からパラメータを読みだして、 オブジェクトを復元する
Route
URL のパターンを指定
オブジェクトを特定するためのプロパティを追加
リンクを追加
リンクが表示される
詳細画面の template を作成
詳細が表示される
あとは見栄えを整えると...
http://tricknotes.github.io/demo-for-osc2013do/
簡単な Ember アプリが完成
今日のまとめ
* Ember.js はすごいアプリケーションを 作るためのフレームワークです* 快適に開発する手助けをしてくれます* Ember.Application.create()
今日話さなかったこと
* サーバ側とのやりとり* 既存の web サイトへの組み込み* その他のモジュール
難しいところ
* 学習コストが高い* 日本語の情報が少ない* そもそも 1.0 の情報が少ない
for more information...
http://stackoverflow.com/tags/ember.js/
ぜひみなさんも、Ember.js を使った
快適なアプリケーション開発を体感してみてください！！