javaweb-前后端分离史

前后端分离演变史

model1(MVC时代)：

• 以前一篇博客讲了为了开发开发复杂度，后端开发从model2(MVC)逐渐演变了很多基于MVC的后端框架，例如SSH，SSM
• 优点： MVC是一个很好的协作模式，能后有效降低代码的耦合度，从架构上能让开发者明白代码应该写在哪里。为了让View试图层更加存粹，还可以将JSP替换为Thymeleaf，Freemarker等模板引擎，使模板里无法写入java代码，让前后端分工更加清晰
• 缺点：
  1. 前端开发重度依赖开发环境，开发效率低。这种架构下，前后端协作主要有两种模式：
     1. 前端写Demo，写好后，让后端去套模板。好处是Demo可以本地开发，很高效。不足时需要后端套模板，套完后还需要前端人员确定，来回沟通调整的成本很大。
     2. 另一种协作模式是前端负责浏览器端的所有开发和服务器端的View层模板开发。好处是UI相关的代码都是前端去写就好了，后端不用管前端的数据。不足就是前端开发重度绑定开发环境，环境成为影响前端开发效率的重要因素。
  2. 前后端职责纠缠不清，模板引擎功能强大，依旧可以通过拿到的上下文变量来实现各种业务逻辑。这样，只要前端弱势一点，往往就会被后端要求在模板层写入不少业务代码。还有个很大的灰色地带是Controller，页面路由等功能本应该是前端最关注的，但却是由后端来实现的。Controller和Model往往也会纠缠不清，看了让人咬牙的业务逻辑代码经常会出现在Controller层，这些问题不能全纠结于程序员的素养，否则JSP就够了。
  3. 对前端发挥的局限性：性能优化如果只在前端做空间非常有限，于是我们经常需要后端合作，但由于后端框架限制，我们很难使用【Comet】，【BigPipe】等技术来优化性能

基于AJAX的SPA时代

• 使用CDN作为静态资源存储，JavaScript网站归来，Single Page Application

  

• 优点：前后端分工清晰，关键是AJAX接口。复杂度从基于服务器引擎的JSP转移到了基于浏览器引擎的JavaScript。这个时代出现了类似后端MVC模式的分层架构

  

• 缺点：前后端接口的约定。需要通过接口规则和接口平台等方式来实现前后端的搞笑并行并发。前端由于JavaScript可能出现大量JS代码的组织。

大前端MV*时代

• MVC：同步通信：View，Controller，Model
• MVP：异步通信：View，Presenter，Model
• MVVM：异步通信：View，ViewModel，Model

为了降低前端开发的复杂度，涌现了大量前端框架：AngularJS，React，Vue.js，EmberJS等，这些框架按类型分为：Templates，Controllers，Models三层，然后在层能分层

• 优点：
  1. 前后端职责很清晰：前端工作在浏览器端，后端工作在服务器端，开发并行。前后端独立开发，独立运行，甚至独立部署上线。
  2. 前端开发的复杂度可控：前端代码很重，很合理的分层，让前端代码能各司其职。
• 缺点：
  1. 代码不能复用，例如后端依旧需要对数据各种校验，无法直接复用浏览器端的代码
  2. 全异步，对SEO不利，往往还需要服务器端做同步渲染的降级方式
  3. 性能并非最佳，特别是移动互联网下
  4. SPA不能满足所有需求，依旧存在大量多页面应用。URL Design需要后端配合，前端无法完全掌握。

NodeJS带来的全栈时代

前端的MVC模式解决了很多问题，但是也有很多不足。随着NodeJS的兴起，JavaScript开始有能力运行在服务端。这意味着可以有一种全新的研发模式。

在这种研发模式下，前后端职责很清晰了。

对前端来说，两个UI层各司其职：

1. Front-end UI layer：处理浏览器层的展现逻辑，通过CSS渲染样式，通过Javascript添加交互式功能。
2. Back-end UI layer：处理路由，模板，数据获取，Cookie等。通过路由，前端终于可以自主把控URL Design了。这样无论是单页面应用还是多页面应用，前端都可以自由调控。后端也终于可以拜托对崭新啊的强关注，转而可以专心业务逻辑层的开发。

通过 Node，Web Server 层也是 JavaScript 代码，这意味着部分代码可前后复用，需要 SEO 的场景可以在服务端同步渲染，由于异步请求太多导致的性能问题也可以通过服务端来缓解。前一种模式的不足，通过这种模式几乎都能完美解决掉。

与 JSP 模式相比，全栈模式看起来是一种回归，也的确是一种向原始开发模式的回归，不过是一种螺旋上升式的回归。

基于 Node 的全栈模式，依旧面临很多挑战：

1. 需要前端对服务端编程有更进一步的认识。比如 network/tcp、PE 等知识的掌握。
2. Node 层与 Java 层的高效通信。Node 模式下，都在服务器端，RESTful HTTP 通信未必高效，
3. 过 SOAP 等方式通信更高效。一切需要在验证中前行。
4. 对部署、运维层面的熟练了解，需要更多知识点和实操经验。
5. 大量历史遗留问题如何过渡。这可能是最大最大的阻力。

总结

1. 模式没有好坏高下之分，只有合不合适。
2. Ajax 给前端开发带来了一次质的飞跃，Node 很可能是第二次。
3. SoC（关注度分离：关注点分离是日常生活和生产中广泛使用的解决复杂问题的一种系统思维方法。大体思路是,先将复杂问题做合理的分解,再分别仔细研究问题的不同侧面(关注点)，最后综合各方面的结果，合成整体的解决方案。） 是一条伟大的原则。上面种种模式，都是让前后端的职责更清晰，分工更合理高效。
4. 还有个原则，让合适的人做合适的事。比如 Web Server 层的 UI Layer 开发，前端是更合适的人选。