Fiori Fundamentals和SAP UI5 Web Components
这周有位同事邀请我给团队讲一讲SAP技术的演进历史，因此我准备了下面几个主题来介绍。html
其中SAP的技术回顾和演进，个人思路就是从先后台两方面分别介绍。前端
我画了一张很是简单的图：vue
去年5月我写过一篇文章：SAP UI和Salesforce UI开发漫谈，简要回顾了SAPUI技术的发展，从最古老的SAP GUI绘制界面，到Webdynpro / WebUI再到如今普遍使用的Fiori UX。当时这篇文章介绍到Fiori(UI5)就嘎然而止了，现在大半年过去了，咱们继续聊聊Fiori的发展动向。git
根据Jerry从SAP社区上已经发布的信息来看，Fiori的两个发展方向，我我的归纳为：github
1. 兼容并蓄，即经过Fiori Fundamentals，让使用非UI5开发框架的前端开发人员，用其喜好的技术，也能开发出符合Fiori UX的应用。web
2. 轻装上阵，即经过SAP UI5 Web Components，既能继续提供像以前UI5控件库那些开箱即用的众多UI控件，又避免了前端应用对UI5框架的依赖。npm
咱们来分别了解一下这两个新概念。编程
Fiori Fundamentals小程序
看看SAP官网上的权威定义：微信小程序
https://experience.sap.com/news/democratizing-sap-fiori-with-fiori-fundamentals/
Jerry在上图把最关键的信息都用红色高亮出来了。重点：
1. Fiori Fundamentals在前端应用里扮演着一个轻量级展示层的角色，可配合Angular, React和Vue等前端框架一块儿使用。
2. Fiori Fundamentals不是一项新的UI技术，更不会取代UI5，而是一个CSS和HTML标签的集合，使得开发人员能使用其偏心的UI框架去开发具备Fiori UX风格的应用。
一样，Jerry去年年末写的另外一篇文章 SAP Fiori + Vue = ？，介绍的其实就是Fiori Fundamentals针对于Vue的实现。
刚刚提到的重点2，Fiori Fundamentals是一系列CSS和HTML标签页的集合，那么咱们到Jerry的这篇文章里介绍的例子去找找。
这是例子里引用的CSS：
这是SAP Fiori Fundamentals帮助文档里提到的绘制表格的标签：
在个人Vue应用里如何消费这些标签：
至于为这个标签绘制而成的表格添加事件处理机制，其方法和纯粹的Vue应用彻底一致，所以一个传统的Vue开发人员，借助Fiori Fundamentals的帮助，几乎不须要任何额外的学习就可以进行SAP Fiori应用的前台界面开发。
SAP UI5 Web Components
SAP德国的UI5开发人员Peter Muessig最近在SAP社区上发表了一篇博客：UI5 Web Components - the Beta is there，你们能够经过本文末尾的"阅读原文"来阅读他的原文。
如Peter文章题目所说，SAP最近发布了UI5 Web Components的Beta版本，并邀请广大SAP生态圈的开发人员试用并提出意见。
Peter的文章不长，可是为了方便不喜欢读英文的朋友们也能快速了解这个UI5 Web Components是个什么东东，Jerry仍是把里面一些要点用我本身的语言表述出来。下面的部分并不是Peter文章内容的简单翻译，而是Jerry阅读了以后，基于本身的理解再加上本身的扩充。你们若是对我文章的内容有质疑，欢迎留言讨论。
SAP UI5 Web Components，是SAP将以前SAP UI5控件库里的控件，按照Web Components标准规范从新实现后的产物。
相信了解SAP UI5的朋友们，看了我上面这句描述，脑子里会冒出这些问题：
1. 什么是Web Components标准？
2. SAP为何要作这个从新实现的事情？
3. 从新实现后的产物究竟是个什么东东？
关于第一个问题，直接访问Web Components的官网便可找到答案。程序猿们都懂的，org结尾的网站最喜欢定义各类几百页甚至上千页的技术规范，Web Components也不例外：
https://www.webcomponents.org/introduction
前端组件化一直是前端生态圈很火热的讨论话题之一，像前端三驾马车Angular，React和Vue都有本身的组件化实现，而webcomponents.org上定义的规范，其实就是给出了一个标准，只有知足这个标准里的实现，才能算是一个通用的组件化实现，才能被全部现代浏览器支持。
这个规范的内容也托管在github上的：
https://github.com/w3c/webcomponents
里面包含四大标准Shadow DOM，Custom Elements，HTML Templates和CSS changes，SAP UI5 Web Components的实现固然也知足这些标准。
第二个问题，SAP开发UI5 Web Components的动机。
Jerry我的的见解：给客户和Partners提供一种更灵活的使用UI5控件的方式，避免对UI5框架的依赖。
举个例子，若是咱们想使用UI5控件库里提供的button控件，就算只在XML视图里写简单的一行定义，
最后运行时的UI5框架也会执行许多很复杂的逻辑，Jerry在四年前写的UI5框架自学教程里曾详细描述过：
https://blogs.sap.com/2015/10/23/how-i-do-self-study-on-a-given-fiori-control-part-1/
而借助SAP UI5 Web Components，开发人员根本不须要导入UI5框架，就能直接使用UI5里的控件。按照Peter文章的描述，SAP UI5 Web Components能用于任何前端框架中，即下图中高亮的最后一句话。
此时天然须要回答第三个问题了。SAP UI5 Web Components究竟是个什么东东？上图传达的重点：
1. SAP UI5 Web Components并非基于UI5框架的。换句话说，和UI5框架没有任何依赖关系，能够独立使用。
2. SAP UI5 Web Components并非SAP UI5框架的接替者，而应看做后者的一种补充。
3. 将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帮助文档:
https://sap.github.io/ui5-webcomponents/playground.html
运行时，和在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等特性实现一个自定义标签的。未来Jerry或许能够邀请SAP成都研究院的一些专职作前端开发的同事来分享这里面的技术细节。
最后，SAP UI5 Web Components的使用场景是什么？
以上是照搬Peter的文字。适用场景有二：
1. 在没有使用前端框架开发而成的简单静态页面里，若是想添加一些可以提供用户交互的控件，能够考虑SAP UI5 Web Components。
2. 在已有的基于其余前端开发框架的Web应用里，若是须要一些能与用户交互的控件而又不想重复造轮子，那么能够到SAP UI5 Web Component官网上去找找。
另外一方面，SAP UI5框架仍然是SAP推荐的开发具备企业级复杂度和响应式前端应用的方案。
最后，有朋友可能会有疑问，Jerry前一篇文章 SAP Fiori + Vue = ？里介绍的fundamental-vue，里面不是也存在SAP自定义的用于Vue应用的HTML标签吗？
https://github.com/SAP/fundamental-vue
那么fundamental-vue到底算Fiori Fundamentals仍是Web Component？
一张图来回答：
关于这两个概念你们若是有疑问，请直接留言给我，或者点击“阅读原文”，跳转到SAP社区上给Peter留言，感谢阅读。
相关阅读
要获取更多Jerry的原创文章，请关注公众号"汪子熙":