いかにして我々はフロントエンドに秩序をもたらそうとしてきたか

@mizchi / Quipper

最初に

人間性捧げすぎて資料作るの忘れてました

立ち位置

得意

MV*でアプリを組み立てるのが専門
- 特にBackbone系(Chaplin.js)
DOM初期化コストやサーバーリクエスト束ねて非同期最適化

現代のHTMLの位置付け

HTML = GUI ツールキット

<svg width=150 height=150 style="background-color:grey;">
  <circle cx=30 cy=30 r=25 stroke="grey" stroke-width=1 fill="wheat"/>
  <rect width=50 height=50 x=60 y=10 style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

JavaScript MVCに至るまでの歴史

の話(を自分を勝手に解釈したもの)の話をします

有史以前

人々はjQueryプラグインを書いていた

覚えていますか prototype.js

貧弱なJavaScriptの組み込みメソッドを拡張する形で登場
顧客が本当に欲しかったもの = $('#my-id')のクエリセレクタ

=> jQueryの勃興

jQueryの問題

スクレイパー的API
メンテナンス辛い
- 当人以外読めないコード
- 小規模な時代はそれでよかった

俺達は前AJAX時代(2005~)からどう進化したか

クライアントサイドMVCという発想
node.js経由で輸入された、まともな開発環境
- grunt / gulp
- require.js / browserify
- brunch / component
- bower

Backboneが示した道

一個のDOMの単位を一個のビュー対応させるという発想
クライアントにもアーキテクチャがあるという 意識改革

var DocumentRow = Backbone.View.extend({
  events: {
    "click .icon": "open",
  },
  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },
  render: function() {
  }
});

Knockout.jsが示した道

データバインドしようぜ！

function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}
ko.applyBindings(new AppViewModel());

Angularが示した道

DOM側にロジック注入してJSと連携
高度にDOMと密結合したJSの再利用を諦めて凝集性を重視

<div ng-controller="TodoCtrl">
  <span>{{remaining()}} of {{todos.length}} remaining</span>
</div>

気付き

1:1 に対応したJavaScript/HTMLしか存在しない
- 再利用性があるテンプレートは幻想
クライアントサイドMVC とは
- Model => サーバー側のDBの一時キャッシュだった
- Controller => ViewControllerだった
- View => テンプレートだけじゃなくイベントハンドラ

フロントエンドエンジニアが学ぶべきこと

サーバーサイドテンプレート = String
クライアントサイドテンプレート = DOM
サーバーサイドMVCの発想は足枷
- 大域テンプレーティングやめろ
- ルーティングごとの長大な初期化コスト避けろ

Angularの問題

DSLがきたない
学習コスト半端ない
とにかく行儀が悪い

Backbone.Modelのリアクティブ的限界

標準でデータバインドなし
epoxy / Backbone.stickit / 手動のバインディングだと…
- ネストしたオブジェクトを監視できない
- Modelが二つの役割を持ってしまっている
  - RESTの同期先(Fetcher)
  - データバインドに監視されるもの(ViewModel的振る舞い)

データ監視が賢くない => まともなデータバインドが作れない

Object.observeという提案

Googleが提案。Chrome 35から標準。
オブジェクトの値の変更を(オブザーバーパターンを経由せずに)直接監視できる。

obj = a: 1
Object.observe obj, -> console.log 'updated!'
obj.a = 2

現時点で何を選ぶか

Vue.js おすすめ

Vue.js

var demo = new Vue({
    el: '#demo',
    data: {
        message: 'Hello Vue.js!'
    }
})

<div id="demo">
    <p>{{message}}</p>
    <input v-model="message">
</div>

Vue.jsの利点

軽量な双方向バインディング
薄い(プラガブル)
学習コストが高くない

Angularの押し付けがましい部分を改善。薄いので何でも組み合わせられる(Backboneも)

Vue on Scala.js + Scalatags (番外)

Scala.jsならプロパティの型を明示できる!

trait LayoutData extends Schema{
  var name: String = ???
}
object Layout {
  def create(): Vue[LayoutData] = Vue.extend[LayoutData](
      html(
        div(
          h1("Hello, {{name}}"),
          p("This is my first paragraph")
        )
      ).toString)
}

詳細は mizchi-sandbox/try-scala-js にて

データバインドのメリット

ビューモデルへの操作に意識を集中できる
- Viewがモデルに隷属して隠蔽
テストが書きやすい

これやっとけば一生安泰ってライブラリ教えて！

ねぇよそんなもん
あと2年ぐらい待てばなんかデファクト出るのでは

今日言いたかったこと

銀の弾丸はない
MVVM良い
大規模化に伴って型が欲しい

mizchi/slide.md