在FioriFundamentals和SAPUI5WebComponents诞生之前，SAPUI5是开发SAPFiori应用的唯一前端框架。显然，SAP并没有对前端领域蓬勃发展的Vue、Angular、React三驾马车视而不见。这就是FioriFundamentals和SAPUI5WebComponent问世的原因。什么是Web组件？WebComponents是内置于浏览器中的UI元素框架。它的占用空间为0kB，目前在所有主流浏览器中都可用。Web组件通过封装内容(HTML)、表示(CSS)和行为(JS)的自定义HTML标记来扩充浏览器的标准词汇表。Web组件构建在以下Web平台API之上：自定义元素、ShadowDOM、ES模块和HTML模板。由于Web组件依赖于所有现代浏览器的Web标准支持，因此它们具有与大多数开箱即用的基于HTML的WebUI框架一起工作的优势，当然包括SAPUI5。什么是SAPUI5WebComponentsUI5WebComponentsUI5WebComponents在原生API之上添加了企业级的糖分，即支持企业级的前端应用开发。虽然开发人员可以使用VanillaJS轻松开发Web组件，但实现起来可能有点麻烦，这是某些企业级软件的标准配置。因此，UI5WebComponents增加了一些便利来简化和流线化WebComponents的开发：元数据生命周期挂钩，用于声明可用的属性、插槽和事件能够在正确的时间注册事件处理程序同步属性和属性，增强的插槽处理使用标签-用于编写渲染器的中心句柄语法一种声明性语法，可帮助开发人员使UI元素可访问、全局、可主题化和安全它们在Apache2.0许可下作为开源免费提供。现在SAPUI5WebComponent也发布了Beta版。那么经过SAP工程师一年的努力，SAPUI5WebComponent的进展如何呢？一起来看看吧。在SAP官方的Github上，UI5WebComponent的定义是：有了它，你可以使用你最喜欢的前端框架来开发SAPFiori应用。打开UI5WebComponentforReact官网，可以看到所有可用的ReactComponents。React开发人员可以以与React本机组件完全相同的方式使用这些SAP包装的React组件。随便浏览一下，你会发现SAP为React提供了丰富的Component库：选中各个框架，点击Docs，就可以看到这些Components的源代码导入到React应用中：import{BarChart}from'@ui5/webcomponents-react-charts/lib/BarChart';这与导入React的原生Component方法没有区别。这样，一个掌握了React开发技能的技术人员就可以快速使用SAP提供的这些组件开发Fiori应用，无需任何学习成本。应用程序开发人员无需考虑与用户体验相关的所有因素，所有这些都由SAPUI5Web组件处理。说了这么多，下面我们来手工创建一个HelloWorld应用。使用命令行创建基于SAP预定义模板的React应用程序。React开发的全家桶会通过这个命令自动创建，免去了开发者搭建React开发环境的负担。npxcreate-react-appmy-app--template@ui5/cra-template-webcomponents-react下一步是纯React开发。创建一个ReactComponent，只需要一行实现：将其导入到React应用程序App.js:中，然后npmstart，即可在浏览器中看到React应用程序的效果。不起眼，对吧？再看看下面这个应用，是不是很像SAPFiori？我把app的源代码放在了github上，下面我就简单概括一下要点。在浏览器中一眼就能发现，这个React页面使用了LineChart和List组件，但实际上这个React应用还演示了不同组件之间的跳转、路由、图标显示等功能，所以引入的Components远不止于此比折线图和列表。下图是所有从@ui5/webcomponents导入的组件列表：SAPUI5提供的标签，在React应用中使用LineChart标签：这个LineChart的渲染仍然是使用HTML5的原生标签canvas实现的：如果对其实现感兴趣，可以去node_modules文件夹，根据path@ui5/webcomponents-react-charts找到实现源文件，通过阅读源码学习：有了SAPUI5WebComponent，现在在Fiori应用开发领域，企业的选择会更加灵活：如果前端-员工端开发技术栈还是基于jQuery，那么可以继续使用SAPUI5；如果员工本身是熟练的React/Angular/Vue开发人员，那么SAPUI5WebComponent是一个不错的选择。总结本文首先回顾了SAPFioriFundamentals和SAPUI5WebComponents的诞生历史，然后以UI5WebComponentforReact为例介绍了这两种前端开发技术结合的使用场景。
