前后端分离实践

Posted 2021-04-30 猿群

内部研发情况

• 开发人员基础较为扎实。目前的全栈开发人员和前端开发人员在目前的岗位上能够完全胜任现有工作内容，已经掌握日常开发所需的技术。纯前端人员的技术优势在于切图和页面样式修改；全栈开发人员的技术优势在于前端JS和后端技术。

• 后端为主的MVC开发模式。前端基本上是以jquery系开发技术，新的前端技术涉及或使用较少，例如：less、sass、es6、cmd/amd、vue、webpack、node等。如果直接引入node后端开发，技术跨度较大，短时间很难吸收相关技术。

• 目前各产品对SEO没有强需求，可以接受前后端全部为异步ajax交互的方式。

• 对于前后端分离所需的基础技术支持已具备，例如session管理、权限控制、CDN、nginx集群等。

• 在制定目前的开发框架时考虑过前后端分离问题，且目前开发模式实际上是一种前后端半分离的模式。因此，对于我们来说，首先定义好前后端交互的方式，把前后端硬性的分开，然后再逐渐完善前端的技术框架。

前后端分离步骤：

• 前后端代码硬分离。由一部分全栈开发和纯前端人员承担浏览器端所有开发和服务端view模板的开发，另一部分全栈开发人员在承担后端业务和数据接口的开发。前后台的交互方式为ajax。

• 优势：技术跨度较小，只是在前后端代码上进行强制性分离。

• 问题：只是从物理层上进行了区分，把浏览器作为前端，服务器作为后端，前端只负责页面展示或前端逻辑，后端负责全部业务和数据接口。

 

• 升级前端架构。在前端架构中引入组件化机制，并基于node和webpack构建和管理前端项目。

• 优势：在后端接口和业务稳定的情况下，升级前端架构，业务基本不受影响；可以促进前端架构的持续升级；能够通过此种分离方式解决目前存在问题：前端开发专业性、多端、页面风格统一。

• 问题：依旧是硬性分离，不是按照职责进行的前后端分离。前端会比较重，不适合开发前端功能太多的产品。

前后端分离后协作流程

最新前后端分离后遗留问题。

• SEO问题。目前产品暂时没有强SEO搜索需求。如果需要加SEO，后端服务降级做页面同步渲染。

• 数据后端重复验证。由于现有的后端人员由全栈转换而来，对于后端接口数据验证还是可以接受的。

• 前后台全异步交互。由于只是物理上的隔离，页面渲染只能是异步，页面初次加载的时候可能会有白屏，这块需要前端开发解决，例如添加等待动画。

• 多页面应用问题。分离后的前端是SPA模式，前端模块太多和功能太多，可能会影响前端加载性能。

 

未来规划

• 升级前端架构。未来肯定会更加注重前端的发展，特别是以node全栈技术。

• 根据职责划分前后端。随着前端技能的提升，逐步增加前端的职责，最后真正实现按照职责划分前后端的工作职责。