• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Knockout を用いた大規模 JavaScript 開発
 

Knockout を用いた大規模 JavaScript 開発

on

  • 7,732 views

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

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

Statistics

Views

Total Views
7,732
Views on SlideShare
4,805
Embed Views
2,927

Actions

Likes
23
Downloads
27
Comments
0

11 Embeds 2,927

http://blog.h13i32maru.jp 2451
http://stocker.jp 349
https://twitter.com 78
http://shingaki.me 32
http://s.deeeki.com 6
http://feedly.com 5
http://b.hatena.ne.jp 2
http://tweetedtimes.com 1
http://cc.bingj.com 1
http://webcache.googleusercontent.com 1
http://www.google.co.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Knockout を用いた大規模 JavaScript 開発 Knockout を用いた大規模 JavaScript 開発 Presentation Transcript

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