@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

第2回.js系勉強会 #techbuzz に行って来ました

event javascript

メモを投下。

MVCフレームワークの選択基準と主要フレームワークの特徴

資料→MVCフレームワークの選択基準と主要フレームワークの特徴

  • MVCフレームワーク
    • 流行ってて沢山ある
    • どうやって選んでいいのでしょうか？
    • アプリの要件が大事
    • TodoMVCを実際に写経して選んでみよう
  • Backbone.js
    • コミュニティが大きいのが特徴
    • 実績があるので安心感がある
    • シンプルなので拡張性に優れている
    • しかし、アプリで実装しなければならないところも多い
  • ExtJS
    • UIまわりが充実している
    • UIのHTMLを動的に生成するので、重い。ファイルサイズも大きい。
    • デザインの変更が難しく、SEO対策などもしにくい
    • 業務アプリに向いている
  • Ember.js
    • モデルとビューの依存関係を定義する
    • 双方向バインドが特徴
  • Knockout.js
    • チュートリアルが充実している
    • ディペンデンシートラッキング機能が特徴
      • Ember.jsはコードで依存関係を定義する必要があるのに対して、Knockout.jsでは依存関係を自動的に検出してくれる
  • Anguler.js
    • テストを簡単にする仕組みがある
    • ViewModelとDOMが疎結合である
    • pause関数を使うと実行途中で止められるので、途中のキャプチャ等を取得することも可能
  • その他
    • 沢山あるので資料を参照
  • まとめ
  • QA
    • パフォーマンスは？
      • ExtJSは明らかに重い
      • Backbone.js、Knockout.js、Anguler.jsを比較しているサイトがあった
      • Anguler.jsが重く、他２つは同じような程度であった

Backbone.js+Ruby On Rails + CoffeeScriptではじめるモダンWebアプリケーション

ライブコーディングには魔物が居るよね。
http://rokuro.net/など作っているらしい

  • 問題点
    • ある程度の規模になると色々と問題が出てくる
  • 解決策
  • backbone-railsを使って簡単にやってみるライブコーディング
    • プロジェクトを作成してbundleをインストール
    • backbone-railsを入れる
  • scafold機能が良い感じ
    • テンプレートには、jQueryTemplateが使われていて、自動生成してくれる
    • ただし、コードはCoffeeScriptになる
  • railsのasset-pipelineを使えば、リソースファイルをコンプレスしてくれる
    • また、開発中にキャッシュされてしまわないようにhoge.js?20121001のようにしてくれる
  • SCCS,Sass
    • CSSを作る上で、変数定義が出来る。モジュールも作ることが出来る
  • CoffeeScript
    • Backboneと相性が良い。
      • BackboneはBackbone.Viewとかをextend関数で継承して作るから。
      • CoffeeScriptでの継承に置き換えられる
    • イベント通知された関数から、クラスのメンバ変数を参照することが出来る
    • nullとundefinedのチェックが楽
  • Spine

Backbone.IOでつくるリアルタイムアプリ

資料 → http://hokaccha.github.com/slides/pxg_study_backboneio/
TodoMVCをBackbone.IOで書き換えたもの → hokaccha/todomvc · GitHub

  • リアルタイムWeb ＋ クライアントサイドMVC
  • socket.IO + Backbone.js
  • Socket.IO
    • node.jsで作られたリアルタイム通信モジュール
    • さまざまな環境をサポートしている、HTML5 Websocket、Adobe Flash、Ajax longpollingなどに対応
      • よって、対応ブラウザがすごい。IE5.5でも使えてしまう。検証環境ないのでわかんないけど。
    • 直感的
  • Backbone.js
    • Backbone.Syncを使う
    • CRUDをBackbone.Syncに委譲する
      • デフォルトであれば、RESTなURLにAjax通信を行う
    • Backbone.Syncはオーバーライドが可能
      • LocalStorage Pluginを使えば、localStorageにデータを永続化出来る
    • Backbone.IOに差し替えることで、リアルタイムWebがすぐに実現出来る
      • Ajaxであれば、1対1の送受信になる
      • Backbone.IOだと、接続しているクライアントにブロードキャストされる
  • 実装
    • TodoMVCのBackboneの実装をBackbone.IOで置き換える
    • 数行書き換えるだけで済んでしまう
  • まとめ
    • Backbone.jsで実装したコードはほとんど変更する必要がない
    • リアルタイム通信にsocket.IOで安心
    • ただし、痒いところに手が届かない
    • まだまだ発展途上なわりに、ここ2ヶ月位は更新されていない
  • 宣伝