masato's web site
0%

ES6で書くIsomorphicアプリ入門 - Part1: リソース

Posted on
サーバーサイドはio.jsとKoa、クライアントサイドはReactを使って、ES6で書くIsomorphicアプリを開発してみようと思います。まずはBoilerplateやチュートリアル、ライブラリなどのリソースを集めてみました。Koa、Reactに加えてBabel、Webpack or Browserifyというのが基本的なアーキテクチャになりそうです。

サーバーサイドは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の開発サーバーを起動するので、こんな感じでまとめることが多いです。

package.json
"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アーキテクチャの説明が書いてあります。リポジトリもそれぞれ公開されているので手を動かしながら勉強ができます。

構成

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で書くサンプルがあります。

構成

  • Hapi.js: サーバーサイド
  • React: クライアントサイド
  • Babel: コンパイラ
  • Webpack: モジュール管理

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です。

構成

isomorphic-flux-boilerplate

ES6 Isomorphic Flux/ReactJS BoilerplateはKoaとReactを使うIsomorphicアプリのBoilerplateです。Fluxの実装にはAltを使っています。

構成

  • Koa: サーバーサイド
  • React: クライアントサイド
  • Babel: コンパイラ
  • Webpack: モジュール管理
  • Alt: Flux
  • Iso: Isomorphicのヘルパー

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なども使う、本格的なアプリのサンプルです。

構成

  • Koa: サーバーサイド
  • React: クライアントサイド
  • Babel: コンパイラ
  • Webpack: モジュール管理

Deku

DekuはReactのクライアントサイドのalternativeです。サーバーサイドとの依存関係はありませんが、READMEにはKoaを使う例が書いてあります。TodoMVCがサンプル実装です。

構成

  • Deku: クライアントサイド
  • Babel: コンパイラ
  • Duo: パッケージ管理
  • Browserify: モジュール管理

horse

horseはredditが開発している、Isomorphicアプリを開発するためのヘルパーパッケージです。horse-reactがサンプル実装です。

構成

  • Koa: サーバーサイド
  • React: クライアントサイド
  • Babel: コンパイラ