用React开发SAP Fiori应用

Jerry曾经写过两篇文章：

• SAP Fiori + Vue = ？ - 2018年12月18日
• 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应用。
https://github.com/SAP/ui5-we...

由于Jerry以前的文章尝试过Vue，本文就换成用React来演示。

打开UI5 Web Component for React的官网，能够看到全部可用的React Component. React开发人员能够像使用React原生Component彻底一致的方式来使用这些SAP包装过的React组件。
https://sap.github.io/ui5-web...

随便浏览一下，能发现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://github.com/wangzixi-d...

这个应用演示的效果在下面的视频里能够看到：

浏览器里一眼就能发现，这个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是一个不错的选择。

要获取更多Jerry的原创文章，请关注公众号"汪子熙":