Knockout を用いた大規模 JavaScript 開発
•
25 gefällt mir•10,308 views
HTML5 Conference 2013 において発表したスライドです。 Knockout.js について簡単に説明しています。
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (12)
Andere mochten auch
Ähnlich wie Knockout を用いた大規模 JavaScript 開発
Ähnlich wie Knockout を用いた大規模 JavaScript 開発 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (10)
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