• Like
Knockout を用いた大規模 JavaScript 開発
Upcoming SlideShare
Loading in...5
×

Knockout を用いた大規模 JavaScript 開発

  • 7,346 views
Uploaded on

HTML5 Conference 2013 において発表したスライドです。 …

HTML5 Conference 2013 において発表したスライドです。
Knockout.js について簡単に説明しています。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,346
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
30
Comments
0
Likes
26

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Knockout を用いた 大規模 JavaScript 開発 iizukak HTML Conference 2013 LT大会
  • 2. 突然ですが
  • 3. 最近のフロントエンド開発
  • 4. 複雑化・大規模化してますよね?
  • 5. 大規模化するフロントエンド開発 を描いた16世紀の絵画
  • 6. バベルの塔 by ブリューゲル
  • 7. HTML5の塔 by ブリューゲル 疲れ果てたプログラマ達
  • 8. 「バベルの塔は完成しない」 by 聖書
  • 9. バベルの塔 現在 : 1563 年 : 2013 年
  • 10. 5世紀に渡る フロントエンド開発技術の飛躍的進歩により バベルの塔の実装が比較的楽になってきた
  • 11. 16世紀にはなかった技術の一例
  • 12. MV* フレームワーク
  • 13. MV* フレームワーク ✤ ✤ デザインパターンに従ってコードを良いかんじに書くためのサポート をしてくれるフレームワーク デザインパターンはいろいろあり、フレームワーク自体もいろいろ種 類がある Backbone MVC : Model-View-Controller Knockout MVVM : Model-View-ViewModel Angular MVW : Model-View-Whatever デザインパターンの例
  • 14. 場面は転換し、
  • 15. とあるフロントエンド開発現場…
  • 16. スマホゲームの UI 開発を WebView でやることに
  • 17. UI の八割方を WebView で実装 ✤ 数百の HTML ファイル ✤ 数千行の SCSS ✤ ユーザーとのインタラクションが非常に多い ✤ 数万行の JavaScript
  • 18. Q: なにがネックになったか?
  • 19. A: データバインドの記述
  • 20. ユーザーとのインタラクション ✤ 最近はユーザがアプリを操作することによって変化したモデルの状態 をリアルタイムにビューに反映することが必須 ①つぶやき投稿 ユーザー ②イベント通知 ③モデルの  状態が変化 JS ④ビューに反映
  • 21. ユーザーとのインタラクション ✤ モデルとビューのデータの結びつき =「データバインド」 ✤ データバインドを自力で書くのは割と面倒 ✤ 同じようなコードを何度も書かなければならない ✤ コードの総量も増えがち
  • 22. どうすれば簡単に データバインドを書けるか
  • 23. MV* フレームワーク
  • 24. MV* フレームワーク ✤ MV* フレームワークの多くが、データバインド機能を提供 ✤ Angular : デフォルトである ✤ Knockout : デフォルトである ✤ Backbone : Epoxy.js とか使ってやる
  • 25. MV* フレームワークは、データバインド機能を中心に、 コードを構造化する手助けをするライブラリなのかなと思ったり
  • 26. そんなわけで、ゲームUI開発に Knockout 使っています
  • 27. Knockout について
  • 28. 特徴
  • 29. 特徴 ✤ 1, データバインドが読みやすい ✤ 2, データバインドが書きやすい ✤ 3, 組み込みデータバインドでけっこういけている ✤ 4, 拡張が用意 ✤ 5, 公式チュートリアルがいけている
  • 30. 1/5 データバインドが読みやすい
  • 31. データバインドが読みやすい Knockout の data-bind の例 <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> ✤ ✤ HTML を見ればどこの要素が Knockout で操作されるか一目瞭然 data-* 属性は正当な HTML 属性のため、実装した HTML が validな HTML になり、気分がよい
  • 32. 「コードは書く10倍読まれる」
  • 33. ぱっと見でのわかりやすさ重要
  • 34. 2, データバインドが書きやすい
  • 35. データバインドが書きやすい ✤ Knockout ではデータバインドは、かんじで記述 ビュー <開始タグ data-bind="データバインドの種類: 適用する変数名"></終了タグ> JavaScript function コンストラクタ() { this.適用する変数 = ko.observable(); } ko.applyBindings(new コンストラクタ());
  • 36. 3/5 組み込みのデータバインドが けっこういけている
  • 37. 様々な種類のデータバインドが あらかじめ組み込まれている click binding クリックイベントをハンドリング css binding CSS を適用 visible binding 表示・非表示切り替え if binding if 文による分岐
  • 38. 4/5 拡張が容易
  • 39. カスタムバインディング ✤ ✤ 組み込みのデータバインドで物足りなくなったら、容易にデータバイ ンドの種類を増やせる スマホゲーム案件では、20個以上の拡張データバインドを実装
  • 40. 5/5 公式チュートリアルがいけている
  • 41. 対話形式でサクサク学べる
  • 42. 興味を持ったら まずは公式チュートリアル
  • 43. まとめ
  • 44. Knockout を使ったら いいかんじに大規模JS開発できました
  • 45. 21世紀のプログラマでよかった
  • 46. めでたしめでたし
  • 47. 自己紹介
  • 48. @iizukak on Github, Twitter