学习目标
完成本单元后，您将能够：
- 解释使用Commerce Cloud店面参考体系结构（SFRA）的好处。
- 说明为什么参考架构为站点设计提供了蓝图。
- 列出两个SFRA技术和UX组件。
- 列出Mobile First的两个好处。
介绍
有什么比构建可以作为代码库查看和使用的网站更好的方法来显示在线店面网站的外观？这正是我们对SFRA所做的。但是，此体系结构不仅仅是代码库：它提供了站点设计的蓝图。
使用参考体系结构就是快速创新！利用行业最佳实践开发的完整核心站点功能库，可以更快地构建站点。数百种现成的功能包括购物车，结帐，主页，产品详细信息页面等。此外，快速采用Apple Pay等技术，可为购物者提供绝佳的体验。
SFRA定制模型使您可以轻松构建，维护和更新店面。它位于平台API层之外，并使用常规的模型-视图-控制器（MVC）架构。我们在Salesforce B2C Commerce Development Environment部门讨论了API和MVC架构。
开发人员可以自由定制和扩展SFRA代码库。品牌有权设计像素完美的网站，并精心打造独特的网络体验。开发人员引入新代码，与第三方提供商集成，并迭代其网站设计。结果，商家完全拥有自己的店面和基础代码库。
移动优先设计
从历史上看，大多数Web设计人员首先关注台式机，其次是移动设备。即使采用响应式设计，重点也始于台式机，以及用于移动设备的其他代码。
响应式设计可根据屏幕尺寸调整屏幕上的内容。
移动不是趋势。是现在 越来越多的人使用移动设备来做各种事情，尤其是在网上购物。手里拿着一台电脑是一件强大的事情。
移动优先设计用于最小的屏幕，然后逐步提高。这是创建响应式或自适应设计的最佳策略之一。
自适应设计会检测设备和其他功能，然后根据一组预定义的视口大小和其他特征提供适当的功能和布局。
让我们来谈谈建筑
一个参考架构可作为在线店面设计的出发点，并在网站设计和店面架构结合最佳实践。它为您提供了构建和自定义电子商务店面的蓝图。
Commerce Cloud店面参考架构（SFRA）使用JavaScript 控制器。在B2C Commerce中，控制器是处理店面请求的服务器端脚本。他们管理应用程序中的控制流，并创建模型和视图的实例以处理每个店面请求并生成适当的响应。例如，购物者单击类别菜单项或输入搜索词，这将触发呈现页面的控制器。
注意
控制器使用JavaScript和B2C Commerce脚本编写。它们必须符合CommonJS模块标准。
SFRA使将B2C Commerce交付的代码，商户自定义和第三方集成代码分割成离散的盒式磁带变得容易，从而更容易维护和更新每个盒式磁带的内容。
在B2C Commerce中，盒带中包含代码或数据。这意味着开发人员可以构建新组件，例如，愿望清单，Apple Pay和付款集成等功能，并将它们独立地插入店面。这种体系结构允许轻量级和更简洁的代码库用于连续，迭代和演进的站点设计。核心代码不可编辑，而开发人员可以在其之上自由开发功能。
UI开发最佳实践
SFRA使用流行的Bootstrap前端组件UI库。Bootstrap是一个用于使用HTML，CSS和JS开发的开源工具包。它使您可以快速构建想法原型或使用其Sass变量和mixins，响应式网格系统，大量的预构建组件以及基于jQuery构建的强大插件来构建整个应用程序。
其他须知
如果商家开始新的站点实施或重新设计现有的店面，则可以利用SFRA。商家通常每3至5年重新设计其店面，并且由于网站的重新设计可能会占用大量资源，因此商家应根据预算，范围和业务影响来权衡时间表。为了使您走上正确的道路，SFRA附带了带注释的线框。您还可以利用用户组。
B2C商业零售业务团队可以提供店面设计咨询，以帮助商家优化其现有店面或转移到新的店面。
LINK合作伙伴
B2C商务LINK技术合作伙伴计划提供了具有丰富，强大功能的世界级生态系统，供商家用来提供一流的电子商务解决方案。LINK合作伙伴致力于将其技术与B2C Commerce集成。集成后，这些技术将通过LINK Marketplace提供给全球B2C Commerce客户。
SFRA中提供了最常用的LINK墨盒-Paypal，CyberSource，Bazaarvoice（费率和评论），Avalara（税），Adyen，Experian QAS（AVS）。在评估新的站点设计或重新设计时，商人和SI实施者应考虑LINK生态系统以扩展商业体验。