JavaScriptフレームワークの歩き方 #devsumiD 参加メモ

JavaScriptフレームワークの歩き方 参加メモ。

Angular.jsやBackbone.jsを始めとした『MV* フレームワーク』とカテゴライズされるJavaScriptのフレームワークは今、まさに百花絢爛。本セッションでは、そんなJavaScriptフレームワークの歩き方について、『もう迷わない』ではなく、正しい『迷い方』について紹介します。

有名フレームワークの比較

AngularJS

  • 利点
    • 簡単に利用出来る
    • サポートが厚い
    • 多くのユーザがいる
  • 欠点
    • 学習コスト
    • 『関心の分類』の法則違反
    • 『魔法』だらけ

Ember.js

  • 利点
    • "The Ember Way"という一貫した哲学
    • 多くの問題が解決済み
    • 優れたドキュメント
  • 欠点
    • "The Ember Way"は諸刃の剣
    • 柔軟性に欠ける
      • あえてそうなっているけれど

Backbone.js

  • 利点
    • 小さくよくテストされたモジュール郡
  • 欠点
    • すべての問題に対する解決を提示していない
    • Backbone.jsベースのフレームワークの必要性
      • 自分たちのシステムのためにカスタマイズが必要

React.js

  • 利点
    • ハイパフォーマンスレンダリング
    • 単体でも使えるViewレイヤ
      • Backbone.jsと組み合わせて使うことも出来る
  • 欠点
    • テンプレートのシンタックスがJSX
    • ファイルサイズが42Kと重い
  • 他のフレームワークと組み合わせて使う

Ampersand.js

  • 利点
    • 柔軟性と結合性のバランスが良い
    • プラグインが多く存在
  • 欠点
    • 『若い』
    • IE8以下のサポートなし

Aurelia.js

  • 利点
    • 柔軟性と結合性のバランスが良い
    • ES6/ES7へのフォーカス
    • モジュール性能が高い
  • 欠点
    • 『若い』
      • 全体のエコシステムのようなものはまだまだ
    • IE11以下のサポートなし

 

問題

ベストなツールを探し出すことがゴールではない

  • どんな問題を解決しようとしているか考えることが重要

問題を理解する

  • プロジェクトのステージはどこなのか
  • AngularJSの開発のスピードはプロトタイプには向いている
  • Ember.jsの堅さは管理画面で作るのに向いている
  • 徐々にMV*の設計に舵を切る
    • ファイルサイズは大きく変わらない

変更に強い設計とは?

  • Webは25歳
  • 変わらないことは変わり続けること
    • Web Components
    • EC6/7
  • 変わることを前提とする
    • 変更しやすさ、再利用のしやすさ

変わり続けること

  • Node.js & Ecosystem
    • JavaScriptを取り込んで新たな哲学をもたらした

JavaScriptを学ぶ

  • Backbone.js Underscore.jsのソースを読むべき

CSS,HTMLを蔑ろにしてはいけない

  • HTMLが汚いとCSSも汚い
  • これらの存在がJSにも重要になってくる

フレームワークを選択するポイント

  • 囲い込みがからないこと
  • 設計がどれだけ頑固か
  • 不要な複雑性はないか
  • テストがしやすいか

まとめ

  • Enough with the JavaScript already!
  • Programming would be pretty boring if everyone agreed.
    • 違う意見があるのは当たり前なので、参考の一つになれば良い
Meetupdevsumi