SAP Commerce Cloud是SAP一款电商解决方案，而Storefront这个术语，指的是该解决方案的前台店铺界面。一句话概括Spartacus，它是基于现代Web开发技术和框架打造而成的一款新的SAP Commerce Cloud Storefront. 何谓现代？Spartacus 1.0版发布于2019年7月，因此相比前一代基于Accelerator技术的Storefront来说，Spartacus具有得天独厚的优势，能够采取比较成熟和现代的前端技术来开发。
Spartacus四大特性之一：单页面应用single page Application，这也是Spartacus命名的由来。单页面应用，是由一个外壳html页面和多个包含具体业务逻辑的页面片段组成。Commerce传统Storefront基于JSP实现，JSP是一种服务器端渲染技术，页面代码在Commerce服务器端完成。而单页面应用是一种富客户端技术，页面片段渲染以及页面路由放在客户端完成，这样减轻了Commerce服务器的负载。当单页面应用的界面内容发生变化时，不需要重新加载整个外壳html页面，而仅仅需要更新相关的页面片段，这样较多页面应用相比，页面之间的切换更加流畅，用户体验更好。
下图就是SAP Spartacus的shell html页面：
实现源代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="manifest" href="manifest.json" />
<meta charset="utf-8" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-title" content="Spartacus" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<link
rel="apple-touch-icon"
sizes="192x192"
href="assets/icons/icon-192x192.png"
/>
<link
href="assets/splash/iphone5_splash.png"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
rel="apple-touch-startup-image"
/>
<link
href="assets/splash/iphone6_splash.png"
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
rel="apple-touch-startup-image"
/>
<link
href="assets/splash/iphoneplus_splash.png"
media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
rel="apple-touch-startup-image"
/>
<link
href="assets/splash/iphonex_splash.png"
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
rel="apple-touch-startup-image"
/>
<link
href="assets/splash/iphonexr_splash.png"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
rel="apple-touch-startup-image"
/>
<link
href="assets/splash/iphonexsmax_splash.png"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
rel="apple-touch-startup-image"
/>
<link
href="assets/splash/ipad_splash.png"
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
rel="apple-touch-startup-image"
/>
<link
href="assets/splash/ipadpro1_splash.png"
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
rel="apple-touch-startup-image"
/>
<link
href="assets/splash/ipadpro3_splash.png"
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
rel="apple-touch-startup-image"
/>
<link
href="assets/splash/ipadpro2_splash.png"
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
rel="apple-touch-startup-image"
/>
<meta name="occ-backend-base-url" content="OCC_BACKEND_BASE_URL_VALUE" />
<meta
name="media-backend-base-url"
content="MEDIA_BACKEND_BASE_URL_VALUE"
/>
<title>Spartacus Storefront</title>
<base href="/" />
<script
id="smartedit-injector"
src="webApplicationInjector.js"
data-smartedit-allow-origin="localhost:9002"
></script>
</head>
<body>
<cx-storefront>Loading...</cx-storefront>
</body>
</html>
其中body标签的自定义标签cx-storefront, 运行时会被Spartacus Storefront库里的实现填充：
更多Jerry的原创文章，尽在："汪子熙":
网友评论