0

同型アプリに最適なテクノロジ/アーキテクチャの選択肢を探しています。すでに開発されているもの、必要なもの、そして私たちが気に入っているもののために、私の制約は次のとおりです。

  • レイアウト、子コンポーネントなどを含む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 Routinghttp://putaindecode.fr/posts/js/reactjs-et-rendu-serverside/ > データに関する同じ問題、およびコンテキストを設定できませんでした。また、現在とは逆に、サーバー側の最初のレンダー、次にクライアント側のすべてのレンダーにあまり慣れていません。

API からデータを読み書きするためのプラットフォームだけを開発しているわけではありませんが、実際には何も適応していないように感じます。

制約に関して、私たちにとって最適で、シンプルで、柔軟で、明快なアーキテクチャは何でしょうか? どのような選択をする必要がありますか?

4

0 に答える 0