前言由于近段时间Nodejs的逐渐成熟和稳定，越来越多的公司前端团队开始尝试使用Nodejs来实践和尝试一些东西新的。一般的做法是将一部分对业务不是很重要的后端功能迁移到Nodejs，也有一些公司使用NodeJS作为前后端分离的解决方案。而像淘宝这样的大网站也很早就完成了前后端分离，为我们这样的后来者提供了宝贵的经验。同样，我们的大网盘团队也在去年初就开始了紧锣密鼓的准备工作，目前的工作也差不多完成了。下面我就总结一下过程中遇到的坑和注意事项。认清前后端分离在传统的Web应用开发中，大部分程序员会将浏览器视为前后端的分界线。浏览器中为用户显示页面的部分称为前端，所有运行在服务器上并为前端提供业务逻辑和数据准备的代码统称为后端。由于前后端分离的概念是最近才出现的，很多人只闻其声不见其形，所以可能会有一些误解，误认为前后端分离分离只是一种web应用开发模式。在Web应用开发期间，前后端开发工作的分工是前后端分离。事实上，前后端分离不仅仅是一种开发模式，更是一种Web应用的架构模式。开发阶段，前后端工程师约定数据交互接口，实现并行开发和测试；在运行阶段，前后端分离模式需要单独部署web应用，前后端使用HTTP或其他协议进行交互请求。但是，作为一个架构模型，我们在实现过程中主要有以下四个方面的比较和重新认识。前后端分离可以从四个方面来理解：交互形式代码组织开发模型数据接口规范流程1.交互形式在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用数据的API服务即可。前后端通过HTTP请求进行交互。前端拿到数据后，组装渲染页面，最后返回给浏览器。2、代码组织方式在传统的架构模式下，前后端代码存放在同一个代码库中，甚至是同一个项目目录中。该页面还混合了后端代码。前后端工程师开发时，必须将整个项目导入到开发工具中。前后端分离模式有以下两种代码组织形式：半分离的前后端共享一个代码库，但代码分别存放在两个项目中。后端不关心或很少关心前端元素的输出，前端不能独立开发和测试，项目中缺少前后端交互的测试用例。分离前后端代码库分离。前端代码有一个伪后端，可以进行mock测试（一种通过构建虚拟测试对象来简化测试环境的方法），可以支持前端的独立开发和测试。后端代码除了功能实现，还有详细的测试用例，保证API的可用性，降低集成风险。3.开发模型我们之前的架构属于传统的MVC架构，前后端没有分离为一个整体。在项目开发阶段，前端工程师负责编写HTML，完成前端页面设计和页面设置，然后利用模板技术将编写好的前端代码转换成同时嵌入了Smarty脚本，以及后台提供的一些模板变量和一些逻辑操作。在应用运行时，所有代码都与后端代码打包部署在同一台服务器上，同时进行简单的动静分离部署。至此，应用开发流程如下图所示。实现前后端分离架构后，前端工程师只需编写HTML、js、CSS等前端资源，然后通过HTTP请求调用后端提供的服务即可。除了开发期的分离，在运行期也会将前后端资源分开部署。前后端分离后，开发流程如下图所示。通过以上两张流程图不难发现，在开发模式上，前后端分离不仅仅是工程师的分工，更重要的是实现了前后端的并行开发。后端并简化开发过程。4.数据接口规范流程在开发期间，前后端共同约定数据接口的交互形式和数据格式。然后实现前后端并行开发，前端工程师在开发完成后可以单独进行mock测试，后端也可以使用接口测试平台进行接口自测试。测试，然后前后端联合进行功能调试和格式验证，最后进行自动化测试。分离的四大好处前后端分离模型与传统的Web应用架构有很大不同。分不分，真的是个问题。从目前应用软件开发的发展趋势来看，主要有两个方面需要注意：越来越重视用户体验，随着互联网的发展开始多终端化。大规模应用架构模型正在向云化和微服务方向发展。我们主要通过前后端分离架构，为我们带来以下四个方面的提升：后端工程师只需要专注于前端或后端开发。前后端工程师实现自主权，培养自己独特的技术特性，进而打造全栈精益开发团队。提高开发效率前后端分离后，可以实现前后端代码解耦。只要前后端进行沟通，就应用所需的接口和接口参数达成一致，就可以开始并行开发，而无需等待对方的开发工作完成。同时，即使需求发生变化，只要接口和数据格式不变，后端开发人员不需要修改代码，只要前端发生变化即可。这样一来，整个应用的开发效率肯定会得到质的提升。完美应对复杂多变的前端需求如果开发团队能够完成前后端分离的改造，打造优秀的前后端团队，开展自主开发，让开发者专注于专业化，开发能力必然提升，能够完美应对各种复杂多变的前端需求。增强代码可维护性前后端分离后，应用代码不再是前后端混合体，只有运行时才会有调用依赖。应用代码将变得整洁清晰，代码阅读和代码维护都将比以前更容易。需要前后端分离的场景任何技术和架构都不适合任何场景，前后端分离也是如此。虽然前后端分离架构能带来很多好处，但前提是有合适的开发团队。而我们的百度网盘就属于那种：页面布局复杂，使用主题和样式。需要更高的页面渲染效果。前端页面包含复杂的业务逻辑，页面需要渲染大量数据。对于这样一个重前端的应用，我们综合考虑了各种情况，最终决定采用前后端分离的架构。部署方案中前后端分离后，应用部署时也需要前后端分离。在选择前后端分离方案时，需要考虑项目和用户的实际情况。在前后端分离之前，网盘的后端架构是Nginx服务、后端PHP服务、前端静态资源都部署在同一台服务器上。当浏览器发起访问请求时，如果请求的是静态资源，Nginx直接将静态资源返回给服务器；如果请求是针对页面或后端服务，Nginx将请求转发给后端PHP服务器。完成响应后，通过Nginx返回给浏览器。注：图中的Nginx属于后端机器，主要是识别前端机器Nginx转发的请求，转发给本地的PHP服务；前端机和后端机各有一个Nginx服务。该方案比较简单，易于实现，可以达到前后端解耦的目的。而目前很多公司都在基于这种架构或者某种变形来实现Web应用。但是对于页面数量多、SEO好的应用，这种方案的缺点也很明显。因为Nginx只返回页面静态资源给浏览器，而国内的搜索引擎爬虫只能抓取静态数据，不会解析页面中的js，导致应用不能很好的被搜索引擎支持。同时，由于Nginx不进行页面的组装和渲染，需要将静态页面返回给浏览器，再完成渲染工作，增加了浏览器的渲染负担。另外，由于这种架构，前端工程师的工作范围仅限于浏览器端，使得在进行一些特殊的性能优化时，前端工程师无法独立完成，需要后端的配合-还需要终端开发人员。影响了双方的进展。前后端架构分离后，我们在原有架构的基础上增加了一个NodeServer作为中间层，将前端资源部署到NodeServer上。NodeServer还实现了一层数据代理服务，负责与提供数据的后端服务通信。并在此基础上添加并使用前端机的Nginx服务（前端机对所有请求进行预处理和负载均衡，然后转发给后端机）。浏览器发起的请求通过前端机器的Nginx。对于分发，将URL请求统一分发到NodeServer。在NodeServer中，根据请求类型通过RPC服务向后端服务器请求页面的模板数据，然后进行页面的组装和渲染；API请求直接转发到后端服务器。完成响应。注：图中Nginx属于前端机。前后端分离方案的对比、实现和部署下篇文章将和大家分享前端中NodeServer基础架构、前端路由管理、模板数据交互、运维和环境部署相关内容与百度网盘后端分离。结语前后端分离不仅仅是前后端开发的分工，而是在开发期间将代码存储和前后端开发职责分离，让前后端可以独立开发和测试；应用部署在运行时分离，前后端通过HTTP请求进行通信。与传统模式相比，前后端分离的开发模式可以提高开发效率和代码可维护性，让我们有计划地打造前后端并重的精益开发团队，从而更好地应对日益复杂多变的Web应用开发需求。
