MVC已经死了，接下来会发生什么？

在本系列的开头，我们将了解像React.js这样的UI框架如何引入使用MVC作为设计Web应用程序和UI的主要方法的替代方法。

React.js，Elm，Cycle.js和其他UI框架引入了构建用户界面的新方法。 通过将功能反应式编程的原则应用于UI开发，他们甚至改变了我们对用户界面的看法。 很快，这些方法简单地打破了MVC及其兄弟姐妹（MVP，MVVM等）似乎不可避免的主导地位。 本文是系列文章的第一篇，将简要介绍这种构建UI的新方法，并列出它与传统方法相比的一些优势。 这些因素是如此强大，我认为我们现在很有可能目睹MVC时代的终结。

从表面上看，React.js与Redux-architecture，Elm和Cycle.js等框架似乎完全不同。Redux应用程序最初看起来与常规JavaScript应用程序类似，可能非常关注函数式编程。而Cycle.js应用程序只包含反应流，它们以惊人的方式打结在一起。

但总而言之，所有这些框架都有一些共同点：功能性反应式UI开发的本质

上面显示了概念的粗略概述，这些概念在几乎所有促进反应式编程的现代UI框架之间共享。 首先要注意的是，所有变化，事件和更新都在一个方向上流动，形成一个循环。本文仅对循环进行简要说明，后面的文章将详细介绍。

功能反应性UI开发

• 该循环包括四个数据结构（State，Virtual DOM，Event和Action）和四个组件（View（） - Function，DOM-Driver，ActionCreator和Updater）。 DOM-Driver由框架提供，而其他组件必须由应用程序开发人员实现。

• 假设我们的应用程序todo-list已经运行了一段时间，用户按下按钮在todo-list中创建一个新条目。这将导致DOM中的按钮单击事件，该事件由DOM驱动程序捕获并转发到我们的ActionCreators之一。

• ActionCreator接受DOM事件并将其映射到一个动作。动作是命令模式的一种实现，即它们描述应该做什么，但不要自己修改任何东西。在我们的示例中，我们创建了一个AddToDoItemAction并将其传递给Updater。

• Updater包含应用程序逻辑。它保留对应用程序当前状态的引用。每当它从一个ActionCreators收到一个动作时，它就会生成一个新的状态。在我们的示例中，如果当前状态包含三个待办事项并且我们收到AddToDoItemAction，则Updater将创建一个包含现有待办事项和新事件的新状态。

• 状态被传递给View（） - Function，后者创建所谓的VirtualDOM。顾名思义，Virtual DOM不是真正的DOM，而是描述DOM应该如何的数据结构。上面的代码片段显示了一个简单<div>的Virtual DOM示例。后面的文章将详细解释Virtual DOM及其优点

• Virtual DOM被传递给DOM-Driver，它将更新DOM并等待下一个用户输入。有了这个，循环就结束了。

好处

功能反应式UI开发与传统方法相比具有三大优势，所有这些都是巨大的：直接测试，全面的事件流和时间旅行（是的，是认真的）。

 

直截了当的测试

View（） - Function和ActionCreators是简单的映射，而Updater在它接收的Actions上执行折叠（通常也称为reduce）。

  

所有组件都是纯函数，纯函数非常容易测试。

纯函数的结果仅取决于输入参数，并且它们没有任何副作用。要测试纯函数，只需创建输入参数，运行“测试中的函数”并比较结果就足够了。没有模型，没有依赖注入，没有复杂的设置，也没有其他技术可以带来测试的乐趣。

全面的活动流程

反应式编程很有趣 - 除非它不是。图形用户界面的控制流本质上是基于事件的。应用程序必须对按钮单击，键盘输入以及来自用户或服务器的其他事件做出反应。应用反应技术，无论是观察者模式，数据绑定还是反应流，都是自然而然的。

不幸的是，这些技术需要付出代价。如果组件A调用组件B，则很容易在IDE或调试器中看到连接。但如果两个组件都通过事件连接，那么这种关系就不那么明显了。应用程序越大，理解其内部结构就越困难。

功能性应用程序的体系结构通过定义所有组件必须遵循的简单事件流来避免这些问题。

无论您的应用程序增长多少，事件流都不会改变。

功能性反应应用程序允许您及时来回移动 - 至少在您的应用环境中。 如果我们存储初始状态和所有操作，我们可以使用称为“事件源”的技术。通过重放动作，我们可以重新计算应用程序所处的每个状态。如果我们只重放最后的n-1，n-2，n-3 ......动作，我们实际上可以回到过去。 通过在应用时修改记录的动作流，我们甚至可以改变过去。可以想象，这在开发和错误修正过程中非常方便。

长按二维码 ▲

订阅「架构师小秘圈」公众号

如有启发，帮我点个在看，谢谢↓