はじめる Ember.js!! ~ Getting started with ember.js ~

Post on 31-May-2015

7861 Views

Category:

Technology

1 Downloads

Preview:

Click to see full reader

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

https://idobata.ioIdobata

*/

よろしくお願いします

佐藤 竜之介(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.2Handlebars 1.0.0Ember.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 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...

ぜひみなさんも、Ember.js を使った

快適なアプリケーション開発を体感してみてください!!

top related