阅读 84

作为后端开发者的思考:如何看待如今的前端架构

引言

相信许多开发者都会或多或少的接触过Web开发,也会发现体系结构中存在着相同和不同之处。这其中的缘由来自于历史的原因。在21世纪初的8年间,对于Web的开发,就有了许许多多的语言及其架构。例如Java,从Servlet分别管理Request和Response到JSP前后端融合技术,再到EJB、Struts和Spring体系将业务逻辑功能向后迁移。而浏览器由微软的IE浏览器和Netscape(网景浏览器)之争开始,提出过许多前端优化,如VBScript、JavaScript、JScript、CoffeeScript以及XHR(XMLHttpRequest)技术等。再到FireFox创立和Chrome项目的诞生,出现了KDE的KHTML、Apple的WebKit、FireFox的SpiderMonkey和Google的Chrome项目及其V8引擎。从这开始,前端技术开始逐渐健壮起来。但是了很多不错的脚手架工具,如JQuery、Bootstrap、Foundation、ChartJS等。而最有意思的是Ryan Dahl基于Chrome V8引擎和libuv库开发出了Node.js。这个工具使得前后端使用统一的语言JavaScript进行开发。这一创举无疑让前端开发者狂喜雀跃。

随着相关社区不断的活跃,又诞生出了npm、Bower、Gulp、Browserify等围绕着框架性的开发工具。另一方面,PC硬件技术的不断提升,以及ios/Android阵营的扩张,谷歌(Google)和脸书(FaceBook)的工程师们便开始思考着:

  1. 前端是否可以如后端一样通过MVC架构来管理;
  2. 是否可以将业务逻辑从后端向前迁移来提升性能。

于是,他们提出了VirtualDOM技术,并将MVVM的概念实现,诞生了谷歌的AngularJS、FB(FaceBook)的React以及尤雨溪开发的Vue。而且也有了专业的打包封装工具Webpack、Rollup、Snowpack、Vite等。如今,浏览器已经形成了联盟,制定统一的标准,而前端已不再是B\S体系的代表,它的野心更大。桌面应用开发Electron和手机App开发的React Native等工具也不断出现在我们当前的Web世界里,逐渐成为跨平台的先锋。

前后端分离架构

面对这样的激情,我不由自主地敬佩着他们。我接下来就来讲解Web框架的基础。相信很多人都见过下面这张图。原理就是浏览器会根据HTTP的URL将请求发送到服务器(实际过程非常复杂),服务器的应用服务会将Request解析根据业务逻辑转化成Response返回(这就是我们后端开发者编写的功能)。这里我就用Python的Flask来演示:

Web原理

代码如下:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"
复制代码

很明显这里返回的Response是字符串"<p>Hello, World!</p>"。往常后端开发前端都是通过Render来渲染HTML页面,在这个过程中来实现后端对HTML的动态处理。典型就是Python的Ninja和C#的cshtml。很明显这是一个同步渲染。而随着XHR和Ajax异步请求技术的不断推广,前后端的开发模式逐渐形成分离。后端只需要提供API接口返回JSON信息。而前端根据返回的JSON来重新渲染页面控件。

异步请求原理

于是,前后端分离的研究就一直围绕在API接口的优化,前端出现了axios和ES6的fetch,接口上出现了Restful API、OpenAPI、GraphQL和gRPC等形式。

起初,我基于网络的构想,认为前后端分离应该是前端通过nodejs运行和渲染,而后端负责DB数据的处理,通过接口提供前后端交互,但是这种模式其实是一种微服务形式。好处是前端开发者和后端开发者彼此沟通接口细节,独立开发各自的功能, 但是除非你的业务很大,拥有负载均衡的服务器集群,保证了彼此非常高速的带宽,否则就是将大象装冰箱,徒劳而已。

前后端分离-微服务模式

但随着我对于Web MVC的不断深入研究和思考,混合式编程模式或许更适合轻量级项目开发,代码归属于同一个目录,由项目经理负责维持前后端开发的协作工作,在统一接口和文档细节后,后端工程师开发数据接口及接口测试,前端工程师负责开发页面和接口调用的测试,而且通过Node.js来自行模拟接口的数据。也就是后端服务和Node.js服务Render统一份View层文件。但是View层文件应该采用MVVM的框架架构。这样提供了代码的统一性和开发工作的独立性。可以很好的结合测试框架。

前后端分离-混合式编程

最近研究React和Vue,我发现前端采用MVVM的框架和后端采用微服务框架,这种方式才是目前主流的开发构建。而且有效地利用了浏览器的渲染和uri请求,实现了真正意义上的前后端分离。同时保证了前端更注重页面的实现和UI体验的设计,后端更好地提供数据,而且数据在浏览器中存储,便于渐进式Web的开发。

前后端分离-MVVM编程

未来展望

目前云技术越发成熟,以及DevOps和5G的发展,将来前端依旧会是跨平台的先锋,前后端分离的发展也会愈发激烈。但是我更觉得后端也具备着巨大的发展前景。如网络系统研发,分布式集群架构,大数据,云计算,区块链和人工智能等。我觉得在未来,做技术是越来越有意思的工作。

感谢

非常感谢微软提供的.NET体系结构,使我能全面了解各种领域的开发技术,同时感谢为开源项目不断提供创意和分享的工作者们,以及为Python、C/C++、Node.js和Java等语言的创作者们。

补充

2021-7-2 非常抱歉,之前考虑有所欠缺,于是今天又改了这篇。

文章分类
前端
文章标签