在 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 为例，介绍了这两种前端开发技术双剑合璧的一个应用场景。