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

More than 1 year has passed since last update.

背景

  • 新しいプロジェクトに向けてのフレームワーク選定のため
    • プロダクトは 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

参考

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

参考

create-react-app

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

参考