Question

我正在为我的同构应用寻找最好的技术/架构选择。由于已经开发的内容，我们需要的以及我们喜欢的内容，以下是我的约束：

React.js 中的所有前端，包含布局，子组件等。
Flux 架构
正如我所说，服务器端呈现（当前服务器建立在express.js上，它可以改变但是如果我们能保留它会节省一些时间）
非常简单/灵活的路由器，就像react-router甚至只是一个json路由：组件，我不知道
每个组件都应该能够在呈现之前询问所需的数据
每个组件应该能够具有特定的上下文（设置页面标题，插入特定的css，设置元标记等）。

要清楚，我们需要能够在应用程序中添加一个页面/功能，只需在路由器文件中说明＆＃34;此路由需要在此布局中呈现此组件＆＃34;并且组件应该是独立的，在所有事情之前，我需要来自api的这些数据，然后，我需要这个css文件，我的标题是＆＃39; title＆＃39;等等。＆＃34 ;

我们目前拥有的架构很乱，不可维护，不可扩展，不够灵活：

使用和Express.js路由器，在每条路径上我们设置上下文信息，进行api调用，然后渲染具有特定css和js的jade文件，我们在其中插入jsx组件。这是一个例子：

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
        });
    });
});

profile.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;

随着项目的发展，我们越不满意。

我们一直在努力探索的解决方案是：

yeoman generator react-fullstack：https://github.com/kriasoft/react-starter-kit/tree/yeoman-generator＆gt;我们发现它非常复杂，我们没有管理如何简单地获取每个组件的数据。虽然它正是我们对每个组件的上下文所需要的。
express.js + react-router：Client Routing (using react-router) and Server-Side Routing，http://putaindecode.fr/posts/js/reactjs-et-rendu-serverside/＆gt;数据存在同样的问题，我们无法设置上下文。此外，我们对初始渲染服务器端以及所有客户端都不太熟悉，与我们目前的情况相反。

我们觉得没有什么是真正适应的，而我们没有开发真正特别的东西，只是一个从api读取/写入数据的平台。

对于我们的约束，我们最好，最简单，最灵活，最清晰的架构是什么？我们需要做什么选择？

使用React.js和Flux

0 个答案: