关于sap:浅谈-Fiori-Fundamentals-和-SAP-UI5-Web-Components-的关系

2次阅读

共计 3091 个字符，预计需要花费 8 分钟才能阅读完成。

最近工作中，笔者受邀请给一个团队做了 SAP 开发技术的演进历史。我的讲座依照下列几个主题进行的介绍：

其中 SAP 的技术回顾和演进，我的思路就是从前后盾两方面别离介绍。
我画了一张非常简单的图：

依据笔者从社区上曾经公布的信息来看，Fiori 的两个倒退方向，我集体概括为：

(1) 兼容并蓄，即通过 Fiori Fundamentals，让应用非 UI5 开发框架的前端开发人员，用其青睐的技术，也能开发出合乎 Fiori UX 的利用。

(2) 轻装上阵，即通过 SAP UI5 Web Components，既能持续提供像之前 UI5 控件库那些开箱即用的泛滥 UI 控件，又防止了前端利用对 UI5 框架的依赖。

咱们来别离理解一下下面提到的这两个新概念。

看看 SAP 官网上的权威定义：

下面定义的一些关键点：

(1) Fiori Fundamentals 在前端利用里扮演着一个轻量级展示层的角色，可配合 Angular, React 和 Vue 等前端框架一起应用。

(2) Fiori Fundamentals 不是一项新的 UI 技术，更不会取代 UI5，而是一个 CSS 和 HTML 标签的汇合，使得开发人员能应用其偏爱的 UI 框架去开发具备 Fiori UX 格调的利用。

Fiori Fundamentals 是一系列 CSS 和 HTML 标签页的汇合，咱们来看一个具体的例子。

这是 Fiori Fundamentals 部署在 CDN 上的 CSS：

这是 SAP Fiori Fundamentals 帮忙文档里提到的绘制表格的标签：

在 Vue 利用里生产这些标签的形式：

至于为这个标签绘制而成的表格增加事件处理机制，其办法和纯正的 Vue 利用完全一致，因而一个传统的 Vue 开发人员，借助 Fiori Fundamentals 的帮忙，简直不须要任何额定的学习就可能进行 SAP Fiori 利用的前台界面开发。

最近在 SAP 社区上有一篇对于 Web Components 的博客：UI5 Web Components – the Beta is there：

如博客文章题目所说，SAP 最近公布了 UI5 Web Components 的 Beta 版本，并邀请广大 SAP 生态圈的开发人员试用并提出意见。

SAP UI5 Web Components，是 SAP 将之前 SAP UI5 控件库里的控件，依照 Web Components 标准规范从新实现后的产物。

置信理解 SAP UI5 的敌人们，看了我下面这句形容，脑子里会冒出这些问题：

什么是 Web Components 规范？
SAP 为什么要做这个从新实现的事件？
从新实现后的产物到底是个什么东东？

对于第一个问题，间接拜访 Web Components 的官网即可找到答案。程序猿们都懂的，org 结尾的网站最喜爱定义各种几百页甚至上千页的技术规范，Web Components 也不例外：

https://www.webcomponents.org…

前端组件化始终是前端生态圈很炽热的探讨话题之一，像前端三驾马车 Angular，React 和 Vue 都有本人的组件化实现，而 webcomponents.org 上定义的标准，其实就是给出了一个规范，只有满足这个规范里的实现，能力算是一个通用的组件化实现，能力被所有古代浏览器反对。

这个标准的内容也托管在 github 上的：

外面蕴含四大规范 Shadow DOM，Custom Elements，HTML Templates 和 CSS changes，SAP UI5 Web Components 的实现当然也满足这些规范。

第二个问题，SAP 开发 UI5 Web Components 的动机。

笔者集体的认识：给客户和 Partners 提供一种更灵便的应用 UI5 控件的形式，防止对 UI5 框架的依赖。

举个例子，如果咱们想应用 UI5 控件库里提供的 button 控件，就算只在 XML 视图里写简略的一行定义，

而借助 SAP UI5 Web Components，开发人员基本不须要导入 UI5 框架，就能间接应用 UI5 里的控件。SAP UI5 Web Components 能用于任何前端框架中，即下图中高亮的最初一句话。

此时天然须要答复第三个问题了。SAP UI5 Web Components 到底是个什么东东？上图传播的重点：

SAP UI5 Web Components 并不是基于 UI5 框架的。换句话说，和 UI5 框架没有任何依赖关系，能够独立应用。
SAP UI5 Web Components 并不是 SAP UI5 框架的接替者，而应看作后者的一种补充。
将 UI5 控件库提供的控件在 HTML 层级裸露给消费者，而非传统形式下的 API 层面裸露形式。如此一来，UI5 Web Components 能够不依赖于 UI5 框架，能间接用于其余的前端框架。

看个具体的例子:

在浏览器里关上上面的 HTML 页面，

会看到一个 UI5 按钮。点击后弹出这个按钮实例的 innerHTML 属性的值。这是一个最简略的 SAP UI5 Web Components 的 Hello World 例子。

例子里咱们应用了 SAP UI5 Web Components 自定义的标签 <ui5-button>. 对于前端利用开发人员来说，这个自定义的标签和 W3C 里的 button 标签没有任何不同，至多从生产形式上来说完全一致。

对于 UI5 Web Components 里诸如 <ui5-button> 这类自定义标签的具体阐明，能够查看 SAP 帮忙文档:

运行时，和在 UI5 框架里应用控件一样，依然有一个专门的 ButtonRenderer 负责生成按钮原生的 HTML 代码:

从运行时生成的 HTML 源代码咱们不难发现，UI5 Web Components 自定义的 HTML 标签只是起着占位符 (place holder) 的作用，真正承载运行时用户能够与之交互的理论按钮，还是通过上图 ButtonRenderer 生成的 HTML 原生 button 标签。

须要强调的是，通过上述 ButtonRenderer 生成的运行时按钮实例，依然满足应用 UI5 框架的传统形式绘制的控件一样的个性，比方传统形式下 SAP 保障的所有产品规范，像 Accessibility，Internationalization 这些，在 SAP UI5 Web Components 里依然持续反对，无需利用开发人员额定的编程实现。

本地用 npm install @ui5/webcomponents 命令装置 UI5 Web Components 之后，

就能够找出外面最简略的组件实现，Button.js, 来学习 SAP 是如何基于 Web Components 规范，采纳 ES6 反对的 mobule 和 class 等个性实现一个自定义标签的。

最初，SAP UI5 Web Components 的应用场景是什么？

实用场景有二：

在没有应用前端框架开发而成的简略动态页面里，如果想增加一些可能提供用户交互的控件，能够思考 SAP UI5 Web Components。
在已有的基于其余前端开发框架的 Web 利用里，如果须要一些能与用户交互的控件而又不想反复造轮子，那么能够到 SAP UI5 Web Component 官网上去找找。

另一方面，SAP UI5 框架依然是 SAP 举荐的开发具备企业级复杂度和响应式前端利用的计划。

最初，有敌人可能会有疑难，fundamental-vue 到底算 Fiori Fundamentals 还是 Web Component？
一张图来答复：

本文介绍了 SAP Fiori 技术演进的两个前沿方向：Fiori Fundamentals 和 SAP UI5 Web Components. 前者容许前端开发人员应用本人喜爱的框架开发出具备 Fiori UX 的利用，后者在不依赖 SAP UI5 框架的前提下，提供了大量开箱即用的控件。

正文完