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

9,067 views

Published on

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

Published in: Technology
0 Comments
42 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,067
On SlideShare
0
From Embeds
0
Number of Embeds
1,458
Actions
Shares
0
Downloads
35
Comments
0
Likes
42
Embeds 0
No embeds

No notes for slide

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

  1. 1. 佐藤 竜之介(Ryunosuke SATO) Sapporo.jsOSC Hokkaido 2013 はじめる Ember.js!! ~ Getting started with Ember.js ~ 2013.09.14
  2. 2. Enjoy :-)
  3. 3. 提供 Sapporo.js Community for people who like JavaScript.
  4. 4. 自己紹介
  5. 5. @tricknotes I am a software developer who love JavaScript and Ruby. http://tricknotes.hateblo.jp/
  6. 6. I love OSS
  7. 7. I am a contributer of Ember.js
  8. 8. /* * advertising * about Ember.js * * !!Important!! *
  9. 9. 2013.9.28 Ruby勉強会@札幌 http://ruby-sapporo.org/news/2013/07/31/workshop-27.html
  10. 10. 2013.11.11 Ember.js ハンズオン http://www.deos.co.jp/SK010.html
  11. 11. https://idobata.io Idobata
  12. 12. */
  13. 13. よろしく お願いします
  14. 14. 佐藤 竜之介(Ryunosuke SATO) Sapporo.jsOSC Hokkaido 2013 はじめる Ember.js!! ~ Getting started with Ember.js ~ 2013.09.14
  15. 15. http://emberjs.com/
  16. 16. Ember.js 1.0 released!
  17. 17. 6ヶ月間の rc 時代 初の安定版リリース はじめるなら、いま!
  18. 18. 今日の目標 * 開発の手順を知ることができる * 基本的なコンポーネントを理解できる * 実際にはじめることができる! Ember.js について...
  19. 19. 今日の話 * Ember.js って何? * Ember.js のはじめ方
  20. 20. 今日の話 * Ember.js って何? * Ember.js のはじめ方
  21. 21. 最近の web アプリでは、 画面遷移がなく一画面でリア クティブに操作できるアプリ ケーションを見る機会が増え ました
  22. 22. 例えば...
  23. 23. Travis CI
  24. 24. Discourse
  25. 25. Idobata
  26. 26. なんでこんな複雑なアプリ ケーションを作るのか?
  27. 27. 使いやすさ
  28. 28. でも、作るのは大変...
  29. 29. web アプリケーションなら ではの難しいところのひとつ JavaScript と DOM の 距離が遠い
  30. 30. ようこそ⃝⃝さん シンプルな例
  31. 31. シンプルな例 入力 表示 Demo on http://emberjs.com/
  32. 32. シンプルな例 JavaScript DOM DOM 入力 表示
  33. 33. 入力したものがそのまま表示 されてほしい!!
  34. 34. jQuery を使った例
  35. 35. コピーペーストにも対応!! jQuery を使った例
  36. 36. jQuery でのアプローチ 他にも困るところ... * DOM の変更で JS を修正 * 他の場所に表示させるには... やりたいことの割に複雑
  37. 37. 破綻した経験があるでのは? jQuery based architecture そう、とても変更に弱いのです
  38. 38. 今回のテーマは、 もっとリッチなアプリケーション 別の解決が必要
  39. 39. Ember.js のアプローチ
  40. 40. Ember.js を使った例
  41. 41. 簡潔で全く無駄のない記述!! Ember.js を使った例
  42. 42. 当然 の部分を人間がコー ディングしなくていい!!
  43. 43. DOM 管理 -> フレームワーク オブジェクトの監視 -> フレームワーク 使ってて気持ちいいか -> 開発者 適切な役割分担
  44. 44. プログラマがアプリの本質に 集中できるよう、それ以外の 部分をサポートしてくれる!!
  45. 45. ここまでが、Ember.js の 基本的な考え方
  46. 46. チェックポイント * すごいアプリケーションを作るための フレームワークです * プログラマーが快適に開発することを サポートしてくれます 「Ember.js って何?」
  47. 47. 今日の話 * Ember.js って何? * Ember.js のはじめ方
  48. 48. さぁ、ここからは実際に Ember.js をはじめてみよう!
  49. 49. 対象バージョン Ember.js 1.0.0 2013.09.14 現在、最新の安定版
  50. 50. http://tricknotes.github.io/demo-for-osc2013do/ Demo アプリケーション
  51. 51. アプリケーション作成を行いながら Ember のモジュールを解説します ひとつひとつ動作を確認しながら 進めていきます
  52. 52. modules
  53. 53. modules
  54. 54. Getting started!!
  55. 55. http://emberjs.com/ Starter kit
  56. 56. 関連ライブラリのセットアップ 前準備 jQuery 1.10.2 Handlebars 1.0.0 Ember.js 1.0.0
  57. 57. 関連ライブラリのセットアップ 前準備
  58. 58. アプリケーションの初期化
  59. 59. create -> インスタンスの作成 extend -> オブジェクトの継承 補足
  60. 60. コンソールのログを確認し て、Ember が動いているこ とを確認する
  61. 61. 下準備完了
  62. 62. 簡単な画面を表示する mission 1
  63. 63. 入力画面を表示したい
  64. 64. http://handlebarsjs.com/ handlebars
  65. 65. 入力画面のモックが表示された
  66. 66. 一覧画面に遷移する mission 2
  67. 67. リンクをクリックして一覧を表示したい
  68. 68. Router / Route * いわゆる URL を定義する * URL があると 進む / 戻る が できる * URL を指定して画面を開ける * URL にアクセスされた先の初期化は Route で行なう
  69. 69. /sheets を定義する
  70. 70. /sheets で表示される画面を作る
  71. 71. 画面遷移できるようになった
  72. 72. ここでデータモデルを考えておく
  73. 73. データモデルを考える Sheet Order Line 1 n * 商品名 * 単価 * 個数 * 作成日時
  74. 74. データモデルを考える Sheet Order Line
  75. 75. 初期値を決めておく
  76. 76. 入力画面の初期表示を行なう mission 3
  77. 77. binding * オブジェクトの状態と表示を 同期する仕組み * オブジェクト同士にも使える
  78. 78. 画面表示用にオブジェクトを用意する
  79. 79. オブジェクトと DOM を紐付ける
  80. 80. 明細行が2行になった 初期値が表示された
  81. 81. 小計を表示する mission 4
  82. 82. 小計を勝手に計算してほしい
  83. 83. Computed property * あるプロパティ(複数可)の値を 元に別の値を求めたいときに使う * 関数ではなくプロパティのように 扱える
  84. 84. 小計表示欄を追加
  85. 85. 依存するプロパティと算出方法を宣言
  86. 86. リアルタイムで小計が計算される!!
  87. 87. 合計を表示する mission 5
  88. 88. 合計も自動で計算してほしい
  89. 89. 合計表示欄を追加
  90. 90. 配列の中身に依存するので @each を使う
  91. 91. 合計が自動で計算される!!
  92. 92. 入力欄を増やせるようにする mission 6
  93. 93. 行を追加 ボタンを動くようにしたい
  94. 94. controller * ユーザからのアクションを受け付ける * モデルのプロキシとして振る舞う * アプリケーションコンテキストを保持する
  95. 95. ボタンを押した時のアクションを定義
  96. 96. アクションを定義して処理を記述する
  97. 97. 行を追加できるようになった
  98. 98. 入力欄を削除できるようにする mission 7
  99. 99. 削除 ボタンを動くようにしたい
  100. 100. どの行を削除するか特定するため、 アクションに引数を渡す
  101. 101. アクションを追加する
  102. 102. 行を削除できるようになった
  103. 103. 帳票を保存できるようにする mission 8
  104. 104. 保存場所を用意
  105. 105. ボタンを作成
  106. 106. アクションを追加する
  107. 107. 登録が完了したら一覧へ遷移する
  108. 108. ここまでで console から確認してみる 帳票オブジェクトが保存されている
  109. 109. 帳票一覧を表示する mission 9
  110. 110. Route で帳票全件を用意する
  111. 111. sheets で全件表示
  112. 112. 作成した帳票が表示される
  113. 113. 帳票の詳細を表示する mission 10
  114. 114. 詳細を見る リンクを動くようにしたい
  115. 115. * オブジェクトに対応した URL を 発行する * URL からパラメータを読みだして、 オブジェクトを復元する Route
  116. 116. URL のパターンを指定
  117. 117. オブジェクトを特定するため のプロパティを追加
  118. 118. リンクを追加
  119. 119. リンクが表示される
  120. 120. 詳細画面の template を作成
  121. 121. 詳細が表示される
  122. 122. あとは見栄えを整えると...
  123. 123. http://tricknotes.github.io/demo-for-osc2013do/ 簡単な Ember アプリが完成
  124. 124. 今日のまとめ * Ember.js はすごいアプリケーションを 作るためのフレームワークです * 快適に開発する手助けをしてくれます * Ember.Application.create()
  125. 125. 今日話さなかったこと * サーバ側とのやりとり * 既存の web サイトへの組み込み * その他のモジュール
  126. 126. 難しいところ * 学習コストが高い * 日本語の情報が少ない * そもそも 1.0 の情報が少ない
  127. 127. for more information...
  128. 128. http://emberjs.com/guides/
  129. 129. http://stackoverflow.com/tags/ember.js/
  130. 130. http://discuss.emberjs.com/
  131. 131. ぜひみなさんも、 Ember.js を使った 快適なアプリケーション開発を 体感してみてください!!

×