1.3 前后端分离--阅读笔记1

前后端不分离

• 概念：ui写html，css，后端套模版（将css和html套入服务器模版引擎中）和编写js逻辑。会出现。
• 缺点：效率低下
  • 比如bug修复需要调动整个团队修复（从前端到后端）
  • 比如前后端耦合的串行开发流程（不同同时开发，必须前端开发完了，后端才能开始）

前后端分离的优点

• 开发角度：实现前后端并行开发（同时开发），缩短开发周期。
• 测试角度：前端工程师和后端工程师更快速和更准确的定位问题。
• 部署角度：将静态文件和动态文件分离部署，同时结合回滚策略，简化了部署流程，增强了应用程序的健壮性。

前端工程师负责的内容

• css和图片等媒体资源，js逻辑，html。
• 对于前端工程师而言，后端工程师唯一产出的就是数据。

前后端分离需要解决哪些问题

开发角度：

• 静态资源：js，css，图片等，不需要服务器做任何处理。不依赖任何服务器环境，只要最终在浏览器环境解析。
• 动态资源：html模版，除非是spa，否则还是要面对前后端最难解耦的html模版。
• html处理方案：
  - spa项目：不存在html模版概念，html实体内容都是由js在浏览器下生成的，可以把html文件作为静态文件处理。
  - html模版由服务器端部署的项目：最终的html模板需要与服务器代码一同打包部署。
  - 大前端项目：前端工程师负责与客户端相关的所有文件，包括静态文件和html。这是最理想的模式。
• 大前端不是全栈工程师的原因，大前端不接触数据库。
• html模版由服务器端部署的项目，要解决3个问题：
  1. html模版引擎的支持。有很多种，根据服务端编程语言的不同，部署难度也不同。容易的：python，nodejs，php。难的：java。成熟的团队都有中间层，java承载大后端的数据服务，中间层用容易部署的语言php或者python或者nodejs。
  2. html模版的初始数据。可以用mock解决，但是前后端要提前约定好接口的请求规范和数据结构。
  3. 各种异步数据接口的数据。可以用mock解决，但是前后端要提前约定好接口的请求规范和数据结构。

测试角度：

• 测试分为两个阶段。第一阶段是单元测试，前后端各自测试各自的。第二阶段是集成测试，前后端代码整合在一起，由专业测试工程师测试。
• 测试工程师是内侧用户，他们站在用户的角度评估产品，他们的反馈就是用户的反馈。
• 前端工程师负责的是和用户直接接触的内容和逻辑，所以出现问题前端工程师首当其冲
• 前后端分离的本质是分工的细分
• 要保障生产环境下的质量，如何做？制定客户端监控系统，收集客户端问题及时向开发人员反馈。
• 服务器端通常具备监控，应急和预警系统，尽力保障服务器能及时处理问题。同理，客户端也应该有监控系统，由前端工程师负责。

部署角度：

• 大前端项目：最简单，将静态资源（js，css，图片等）放在静态文件服务器里。html模版文件和中间层node.js代码一起部署到web服务器。
• spa项目：因为不需要服务器端渲染，所以可以放在静态文件服务器。注意不能让浏览器缓存html文件，不然开发人员更新了html文件，客户端因为缓存得不到最新的文件。
  • 不缓存的方式：
  1. 分别为html文件和其他静态文件设置不同的缓存策略。html使用协商缓存策略（http返回状态码304），其他静态资源使用强制缓存策略（http返回状态码200）。
  2. 所有静态资源全部使用协商缓存策略
  3. 第一种是优于第二种的，具体实施也不是很麻烦，Apache，Nginx等专业服务器软件，都可以针对文件扩展类型设置不同的缓存策略
• html模版由服务器端部署的项目：这种最麻烦，因为前端工程师不负责中间层。具体方式是静态资源部署到静态文件服务器，html模版文件前端工程师放到svn或者git，后端工程师拉下来，将服务器端代码一起部署。
• 动态资源和静态资源分离部署的优点：
  1. 在集成测试阶段的bug，前后端的bug修复后，可以自己独立进行部署，不需要另一方再部署。这个优点只能在测试阶段，因为大部分公司的测试服务器的静态文件不设置客户端缓存。但是生产环境，必须按照上述部署方式重新部署。

前后端分离和前端工程化

• 前后端分离是前端工程化的前提
• 前端工程化促进了更合理更便捷的前后端分离的开发环境
• 两者相互促进相互依赖