モダンなisomorphic JavaScriptのプロジェクト構成をまとめる

概要

最近のモダンなリポジトリなどから、よくあるisomorphic JavaScriptなプロジェクト構成をまとめてみた。

プロジェクト構成

クライアントサイド

React

クライアントサイドにはReactを使用しているものが多い。

• reactjs isomorphic - Google 検索

クライアントサイドアーキテクチャ

Flux

設計パターンには例によってReact.jsと相性の良いFluxを用いる。フレームワークはReduxが人気。

• 人気のFluxフレームワークReduxをさわってみた - マルシテイアは月の上
• Fluxフレームワークまとめ - Qiita

クライアントサイドルーティング

React Router

これはほぼ一択な気がする。

• React.jsでserver-side renderingにも対応したRouting - Qiita

サーバーサイド

Express, Koa

Hapiも見ないわけではないが、主流なのはこの2つ。

• Node.js Framework Comparison: Express vs. Koa vs. Hapi

ES6コンパイラ

Babel

コンパイラはBabel一択感がありますね。

• 2015年のJavaScriptとbabelの話

モジュール管理

Webpack

Browserifyも見ないわけではないが、やはりこれから新規で何かつくるのであれば多機能なWebpackを採用するのが主流なよう。

• webpack/react-starter

タスクランナー

Gulp

Gruntはもうほとんどみない。

• gulp grunt comparison - Google 検索

npm

react-starter-kitはGulpを切り捨て、npmおんりーに切り替えている。今後の流れ的には、逆にそのほうが安心なのかもしれない。

• gulp なしの Web フロントエンド開発

テスト

Mocha

Karma上で動かしているものも多い。

• mocha javascript test - Google 検索

Jest

React.jsなのでJestでUnit Testを行うという方針もきれい。

• React.js + Jest - Qiita

その他

Immutable.js

コレクションを扱うのにImmutable.jsをつかっていることもある。

• Immutable.jsを色々触ってみました - Qiita

Relay

relayjs/relay-starter-kitでGraph QLバリバリ使うという手も。

• Facebook Relayについてまとめ - Qiita

参考

• ES6で書くIsomorphicアプリ入門 - Part1: リソース - Qiita
• React.jsプロジェクト構成ベストプラクティス検討 - Qiita

まとめ

まとめると、React+Flux+React Router+Express(Koa)+Babel+Webpack+Gulp(npm)+Mocha(Jest)という構成。

ご意見ください。