サーバーサイドはio.jsとKoa、クライアントサイドはReactを使って、ES6で書くIsomorphicアプリを開発してみようと思います。まずはBoilerplateやチュートリアル、ライブラリなどのリソースを集めてみました。。Koa、Reactに加えてBabel、Webpack or Browserifyというのが基本的なアーキテクチャになりそうです。
Isomorphic-React-Starter
Update: 2015-08-29
Webデザインと開発のチュートリアルサイトのSitePointに、Isomorphicアプリ開発の簡単なチュートリアルが掲載されています。Getting Startedにはちょうど良いです。
また、package.jsonのscriptsフィールドのサンプルが書いてあります。babelでトランスパイラしたりwebpackの開発サーバーを起動するので、こんな感じでまとめることが多いです。
"clean": "rm -rf lib",
"watch-js": "./node_modules/.bin/babel src -d lib --experimental -w",
"dev-server": "node lib/server/webpack",
"server": "nodemon lib/server/server",
"start": "npm run watch-js & npm run dev-server & npm run server",
"build": "npm run clean && ./node_modules/.bin/babel src -d lib --experimental"
構成
The React.js Way
ハンガリーのRisingStackのブログにThe React.js Wayというポストがあります。簡単なReactのチュートリアルとFluxアーキテクチャの説明が書いてあります。リポジトリもそれぞれ公開されているので手を動かしながら勉強ができます。
- The React.js Way: Getting Started Tutorial
- react-way-getting-started
- The React.js Way: Flux Architecture with Immutable.js
- react-way-immutable-flux
構成
- Express: サーバーサイド
- React: クライアントサイド
- Babel: コンパイラ
- Webpack: モジュール管理
- Flux: Flux
- Immutable.js: コレクション
- Jest: テスト
React Starter Kit
ロシアのKriasoftが開発しているReactのテンプレートです。RisingStackのチュートリアルと似ていますが、BrowserSyncなどpackage.jsonを読むといまどきの開発環境を積極的に使っています。
構成
React Isomorphic Starterkit
React Isomorphic StarterkitはサーバーサイドにHapi.jsを採用しています。RisingStackのHapi on Steroids - Using Generator Functions with HapiのポストにもHapi.jsをES6で書くサンプルがあります。
構成
Este.js
Este.jsはAngularJSが苦手な方に良いみたいです。フルスタックのuniversal funtional webアプリのためのスタータキットです。煽りが刺激的です。Learn React.jsによるとチェコの方が開発されています。
構成
react-isomorphic-boilerplate
Joseph Furlott氏がポストしている2つのチュートリアルは非常にわかりやすく、react-isomorphic-boilerplateのウォークスルーになっています。特にWebpackとreact-routerの使い方がとても勉強になります。
構成
UniversalJS Boilerplate
UniversalJS Boilerplateはuniversal (isomorphic)なwebアプリのためのboilerplateです。
構成
- Express: サーバーサイド
- React: クライアントサイド
- Babel: コンパイラ
- Browserify: モジュール管理
isomorphic-flux-boilerplate
ES6 Isomorphic Flux/ReactJS BoilerplateはKoaとReactを使うIsomorphicアプリのBoilerplateです。Fluxの実装にはAltを使っています。
構成
ES6 boilerplate SPA
ES6 boilerplate SPAは、ES6でSPAを書くためのBoilerplateです。簡単なhello-worldアプリのサンプルになっています。
構成
- Koa: サーバーサイド
- React: クライアントサイド
- Babel: コンパイラ
- Browserify: モジュール管理
koa-react-full-example
koa-react-full-exampleは、KoaやReactに加えて、Passportの認証、MongooseのMongoDBなども使う、本格的なアプリのサンプルです。
構成
Deku
DekuはReactのクライアントサイドのalternativeです。サーバーサイドとの依存関係はありませんが、READMEにはKoaを使う例が書いてあります。TodoMVCがサンプル実装です。
構成
- Deku: クライアントサイド
- Babel: コンパイラ
- Duo: パッケージ管理
- Browserify: モジュール管理
horse
horseはredditが開発している、Isomorphicアプリを開発するためのヘルパーパッケージです。horse-reactがサンプル実装です。