在 Fiori Fundamentals 和 SAP UI5 Web Component 诞生之前，SAP UI5 是开发 SAP Fiori 应用唯一可供选择的前端框架。

很显然 SAP 对前端领域蓬勃发展的 Vue，Angular，React 这三驾马车并未熟视无睹，这才有了 Fiori Fundamentals 和 SAP UI5 Web Component 的问世。

什么是 Web Components?

Web Components 是浏览器内置的 UI 元素框架。 它具有 0kB 的占用空间，并且截至今天在所有主要浏览器中都可用。 Web 组件通过封装内容 (HTML)、表示 (CSS) 和行为 (JS) 的自定义 HTML 标记来增强浏览器的标准词汇。 Web 组件构建在以下 Web 平台 API 之上：自定义元素、Shadow DOM、ES 模块和 HTML 模板。 由于 Web 组件依赖于所有现代浏览器的 Web 标准支持，它们的好处是可以与大多数开箱即用的基于 HTML 的 Web UI 框架一起工作, 当然也就包括了 SAP UI5.

什么是 SAP UI5 Web Components?

UI5 网页组件 UI5 Web Components 在原生 API 之上添加了 enterprise-flavored sugar，即对企业级前端应用开发的支持。

虽然开发人员可以使用 Vanilla JS 轻松开发 Web 组件，但某些企业级软件的标准，实现起来可能有点麻烦。 因此，UI5 Web Components 为简化和流线化 Web Components 的开发增加了一些便利：

• 用于声明可用属性、插槽和事件的元数据

• 生命周期钩子能够在正确的时间注册事件处理程序

• 同步属性和属性，增强插槽处理

• 使用以标记为中心的句柄语法来编写渲染器的声明式语法

• 帮助开发人员使 UI 元素易于访问、全球化、主题化和安全的实用程序

除此之外，UI5 Web Components 已经为企业级前端应用程序开发提供了一套全面的 UI 元素，并且它们在 Apache 2.0 许可下作为开源免费提供。

如今 SAP UI5 Web Component 也发布了 Beta 版。

那么 SAP 的工程师们经过了一年的努力后，SAP UI5 Web Component 到底有何进展呢？我们一起来看一下。

SAP 官方 Github上，对 UI5 Web Component 的定义是：借助它，可以使用自己喜欢的前端框架来开发 SAP Fiori 应用。

打开 UI5 Web Component for React 的官网，可以看到 所有可用的 React Component. React 开发人员可以像使用 React 原生 Component 完全一致的方式来使用这些 SAP 包装过的 React 组件。

随便浏览一下，能发现 SAP 提供了丰富的针对 React 使用的 Component 库：

选中每个框架，点击 Docs，就能看到在 React 应用里导入这些 Component 的源代码：

import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart';

这和导入 React 原生的 Component 方法没有区别。如此一来，一个掌握了 React 开发技能的技术人员，几乎不需要任何学习成本，就能迅速上手使用这些 SAP 提供的 Component 来开发 Fiori 应用。所有和 User Experience 相关的因素，应用开发人员都无需考虑，这一切全部由 SAP UI5 Web Component 包办了。

说了这么多，还是来动手创建一个 Hello World 应用吧。

用命令行基于 SAP 预定义的模板创建一个 react 应用。React 开发的全家桶会自动被该命令创建，给开发人员省去了各种搭建 React 开发环境的负担。

npx create-react-app my-app --template @ui5/cra-template-webcomponents-react

接下来就是纯 React 开发工作了。

创建一个只有一行实现的 React Component：

导入到 React 应用 App.js 里：

然后 npm start，浏览器里就能看到这个 React 应用的效果了。平平无奇，对吗？

那么看看下面这个应用，是不是外观很像 SAP Fiori？

我把该应用的源代码放到了 github上，下面只简述要点。

浏览器里一眼就能发现，这个 React 页面用到了 Line Chart 和 List 两个组件，但实际上这个 React 应用还演示了不同 Component 之间的跳转，路由，以及图标的显示等功能，因此导入的组件远远不止 Line Chart 和 List.

下图是从 @ui5/webcomponents 导入的全部组件列表：

以 LineChart 为例，从 @ui5/webcomponents 导入后，采用 React 的语法，和我们在 UI5 原生的 XML 视图里使用 SAP UI5 提供的标签一样的方式，在 React 应用里使用 LineChart 标签：

这个 LineChart 的渲染还是采用 HTML5 的原生标签 canvas 实现：

如果对其实现感兴趣，可以到 node_modules 文件夹下，根据路径 @ui5/webcomponents-react-charts 找到实现源文件，通过阅读源代码来学习：

有了 SAP UI5 Web Component，如今在 Fiori 应用的开发领域里，企业的选择将更加灵活：如果员工前端开发的技术栈还是基于 jQuery，那么可以继续使用 SAP UI5；如果员工本身就是熟练的 React/Angular/Vue 开发者，那么 SAP UI5 Web Component 是一个不错的选择。

总结

本文首先回顾了 SAP Fiori Fundamentals 和 SAP UI5 Web Components 诞生的历史由来，接着以 UI5 Web Component for React 为例，介绍了这两种前端开发技术双剑合璧的一个使用场景。