为什么要前端分离?

  伴随着软件行业的快速发展,其所涉及到的方方面面的技术也越来越细分和专业化。从各公司的招聘信息便可见一斑,例如:前端工程师、算法工程师、java工程师等。

  除此之外,当下的Web系统开发模式跟以往已经有了很大的不同,早期的Web项目是一个封闭的项目,用户从浏览器里看到的页面直到后台数据库都是在一个项目里集成。而现在Web系统的规模越来越大,其架构也发生了变化,大型的Web系统可能会是一个分布式、开放式的系统。数据的请求可能不会直接请求数据库,而是访问的缓存服务器,这些基本都是服务端的变化。如果依旧按照之前前后端耦合度很高的项目结构来构建系统,因其后端服务的复杂度的提升必然带来了Web前端的复杂度的提升。

  B端和S端从技术体系角度而言异构性很大,不适于同一个体系,将前后端放到一起很难做到专业分工,如果项目开发过程中管控不到位,就有可能会影响到整个项目的开发质量。因此Web前端从系统架构的角度也需要更加专业的管控,管控的作用之一就是前后端进行分离,降低前端对服务端的依耐性,做到专业化分工,提高项目的质量和开发效率。

  各类用于web开发的语言都有自己的MVC框架,例如java就有Struts、SpringMVC等MVC框架。像这样的框架实际上做了太多的浏览器就可以完成的工作,例如:页面渲染。这也就限制了web前端技术的深入运用,很多的前端优化技术和提升用户体验的技术就很难派上用场。尽管MVC中的View层是想把界面开发工作专业化,让界面设计人员能专心于界面开发,但是传统的MVC框架下的View层的本质却是一个服务端技术。例如,java的web开发中的jsp,全称为Java Server Pages.其根本是一个简化的Servlet设计,它是java里动态网页的技术标准,这就说明jsp虽然看起来像html,其实它并不是真正的html,它需要被java的web容器进行解析转化为浏览器可以解析的html页面,然后通过网络传输到浏览器后,浏览器才能正确的展示这个jsp页面。我们使用它时候就是让web前端技术被服务端技术所绑架,这也就是为什么每个招聘web前端工程师的岗位都要问你是否会java,php语言的源头。随着互联网的发展,我们需要web前端更高的专业化,而不希望web前端工程师被服务端技术束缚的更多而限制了自身能力的发展,这就导致前后端分离技术的出现。

什么是前后端分离?

  所谓的前后端分离,其主要关注的重点就是页面的渲染工作。之前后端渲染好页面交给前端来显示。前后端分离后拼装html及页面渲染的事情完全交由前端来负责。后端只负责数据的处理。

如何做到前后端分离?

  前面提到服务器端抢了许多前端做的事,我们需要的不是一个服务器端的MVC框架也不是一个前端的MVC框架,我们要的是一个总体的MVC,是一个传统web项目中MVC模式的进一步演进。控制层是前端和服务端的交互边界。因此要前后端解耦就要划清控制层的边界。我们看一下控制层主要做什么工作:

  1. 控制路由,找到具体的模型层处理请求
  2. http报文信息格式转换
  3. 参与页面渲染工作

  在MVC模式里控制层作用是调度而不是写业务逻辑的地方,控制层是前端和服务端通讯的桥梁,其实控制层是参入了前端的工作任务,既然控制层不做具体的业务逻辑实现并且涉及到了页面渲染,那么将控制层归为前端的一部分是合理的。
要实现前后分离要做到以下几点:

1. 前端静态化

  前端有且仅有静态内容,只有HTML/CSS/JS. 其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装。前端内容的运行环境和引擎完全基于浏览器本身。

2.后端数据化

  后端可以用任何语言、技术和平台实现,但它们必须遵循一个原则:只提供数据,不提供任何和界面表现有关的内容。后台提供的数据可以用于任何其他客户端无论是本地化程序还是web程序、移动端程序。前后端通过后端实现符合RESTful风格的接口和交互Json数据来进行交互。

3.工程/架构分离化

  前后端分离的终极目标应该是前端和服务端是完全独立的项目,由于前台是纯静态内容,大型构架方面可以考虑使用CDN。后端的RESTful Api方面可以考虑负载均衡。而数据,业务实现等可以考虑数据库优化和分布式缓存等。


  随着前端开发技术难度的越来越高,前端工程师也成为一个独立的技术岗位。而nodejs的出现更加促进了前后端的分离,node.js是出现在前端技术和服务端技术鸿沟之上的一座桥梁,为前后端两套不同技术体系进行真正意义的解耦提供了无限的可能性。前后端的分离就是不要让前端工程师被一些不可控的外在因素所影响(例如:前后端的耦合性),最后导致前端不能专心致志做出更加好的作品。所以,前后端分离是让前后端更加专业化一条必由之路。

  前后分离以后,前后端的集成、部署、调试、服务间的相互调用都是我们要考虑的问题。

所以,问题来了:前后端分离了,然后呢?