共计 2338 个字符，预计需要花费 6 分钟才能阅读完成。
在 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 为例，介绍了这两种前端开发技术双剑合璧的一个应用场景。
