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

引言

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

未来展望

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

感谢

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