3

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

 3 years ago
source link: https://www.cnblogs.com/DisonTangor/p/14929975.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

相信许多开发者都会或多或少的接触过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等语言的创作者们。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK