React/Angular/Vueの比較のため各cliツールを試してみた

背景

• 新しいプロジェクトに向けてのフレームワーク選定のため
  • プロダクトは BtoBtoC の業務アプリ
• いわゆるフロントエンドエンジニアがチームに少ない (10名弱中に1〜2名)
  • 社内外で探しても圧倒的に少ない。田舎だからか!?
• 既存システムは AngularJS 1.x 系が使われており、2013年末から約3年くらいチーム内の実績がある。

結論

• vue-cli、angular-cli、create-react-app それぞれ必要なもの(ビルド、テスト関連)が揃っており、ツール選定に疲れた人や悩みたくない場合には有効
• PJ の取っ掛かり(プロト段階)でフレームワーク検証がてら利用する分には十分。
  • どれを選ぶかはプロダクトの要件しだい。
• angular-cli が scaffold が揃っているので、メンバーには布教しやすそう。
  (若干 Angular 愛によるバイアス有り。)
  • BtoBtoC の業務アプリに TypeScript はオススメです。

各cliツール比較

以下、触った順です。

vue-cli

• http://vuejs.org/guide/installation.html#CLI
  • http://jp.vuejs.org/guide/installation.html#CLI
    • ドキュメントは 1.0 だけど、2.0 にちゃんと対応していた。日本語ドキュメントあるとメンバーには布教しやすい。
  • 構成がわかりやすい。シンプル
  • 必要なものは一通り揃っており、過不足ない感じ
    • babel/karma/mocha/chai/sinon/nightwatch/webpack など
  • npm run dev して感動した。
  • 型がほしいので、flowtype などを追加したい

.
├── build
├── config
├── src
│   ├── assets
│   └── components
├── static
└── test
    ├── e2e
    └── unit

参考

• https://speakerdeck.com/potato4d/totutukiyasui-huremuwaku-vue-dot-js-number-jsfes
  • Vuex が気になる。

angular-cli

• https://cli.angular.io/
• https://github.com/angular/angular-cli
  • このリポジトリがちょっと探しづらい。
  • 構成がやや複雑
  • 必要なものは一通り揃っており、不足ない感じ
    • typescript/karma/jasmine/protractor/systemjs など
  • ng generate <Scaffold> が充実してる
    • これに沿うようにメンバーに周知すればある程度の秩序は保てそう
  • 環境別に build などもできそう。

.
├── config
├── dist
│   ├── app
│   └── vendor
├── e2e
├── public
├── src
│   └── app
├── tmp
└── typings
    ├── browser
    └── main

参考

• http://blog.teratail.com/entry/angular2_nyumon
• http://albatrosary.hateblo.jp/entry/2016/03/18/101637
• http://qiita.com/kitfactory/items/c95ca84371670b21f4ac

create-react-app

• https://github.com/facebookincubator/create-react-app
  • https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html
• create-react-app コマンドで npm ERR!
  • https://github.com/facebookincubator/create-react-app/issues/888
  • this is a bug in npm 3.3.12. らしいです。npm i -g npm@latest で解決しました。
• 構成がシンプル。
• 依存性は隠蔽されているらしい。
• ここから PJ に合わせて育てていく際に、ベストプラクティスを外すと後々辛そう。。
  • npm run eject で隠蔽されてる依存性が展開できる。

# npm run eject 前
.
├── public
└── src

# npm run eject 後
.
├── config
│   └── jest
├── public
├── scripts
└── src

参考

• https://speakerdeck.com/adwd/create-react-app-introduction
• http://qiita.com/chibicode/items/8533dd72f1ebaeb4b614