Skip to content

Instantly share code, notes, and snippets.

@mizchi mizchi/slide.md

Last active Jun 3, 2016
Embed
What would you like to do?

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

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

This comment has been minimized.

Copy link

yyx990803 commented Mar 19, 2014

woot woot

@mizchi

This comment has been minimized.

Copy link
Owner Author

mizchi commented Mar 20, 2014

Hey @yyx990803, I love vue.js.
I use this gist for my LT at sendagaya.js, javascript study group in Japan.

@yyx990803

This comment has been minimized.

Copy link

yyx990803 commented Mar 21, 2014

Yes I saw a lot of Japanese developers talking about it on Twitter although I can barely understand them via Google Translate :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.