「はじめる Ember.js！！」OSC Hokkaido 2013 での講演資料です。

1. 佐藤 竜之介(Ryunosuke SATO)
Sapporo.jsOSC Hokkaido 2013
はじめる
Ember.js！！
~ Getting started with Ember.js ~
2013.09.14

3. Enjoy :-)

4. 提供
Sapporo.js
Community for people who like JavaScript.

5. 自己紹介

6. @tricknotes
I am a software developer who
love JavaScript and Ruby.
http://tricknotes.hateblo.jp/

7. I love OSS

8. I am a contributer
of Ember.js

9. /*
* advertising
* about Ember.js
*
* !!Important!!
*

10. 2013.9.28
Ruby勉強会@札幌
http://ruby-sapporo.org/news/2013/07/31/workshop-27.html

11. 2013.11.11
Ember.js ハンズオン
http://www.deos.co.jp/SK010.html

12. https://idobata.io
Idobata

13. */

14. よろしく
お願いします

15. 佐藤 竜之介(Ryunosuke SATO)
Sapporo.jsOSC Hokkaido 2013
はじめる
Ember.js！！
~ Getting started with Ember.js ~
2013.09.14

16. http://emberjs.com/

18. Ember.js 1.0 released!

19. 6ヶ月間の rc 時代
初の安定版リリース
はじめるなら、いま！

20. 今日の目標
* 開発の手順を知ることができる
* 基本的なコンポーネントを理解できる
* 実際にはじめることができる!
Ember.js について...

21. 今日の話
* Ember.js って何?
* Ember.js のはじめ方

22. 今日の話
* Ember.js って何?
* Ember.js のはじめ方

23. 最近の web アプリでは、
画面遷移がなく一画面でリア
クティブに操作できるアプリ
ケーションを見る機会が増え
ました

24. 例えば...

25. Travis CI

26. Discourse

27. Idobata

28. なんでこんな複雑なアプリ
ケーションを作るのか？

29. 使いやすさ

30. でも、作るのは大変...

31. web アプリケーションなら
ではの難しいところのひとつ
JavaScript と DOM の
距離が遠い

32. ようこそ⃝⃝さん
シンプルな例

33. シンプルな例
入力
表示
Demo on http://emberjs.com/

34. シンプルな例
JavaScript
DOM
DOM
入力
表示

35. 入力したものがそのまま表示
されてほしい!!

36. jQuery を使った例

37. コピーペーストにも対応!!
jQuery を使った例

38. jQuery でのアプローチ
他にも困るところ...
* DOM の変更で JS を修正
* 他の場所に表示させるには...
やりたいことの割に複雑

39. 破綻した経験があるでのは?
jQuery based
architecture
そう、とても変更に弱いのです

40. 今回のテーマは、
もっとリッチなアプリケーション
別の解決が必要

41. Ember.js のアプローチ

42. Ember.js を使った例

43. 簡潔で全く無駄のない記述!!
Ember.js を使った例

44. 当然 の部分を人間がコー
ディングしなくていい!!

45. DOM 管理
-> フレームワーク
オブジェクトの監視
-> フレームワーク
使ってて気持ちいいか
-> 開発者
適切な役割分担

46. プログラマがアプリの本質に
集中できるよう、それ以外の
部分をサポートしてくれる!!

47. ここまでが、Ember.js の
基本的な考え方

48. チェックポイント
* すごいアプリケーションを作るための
フレームワークです
* プログラマーが快適に開発することを
サポートしてくれます
「Ember.js って何？」

49. 今日の話
* Ember.js って何?
* Ember.js のはじめ方

50. さぁ、ここからは実際に
Ember.js をはじめてみよう！

51. 対象バージョン
Ember.js 1.0.0
2013.09.14 現在、最新の安定版

52. http://tricknotes.github.io/demo-for-osc2013do/
Demo アプリケーション

53. アプリケーション作成を行いながら
Ember のモジュールを解説します
ひとつひとつ動作を確認しながら
進めていきます

54. modules

55. modules

56. Getting started!!

57. http://emberjs.com/
Starter kit

58. 関連ライブラリのセットアップ
前準備
jQuery 1.10.2
Handlebars 1.0.0
Ember.js 1.0.0

59. 関連ライブラリのセットアップ
前準備

60. アプリケーションの初期化

61. create -> インスタンスの作成
extend -> オブジェクトの継承
補足

62. コンソールのログを確認し
て、Ember が動いているこ
とを確認する

63. 下準備完了

64. 簡単な画面を表示する
mission 1

65. 入力画面を表示したい

66. http://handlebarsjs.com/
handlebars

68. 入力画面のモックが表示された

69. 一覧画面に遷移する
mission 2

70. リンクをクリックして一覧を表示したい

71. Router / Route
* いわゆる URL を定義する
* URL があると 進む / 戻る が
できる
* URL を指定して画面を開ける
* URL にアクセスされた先の初期化は
Route で行なう

72. /sheets を定義する

73. /sheets で表示される画面を作る

74. 画面遷移できるようになった

75. ここでデータモデルを考えておく

76. データモデルを考える
Sheet Order Line
1 n
* 商品名
* 単価
* 個数
* 作成日時

77. データモデルを考える
Sheet Order Line

78. 初期値を決めておく

79. 入力画面の初期表示を行なう
mission 3

80. binding
* オブジェクトの状態と表示を
同期する仕組み
* オブジェクト同士にも使える

81. 画面表示用にオブジェクトを用意する

82. オブジェクトと DOM を紐付ける

83. 明細行が2行になった
初期値が表示された

84. 小計を表示する
mission 4

85. 小計を勝手に計算してほしい

86. Computed property
* あるプロパティ(複数可)の値を
元に別の値を求めたいときに使う
* 関数ではなくプロパティのように
扱える

87. 小計表示欄を追加

88. 依存するプロパティと算出方法を宣言

89. リアルタイムで小計が計算される!!

90. 合計を表示する
mission 5

91. 合計も自動で計算してほしい

92. 合計表示欄を追加

93. 配列の中身に依存するので @each を使う

94. 合計が自動で計算される!!

95. 入力欄を増やせるようにする
mission 6

96. 行を追加 ボタンを動くようにしたい

97. controller
* ユーザからのアクションを受け付ける
* モデルのプロキシとして振る舞う
* アプリケーションコンテキストを保持する

98. ボタンを押した時のアクションを定義

99. アクションを定義して処理を記述する

100. 行を追加できるようになった

101. 入力欄を削除できるようにする
mission 7

102. 削除 ボタンを動くようにしたい

103. どの行を削除するか特定するため、
アクションに引数を渡す

104. アクションを追加する

105. 行を削除できるようになった

106. 帳票を保存できるようにする
mission 8

107. 保存場所を用意

108. ボタンを作成

109. アクションを追加する

110. 登録が完了したら一覧へ遷移する

111. ここまでで console から確認してみる
帳票オブジェクトが保存されている

112. 帳票一覧を表示する
mission 9

113. Route で帳票全件を用意する

114. sheets で全件表示

115. 作成した帳票が表示される

116. 帳票の詳細を表示する
mission 10

117. 詳細を見る リンクを動くようにしたい

118. * オブジェクトに対応した URL を
発行する
* URL からパラメータを読みだして、
オブジェクトを復元する
Route

119. URL のパターンを指定

120. オブジェクトを特定するため
のプロパティを追加

121. リンクを追加

122. リンクが表示される

123. 詳細画面の template を作成

124. 詳細が表示される

125. あとは見栄えを整えると...

126. http://tricknotes.github.io/demo-for-osc2013do/
簡単な Ember アプリが完成

127. 今日のまとめ
* Ember.js はすごいアプリケーションを
作るためのフレームワークです
* 快適に開発する手助けをしてくれます
* Ember.Application.create()

128. 今日話さなかったこと
* サーバ側とのやりとり
* 既存の web サイトへの組み込み
* その他のモジュール

129. 難しいところ
* 学習コストが高い
* 日本語の情報が少ない
* そもそも 1.0 の情報が少ない

130. for more information...

131. http://emberjs.com/guides/

132. http://stackoverflow.com/tags/ember.js/

133. http://discuss.emberjs.com/

134. ぜひみなさんも、
Ember.js を使った
快適なアプリケーション開発を
体感してみてください！！