likes
comments
collection
share

前后端分离技术架构模式演变

作者站长头像
站长
· 阅读数 57

本文介绍，前端架构模式演变的几个阶段都有哪些问题。以及前后端分离技术的优势。

为了解决传统Web开发模式带来的各种问题，前后端分离已成为互联网项目开发的业界标准使用方式，通过前后端分离有效的进行解耦，让软件开发的流程更加清晰，并且会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务打下坚实的基础。

1. JSP+Servlet时期（未分离）

所有的请求都被发送给作为控制器的Servlet，它接受请求，并根据请求信息将它们分发给适当的JSP来响应

前后端分离技术架构模式演变

开发方式如下： 前后端分离技术架构模式演变

问题：

  • 前端代码越来越复杂
    • 无法统一协作模式，代码充满了约定
    • JS、CSS依赖于后端产生的HTML
    • 有的数据来子Ajax，有的数据在DOM上
    • 有的业务逻辑在前端，有的在Model层，更多的在View层
  • 前后端依旧高度耦合
    • 前端依赖服务端开发环境
    • 在服务端View层高度耦合
    • 沟通成本高
    • 职责不清晰
  • 无法良好的支持跨终端
    • 业务逻辑散落在应用中
    • 渲染逻辑强依赖后端页面
  • JSP等代码的可维护性越来越差
    • 沟通成本上升
    • 维护成本上升
    • 无法正确且快速的响应变化

2. SPA+Ajax时期（半分离）

前端负责开发页面，通过接口（Ajax）获取数据，采用dom操作对页面进行数据绑定，最终是由前端把页面渲染出来。优秀框架：AngularJS、React等

前后端分离技术架构模式演变

职责清晰了：

  • 后端
    • 提供数据接口
    • 处理业务数据
    • Server-side MVC架构
    • 代码跑在服务器上
  • 前端
    • 接收数据，返回数据
    • 处理渲染逻辑
    • Client-side MV*架构
    • 跑在浏览器上

问题：

  • 各层职责层叠
    • Client-side Model 是 Server-side Model 的加工
    • Client-side View 跟 Server-side是 不同层次的东西
    • Client-side的Controller 跟 Sever-side的Controller 各搞各的
    • Client-side的Route 但是 Server-side 可能没有
  • 性能问题
    • 渲染，取值都在客户端进行，有性能的问题
    • 需要等待资源到齐才能进行，会有短暂白屏与闪动
    • 在移动设备低速网路的体验奇差无比
  • 重用问题
    • 模版无法重用，造成维护上的麻烦与不一致
    • 逻辑无法重用，前端的校验后端仍须在做一次
    • 路由无法重用，前端的路由在后端未必存在
  • 跨终端问题：
    • 业务太靠前，导致不同端重复实现
    • 逻辑太靠前，造成维护上的不易
  • SEO问题：
    • 渲染都在客户端，模版无法重用，SEO实现麻烦

3. Nodejs中间层（分离）

前端负责View和Controller层，后端只负责Model层，业务/数据处理等。node.js适合运用在高并发、I/O密集、少量业务逻辑的场景

前后端分离技术架构模式演变

NodeJS：

  • 前端熟悉的语言，學習成本低
  • 都是JS，可以前后端复用
  • 体质适合：事件驱动、非阻塞I/O
  • 适合IO密集型业务
  • 执行速度也不差

职责划分：

  • 后端
    • 服务层
    • 提供数据接口
    • 封装业务数据维持数据稳定
  • NodeJS
    • 跑在服务器上的JS
    • 转发数据，串接服务
    • 路由设计，控制逻辑
    • 渲染页面，体验优化
    • 更多的可能
  • 前端
    • 跑在浏览器上的JS
    • CSS、JS加载运行
    • DOM操作
    • 支持任何的前端框架与工具
    • 共用模板与路由

优点：

  1. 适配性提升（前后端的桥梁，抹平我们对不同接口的调用方式）
  2. 响应速度提升（服务器渲染提高页面加载速度）
  3. 性能得到提升（使用Bigpiper技术，合并请求，降低负担，分批输出）
  4. 页面渲染优化（前后端共享模板、首屏服务器渲染、次屏浏览器渲染、局部刷新浏览器渲染）
  5. 接口性能优化（拆分大接口为独立小接口，并发请求，串行 => 并行，大幅缩短请求时间）
  6. 部署优化（一台NodeJS对多台JAVA服务器合理的分配服务器带来最大的产出）
  7. 可靠性优化（单元测试，页面测试，回归测试，持续集成）
  8. 代码优化（接口服务化、代码模块化、功能组件化）
  9. 其他（更好的SEO，路由共享与代码复用，对后端服务有保护作用，摆脱对后端接口的依赖）

NodeJs VS Nginx

前端项目动态应用和静态应用的区别，有了 Vue + Nginx，为什么还要 Node？

  • Vue：只是一个 UI 层的框架，因此他打包出来的就是一套 UI 的静态文件：html + js-bundle
  • Nginx：反向服务器，并不提供逻辑处理，只做譬如负载均衡、流量控制、静态服务器等功能
  • Node：运行在服务端的 JavaScript

vue 对 node 的服务端渲染支持最好（反过来说就不准确了）

NodeJS的核心优势

  • 服务端渲染-SSR（Server Side Rendering）
  • 鉴权
  • 接口聚合

Node要避免一些高CPU开销的功能

参考

转载自:https://juejin.cn/post/7144594234597703688
评论
请登录