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

Posted 2021-06-25 DisonTangor

相信许多开发者都会或多或少的接触过Web开发，也会发现体系结构中存在着相同和不同之处。这其中的缘由来自于历史的原因。在21世纪初的8年间，对于Web的开发，就有了许许多多的语言及其架构。例如Java，从Servlet分别管理Request和Response到JSP前后端融合技术，再到EJB、Struts和Spring体系将业务逻辑功能向后迁移。而浏览器由微软的IE浏览器和Netscape（网景浏览器）之争开始，提出过许多前端优化，如VBScript、javascript、JScript、CoffeeScript以及XHR(XMLHttpRequest)技术等。

引言

相信许多开发者都会或多或少的接触过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来演示：

代码如下：

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

未来展望

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

感谢

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