Knockout を用いた大規模 JavaScript 開発
25 likes10,316 views
HTML5 Conference 2013 において発表したスライドです。 Knockout.js について簡単に説明しています。
Knockout を用いた大規模 JavaScript 開発
- 1. Knockout を用いた 大規模 JavaScript 開発 iizukak HTML Conference 2013 LT大会
- 2. 突然ですが
- 3. 最近のフロントエンド開発
- 9. バベルの塔 現在 : 1563 年 : 2013 年
- 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: データバインドの記述
- 23. MV* フレームワーク
- 24. MV* フレームワーク ✤ MV* フレームワークの多くが、データバインド機能を提供 ✤ Angular : デフォルトである ✤ Knockout : デフォルトである ✤ Backbone : Epoxy.js とか使ってやる
- 27. Knockout について
- 28. 特徴
- 29. 特徴 ✤ 1, データバインドが読みやすい ✤ 2, データバインドが書きやすい ✤ 3, 組み込みデータバインドでけっこういけている ✤ 4, 拡張が用意 ✤ 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 コンストラクタ());
- 37. 様々な種類のデータバインドが あらかじめ組み込まれている click binding クリックイベントをハンドリング css binding CSS を適用 visible binding 表示・非表示切り替え if binding if 文による分岐
- 38. 4/5 拡張が容易
- 41. 対話形式でサクサク学べる
- 43. まとめ
- 45. 21世紀のプログラマでよかった
- 46. めでたしめでたし
- 47. 自己紹介
- 48. @iizukak on Github, Twitter