mizchi/slide.md

## slide.md

      
    Raw
  

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

@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良い
大規模化に伴って型が欲しい