React.js ， Elm ， Cycle.js和其他UI框架引入了一种构建用户界面的新方法。 通过将功能性反应式编程的原理应用于UI开发，他们甚至改变了我们对用户界面的看法。 这些方法很快就摧毁了MVC及其兄弟姐妹（MVP，MVVM等）看似不可避免的优势。 本文是该系列的第一篇文章，将简要介绍这种构建UI的新方法，并列出与传统方法相比具有的一些优势。 这些因素是如此强大，以至于我认为我们很有可能目睹MVC时代的终结。
功能性反应式UI开发的概念
从表面上看，像具有Redux-architecture ，Elm和Cycle.js的React.js之类的框架似乎很安静。 最初，Redux应用程序看起来与常规JavaScript应用程序相似，也许重点放在功能编程上。 Elm应用程序使用其自己的语言，而Cycle.js应用程序仅包含反应性流，它们以惊人的方式打结在一起。
但实际上，所有这些框架都有一些共同点：功能式反应式UI开发的本质。
上图显示了概念的粗略概述，这些概念几乎在所有促进反应式编程的现代UI框架之间共享。 首先要注意的是，一切（所有更改，事件和更新）都朝一个方向流动以形成一个循环。 本文将仅简要介绍该周期，而后续文章将更详细。
功能性反应式UI开发
该周期由四个数据结构（状态，虚拟DOM，事件和操作）和四个组件（View（）-函数，DOM-Driver，ActionCreator和Updater）组成。 DOM驱动程序由框架提供，而其他组件则必须由应用程序开发人员实现。
假设我们的应用程序（待办事项列表）已经运行了一段时间，并且用户按下按钮以在待办事项列表中创建新条目。 这将导致DOM中的按钮单击事件，该事件由DOM驱动程序捕获并转发给我们的ActionCreator之一。
ActionCreator接收DOM事件并将其映射到一个动作。 动作是命令模式的实现，即，动作描述了应该执行的操作，但自身并未进行任何修改。 在我们的示例中，我们创建一个AddToDoItemAction并将其传递给Updater。
更新器包含应用程序逻辑。 它保留对应用程序当前状态的引用。 每次它从ActionCreator之一接收到动作时，都会生成新状态。 在我们的示例中，如果当前状态包含三个待办事项，并且收到AddToDoItemAction，则更新程序将创建一个新状态，其中包含现有待办事项以及一个新的待办事项。
状态被传递给View（）函数，后者创建所谓的Virtual DOM。 顾名思义，虚拟DOM不是真正的DOM，而是描述DOM外观的数据结构。 上面的代码段显示了用于简单<div>的虚拟DOM的示例。 下一篇文章将详细解释虚拟DOM及其优势。
虚拟DOM传递给DOM驱动程序，该驱动程序将更新DOM并等待下一个用户输入。 这样，循环结束。
优点
功能性响应式UI开发与传统方法相比具有三大优势，它们都具有巨大的优势：简单的测试，事件的全面流和时间旅行（是的，很认真）。 ＆＃55357;＆＃56841;
简单的测试
View（）-Function和ActionCreators是简单的映射，而Updater对其接收到的Action执行折叠（通常也称为reduce）。
所有组件都是纯函数，纯函数非常易于测试。
纯函数的结果仅取决于输入参数，并且没有任何副作用。 要测试一个纯函数，创建输入参数，运行“被测函数”并比较结果就足够了。 无需任何模型，无需依赖项注入，无需复杂的设置，也不需要其他使测试变得无聊的技术。
全面的活动流程
响应式编程非常有趣，除非不是。 图形用户界面的控制流本质上是基于事件的。 应用程序必须对来自用户或服务器的按钮单击，键盘输入和其他事件做出反应。 无论是观察者模式，数据绑定还是反应性流，应用反应性技术都是很自然的。
不幸的是，这些技术是有代价的。 如果组件A调用了组件B，则很容易在IDE或调试器中看到连接。 但是，如果两个组件都通过事件连接，则这种关系就不那么明显了。 应用程序变得越大，就越难理解其内部。
功能响应式应用程序的体系结构通过定义所有组件必须遵循的简单事件流来避免这些问题。
无论您的应用程序有多大，事件流都将永远不会改变。
时间旅行
功能性反应式应用程序使您能够及时往返-至少在您的应用程序上下文中。 如果我们存储初始状态和所有操作，则可以使用一种称为“事件源”的技术。 通过重放动作，我们可以重新计算应用程序所处的每个状态。如果仅重放最后的n-1，n-2，n-3…个动作，我们实际上可以倒退时间。 通过在应用动作时修改记录的动作流，我们甚至可以更改过去。 您可以想象，这在开发和错误修正期间非常方便。
摘要
到目前为止，我们仅涉及功能性反应式UI开发的表面，但是到目前为止，应该清楚的是，这种方法具有一些巨大的优势。 以后的文章将更深入地讨论技术细节，但还将展示其缺点（或称它们为“尚待解决的挑战”），并举例说明如何将所学到的经验教训应用于JavaFX应用程序。
翻译自: https://www.javacodegeeks.com/2016/10/mvc-dead-comes-next.html