mvc react_MVC风格的Web体系结构的多态性：实时React实现

mvc react

重要要点 在Web时代的前二十年中，Web应用程序中基本上不存在MVC在用户的视图与其相关的真实或虚拟世界之间可观察到的事件驱动的同步。 最近的发展使Web开发社区中的这一基本理想焕发了活力。 可以利用dWMVC和pWMVC体系结构范例来实现和关闭端到端的观察变化的“事件循环”，以创建无缝，高效的实时React性应用程序行为。 传统的中间件基础架构和新型的服务器运行时环境都可以应用于实现这些实时的响应行为。 非传统服务器运行时环境和数据存储库享有使用非标准化技术创建创新解决方案的体系结构自由。

之前在MVC风格的Web体系结构的多态性：分类中 ，我们说明和讨论了WMVC（基于Web的MVC ）体系结构范式的三类。 它们是服务器端WMVC（sWMVC），双WMVC（dWMVC）和对等WMVC（pWMVC）。 sWMVC本质上通常是静态的，但可以使用其他两个体系结构范例来构建实时的响应式Web应用程序组件。 在后续文件中，我们将利用这两个体系结构范例来设计和演示完全动态和React式的现代Web组件。

MVC体系结构方法的核心是可观察到的事件驱动的实现，这些实现是用户视图与视图所反映的相关真实或虚拟世界之间的同步。 无论用户有无其他命令，视图都将对不断变化的世界做出React。 从最初的桌面GUI到现代的增强和虚拟现实（ AR和VR ），许多MVC实现中都体现了这一理想。 正如WMVC分类文章中所讨论的，在Web时代的前二十年中，此基本思想在Web应用程序中基本上不存在。 在这段时间内，基于sWMVC的方法主导着Web应用程序。 近年来，它在WUI（Web用户界面）应用程序开发社区中得到了振兴。 这项新趋势是由许多最新的技术产品和标准化协议推动的。

在本文中，我们将把其中的一些新进展付诸实践，以实现从WUI到后端SoR（记录源）存储库的异步，自然，无缝，高效的变化观察React性“事件循环”。 这里应用的关键支持技术是：

与以下讨论的源代码，可以发现这里在GitHub上。

用户故事

假设我们的客户想要一个基于浏览器的博客评论系统。 该Web应用程序应允许用户查看和发布有关博客主题的评论。

以下是概念性网页设计的屏幕截图，由三个子视图组成。 顶部显示博客主题，其后是评论条目和提交字段。 最后一部分是显示所有用户输入的注释的区域。

图1.博客评论屏幕截图设计。

该博客系统应包括两个独特的应用程序：

1. 第一个应用程序应拥有博客评论的所有权，并将其存储在集中式存储库中。
2. 第二个应用程序不会在中央数据库中存储任何用户评论，以确保用户隐私和客户责任。

该系统的第三个组件是将来自其他来源的博客评论集成和聚合到集中存储库中，该存储库将在将来开发。

所有应用程序用户均应具有博客评论的最新视图。

当用户阅读评论时，其他用户或通过集成添加的新评论应自动且立即显示在所有查看用户的网页上，而无需他或她的手动命令。

系统架构

具有集中式存储库的博客Web应用程序将使用dWMVC范例进行设计和开发。 总体而言，应用程序组件之间的通信将通过AngularJS，SSE，InSoR和CDC实现。 这些技术将使系统对集中式存储库中的记录的任何修改（通过此Web应用程序或将来的集成模块）做出React，并将更改实时交付给最终用户，如图2所示。

图2.集中式实时博客Web应用程序的系统架构。 客户端和服务器端之间的通信基于HTTP和SSE协议，而InSoR和CDC完成应用程序服务器和数据存储库之间的往返。

第二个Web应用程序将使用pWMVC方案实现（图3）。 它将成为使用户聚集在一起的推动者，而无需拥有所交换内容的所有权。

图3.点对点实时博客Web应用程序的系统架构。

dWMVC的集中式Web App

下面的图4概述了基于d​​WMVC的博客Web应用程序的设计。 在浏览器端，视图和控制器组件基于AngularJS。 服务器端技术堆栈的两种不同组合在本文中用于实现dWMVC模型组件。 左侧是传统的Java和Java EE基础结构堆栈，以及关系数据库PostgresSQL 。 NodeJS和RethinkDB用于说明基于JavaScript的服务器端运行时环境和NoSQL数据存储库的体系结构范例。 这些不同的服务器端设计和实现为相同的功能提供了两种不同的方法。 除了NodeJS的异步特性外，这种差异在InSoR和CDC中尤为明显，其中NoSQL数据库提供商拥有使用非标准化技术来创建创新解决方案 （例如惰性评估和 延迟加载 ）。 从传统的中间件从业者到NodeJS / NoSQL爱好者，这两种实现方式还提供了满足Web开发社区不断变化的兴趣的技术风格。

图4.博客应用程序的dWMVC设计方案的体系结构图。 客户端WMVC视图和控制器基于AngularJS。