从公司内网转载一篇同事整理的资料,关于前后端分离的优劣方面,整理的比较全面,推荐不明白为什么要前后端分离的同学阅读。

首先说明:前后端分离并非仅仅只是一种开发模式,而是一种架构模式(前后端分离架构)。

开发模式对比

序号 老的开发模式(后端以Java为例) 新的开发模式(后端以Java为例)
1 产品经理/领导/客户提出需求 产品经理/领导/客户提出需求
2 UI做出设计图 UI做出设计图
3 前端工程师做html页面 前后端约定接口&数据&参数
4 后端工程师将html页面套成jsp页面 前后端并行开发
5 集成出现问题 前端返工 后端返工 前后端集成
6 二次集成 集成成功 交付 前端页面调整 集成成功 交互

请求方式对比

序号 老的开发模式(后端以Java为例) 新的开发模式(后端以Java为例)
1 客户端请求 浏览器发送请求
2 服务端的servlet或controller接收请求 直接到达html页面(前端控制路由与渲染页面,整个项目开发的权重前移)
3 调用service,dao代码完成业务逻辑 html页面负责调用服务端接口产生数据
4 返回jsp jsp展现一些动态的代码 填充html,展现动态效果,在页面上进行解析并操作DOM或数据

前后端分离的优势

序号 优势
1 可以实现真正的前后端解耦,前端服务器使用nginx,后端/应用服务器使用tomcat,加快整体响应速度
2 发现bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象
3 减少后端服务器的并发/负载压力
4 即使后端服务暂时超时或者宕机了,前端页面也会正常访问,只不过数据刷不出来而已
5 多端应用
6 页面显示的东西再多也不怕,因为是异步加载
7 增加代码的维护性&易读性
8 提升开发效率,因为可以前后端并行开发,而不是像以前的强依赖
9 前端大量的组件代码得以复用,组件化,提升开发效率,抽出来
10 在nginx中部署证书,外网使用https访问,并且只开放443和80端口,其他端口一律关闭(防止黑客端口扫描),内网使用http,性能和安全都有保障。
11 nginx支持页面热部署,不用重启服务器,前端升级更无缝。
12 前端项目中可以加入mock测试(构造虚拟测试对象来模拟后端,可以独立开发和测试)

前后端分离的劣势

有联调、沟通环节,这个过程非常花时间,也容易出bug,还很难维护。

前后端分离-术业有专攻

后端: 把精力放在 高并发,高可用,高性能,安全,存储,业务等等研究上

例如:设计模式,原理及源码,事务隔离与锁机制,http/tcp,多线程,分布式架构,弹性计算架构,微服务架构,性能优化,以及相关的项目管理等等

前端: 把精力放在页面表现,速度流畅,兼容性,用户体验等等

例如:html5,css3,jquery,angularjs,reactjs,vuejs,webpack,less/sass,gulp,nodejs,Google V8引擎,javascript多线程,模块化,面向切面编程,设计模式,浏览器兼容性,性能优化等等

总结

序号 总结
1 前后端分离并非仅仅只是一种开发模式,而是一种架构模式(前后端分离架构)。
2 千万不要以为只有在撸代码的时候把前端和后端分开就是前后端分离了,需要区分前后端项目。
3 前端项目与后端项目是两个项目,放在两个不同的服务器,需要独立部署,两个不同的工程,两个不同的代码库,不同的开发人员。
4 前后端工程师需要约定交互接口,实现并行开发,开发结束后需要进行独立部署,前端通过ajax来调用http请求调用后端的restful api。
5 前端只需要关注页面的样式与动态数据的解析&渲染,而后端专注于具体业务逻辑。