技术前端大讲堂:从Web演化史看前后端分离

Posted 移动Labs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了技术前端大讲堂:从Web演化史看前后端分离相关的知识,希望对你有一定的参考价值。

前言:随着公有云产品的快速发展,产品线越来越多,功能越来越丰富。但在业务发展的同时,原有的前后端一体的开发模式与架构已经呈现出捉襟见肘的状况。为更好地服务客户,提高产品交付效率,中移软件公有云产品组进行了前后端分离工作的探索与实践。在过去的几个月,已经成功实现多个产品的前后端分离交付。在本文中,我们主要介绍为什么要做前后端分离以及如何做前后端分离。

为什么要前后端分离


前后端分离的概念已经提出了好多年,业界也有着众多成熟的解决方案。那么为什么要进行前后端分离呢?首先,我们先从WEB的演化史聊起。



Web 1.0时代


以JSP请求为例


【技术】前端大讲堂:从Web演化史看前后端分离从图中我们可以看出,JSP充当了前端htmljavascriptCSS的载体,Servlet充当了控制器和处理后端的逻辑,这种该模式非常适合小项目的开发,简单明了,调试方便。但是随着业务的复杂复杂度的不断增加,难以避免会遇到一些典型的问题:


  • 处理业务逻辑的服务越来越多,调用关系变得复杂,前端开发人员有时只想简单的修改下样式,可能需要起很多项目,效率低下。

  • JSP的可维护性变得非常之差,因为JSP可以内嵌JAVA代码,后端开发人员常常为了赶项目,将一些逻辑直接写在了JSP中。长此以往,JSP变得越来越庞大,可读性变差,维护成本增加。


Web 1.5时代


【技术】前端大讲堂:从Web演化史看前后端分离


1.0时代的弊端显而易见,因此,为了降低复杂度,涌现出了一批基于MVC的框架,例如: Struts, Spring MVC等。在这个时代,代码可维护性得到明显好转,前端开发者可以更专注的维护View层。前端可以通过模板技术(Velocity、Freemarker等),提升开发效率,同时可以杜绝在模板中写入JAVA代码,从而避免像Web1.0那样陷入职责不清、维护黑洞。但是MVC并没有解决所有问题,前后端分离的并不是那么清晰,仍然存在一定的问题,具体如下:


  • 前端为了开发,任然有可能需要配置一整套开发环境。当然,我们可以采用前端写模板,后端利用模板集成的方案来解决这个问题。虽然这一定程度上可以让后端不用关注前端代码,但是此方案带来的沟通成本必然增加,也有可能因为后端缺乏一定的前端知识导致模板使用错误,前后端职责仍然不是很清晰。

  • 模板虽然带来了方便,但由于其过于强大,导致一些业务逻辑可以通过前端实现,这依然可能导致前端灌注大量业务逻辑的现象出现。

  • 由于在MVC中,Controller担任了控制器,路由的角色,这就导致前端添加路由信息依赖后端,而事实上,路由往往是前端需要关注的事情。另外,由于各人编程习惯的差异等,往往会出现在Controller中灌注大量逻辑操作,数据库操作,或者Model的信息,这大大破坏了MVC该有的清晰。


Web 2.0时代


2005年,Ajax技术到来,使得前端掀起了新一轮的技术风潮。刚开始,前端工程师通过Ajax获取后端数据,然后操作DOM渲染页面。但是纯粹的Ajax页带来了一定的弊端,大量的异步请求操作、DOM操作,使得前端代码变得越来越复杂,维护变得相当费力。因此,前端的分层时代到来了,涌现了一批基于MVC,MVP,MVVM的前端分层框架,比较典型的有AngularJS,React,以及最近比较火的轻量级MVVM框架Vue.js。在这样的开发模式下,前后端职责清晰了,前端只要专注于前端开发,后端可以专注于业务逻辑开发,前端与后端的唯一衔接点就是API的制定与联调。

通过以上的WEB演化史我们可以看到,前后端分离带来的技术革新与优点是显而易见的,具体如下

  • 前后端职责清晰了,前后端工程师可以专注于本职工作能力的提升。

  •  前端代码的可维护性、易部署性大大提升。通过适当的代码风格管理工具与代码分层,前端代码可以得到有效的管控。另外,通过Webpack, Gulp等工具可以有效地对前端代码进行压缩打包,结合相应的自动化测试、部署工具,可以实现DevOps一体化。

  • API实现技术多样化。前后端分离后,前后端可以通过JSON等数据格式进行数据交换,从而使得后端可以选择适当的语言开发API服务。

  • 当然,前后端分离后也带来一定的缺点,最明显的就是Ajax作为异步交互,对于搜索引擎来说不是特别友好,以及常见的检验逻辑,前后端代码不能复用,需要写两套。对于AJAX带来的异步交互、SEO不友好的问题,近年来涌现了一批基于SSR的解决方案,有效的解决了此问题。


怎样做前后端分离


首先需要明确的是,前后端分离并不是一种团队必须采用的开发模式,不能为了分离而分离,而是随着业务发展,需求倒逼前后端分离模式的应用。因此,在实践前后端分离模式时,务必衡量前后端分离后给原有团队,开发效率等带来的影响。结合WEB的演化史,我们其实已经可以看出一些如何做前后端分离的方案,具体如下:

  • 前端负责控制层与UI层。

  • 后端负责业务逻辑与数据的处理。

  • 前后端通过规定好的数据格式进行交互。


目前,业内有众多的前后端分离技术解决方案,例如Google的AngularJS,Facebook的React,以及最近比较火的轻量级MVVM框架Vue.js,接下来我们对着三种解决方案做下简单的介绍。


AngularJS



AngularJS官网介绍,Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。下图为Angular官网的架构图:

【技术】前端大讲堂:从Web演化史看前后端分离


作为一个MVC框架,Angular有很多优点,大致可以概括如下:


  • AngularJS模板功能强大丰富,自带了极其丰富的angular指令。

  • AngularJS是完全可扩展的,与其他库的兼容效果很好,每一个功能可以修改或更换,以满足开发者独特的开发流程和功能的需求。

  • AngularJS是一个比较完善的前端MVC框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;

  •  AngularJS是互联网巨人谷歌开发,这也意味着他有一个坚实的基础和社区支持。


当然,AngularJS也有一定的缺点,那就是学习成本比较高。对于一个团队来说,用好AngularJS需要较长时间的积累。


React



React是Facebook出品的JavaScript类库,可用于创建Web用户交互界面。React引入了一种新的方式来处理浏览器DOM(Virtual Dom)。在React中,手动更新DOM、费力地记录每一个状态的日子一去不复返了。React使用很新颖的方式,结合Virtual Dom解决手动操作DOM的问题,开发者只需要声明地定义各个时间点的用户界面,而无需关心在数据变化时,需要更新哪一部分DOM。在任何时间点,React都能以最小的DOM修改来更新整个应用程序。 正如在其官网上所描述的一样:

【技术】前端大讲堂:从Web演化史看前后端分离

React用来构建那些数据会随时间改变的大型应用。React在解决方案上有两个主要的特点,具体如下:


  • 简单

React会根据数据的变化动态的渲染UI界面。

  • 声明式

React由于采用Virtual Dom,所以在数据改变时,React并不需要重新渲染整个DOM,减少了DOM的操作,提高页面响应速度。React支持组件构建,通过封装,使得组件代码复用、测试以及关注点分离更加容易。

概括起来,React使用了非常高效的算法,计算出虚拟页面当前版本和新版间的差异,基于这些差异对DOM进行必要的最少更新。React最小化了重绘,并且避免了不必要的DOM操作,这两点都是公认的性能瓶颈。

Vue.js


在官网上,有这么一段介绍:Vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。


概括起来,我们可以这么理解:Vue.js是一个基于 MVVM 模型的、轻量级的、以数据驱动的渐进式前端解决方案。


数据驱动


【技术】前端大讲堂:从Web演化史看前后端分离

【技术】前端大讲堂:从Web演化史看前后端分离

第一幅图展示了Vue的MVVM模型,结合第二幅图,我们可以看出Vue在ViewModel层将view和model进行双向绑定,一方面:view改变会触发viewmodel中的dom listener,由domlistener反馈到model,model改变后又会被viewmodel中的监听model的listener反馈给具体的view,通知dom改变,从而实现双向绑定。Vue的数据驱动方式更为的简单便捷,因此学习Vue的时候必须用数据驱动的思想去思考问题,而抛弃传统的直接操作DOM的方式。


组件化

【技术】前端大讲堂:从Web演化史看前后端分离

在大型的应用中,为了分工、复用和可维护性,我们不可避免地需要将应用抽象为多个相对独立的模块。在传统的开发模式中,我们只有在考虑复用时才会将某一部分做成组件;但实际上,应用类 UI 完全可以看作是全部由组件树构成的。如图所示,通过适当的切分,一个UI页面可以分为多个适当的组件,从而达到方便协同开发和复用的目的。


小结

在本文中我们介绍了WEB的演化史,以及常见的前后端分离技术解决方案。公有云产品组在经过多方技术调研与对比,以及结合当前组内的研发资源、任务紧急程度选择了Vue.js。


END

往期精选:





以上是关于技术前端大讲堂:从Web演化史看前后端分离的主要内容,如果未能解决你的问题,请参考以下文章

共享资源组前后端分离演化过程

第560期网易高级前端技术专家蔡剑飞:前后端分离实践经验分享

前后端分离方案以及技术选型

前后端分离框架 前端怎么调用后端

通过实践让你轻松学会的前后端分离

Web项目开发为何要走前后端分离模式?