hybris平台web架构模式演变:前后端分离 -买球官网平台

0顶
1踩

“前后端分离”显然已不是什么新鲜的话题,表面上看是一场架构模式的变革,但实质上是为了解决以往传统的服务端mvc设计模式的一些诟病和痛点。前后端分离带来的全新的前后端协作方式能够让专业的人做专业的事,无论前端后端都能更专注在自己擅长的方面。那么如何基于一个成熟的hybris平台进行前后端分离?接下来,我们将会逐一剖析这个演变过程。

hybris平台web层现状

众所周知,hybris平台是一套成熟的电商买球软件推荐的解决方案,当然也包括web层的定制化。由于hybris平台项目至今已经经历过许多版本,对电商的核心流程进行了不同程度上的重组与优化。对于web层,相对于核心流程来说,升级的速度和频率则显得稍微缓慢。慢慢的我们会发现,在当前前端技术突飞猛进的发展趋势下,hybris平台web层的技术体系会变的相对陈旧,比如:缺少了动静分离。因此,在这个技术体系下进行web层的二次研发,往往还面临着前后端耦合依赖的局面,导致项目进度缓慢。

hybris平台web层架构的不足

hybris平台web层基于传统的服务端mvc(model-view-controller)设计模式,传统的服务端mvc架构在为我们提供优势的同时也会带来以下不足:

  1. 对于简单的页面,严格遵循mvc,会增加结构的复杂性,并可能产生过多的更新操作,降低运行效率
  2. 视图与控制器之间过于紧密的连接。视图没有控制器的存在,其应用是很有限的,反之亦然,这样就妨碍了他们的独立重用。
  3. view的渲染通过服务端完成,最终呈现给浏览器的是带有model的视图页面,性能无法得到很好的优化
  4. 控制器会变得复杂,很多人会在controller(spring),action(struts)中写业务代码已经变得很常见,所有的操作都在控制器中,导致业务与控制器相耦合
  5. 对象间接地通过控制器耦合在一起,一个对象在控制器中查询获得,然后复制给另外一个对象,这两个对象就耦合在一起
  6. view通过服务端完成后,视图页面包含css, js等资源,这些资源需要重新请求(虽然可能已经进行了缓存)

hybris平台前后端协作的痛点

由于hybris平台基于传统的服务端mvc(model-view-controller),在这个模式下,前后端协作模式一般采用以下两种方式:

  1. 前端直接在服务端view中编写模版,这样做的问题在于,编写的过程中强依赖服务端环境。在服务端没有完成的情况下,前端无法进行完整测试
  2. 前端先编写静态原型,完成后,后端在view中套用静态原型。这样做的问题在于,服务端需要对前端代码进行浏览,以免出错

这两种协作方式都存在问题。

在模式一下,前端必须掌握一定的服务端jsp技术,并且还需要对hybris平台内部view的划分机制有一定的了解。因此,学习成本是我们第一要面对的问题。此外,视图的测试依赖服务端环境,导致测试滞后。

在模式二下,首先带来的是时间、成本的消耗,静态原型对于用户来说不是最终的产品,只是开发过程中的一个过渡品。其二,将静态原型转换到服务端view的过程中,后端开发人员需要了解前端的设计,比如:如何找到正确的切分点将一个完整的静态页面切分成若干小的片断,并应用于服务端。在比如:如何正确地使用前端的第三方库?这些问题,不同的前端技术有着不同的做法,因此当后端开发人员在套用静态原型的过程中,无形当中增加了了解,学习前端技术的成本。其三,在静态原型没有完成情况下,如果服务端开发工作已经完毕,那么前后端集成工作则处于等待状态,造成集成缓慢。

如何解决这些不足,并消除痛点呢? 这就是我们近期在使用传统技术经过搭建了几十个hybris电商运营网站之后进行的一次大胆的前后端分离的尝试,取得了很好的效果。下面,将为读者分享hybris平台web架构模式演变及并行化实践。

hybris平台web前后端分离

web架构

上图可见,我们将view、controller从传统的服务端mvc架构中迁移到客户端。客户端负责视图的渲染,交互的控制。数据的获取通过restful api接口使用json格式交互。而后端只需要负责业务逻辑,数据的存储,数据模型的定义,并为前端提供json格式的数据。

这样改变之后,页面的渲染完全从服务端分离出来,并且渲染之后的后续交互,数据都交由客户端代码完成。在这样的架构模式下,前端代码仓库与后端隔离,前端独立负责静态资源,view模板的维护和发布。

代码组织方式

前后端未分离:传统的服务端mvc架构下,前后端代码放置在同一个代码仓库中,前端开发过程中需要导入整个代码仓库,并且很难独立部署与运行。

前后端分离:前后端代码库分离,前端代码可以进行数据的本地化mock,因此前端可独立开发和测试,以及部署。而后端 代码中除了功能实现外,还有着详细的测试用例,以保证api的可用性,降低集成风险。

带来的挑战

新的web架构在给前端带来更多的便利性的同时,也同样带来了不小的挑战。比如,如何继续遵循hybris平台后端开发最佳实践,如何统一进行json数据转换等等一系列的问题,在我们开发过程中一一浮出水面。有些是在做出这种架构选择时就预见到的,有些是在具体实施中遇到的。

1.前端技术选型

既然客户端负责view,我们就需要选择一种适合的前端框架来满足要求,从而丢弃传统的hybris平台前端框架jquery. 在进行斟酌后,对于前端技术采用如下:

ecmascript react node npm typescript

其中react最为核心,它不但提供了虚拟dom机制,并且组件化的开发思想使的页面结构化合理。前端开发可以完全关注到组件的开发中,进行模板的编写、数据的绑定、事件的处理。开发过程中不会受到后端的影响,顺利完成本地化测试。

2.遵循hybris平台后端开发最佳实践

hybris平台对于每一个页面请求,都有与之对应的控制器,并且平台的web层基于spring mvc框架,利用这些特点,我们决定将每一个ootb 控制器包装成为一个完成数据交互的endpoint,从而为前端提供rest风格的api接口。与此同时,在hybris平台内部,仍然采用dto(data transfer object )作为api服务层与façade层之间的数据传输对象,平台内部的数据转换过程不需要发生任何改变,仍然采用converter/ populator机制。

3.json数据转换

正如上文提及,每一个页面请求,都有与之对应的控制器。比如:购物车页面对应cartpagecontroller,产品分类页面对应categorypagecontroller,当浏览器根据不同的页面完成pageload后,将会触发控制器中默认的get方法中,通过该方法为视图提供所需要的数据。由于在rest api层面上,我们仍然采用dto作为数据载体,可见,在这些默认的rest get方法中,将会侵入一些代码片断用来完成dto到json的转换。显而易见,如果在每一个默认的rest get方法中都加入转换代码不是一个很好的处理方式,会造成代码的过渡重复,产生坏味道。那么,我们如何从原始的代码中将数据转换的过程分离出来呢?我们采用了beforeviewhandler拦截器。

优点:

  • 拦截器可以自动拦截到需要进行数据转换的rest get 请求
  • 数据转换代码与控制器解偶,通过拦截器完成
  • 易于配置管理

4.组件中的json处理

对于可以重复使用的页面片断,hybris平台采用组件的方式进行处理。比如:global header, global footer. 在前后端分离的架构下,客户端同样负责view的渲染,那么hybris 的组件又该如何为前端提供所需要的数据呢?hybris允许为组件配置对应的控制器,当一个请求导向至组件时,对应的控制器将会自动触发。但是由于hybris对于组件控制器的管理与常规有所不同,在受置于其的约束下,我们无法使用beforeviewhandler拦截器来处理,因此,采用json-taglib为前端view提供json数据则成为一种可选方案。

提供安全机制

前后端分离的web架构中,如何解决交互过程中产生的安全性风险是需要考虑的另一个问题。

1.基于hybris平台自身的特性,通过spring form 提交的表单,自身已经加入csrf token 校验机制。那么如何在html form提交的过程中避免csrf攻击呢?

解决方式:

  • 利用hybris ootb 服务生成csrf token, 并将 token返回前端
  • 在每一次提交过程中,token会作为数据的一部分提交给后端
  • 利用hybris ootb csrf校验机制进行token的验证

2.敏感数据的加密处理

在数据传输的过程中,我们需要对敏感数据进行必要的加密处理,避免明文数据的传输,减少非正常请求的攻击。

解决方式:

  • hybris通过rsa生成公钥,私钥(公钥/私钥是基于1024 base64s 加密),并将公钥返回前端
  • 前端使用公钥以及rsa client lib进行加密,并把加密后的数据传递给hybris。此时在网络传输过程中,使用的是加密后的数据
  • hybris 使用私钥进行解密后,再使用必要的敏感数据

3.restful api的安全机制

对于restful api的调用,采用授权认证的安全机制来约束匿名与非匿名请求。比如,对于下订单流程中所暴露的api,必须是登录成功后的用户才能访问,限制匿名用户请求。

解决方式:

  • 采用注解方式,显示地声明一个rest api为require hard login

性能考虑

在前后端分离的架构模式下,前端有且仅有静态内容。view视图的渲染脱离服务端,不需要任何服务端技术进行动态化组装,因此对于前端资源可以考虑cdn加速,缓存机制,从而提高性能。

由于前端内容是完全的静态内容,在初次获取以后的大部分时间内,浏览器使用的就是本地缓存,也就是说,服务器的压力主要来自于承载数据的restful api调用。因此,合理的对象创建,以及业务逻辑的优化能够帮助我们减少性能的开销。比如:

1.减少dto对象的创建

  • 对于一个页面所需要的数据,尽量一次性提供完毕,减少dto的多次创建,使dto到json的转换只发生一次,从而减少数据转换带来的性能开销

2.拦截器最小化配置

  • 对于beforeviewhandler,删除不需要监听的请求,从而减少beforeviewhandler内部流程,提高代码性能

最后,对于电商网站来说,图片资源的管理与使用同样是性能的一个考核指标。在这里,我们对于图片资源的规划采用的方式是:将图片实体独立出hybris 电商文件系统。即hybris电商文件系统不存储任何图片实体,通过ootb media对象保存产品或者内容与图片的映射关系。真正的图片实体则被保存在其他第三方系统,例如:scene7,amazon s3。由于hybris 只保存映射关系,简单来说就是资源的url,并通过restful api将url返回给前端。那么当请求访问一个具体的图片时,前端可采用懒加载的机制,根据需要才将图片url赋予src属性,从而提高前端性能,减轻服务端负担,提高页面的加载速度。此外,缓存的合理使用同样也是提高性能的一种手段。

前后端调用流程

如上图所示(promotion detail为例),一套完整的渲染流程包含以上步骤,其中不乏一些技巧,比如:前端如何利用hybris page type属性来完成js/css文件的查找,从而避免不相关js/css文件的加载。关键伪代码参考如下:

  • 利用hybris ootb page type属性动态加载对应js/css文件
if “empty pagetype”
else
 
  • 统一的export function处理json数据以及mock数据的切换,其他组件只需import即可
  • beforeviewhandler拦截器定义与配置
  • json数据转换

结束语

前后端分离的web架构使得前后端职责更加明确。清晰的分工,可以让开发并行,减少相互依赖,提高开发效率。view的渲染来自于客户端,性能上得到进一步的提升。部署相对独立,很好地应对了复杂多变的前端需求。同时,前后端分离后,应用代码不再是前后端耦合,只有在运行期才会有调用依赖关系,易于管理与维护。最后,基于hybris平台的前后端分离的web架构模式同样易于向spa web应用转型,带来更快,更好的用户体验。

作者:杨智,现就职于奥博杰天软件有限公司,担任多个电子商务项目的买球软件推荐的解决方案架构师。曾担任未来国际软件股份有限公司多个项目的技术负责人,负责政府网站以及政务平台设计,研发。参与国家林业局多个系统集成项目。 关注电子商务应用,微服务架构以及devops。

来自:
0
1
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 这个文档是我自己平时学习开发openwrt系统的时候自己写的记录的一些东西,看的懂得需要的下载

  • 2019独角兽企业重金招聘python工程师标准>>> ...

  • 由于我当前的雇主不使用 sap hybris,因此此 docker 映像目前未维护。 由于对当前版本和文档的访问仅限于为 sap hybris parterns 工作的人员,因此我无法使该项目保持最新状态。 因此,如果您想维护这个项目,请随时...

  • 目前sap主推的电商平台,hybris_体系架构分析(一)

  • 电商平台搜索服务特点 随着电商平台的快速发展和所销售商品的数量大规模增长,从大量的商品数据中快速获取用户关注的商品,变得越来越有挑战性。优秀电商平台能够吸引客户的因素之一,就是拥有强大,友好的搜索服务...

  • 适用于sap commerce cloud的worldpay连接器sap commerce cloud的worldpay连接器是commerce店面的无缝扩展,使零售商可以通过一次集成...介绍sap商务云该扩展程序专为sap commerce cloud以及以前称为hybris的早期版本而

  • 将cxcom200500p_0-70004955.zip移至hybris-b2b-spartacus/hybris-b2b cxcom200500p_0-70004955.zip hybris-b2b-spartacus/hybris-b2b (如果要使用其他版本的sap commerce,请编辑hybris-b2b-spartacus/hybris-b2b/...

  • hybris acc typescript typescript模块加载程序,可与hybris acc无缝集成。背景这个项目是出于对使用typescript使用acc开发hybris前端的好奇心而诞生的。即使简单地添加typescript并开发acc模块即可使用默认方式(在...

  • sap hybris 6.4初学者参考文档。 该文档包括项目的解压,编译,配置,初始化。 本人在做项目例子,直接在配置文件中添加项目的引用,引起项目报错。 买球软件推荐的解决方案是注释掉项目的引用,重新添加项目引用。

  • 杂种 hybris123的做法

  • 混合工具hybris 工具和实用程序

  •  就是作为hybris所连接的数据库这一层,其中hybris支持连接mysql、oracle、sqlserver和sap自己的hana。但是因为hybris本身设计的原因(下一条详述),我们并不需要对数据库进行直接的操作。 2、item  准确的说并...

  • 使用此扩展,您可以创建将在hybris电子商务平台的更新运行系统期间自动运行的部署脚本。 它使您可以完全自动化每张票证所需的数据更改,对此更改进行早期测试并减少与这些更改相关的错误。

  • hybris.tm捆绑 用于hybris的textmate捆绑包。 应该可以在mac os上的任何版本的textmate上使用。 兼容所有主题! v0.2 / 09212015: impex的语言语法。 下载为zip文件 解压缩 双击.tmbundle文件 按照说明安装捆绑...

  • pc端: section 1 ----不知道,目前没用到 component(此component挂到page template上)----导航栏以上 footer abovebanners ----紧挨着导航栏的大图片部分 belowbanners ----预订春节机票、预订合作酒店、相约旅游...

  • 要获取更多jerry的原创文章,请关注公众号"汪子熙":

  • 为了支持其他第三方“非magento”商务平台,该项目演示了如何通过magento graphql api将诸如hybris之类的第三方商务平台与cif graphql连接器和aem cif核心组件集成。 请注意,当前集成基于magento 2.3.2的graphql ...

  • hybris(sap commerce)工具集合,用于开发,调试和服务器维护。 我每天都使用它们(大多数情况下与mysql一起使用,有时与sap cloud / azure数据库一起使用)。但是要当心:它们并不是100%无缺陷的,并且它们并不是...

  • hybris-mini-main.zip,hybris-mini-main,.gitignore,license,readme.md

global site tag (gtag.js) - google analytics