Jerry曾经写过两篇文章:
* [SAP Fiori + Vue = ?](SAP Fiori + Vue = ?) - 2018年12月18日
* [Fiori Fundamentals和SAP UI5 Web Components](Fiori Fundamentals和SAP UI5 Web Components) - 2019年2月19日
介绍了SAP Fiori是如何一步步走向开放的。在Fiori Fundamentals和SAP UI5 Web Component诞生之前,SAP UI5是开发SAP Fiori应用唯一可供选择的前端框架。
很显然SAP对前端领域蓬勃发展的Vue,Angular,React这三驾马车并未熟视无睹,这才有了Fiori Fundamentals和SAP UI5 Web Component的问世。
关于这两个名词的区别和联系,请参阅Jerry文首提到的两篇文章,我就不再重复了。
在差不多去年这个时候,SAP社区博客提到,SAP UI5 Web Component发布了Beta版。
那么SAP的工程师们经过了一年的努力后,SAP UI5 Web Component到底有何进展呢?我们一起来看一下。
SAP官方Github上,对UI5 Web Component的定义是:借助它,可以使用自己喜欢的前端框架来开发SAP Fiori应用。
因为Jerry之前的文章尝试过Vue,本文就换成用React来演示。
打开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上,下面只简述要点:
这个应用演示的效果在下面的视频里可以看到:
https://v.qq.com/x/page/b3062ed7nxo.html
浏览器里一眼就能发现,这个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是一个不错的选择。
相关推荐
编程知识+React开发与应用的实战技术解析,技术难点和实战经验+技术开发;编程知识+React开发与应用的实战技术解析,技术难点和实战经验+技术开发;编程知识+React开发与应用的实战技术解析,技术难点和实战经验+...
一个基于koa和react开发Web聊天应用
多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信小程序、H5、React Native 等的应用。.zip,多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信/百度/支付宝/字节...
react单页面应用react单页面应用react单页面应用
React开发实战 介绍如何成功构建日益复杂的前端应用程序与接口,深入分析React库,并详述React生态系统中的其他工具与库,从而指导你创建完整的复杂应用程序. React开发实战 主要内容 ◆ 如何创建可组合的用户...
reactk开发框架reactk开发框架reactk开发框架reactk开发框架
React开发实战 介绍如何成功构建日益复杂的前端应用程序与接口,深入分析React库,并详述React生态系统中的其他工具与库,从而指导你创建完整的复杂应用程序. React开发实战 主要内容 ◆ 如何创建可组合的用户...
《React Native跨平台移动应用开发》由浅入深、系统地介绍了使用React Native框架跨平台开发所需要用到的知识。《React Native跨平台移动应用开发》每一章都专注于阐述某一方面的知识,配合若干个原创的、精小的例程...
《React开发实战》初级入门篇, 都是实例教程,通俗易懂,学完直接上升一个等级
React Native开发的食谱应用程序
《React开发实战》
《React Native:用JavaScript开发移动应用》围绕着如何将一个完整App提交到App Store,讲解了使用React Native开发iOS应用所涉及的方方面面。首先介绍了Flexbox布局,教大家从零开始搭建一个初始应用,以此阐明...
使用React组件创建微服务应用程序
react开发浏览器推荐插件
React开发实战高清
架构师带你进行 桌面化云平台开发实战课程 基于Electron与+React构架跨平台应用开发
react-progressive-web-app一个基于React优化ProgressiveWeb应用开发