从MVC到现代Web框架

18-12-19 banq
                   

模型 - 视图 - 控制器(MVC)是软件架构中最广泛和最有影响力的模式之一。尽管MVC的传闻死亡,它仍然是一个有用的模式来理解。在这篇文章中,我将重点介绍它如何演变成我们今天所熟知和喜爱的现代Web框架,而不是控制MVC的各种定义。

盗梦空间

1978年,Trygve Reenskaugh和Adele Goldberg创造了“模型 - 视图 - 控制器”的名称。Trygve相信MVC及其变体形成了一种模式语言,一种让人们谈论问题及其解决方案的共享语言。软件模式语言的概念也影响了Gang of Four编写Design Patterns一书。如果MVC被包含在Design Patterns一书中,我们可能会在Behavioral Pattern部分找到它,并在MediatorObserver等模式中使用。

这是Trygve在2003年的回顾性论文,MVC,它的过去和现在。Trygve列举了构成MVC模式语言的11种模式。

原生MVC

在接下来的几十年中,随着这些系统的发展和快速发展,MVC在Smalltalk和Mac OS和Windows应用程序中的使用寿命更长。后来,当智能手机开始出现时,Windows Mobile和早期版本iOS的原生移动应用程序也依赖于MVC及其变体。在微软,MVC后来发展成为MVVM,它为WPF,Silverlight和Xamarin等项目提供支持。

Web MVC​​​​​​​

在2000年代早期,几个重要的Web框架采用了MVC的模式语言:Spring,Ruby on Rails,PHP和ASP.net。这些框架为Controller添加了新的责任:处理初始HTTP请求。它是这样的:

Controller现在是应用程序的入口点,而不是View。

View的职责也发生了变化:它不是直接向用户呈现内容并处理输入,而是为浏览器组装一组HTML,JS和CSS以进行渲染。

HTML / JS将包含按钮单击处理程序之类的逻辑,它将通过XMLHttpRequest将操作发送回控制器。

请注意,浏览器中没有明显的MVC模式。随着现代网络框架的出现,这很快就会改变。

现代Web框架

随着浏览器大战的解决,我们终于得到了很好的东西:XMLHttpRequest,稳定的DOM API,ES6等。随着这种增强的功能和灵活性,公司开始构建越来越复杂的Web应用程序(有时称为单页应用程序-SPA),而不是相关的简单网页集。现代Web框架有助于组织这种日益增加的客户端复杂性,并使应用程序开发保持可预测和高效。

通常,这些框架引入了额外的构建步骤来创建HTML,JS和CSS的静态包,通过简单的“视图控制器”(通常是/或/index.html处理程序)直接托管。这些资源的静态特性意味着我们可以设置缓存控制头并依赖CDN来帮助以更低的延迟提供服务。这些单页应用程序包含用于针对“API控制器”服务的一组资源发出HTTP API请求的逻辑(在JS中),这些资源通常使用JSON进行响应:

这就把我们带到了今天:ReactVue  和Angular是最受欢迎的现代网络框架。这些框架对MVC的组织模式有多相似?所有都有某种“视图”,因此任何比较都需要在下一层完成:状态(=模型),中介逻辑(=控制器)和绑定同步。

Vue是最直接的:它的文档明确指出Vue是MVVM的一个实现。Angular 默认也是MVVM-ish。然而,React是使用一种名为Flux的超级模式从垂死之星的核心锻造的:

Flux是关于单向数据流的。回想一下,MVC中的Model表示将由View呈现的持久数据。Flux分割MVC模型的职责; 它使用Actions / API来处理业务逻辑,使用“Store”来处理状态。您可以将Store视为整个应用程序的整体被动Passiv模型。

为什么Flux采用单向数据流?理由如下:随着应用程序的复杂性增加,使用视图更新管理状态更改变得越来越困难,特别是如果这些更改来自不同的来源。

与数据绑定相反,View会观察ViewModel的可变实例以进行属性更改,React会创建一个新的View作为不可变State / props的函数,View永远不必担心本地状态的变化。应用程序只能通过在状态树中创建新的Model实例来更改,当React想要更新应用程序时,它会用新对象替换其状态树的一部分,从而触发创建新的View。

虽然单向数据流是一个强大的概念,但它不是一个装满银子弹的免费午餐盒,也不会将React / Flux提升到与Angular / Vue 不同的强大水平

banq注:作者显然没有从函数式编程去理解React.JS,Angular / Vue还是属于面向对象OO世界,包括MVC模型。