MeteorにReact+Reduxのせてクロスプラットフォーム&フルJavaScriptなアプリケーション #React

概要

MeteorにReduxをのせて、フルJavaScriptなアプリケーションをつくりたく、そのboilerplateを作ってみた。インストールなど詳細はGithubにある。

okmttdhr/meteor-react-redux-boilerplate

Meteor、Reduxについては以下が易しい。

Meteorはフルスタックなだけあって、綺麗に使おうとするとMeteor Wayな感じになってしまう。それはそれでいいのだけど、普段SPAを開発しなれている環境をMeteorにのせられたら構成を考えなくて済む。今後Meteorでアプリケーションをつくる際も(あるのかな)、アーキテクチャをつくるコストが下がるのではと考えた。

スタック

使った技術は以下のとおり。

プロジェクト構成

全体の構成としては、以下の様な感じ。

①.clientフォルダ配下に、React+Reduxのクライアントコードがあり、webpackでclient配下にビルド、②さらに、ビドルされたJSを、Meteorがうまいことやってくれる。

├── index.html
├── .client           # client application code
├── .meteor
├── client
│   └── bundle.js     # bundled file by webpack
└── lib
    └── models
        └── todo.js

webpackだけだと、Meteorの便利な機構がうまく使えないし、Meteorだけだと、基本グローバルにいろいろつくっていく感じで、モジュール化に限界があるように感じたため、このようにしている。

フォルダ名は、Meteor側でビルドする際の順番があるので、それに沿って作っている。

Structuring your app - Meteor Documentation

.client配下はMeteorには読まれないため、好きにディレクトリを組むことができ、meteor-react-redux-exampleを参考に以下の様な構成を組んでいる。

# in .client folder

├── actions
│   └── Todo.js
├── components
│   ├── TodoAdd.js
│   ├── TodoApp.js
│   ├── TodoEdit.js
│   └── TodoItem.js
├── constants
│   └── index.js
├── containers
│   ├── DevTools.js
│   ├── DevToolsWindow.js
│   └── Root.js
├── initialStates
│   └── index.js
├── layouts
│   └── CoreLayout.js
├── reducers
│   ├── Todo.js
│   └── index.js
├── routes
│   └── index.js
├── store
│   └── configureStore.js
├── styles
│   ├── _base.scss
│   ├── core.scss
│   └── vendor
│       └── _normalize.scss
├── utils
│   └── index.js
├── views
│   └── HomeView.js
├── test
│   ├── actions
│   │   └── todo.js
│   ├── components
│   │   └── todo.js
│   ├── helper
│   │   ├── index.js
│   │   └── mock.js
│   └── index.js
├── config
│   ├── index.js
│   └── webpack.js
├── index.js
├── package.json
└── webpack.config.js

これにて、迷うことなくReduxで開発をすることができる。

通常のReduxと違う点

リアルタイムなモデル

Meteorのリアクティブな機構を使い、以下の様な感じでMongoDBからリアルタイムにデータを読み込むことができる。

読み込まれたデータは、接続された全てのクライアントでリアルタイムに同期される。

const HomeView = React.createClass({
  mixins: [ReactMeteorData],

  getMeteorData() {
    return {
      todos: Todos.find({}).fetch(),
    };
  },

  render () {
    return (
      <div className='HomeView'>
        {JSON.stringify(this.data.todos)}
      </div>
    );
  },
});

また、データの更新なども以下のように簡単に行うことができる。

Todos.update(action.id, {$set: {text: action.text}});

このあたりで、Reduxいらないんじゃね?とも思った(気づくの遅い)が・・・DBから取得しないデータの場合に、手軽に実装できるのはありがたい。また、どこにどんな処理を書くかがおおよそ明確なので、設計に困らないというのも利点である。

モバイル対応

Meteorはマルチプラットフォームで動くようにつくられているので、JavaScriptアプリケーションをモバイルアプリ化することもできる。

ここではnpm run iosによって、simulatorでiOSアプリがビルドされるようにしている。

その他

デプロイ

現状ではmeteor deployを使っているだけなので、プロダクションで使うならいろいろ検討する必要がある。

セキュリティ

このへんをみていい感じにする必要がある。

Meteor Tutorial | Security with methods

雛形検討

検討したひな形をメモしておく。

thereactivestack/kickstart

180 stars

simple

良い。シンプルだし、いろいろ改良できそう。
Meteor.methodsとかあるのはいいけど、結局、Meteor側でモジュール化の仕組みが強くないからそういう機能がある感。
その点Reduxはreducerに書くという明確な指針があるからよい。
サーバーサイドレンダリングを実装している

hugeapp

kickstart-simpleに、モジュールを追加していく感じ。Meteor Way感がある。

flowrouter: ✕

flowrouterは今回は除外。

zhongqf/meteor-react-redux-example & zhongqf/meteoredux

16 & 6 stars

Meteor感が限りなくない。すごいいい。
現状サーバーサイドレンダリングを実装していない。

AdamBrodzinski/react-ive-meteor

122 stars

かなりMeteor Way感ある。modelやaction、domainなど、サーバーサイドの管理もしやすいようになっている。使えるかは微妙だが、フィードアプリを題材に実際のCRUDコードを見ることができるので、基礎的な実装をするのにかなり参考になりそう。

AdamBrodzinski/meteor-flux-leaderboard

77 stars

reduxブランチがかなり参考になる。これ自体は複雑なところがあるので使わないが、つくる際の参考になりそう。
リアルタイムじゃない・・・?

jedwards1211/meteor-webpack-react

192 stars

あんまよくない。結構がんばってるしstarもついているのにコード汚い。バグもあったし、他に比べるとひどすぎた。

修正/追加したいこと

MongoDBのテスト
autopublishを消す
insecureを消す
Meteorのaccounts systemいれる
サーバーサイドレンダリング
コマンドラインもうちょっといい感じに
デプロイ、ホスティング

プロダクションで使えたらちょっと楽しそう。