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

Question

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

Laravel 提供了一种显示路由链接的便捷方式:

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

该代码生成以下链接:

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

我的想法是这种功能(为命名路由生成链接)最好由后端处理。然而，正如我提到的，我开始为我的观点实现 React.js 框架。我开始使用的组件之一是 Griddle .

首先，我设置了一个 Laravel Controller 来处理 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 组件去过滤表格或对列进行排序时，它不能，因为它只能过滤/排序整个链接字符串，而不仅仅是链接中显示的字符串。

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

1. 我的想法是完全错误的吗？
2. 前端有没有类似 Eloquent 的东西？换句话说，是否有在前端管理原始数据的框架，以便您可以查询与 Laravel/Rails 后端类似的关系？
3. 将 Laravel 换成 Node.js 后端(如 Express.js)或框架(如 Keystone.js)是否有优势，除了能够重用代码(因为它全是 JavaScript)这一事实之外的明显优势？
4. 如果我决定使用 React 来处理尽可能多的事情，有哪些补充工具可以帮助我将 Laravel 当前正在处理的功能迁移到 React.js 生态系统/环境？

Answer 1

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

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

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

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

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) 开发的令人敬畏的开发工具之外，还有很多选择。此处保留了补充工具列表 https://github.com/facebook/react/wiki/Complementary-Tools .