同型アプリに最適なテクノロジ/アーキテクチャの選択肢を探しています。すでに開発されているもの、必要なもの、そして私たちが気に入っているもののために、私の制約は次のとおりです。
- レイアウト、子コンポーネントなどを含むReact.jsのすべてのフロントエンド。
- フラックスアーキテクチャ
- 私が言ったように、サーバー側のレンダリング(現在のサーバーは Express.js で構築されているため、変更される可能性がありますが、それを維持できれば、時間を節約できます)
- 反応ルーターや単なるjson route:componentなどの非常にシンプル/柔軟なルーター、わかりません
- 各コンポーネントは、レンダリング前に必要なデータを要求できる必要があります
- 各コンポーネントは、特定のコンテキストを持つことができる必要があります(ページ タイトルの設定、特定の CSS の挿入、メタ タグの設定など)。
明確にするために、ルーターファイルで「このルートは、このレイアウト内でこのコンポーネントをレンダリングする必要があります」と単純に言うことで、アプリにページ/機能を追加できるようにする必要があり、コンポーネントは独立している必要があります。すべて、API からのこれらのデータが必要です。次に、この css ファイルが必要です。私のタイトルは「タイトル」などです。」.
私たちが現在持っているアーキテクチャは混乱しており、保守もスケーラビリティも柔軟性も十分ではありません。
Express.js ルーターを使用して、各ルートでコンテキスト情報を設定し、API 呼び出しを行ってから、jsx コンポーネントを挿入する特定の css と js を含む jade ファイルをレンダリングします。次に例を示します。
router.js
router.get('/profile', function(req, res, next) {
// make the api call
api.getProfile(function(err, profile) {
if (err) {
next(err);
}
// set props for the react component
var props = {
profile: profile
};
// render the react component
var ProfileEditor = React.createFactory(
require('path/to/components/profile.jsx')
);
var profileEditor = React.renderToString(
ProfileEditor(props)
);
// render the jade file
res.render('profile', {
props: safeStringify(props),
profile:profileEditor
});
});
});
プロフィール.jade
// extend a layout
extends ../layout
// ask for specific styles if need
block styles
// insert the server side rendered component
block component
#profile
!= profile
block scripts
// ask for specific scripts if needed
script(src="https://maps.googleapis.com/maps/api/js?key=key&libraries=places")
// print props for the client side rendering
script(id="props" type="application/json")
|!{ props }
// set the react component
script(src="/bundles/profile.js")
profile.jsx
var React = require("react");
var store = require ('../stores/profile');
var actions = require ('../actions/profile');
var Profile = React.createClass({
// As usual
render: function(){
return(
<div>
// Profile component
</div>
)
}
});
// re-render client side using the same props from the script tag
if (typeof window !== 'undefined') {
var ProfileFactory = React.createFactory(Profile);
var mountNode = document.getElementById("profile");
var props = JSON.parse(document.getElementById("props").innerHTML);
React.render(new ProfileFactory(props), mountNode);
}
module.exports = Profile;
プロジェクトが成長するにつれて、私たちはそれに満足しなくなります。
私たちが探求しようとしてきた解決策は次のとおりです。
非常に複雑で、各コンポーネントのデータを単純に取得する方法を管理していませんでした。ただし、それはまさに各コンポーネントのコンテキストについて必要なことです。
express.js + react-router: Client Routing (react-router を使用) および Server-Side Routing、http://putaindecode.fr/posts/js/reactjs-et-rendu-serverside/ > データに関する同じ問題、およびコンテキストを設定できませんでした。また、現在とは逆に、サーバー側の最初のレンダー、次にクライアント側のすべてのレンダーにあまり慣れていません。
API からデータを読み書きするためのプラットフォームだけを開発しているわけではありませんが、実際には何も適応していないように感じます。
制約に関して、私たちにとって最適で、シンプルで、柔軟で、明快なアーキテクチャは何でしょうか? どのような選択をする必要がありますか?