Advertisement
はじめる Ember.js！！ ~ Getting started with ember.js ~
Sep. 13, 2013•0 likes•10,441 views
41 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
「はじめる Ember.js！！」OSC Hokkaido 2013 での講演資料です。
Ryunosuke SATOFollow
プログラマAdvertisement
はじめる Ember.js！！ ~ Getting started with ember.js ~
- 佐藤 竜之介(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.
- 自己紹介
- @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.9.28 Ruby勉強会@札幌 http://ruby-sapporo.org/news/2013/07/31/workshop-27.html
- 2013.11.11 Ember.js ハンズオン http://www.deos.co.jp/SK010.html
- https://idobata.io Idobata
- */
- よろしく お願いします
- 佐藤 竜之介(Ryunosuke SATO) Sapporo.jsOSC Hokkaido 2013 はじめる Ember.js！！ ~ Getting started with Ember.js ~ 2013.09.14
- http://emberjs.com/
- 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 の 距離が遠い
- ようこそ⃝⃝さん シンプルな例
- シンプルな例 入力 表示 Demo on http://emberjs.com/
- シンプルな例 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!!
- http://emberjs.com/ Starter kit
- 関連ライブラリのセットアップ 前準備 jQuery 1.10.2 Handlebars 1.0.0 Ember.js 1.0.0
- 関連ライブラリのセットアップ 前準備
- アプリケーションの初期化
- create -> インスタンスの作成 extend -> オブジェクトの継承 補足
- コンソールのログを確認し て、Ember が動いているこ とを確認する
- 下準備完了
- 簡単な画面を表示する mission 1
- 入力画面を表示したい
- http://handlebarsjs.com/ handlebars
- 入力画面のモックが表示された
- 一覧画面に遷移する mission 2
- リンクをクリックして一覧を表示したい
- Router / Route * いわゆる URL を定義する * URL があると 進む / 戻る が できる * URL を指定して画面を開ける * URL にアクセスされた先の初期化は Route で行なう
- /sheets を定義する
- /sheets で表示される画面を作る
- 画面遷移できるようになった
- ここでデータモデルを考えておく
- データモデルを考える Sheet Order Line 1 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://emberjs.com/guides/
- http://stackoverflow.com/tags/ember.js/
- http://discuss.emberjs.com/
- ぜひみなさんも、 Ember.js を使った 快適なアプリケーション開発を 体感してみてください！！
Advertisement