本周有同事邀请我给团队讲讲SAP技术的演进史，所以我准备了以下话题来介绍。其中SAP的技术回顾和演进，我的想法是从前到后介绍。画了一个很简单的图：去年5月写了一篇文章：浅谈SAPUI和SalesforceUI开发，简单回顾了SAPUI技术的发展，从最古老的SAPGUI绘图界面到Webdynpro/WebUI再到FioriUX的广泛应用直到现在。至此，本文对Fiori（UI5）的介绍戛然而止。半年多过去了，我们继续说说Fiori的发展趋势。根据Jerry在SAP社区发布的信息，我个人总结Fiori的两个发展方向如下：1.兼容性，即通过FioriFundamentals，使用非UI5开发框架的前端开发者可以使用自己喜欢的技术，也可以开发符合FioriUX的应用。2、轻装上阵，即通过SAPUI5WebComponents，不仅可以像之前的UI5控件库一样继续提供很多开箱即用的UI控件，还可以避免前端应用对UI5框架。下面我们分别来看一下这两个新概念。FioriFundamentals看看SAP官网的权威定义：https://experience.sap.com/ne...Jerry在上图中用红色标出了最关键的信息。要点：1.FioriFundamentals在前端应用中扮演着轻量级表现层的角色，可以和Angular、React、Vue等前端框架一起使用。2.FioriFundamentals不是一项新的UI技术，也不会取代UI5，而是CSS和HTML标签的集合，使开发者能够使用他们喜欢的UI框架来开发具有FioriUX风格的应用程序。同样，Jerry去年年底写的另一篇文章SAPFiori+Vue=?，介绍其实就是FioriFundamentalsforVue的实现。刚才提到的第2点，FioriFundamentals是CSS和HTML标签页的合集，那我们就去看Jerry文章中介绍的例子吧。ThisistheexamplereferencedCSS:Thisisthetagfordrawingtables在SAPFioriFundamentals帮助文档中提到：如何在我的Vue应用程序中使用这些标签：关于为这个标签绘制的表格添加事件处理机制，其方法与纯Vue应用完全一样，所以传统的Vue开发者，在FioriFundamentals的帮助下，几乎不需要额外学习就可以开发出SAPFiori应用的前端界面。SAPUI5WebComponents来自SAP德国的UI5开发人员PeterMuessig最近在SAP社区上发布了一篇博客：UI5WebComponents-Beta就在那里。大家可以通过文末“阅读原文”阅读他的原文。如Peter文章标题所述，SAP近期发布了UI5WebComponents的Beta版，并邀请了SAP生态圈的开发者试用并发表意见。Peter的文章不长，但是为了让不喜欢看英文的朋友更容易快速理解这个UI5WebComponents是什么，Jerry还是用自己的语言表达了里面的一些重点。下面的部分不是对Peter文章内容的简单翻译，而是Jerry阅读后根据自己的理解进行的扩展。如果大家对我文章的内容有什么疑问，欢迎留言讨论。SAPUI5WebComponents是SAP根据WebComponents标准规范，将之前SAPUI5控件库中的控件重新实现的产物。相信了解SAPUI5的朋友在看了我上面的描述后，脑海中会有这些疑问：1、什么是WebComponents标准？2.SAP为什么要重新实施？3、重新实施后的产品是什么？关于第一个问题，直接访问WebComponents官网即可找到答案。程序员都知道，以org结尾的网站喜欢定义各种技术规范，动辄上百页甚至上千页，WebComponents也不例外：https://www.webcomponents.org...前端组件化一直是一个前端生态中最热门的讨论话题，像前端三驾马车Angular、React、Vue都有自己的组件实现，而webcomponents.org上定义的规范实际上给出了一个标准，只有满足这个standard只有其中的实现，才算是通用的组件化实现，可以被所有现代浏览器所支持。这个规范的内容也托管在github上：https://github.com/w3c/webcom...其中包含四大标准ShadowDOM、CustomElements、HTMLTemplates和CSSchanges，当然还有SAP的实现UI5WebComponents满足这些标准。第二个问题是SAP开发UI5WebComponents的动机。Jerry个人观点：为客户和合作伙伴提供更灵活的UI5控件使用方式，避免对UI5框架的依赖。比如我们要使用UI5控件库中提供的按钮控件，即使我们只在XML视图中写一行简单的定义，UI5框架在运行时也会执行很多非常复杂的逻辑.Jerry四年前写的UI5框架自学教程中有详细介绍：https://blogs.sap.com/2015/10...借助SAPUI5WebComponents，开发者不用完全不需要导入UI5框架，可以直接使用UI5控件。根据Peter文章的描述，SAPUI5WebComponents可以用在任何前端框架中，也就是下图中高亮显示的最后一句话。此时，当然需要回答第三个问题。SAPUI5Web组件到底是什么？上图传达的重点：1.SAPUI5WebComponents并不是基于UI5框架。也就是说，它与UI5框架没有任何依赖关系，可以独立使用。2.SAPUI5WebComponents并不是SAPUI5框架的继承者，而应该被看作是对后者的补充。3、UI5控件库提供的控件在HTML层面暴露给消费者，而不是传统方式的API层面暴露方式。这样UI5WebComponents就可以直接在其他前端框架中使用，而不需要依赖于UI5框架。我们来看一个具体的例子：在浏览器中打开如下HTML页面，你会看到一个UI5按钮。单击时弹出的按钮实例的innerHTML属性值。这是SAPUI5Web组件的最简单的HelloWorld示例。在示例中，我们使用了SAPUI5WebComponents的自定义标签
