用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-webcomponents

因為Jerry之前的文章嘗試過Vue，本文就換成用React來示範。

打開UI5 Web Component for React的官網，可以看到所有可用的React Component. React開發人員可以像使用React原生Component完全一緻的方式來使用這些SAP包裝過的React元件。

https://sap.github.io/ui5-webcomponents-react/?path=/story/welcome-getting-started--page

随便浏覽一下，能發現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-diablo/ui5-for-react

這個應用示範的效果在下面的視訊裡可以看到：

浏覽器裡一眼就能發現，這個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是一個不錯的選擇。

本文來自雲栖社群合作夥伴“汪子熙”，了解相關資訊可以關注微信公衆号"汪子熙"。