1. 說一說SAP的UI風格
在開始正式內容之前，先閒聊幾句。SAP爲啥要推Fiori？
熟悉SAP的朋友，對於SAP GUI一定不會陌生，它是這個樣子的（如下圖）。
剛接觸SAP GUI的人，無一不吐槽SAP GUI“醜陋”的頁面風格。經常可以聽到有人調侃，能夠操作SAP GUI，是一項“專業技能”。
可以說，SAP GUI在某種程度上，也成爲了SAP系統的一個經典符號，它雖然“醜陋”，但“簡潔”，“高效”，“風格統一”。
GUI雖經典，但隨着技術的發展，特別企業用戶是全場景（anytime, anywhere）的業務需求，GUI已經不能很好地勝任這些任務，Fiori也是在這種大背景下，逐步進化成SAP的新一代UI風格，來一張Fiori的靚照（如下圖）。
第一次接觸Fiori的同學，相信都被這種“漂亮的”頁面驚豔，因爲它太不像SAP了，完全顛覆了GUI的形象。
習慣了GUI的同學，會吐槽Fiori的“蝸牛速度”，因爲和傳統的SAP GUI相比，Fiori屬於Web應用程序，在啓動時不可避免的會有資源加載、頁面渲染等步驟，這些確實是Web應用程序的通病。但瑕不掩瑜，Fiori 清爽的風格，user-friendly的操作方式，以及在不同終端的通用性，其優勢也是顯而易見的。（其實，經過性能調優後，Fiori的反應速度還是很快的。）
時代在進步，傳統的SAP ABAP發開人員不該故步自封。本篇博客中，讓我們一起看下，如果要學習SAP Fiori的開發，需要先了解哪些知識點。
2. Fiori的技術架構
這部分不囉嗦，先來一張架構圖。
Fiori應用程序的技術架構主要由三部分組成，底層的SAP HANA數據庫，中層的SAP NetWeaver平臺，以及前端的SAPUI5頁面。我們來分別說一下這三部分：
對於SAP S/4HANA而言，其底層的數據庫會是SAP HANA，它是一個列存儲的內存數據庫，只要按照HANA的開發guidance做，不“瞎搞”（一次關聯處理幾十個表），其速度是極快的。
SAP NetWeaver是Fiori應用程序的後臺，因此，其業務邏輯還是由“穩定”，“高效”，“煥發第二春”的ABAP語言完成的（例如調用標準的Accouting Interface生成財務憑證），但與傳統GUI應用程序不同的一點是，Fiori應用程序是基於CDS進行建模的。SAP提供一套完整的基於CDS的開發模型，包括annotation，BOPF，DRAFT等框架（在此，本文不做過多展開）。SAP Gateway是Netweaver上的一個組件，對於準備好的CDS業務模型，通過SAP Gateway發佈成OData service供SAPUI5前臺程序使用。
SAPUI5是SAP是基於HTML5、CSS和JavaScript的前臺開發技術，它提供了一系列的Fiori相關組件，利用SAPUI5可以構建風格統一的Fiori應用程序。對於SAPUI5的程序，其支持於不同的運行平臺，Mobile，Tablet，Desktop都不在話下。SAPUI5的技術架構如下：
可以看到，在Fiori應用的前臺，其設計模型是經典MVC，也即Model-View-Controller，因此掌握MVC的原理，也是理解Fiori的運行機制的基礎。
3. 技術基礎
瞭解了Fiori的架構，那麼，應該儲備哪些技能，才能完成Fiori應用程序的開發呢？
做過Web應用程序開發的同學都知道，HTML, CSS, Javascript是前端開發的“三件套”。正常來說，Fiori應用程序也是如此，如果你能有“三件套”的基礎是最好的。但沒有基礎的同學也不要憂傷，正如我上面介紹的，SAP提供了Fiori的一個完整框架，不寫任何一行HTML, CSS, Javascript代碼，也是能夠完成Fiori的開發的，也即通過CDS annotion完成所有的頁面描述。
必要技能：
- ABAP： 這個就不多說了，ABAP是SAP的開發人員必備技能
- CDS (Core Data Service)：CDS是建模的基礎，必須要掌握
- CDS annotations ：通過CDS的各種annotation控制Fiori的頁面行爲
- SAP Gateway：管理OData service
- Odata：Fiori最終是基於OData生成的應用程序，瞭解OData的結構，OData的annotation都是Fiori開發的基礎
開發環境:
- SAP ADT : 基於eclipse的ABAP Development Tool ，傳統的SE80無法開發CDS
- SAP Web IDE: 開發Fiori 的前臺
輔助技能:
- SAPUI5：Fiori的控件庫
- JavaScript：做前臺邏輯的調整
知道更好:
- HTML
- CSS
4. 更多資料
限於篇幅，本文簡單介紹SAP Fiori的基礎架構，其主要目的是讓想學習Fiori開發的同學形成一個整體概念，對於具體的技術細節，感興趣的同學可以持續關注本博客，後續我將繼續整理、發佈。
下面是兩個比較重要的鏈接，一個是SAPUI5的DemoKit，一個是Fiori App設計的Guidance。
- Fiori Design Guideline: https://experience.sap.com/fiori-design/
- SAPUI5 DemoKit: https://sapui5.hana.ondemand.com/sdk/#/
持續更新SAP領域優質文章，歡迎關注❤️、點贊👍、轉發📣！