Web前后端发展史整理
前⾔
最近疫情严重，只能天天宅在家⾥当死宅。最近闲来⽆事开始了解Web前后端发展史，算是给⾃⼰做后端开发进⾏知识补充吧。从未分离时代到前后端分离时代，Web开发发⽣了⾮常⼤的变化。⽬前来说，基本没⼈会⽤MVC的⽅式开发web，主流开发模式⼀般是前后端全分离，⼩型⽹站仍会采⽤前后端半分离。作为初学者，我⽤的是半分离的⽅式来进⾏Web开发，毕竟对于⼩型⽹站来说，全分离的开发⽅式代价还是太⾼了。现在，根据整理的资料和个⼈理解，稍微写⼀下前后端未分离、半分离和全分离的发展历程。
未分离时代
发展历程
在JavaScript 诞⽣之后，可以⽤来更改前端 DOM 的样式，实现⼀些类似于时钟之类的⼩功能。那时候的JavaScript 仅限于此，⼤部分的前端界⾯还很简单，显⽰的都是纯静态的⽂本和图⽚。这种静态页⾯不能读取后台数据库中的数据，为了使得 Web 更加充满活⼒，以PHP、JSP、ASP.NET 为代表的动态页⾯技术相继诞⽣。
PHP（PHP：Hypertext Preprocessor）最初是由 Rasmus Lerdorf 在 1995 年开始开发的，现在PHP 的标准由 PHP Group 维护。PHP 是⼀种开源的通⽤计算机脚本语⾔，尤其适⽤于⽹络开发并可嵌⼊ HTML 中使⽤，其主要⽬标是允许⽹络开发⼈员快速编写动态页⾯。
JSP（JavaServer Pages）是由 Sun 公司倡导和许多公司参与共同创建的⼀种使软件开发者可以响应客户端请求，从⽽动态⽣成HTML、XML 或其他格式⽂档的 Web ⽹页的技术标准。JSP 技术是以 Java 语⾔为基础的。
随着这些动态服务器页⾯技术的出现，页⾯不再是静⽌的，页⾯可以获取服务器数据信息并不断更新。此时，后端的各种 MVC 框架逐渐发展起来，以 JSP 为例，Struct、Spring 等框架层出不穷。以 Google 为代表的搜索引擎以及各种论坛相继出现，使得 Web 充满了活⼒。
简单概括，在前后端耦合架构中，所有的静态资源和业务代码统⼀部署在同⼀台服务器上。服务器接收到浏览器的请求后，进⾏处理得到数据，然后将数据填充到静态页⾯中，最终返回给浏览器。
在这个前提下，前端能做的⼯作就只是简单地将 UI 设计师提供的原型图实现成静态的 HTML 页⾯，后端开发再“套⽤”前端开发的模板进⾏页⾯拼接。⽽后端过得也不轻松，因为页⾯交互逻辑开发的⼯作量都集中在后端，分配严重不均。并且开发时，前后端相互依赖很严重，需要改动时，要让前端修改静态页⾯，后端再修改逻辑，开发效率慢，代码难以维护。
开发⽅式
使⽤MVC框架开发：
所有的客户端请求都被发送给作为控制器的Servlet，它接收请求，并根据请求信息将它们分发给适当的JSP来响应。同时，Servlet还根据JSP的需求⽣成JavaBeans的实例并输出给JSP环境。JSP可以通过直接调⽤⽅法或使⽤UseBean的⾃定义标签得到JavaBeans中的数据。需要说明的是，这个View还可以采⽤Velocity、Freemarker等模板引擎。使⽤了这些模板引擎，可以使得开发过程中的⼈员分⼯更加明确，还能提⾼开发效率。
在这个时期，⾸先是有以下的开发⽅式：
这种⽅式已经逐渐淘汰。主要原因有两点：
1.前端在开发过程中严重依赖后端，在后端没有完成的情况下，前端⽆法⼲活。
前端页面模板2.会JSP、Velocity或Freemarker等模板引擎的前端开发⼈员越来越少。
因此进化出了另⼀种开发⽅式，这种⽅式现在很多⼩型传统软件公司还在使⽤：
但是这种开发⽅式和它前⾝的开发⽅式有着同样的缺点：
1.前端⽆法单独调试，开发效率低。
2.前端不可避免会遇到后台代码。⽐如说JSP中的EL表达式和JSTL标签，难为前端。这种⽅式的耦合性太强，就算⽤了Freemarker等模板引擎，前端也不可避免地要去重新学习该模板引擎的语法，⽆谓增加了前端的学习成本。
3.JSP本⾝局限所导致的性能问题。⼀是第⼀次请求JSP，必须要在WEB服务器中编译成Servlet，造成第⼀次运⾏会⽐较缓慢的结果；⼆是每次请求JSP都要访问Servlet再⽤输出流输出HTML页⾯，效率⽐直接使⽤HTML低下；三是JSP是同步加载的⽅式，如果页⾯中有很多内容，页⾯响应会很慢。
前后端半分离时代
到了前后端半分离阶段，我们其实仍在使⽤MVC框架，⽐如后端的Spring框架或者前端的reacts框架都是MVC框架。前后端半分离⼤致来说就是，前端通过前端框架完成页⾯设计，后端负责数据处理和接⼝实现。前后端的交流过程⼤致是前端⽹页端⼝被使⽤时，向后端发送⽹络请求并传输数据，后端根据⽹络请求的内容进⾏数据处理并通过json格式传输数据给前端。
这个阶段，前端是完全没有后端代码的，除了接⼝的变量使⽤和服务器地址。后端开发也不需要等前端完成之后才能继续，在后端没有完成之前，前端可以通过假后端等⼿段对页⾯进⾏测试。
这样看起来前后端的联系不是很⼤，那为什么说是半分离的呢？因为不是所有页⾯都是单页⾯应⽤。
在多页⾯应⽤的情况下，前端因为没有掌握Controller层，所以需要和后端讨论页⾯是要同步输出还是异步JSON渲染等问题。⽽且在这个时期，通常也是⼀个⼯程师搞定前后端所有的⼯作，因此在这个阶段只能算半分离。
前后端分离时代
在这个时代，前端的范围被扩展，Controller层也被认为是属于前端的⼀部分。前端负责View和Controller层，后端只负责Model层和Service层。但是Controller毕竟⼀直是⽤后端代码写的，前端⼈员对相关代码肯定是不太熟悉的。为了解决这个问题，NodeJS横空出世，提供了⼀个跟前端交互的API。对前端开发来说只要会JS语⾔，就能轻松的使⽤NodeJS，这对⽹页开发来说⽆疑是⼀种便利。
NodeJS路由的实现逻辑是把前端静态页⾯代码当成字符串发送到客户端（例如浏览器），简单理解可以理解为路由是提供给客户端的⼀组API接⼝，只不过返回的数据是页⾯代码的字符串⽽已。
NodeJS适合运⽤在⾼并发、I/O密集、少量业务逻辑的场景，这也是为什么⼀般是⼤型企业才会使⽤前后端分离的模式进⾏⽹页开发，⼩⽹站仍使⽤以前的模式开发。毕竟没有过时的技术，只有合适的技术。
⽤NodeJS来作为桥梁架构服务端API输出的JSON能带来优异性能。后端处于性能和别的原因，提供的接⼝所返回的数据格式也许不太适合前端直接使⽤，前端所需的排序功能、筛选功能以及到了视图层的页⾯展现，也许都需要对接⼝所提供的数据进⾏⼆次处理。这些处理虽然是可以放在前端来执⾏，但如果数据量⼀⼤，便会浪费浏览器性能，更会降低页⾯渲染速度，影响⽤户体验。因⽽如今增加NodeJS中间层是⼀种良好的解决⽅案。
增加NodeJS中间层之后，浏览器（Webview）便不再直接请求服务端的API，⽽是浏览器先去请求服务端的NodeJS，由NodeJS对服务端的API发起HTTP请求，NodeJS收到服务端的API响应返回的JSON后就去渲染HTML页⾯，然后NodeJS直接将HTML页⾯flush到浏览器。这样，浏览器得到的就是普通的HTML页⾯，不再⽤发AJAX去请求服务器之后再在浏览器进⾏页⾯渲染了。
增加NodeJS中间层最⼤的优势便是适配性提升。在这个移动互联⽹时代，⼀个⽹站如果没有移动端的适配是很难⽣存的。⼀般对前端来说，会给PC端、Mobile、App端各⾃研发⼀套前端，后端也要根据不同的前端设计不同的端⼝，但后端⼤部分的业务逻辑是⼀样的，这⽆疑会徒增⼯作量。如果Controller层在后端⼿⾥，后端为了这些不同端页⾯展现逻辑，⾃⼰维护这些Controller，模板⽆法重⽤，徒增与前端沟通成本。如果增加了NodeJS层，每种前端的界⾯展⽰逻辑由NodeJS层⾃⼰维护。产品经理在中途如果想要改动界⾯，可以由前端⾃⼰维护，⽆需后端操⼼。前后端各司其职，后端专注于⾃⼰的业务逻辑开发，前端专注于产品效果开发。这样就实现了更彻底的前后端分离。
总结
从最初的静态页⾯，到现在多平台⾼并发的⼤流量⽹站，Web开发⼀直在⾼速发展着。以前最早学习
计算机就是从简单的html静态⽹页设计开始的，那个时候的⽹站还是由各种简单的贴图和链接拼接⽽成。到上⼤学正式系统性学习计算机之后，现在和别⼈⼀起进⾏⼩型⽹站的开发。虽然还只是很简单的⽹站，但了解⼀下Web前后端的发展历史还是很有必要的，这可以使我们知道⾃⼰正在进⾏的⽹站开发任务、正在使⽤的框架和技术到底是为什么要这样做，我们为什么会使⽤这样的⽅式和模式去进⾏⽹站开发。当我们对这些事情了然于胸之后，如果有⼀天换⼀种开发模式也不会茫然⽆措。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。