用React開發SAP Fiori應用

時間 2020-02-09

標籤 react 開發 sap fiori 應用欄目 React 简体版

原文原文鏈接

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應用惟一可供選擇的前端框架。node

很顯然SAP對前端領域蓬勃發展的Vue，Angular，React這三駕馬車並未熟視無睹，這纔有了Fiori Fundamentals和SAP UI5 Web Component的問世。react

關於這兩個名詞的區別和聯繫，請參閱Jerry文首提到的兩篇文章，我就再也不重複了。git

在差很少去年這個時候，SAP社區博客提到，SAP UI5 Web Component發佈了Beta版。github

那麼SAP的工程師們通過了一年的努力後，SAP UI5 Web Component到底有何進展呢？咱們一塊兒來看一下。web

SAP官方Github上，對UI5 Web Component的定義是：藉助它，可使用本身喜歡的前端框架來開發SAP Fiori應用。
https://github.com/SAP/ui5-we...npm

由於Jerry以前的文章嘗試過Vue，本文就換成用React來演示。canvas

打開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是一個不錯的選擇。