Fiori Fundamentals和SAP UI5 Web Components
这周有位同事邀请我给团队讲一讲SAP技术的演进历史,所以我准备了下面几个主题来介绍。
其中SAP的技术回顾和演进,我的思路就是从前后台两方面分别介绍。
我画了一张非常简单的图:
去年5月我写过一篇文章:SAP UI和Salesforce UI开发漫谈,简要回顾了SAPUI技术的发展,从最古老的SAP GUI绘制界面,到Webdynpro / WebUI再到现在广泛使用的Fiori UX。当时这篇文章介绍到Fiori(UI5)就嘎然而止了,如今大半年过去了,我们继续聊聊Fiori的发展动向。
根据Jerry从SAP社区上已经发布的信息来看,Fiori的两个发展方向,我个人概括为:
1. 兼容并蓄,即通过Fiori Fundamentals,让使用非UI5开发框架的前端开发人员,用其喜爱的技术,也能开发出符合Fiori UX的应用。
2. 轻装上阵,即通过SAP UI5 Web Components,既能继续提供像之前UI5控件库那些开箱即用的众多UI控件,又避免了前端应用对UI5框架的依赖。
我们来分别了解一下这两个新概念。
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自定义的标签。对于前端应用开发人员来说,这个自定义的标签和W3C里的button标签没有任何不同,至少从消费方式上来说完全一致。
关于UI5 Web Components里诸如这类自定义标签的详细说明,可以查看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留言,感谢阅读。
相关阅读
SAP UI5和微信小程序对比之我见
当我用UI5诊断工具时我用些什么
在Kubernetes上运行SAP UI5应用(上)
在Kubernetes上运行SAP UI5应用(下)
SAP Fiori + Vue = ?
SAP Fiori应用的三种部署方式
Jerry的Fiori原创文章合集
SAP成都C4C小李探花:浅谈Fiori Design Guidelines
Jerry和您聊聊Chrome开发者工具
Jerry的UI5框架代码自学教程
Jerry的碎碎念:SAPUI5, Angular, React和Vue
SAP Cloud for Customer 使用SAP UI5的独特之处
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
Fiori Fundamentals和SAP UI5 Web Components相关推荐
- 使用SAP UI5 Web Components开发React应用
(1) 命令行 npx create-react-app my-app --template @ui5/cra-template-webcomponents-react 创建名为my-app的reac ...
- SAP UI5 web Component里的条件渲染机制
我的SAP UI5 web Component同时定义了两个图表标签,即BarChart和LineChart: 运行时效果如下: 现在我想针对这两个图表控件做一个条件显示,即点击屏幕一次,显示A图表, ...
- 如何实现SAP UI5 Web Component React控件的加载效果
假设我使用SAP UI5 Web Component的React控件, 比如柱状图和折线图: 导入useState函数,默认加载状态为false: 每次点击屏幕后,首先将Loading状态使用切换函数 ...
- SAP UI5 Web Component的图标实现
例子:我的SAP UI5 Web Component开发而成的React应用上,显示了这个加号图标: 在React Component里引入加号图标: 在此处给ShellBarItem的icon属性赋 ...
- 使用 SAP Fiori Tools 部署 SAP UI5 应用到 ABAP 服务器时遇到的各种错误和解决办法
错误1 (node:28340) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'customMiddleware ...
- 如何使用SAP UI5 Web Component for React的padding功能
导入组件@ui5/webcomponents-react-base: 然后在第17行的Text标签里给style属性附上值:spacing.sapUiContentPadding的值在运行时为padd ...
- 如何使用SAP UI5 web Component的React框架的柱状图和折线图
导入柱状图和折线图: import { BarChart, LineChart } from "@ui5/webcomponents-react-charts": 在自定义的Rea ...
- SAP UI5 Web Component里最简单的React列表控件的用法
从@ui5/webcomponents-react里导入 List,StandardListItem和ValueState: 用下列方式绘制列表(list): <List><Stan ...
- SAP UI5 Web Component的React表格控件用法
从@ui5/webcomponents-react导入表格组件AnalyticalTable: 生成表格的抬头列标签数组和行数据数组: 使用AnalyticalTable标签页,将data和colum ...
最新文章
- C++知识点20——使用C++标准库(再谈string——string的大小、容量、交换与迭代器失效)
- Tomcat8.0.11优化相关
- HDU 1561 The more, The Better
- kmd缅甸计算机学校,缅甸福星孔子课堂博睿国际学校分课堂举行2017年春节联欢会...
- ios15使用NSXMLParser解析XML
- java abstractset 继_java集合框架-AbstractSet
- java常见命名规则
- 利用DotRAS组件,实现ADSL的自动拨号断网自动化操作[转]
- C++----为什么不让用using namespace std
- EndNote X8使用总结
- 高压输电线路线夹温度监测系统装置
- 计算机网络选择公用还是家庭,如何设置打印机共享?
- 一周企业财报 | 汉高、中通、格林酒店、宜人金科、宝尊、维他奶等7家企业发布业绩...
- MTk kernel启动流程
- keras中的后端backend及其相关函数(K.prod,K.cast)
- 数三角(triangle)
- 一款逼疯妹子的撩妹神器
- python画车辆轨迹图_如何利用 Python 绘制酷炫的 车辆轨迹 — 速度时空图?三维数据用二维图像呈现...
- 对rman命令report obsolete的一点说明
- android消息发送字符串,android - 从Android客户端通过HTTP在HL7消息中发送base64字符串时遇到错误 - 堆栈内存溢出...
热门文章
- 关于用批处理写ftp上传文件
- jenkins 中 svn 插件配置
- 时间序列研(part3)--单积性
- JupyterNotebook随记(part1)--打开默认目录
- 文献学习(part14)--Structural Deep Network Embedding
- R语言观察日志(part1)--subset函数
- 《复杂》读书笔记(part1)--一些思想是由简单的思想组合而成,我称此为复杂
- Python中列表索引为的负数时,意义与R不同
- SAP UI5 应用开发教程之三十五 - 如何把本地开发的 SAP UI5 应用部署到 ABAP 服务器上试读版
- SAP Spartacus 4.0 源代码模式下开启 SSR,为什么会从本地去加载 all.css?