zoukankan      html  css  js  c++  java
  • 前后端分离

    发展历程


       随着业务需求增加 复杂度的增长,网站开发越来越大,一个程序猿开发全站变得越来越难,因此网站开发逐渐分成了前端和后端两个职位。除了职位的分离,还需要代码分离,不然两拨人开发 维护同一套代码就很不方便了。项目越复杂,出现你等我,我等你的情况就会越来越多,这样就拖慢了整体团队的节奏。
      前后端的分离方式分为部分分离和全部分离两种,部分分离是只把脚本和样式分离出去,而html模板还留在后端通过jsp,velocity或者freemarker来渲染;另一种就是完全分离,脚本样式以及模板全都放在前端来维护。
      部分分离已经很大程度上解决了前后端开发时的协调问题,开发效率也得到了很大程度的提升。但也得承认,这种方式也还是有问题的。当我们要开发html模板的时候,就需要搭起一整套后端的开发环境,或者是找后端同学来协助。
      而完全分离一般有两种方案,第一种就是使用velocity这种在nodejs和java下都可以编译的页面模板,在开发时放到前端项目里,但在发布时,会把模板发布到后端的模板目录下,这样,开发时就做到了完全分离。这种方式最大的好处就是线上模板的渲染还是由java来做的,形成的是带有动态数据的html,比较有利于SEO。但这种方式下,前端的开发环境和发布系统的复杂度都相对较高,单纯的前端改动也还是要带着后端一起发布。
      第二种完全分离的方式,就是把纯静态的html模板完全放在前端,数据全部通过RESTful接口来进行交互。这样前后端就完全分开了,脱离了后端的模板,而这种方式的系统复杂度也会比第一种完全分离的方式低。但这种方案下,所有的页面数据都是用js渲染的,没有动态模板,不太利于SEO。这个不足我们可以通过做server render或者给蜘蛛做一套定制页面来解决。

      前后端分离并不只是开发模式,而是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。

      在开发模式上,前后段分离不仅仅只是工程师的分工开发,更重要的意义在于实现了前后端的并行开发,简化了开发流程

      在开发期间前后端共同商定好数据接口的交互形式和数据格式。然后实现前后端的并行开发,其中前端工程师再开发完成之后可以独自进行mock测试,而后端也可以使用接口测试平台进行接口自测,然后前后端一起进行功能联调并校验格式,最终进行自动化测试。

    分离好处


     

    前后端分离模式和传统的web应用架构相比有很大的不同,到底分还是不分,这还真是个问题。

    从目前应用软件开发的发展趋势来看,主要有两方面需要注意:

    1. 越来越注重用户体验,随着互联网的发展,开始多终端化。

    2. 大型应用架构模式正在向云化、微服务化发展。

    我们主要通过前后端分离架构,为我们带来以下四个方面的提升:

    • 为优质产品打造精益团队
    • 提升开发效率

              前后端分离以后,可以实现前后端代码的解耦,只要前后端沟通约定好应用所需接口以及接口参数,便可以开始并行开发,无需等待对方的开发工作结束。与此同时,即使需求发生变更,只要接口与数据格式不变,后端开发人员就不需要修改代码,只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。

    • 完美应对复杂多变的前端需求

    • 增强代码可维护性

    应用代码将会变得整洁清晰,不论是代码阅读还是代码维护都会比以前轻松

    使用场景


     

    任何一项技术以及架构都不是适用于任何场景,前后端分离同样也是如此。虽然前后端分离架构能带来许多的好处,但前提是建立在开发团队合适的基础上的。

    1. 页面布局复杂

    2. 需要有较高的页面渲染效果

    3. 前端页面中包含复杂业务逻辑

    4. 页面需要渲染的数据量较大

    像这种重前端的应用,适合采用前后端分离架构。

    部署方案


     

    前后端分离之后,应用在部署时也需要进行前后端分离。在进行前后端分离方案选择时,需要结合项目的实际情况和用户来考虑。

    分离之前的架构

      前后端分离之前,后端架构是Nginx服务和后端的PHP服务以及前端的静态资源都是部署在同一台服务器上。当浏览器发起访问请求时,如何请求的是静态资源,Nginx直接把静态资源返回给服务器;如果请求的是页面或后端服务,则经Nginx将请求转发到后端的PHP服务器,完成响应后经Nginx返回到浏览器。

      这个方案比较简单,易于实现,而且能到达前后端解耦的目的。而且很多公司目前都是基于这种架构或者一定的变形来实现的web应用。

      但是对于页面量比较大,需要有良好SEO的应用来说,此方案缺点也较为明显。因为 Nginx只是向浏览器返回页面静态资源,而国内的搜索引擎爬虫只会抓取静态数据, 不会解析页面中的js,这使得应用得不到良好的搜索引擎支持。同时因为Nginx不会进行页面的组装渲染,需要把静态页面返回到浏览器,然后完成渲染工作,这加重了浏览器的渲染负担。

      另外,由于这种架构使得前端工程师的工作范围只局限在了浏览器一侧,导致在进行一些特殊的性能优化时,前端工程师无法独立完成,还需要后端开发人员的配合,这也一定程度上影响了双方的进度。

    分离之后的架构

      前后端分离之后,我们在原先的架构只上再单独增加了一个Node Server作为中间层,将前端资源部署到Node Server中。Node Server还实现了一层数据代理服务,负责与提供数据的后端服务进行通信。

      并且还在这个基础上增加并使用了前端机(前端机是对所有的请求进行预处理和负载均衡,然后再转发给后端机。)的Nginx服务,浏览器发起的请求经过前端机的Nginx进行分发,URL请求统一分发到Node Server,在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据,然后进行页面的组装和渲染;API请求则直接转发到后端服务器,完成响应。

    结语


     

      前后端分离并非仅仅只是前后端开发的分工,而是在开发期进行代码存放分离、前后端开发职责分离,前后端能够并行开发(前后端共同商定好数据接口的交互形式和数据格式) 独立测试(其中前端工程师再开发完成之后可以独自进行mock测试,而后端也可以使用接口测试平台进行接口自测);在运行期进行应用部署分离,前后端之间通过HTTP请求进行通讯。

      前后端分离适合在前端页面逻辑较复杂,页面渲染要求较高的重前端应用中使用。

      前后端分离的开发模式与传统模式相比,能为我们 提升开发效率、增强代码可维护性,打造一个前后端并重的精益开发 团队。

                                                                                整理总结自 前后端分离实践

  • 相关阅读:
    开发工程师的职场人生路
    10 ASP.NET Performance and Scalability Secrets(转载推荐)
    手机号码归属地查询接口大全
    参数的秘密“纠结”的压缩比
    爱情本来并不复杂,来来去去不过三个字
    假如苹果、微软、谷歌造汽车 他们的区别是什么
    tomcat修改jsessionid在cookie中的名称
    virtualBox 中 linux 系统 相关配置
    htpasswd用法
    linux 防火墙
  • 原文地址:https://www.cnblogs.com/lizhhmac/p/9222498.html
Copyright © 2011-2022 走看看