为什么要前后端分离

560

为什么要前后端分离

昨天半夜里突然想到了关于ajax跨域问题，突然茅塞顿开，对于前后端分离的理解更加的深入

一.概述

  • 我们为什么要进行前后端分离？在学JAVA基础时期就会遇到程序解耦方面的知识，而前后端分离正是做一个解耦的工作。
  • 我们学习后端开发的时候都是静态资源加上动态资源都会在Tomcat里面运行，但是这样会产生一个问题，那便是耦合度太高，不方便维护，这也就是为什么以前的JAVAWEB项目后端程序员基本上又当爹又当妈，前后端都得搞。
  • 我第一次接触到前端框架vue的时候就对前后端分离有很朦胧的概念，虽然知道通过ajax进行交互，json进行数据交流。在我想要部署ssm(Spring+SpringMVC+Mybatis)到服务器上的时候，我又发现了Nginx(当时以为只是反向代理)，最后在我回头继续想关于ajax的跨域问题的时候，突然就想明白了，如果是静态资源和动态资源各用不同的服务器，那肯定是不同的端口，或者是不同的域名，那便是跨域问题的出现。

谷歌之后才知道前后端分离分为HTTP服务器和应用服务器，Nginx便是HTTP服务器的典型，相对于Tomcat服务器，Nginx对于静态资源的处理要比Tomcat要快的多，更重要的是Nginx上的反向代理，对于现在微架构和分布式部署有很重要的作用，有时候Nginx还会做缓存的作用提高性能

二.术业有专攻(前后端人员分离)

前端只做前端的事情，后端只做后端的事情,大型公司需要的是专业的人才，而不是样样都会，却样样不精通

  1. 后端java工程师
  • 把精力放在java基础，设计模式，jvm原理，spring+springmvc+Mybatis原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构，弹性计算架构，微服务架构(SpringBoot,Spring cloud)，java性能优化，以及相关的项目管理等等。

后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。

  1. 前端工程师
  • 把精力放在html5，css3，jquery，angularjs，bootstrap，前端三大框架(vue,angular,react)，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多线程，模块化，面向切面编程，设计模式，浏览器兼容性，性能优化等等。

前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。

三.性能问题

  1. 越是大中型的web应用，他们越是要解耦。理论上你可以把你的数据库+应用服务+消息队列+缓存+用户上传的文件+日志+等等都扔在一台服务器上，你也不用玩什么服务治理，也不用做什么性能监控，什么报警机制等等，那就会乱成一锅粥。但是这样就好像是你把鸡蛋都放在一个篮子里，隐患非常大。如果因为一个子应用的内存不稳定导致整个服务器内存溢出而hung住，那你的整个网站就挂掉了。
  2. 正常的互联网架构，是都要拆开的，你的web服务器集群，你的应用服务器集群+文件服务器集群+数据库服务器集群+消息队列集群+缓存集群等等。
  3. jsp的劣势
    • jsp必须要在支持java的web服务器里运行（例如tomcat，jetty，resin等），无法使用nginx等（nginx据说单实例http并发高达5w，这个优势要用上），性能提不上来。
    • UI出好设计图后，前端工程师只负责将设计图切成html，需要由java工程师来将html套成jsp页面，出错率较高（因为页面中经常会出现大量的js代码），修改问题时需要双方协同开发，效率低下。
    • 动态资源和静态资源全部耦合在一起，服务器压力大，因为服务器会收到各种http请求，例如css的http请求，js的，图片的等等。一旦服务器出现状况，前后台一起玩完，用户体验极差。
    • 第一次请求jsp，必须要在web服务器中编译成servlet，第一次运行会较慢。
    • jsp内有较多标签和表达式，前端工程师在修改页面时会捉襟见肘，遇到很多痛点。
  4. 新旧开发模式

旧开发模式

graph TD
产品经历/领导/客户提出需求-->UI做出设计图
UI做出设计图-->前端工程师做html页面
前端工程师做html页面-->后端工程师将html页面套成jsp页面
后端工程师将html页面套成jsp页面-->前端返工
前端返工-->后端返工
后端返工-->二次集成
二次集成-->集成成功
集成成功-->交付

前后端强依赖，后端必须要等前端的html做好才能套jsp。如果html发生变更，就更痛了，开发效率低

新开发模式

graph TD
产品经历/领导/客户提出需求-->UI做出设计图
UI做出设计图-->前端工程师做html页面
前端工程师做html页面-->前后端约定接口&数据&参数
前后端约定接口&数据&参数-->前后端并行开发
前后端并行开发-->前后端集成
前后端集成-->前端页面调整
前端页面调整-->集成成功
集成成功-->交付

无强依赖，可前后端并行开发，如果需求变更，只要接口&参数不变，就不用两边都修改代码，开发效率高