从传统 Laravel/Rails 应用程序迁移到 React.js 生态系统。需要在前端进行数据管理

Question

我有一个 Laravel 应用程序处于开发阶段；此时其他人不依赖它。我一直在重新设计前端以尽可能多地使用 React.js。我运行遇到了一个问题，因为需要将数据传递给 React 以便对其进行操作。以下是让我重新思考应该如何将数据从后端传递到前端的问题类型的示例：

Laravel 提供了一种方便的方式来显示 link 到路线：

link_to_route('users.show', $user->present()->name(), $user->id);

该代码生成以下内容 link：

<a href="http://example.com/users/1">Jane Austin</a>

我的想法是这种功能（为命名路由生成 links）最好由后端处理。但是，正如我提到的，我开始为我的观点实施 React.js 框架。我开始使用的组件之一是 Griddle。

首先，我设置了一个 Laravel 控制器来处理 ajax 调用：

class AjaxController extends Controller
{
    public function usersIndex()
    {
        $users = Users::orderBy('last')->get();

        foreach ($users as $user) {
            $user->displayLink = link_to_route('users.show', $user->present()->name(), $user->id);
            $user->setVisible(['displayLink']);
        }

        return $users->toJson();
    }
}

当 Griddle 组件从 AjaxController@usersIndex 调用数据时，返回一个 JSON 对象：

[
    {
    "displayLink": "<a href=\"http://example.com/users/8\">Prof. Candelario Q. Abshire</a>"
    },
    {
    "displayLink": "<a href=\"http://example.com/users/3\">Prof. Danielle O. Altenwerth IV</a>"
    },
    {
    "displayLink": "<a href=\"http://example.com/users/18\">Chelsey J. Bahringer</a>"
    },
]

现在，因为我要从后端返回 HTML 而不是原始数据，所以我必须通过自定义组件运行 JSON 来设置内部 HTML:

var React = require('react');

var DangerouslySetInnerHTML = React.createClass({
    render: function () {
        return (
            <div dangerouslySetInnerHTML={{__html: this.props.data}}></div>
        );
    }
});

module.exports = DangerouslySetInnerHTML;

乍一看，这一切似乎都运行良好。但是，当 Griddle 组件去过滤 table 或对列进行排序时，它不能，因为它只能 filter/sort 整个 link 字符串，而不仅仅是显示在 link.

所以现在显然我知道我做错了。我不知道我是否需要重写很多后端功能（演示者等）并以某种方式将它们放在前端，或者我是否需要一些东西来管理前端的数据以便我可以结合原始数据来自数据库的数据并编译 links 等。有一点很清楚，React.js 组件在将原始数据组合成更大的单元（如 links 或全名。我想 Laravel 基本上将被降级为提供密切反映数据库中内容的原始 JSON 对象，然后我将需要编写大量 React.js 组件来替换Laravel 演示者和路由器负责的功能，例如，将小数据组合成更大的数据，如 link 的全名等。我不知道是否有什么东西可以帮助管理它因为我认为 Eloquent 纯粹通过 JSON 处理的复杂关系查询很困难。

我的想法完全错误吗？
前端有类似Eloquent的东西吗？换句话说，是否有在前端管理原始数据的框架，以便您可以查询与 Laravel/Rails 后端类似的关系？
将 Laravel 换成像 Express.js 这样的 Node.js 后端或像 Keystone.js 这样的框架除了明显的优势之外还有其他优势吗重用代码，因为它都是 JavaScript?
如果我打算使用 React 来处理尽可能多的事情，有哪些补充工具可以帮助我将 Laravel 当前正在处理的功能迁移到 React.js ecosystem/environment?

Answer 1

我了解这是一个复杂的领域，目前正在不断变化。很长一段时间都没有答案，所以我整理了一份自问这个问题以来发现的资源列表。

首先，Relay 刚刚由 Facebook 团队发布，该框架基本上解决了我一直试图解决的问题。

https://facebook.github.io/relay/

其次，我发现来自 React.js 2015 年会议的视频非常有助于帮助我开始以不同的方式思考如何管理我的数据。

http://conf.reactjs.com/schedule.html#data-fetching-for-react-applications-at-facebook

特别是这个介绍 Relay 的视频很有见地。

http://conf.reactjs.com/schedule.html#data-fetching-for-react-applications-at-facebook

此外，Ryan Florence 的演讲恰到好处地讲述了如何在 React 中重写应用程序：

https://www.youtube.com/watch?v=BF58ZJ1ZQxY

回答我自己的问题：

不，这个想法没有错。许多数据管理正在从使用 Laravel 和 Rails 等框架的后端转移到使用 React/Relay 等框架的前端。这是一个粗略的过渡和不同的思维方式。后端框架仍然可以处理关系查询，但应该提供一个 json/graphql 由前端管理。至于与 React 互补的工具，除了 Relay 和 Dan Abramov 开发的令人敬畏的开发工具 (https://www.youtube.com/watch?v=xsSnOQynTHs) there are a lot of options popping up. A list of complementary tools is kept up here https://github.com/facebook/react/wiki/Complementary-Tools.

从传统 Laravel/Rails 应用程序迁移到 React.js 生态系统。需要在前端进行数据管理

Migrating to React.js ecosystem from traditional Laravel/Rails app. Need data management on the front-end

json

flux

node.js

eloquent

reactjs