概述
目前SAPUI5 SDK 提供了兩種方式來開發一個SAPUI5 App。一種方式是傳統的SAPUI5開發方式，一種是利用SAP Fiori Elements通過模板快速構建應用的方式。
本文簡單介紹這兩種方式如何實現，並進行對比，使讀者更清楚這兩種方式的優缺點以及適合的開發場景。
SAPUI5 SDK的官方網站在這里。我采用的開發工具是SAP Web IDE。
簡介
SAPUI5 freestyle 就是SAPUI5 提供的最普通的最基本的開發方式，之所以給它起名字叫freestyle，就是為了區別於SAP Fiori Elements的開發方式。
freestyle方式的開發，前端由開發人員使用SAPUI5 API提供的控件自行編寫所有頁面View和前端邏輯Controller。自行通過OData Model進行數據綁定。自行通過編碼的方式靈活的與后端進行交互。后端可采用SAP Gateway暴露Odata Service，在Runtime Artifacts中編寫業務邏輯。
Fiori Elements方式的開發，前端只能選擇SAP提供的Template模板生成特定樣式的幾種頁面（模板數量在持續增加以支持更多樣的業務）。這些頁面基本滿足SAP 自有的各種業務的需求。如果頁面有特殊需求超出了模板提供的范圍，可以利用template暴露的接口對模板進行擴展。后端一般采用CDS View自動生成Odata Service。並且通過CDS View生成的BOPF來實現業務邏輯。
不過前后端采用的技術並不是綁定的。freestyle的方式同樣可以訪問CDS View生成的Odata Service，只是不能利用BOPF的一些特性（目前來說）。Fiori Elements一樣可以綁定到普通的SAP Gateway發布的Odata Service，但是要自己寫OData Annotation來綁定數據和UI控件。
SAPUI5 freestyle App
詳細的基於freestyle開發的基礎教程在這里。
freestyle的開發，前后端邏輯分的比較清楚，基本無耦合。前端是典型的MVC框架。我們這里重點關注前端的實現。前端實現主要包括View，Controller和Model的實現。
基本步驟
1. 創建project。
2. 項目結構如下。
3. 項目的配置主要在manifest.json文件，組件的配置（model，router之類）在Component.js文件。
4. 在View中需要注意幾點：配置controller控制頁面邏輯，引入需要用到的lib的命名空間，使用model進行數據展示，注冊事件觸發controller邏輯。
5. Controller中，采用AMD的方式進行模塊定義，並且注意利用onInit()，onExit()等7個基本方法，注意利用console.log()debug。
6. 前端可以自己mock數據，構建JSONModel進行測試，也可以配置OData數據源，通過OData JSONModel與后端進行數據交互。
7. 在SAP Gateway server上，使用T-code SEGW 進入SAP Gateway Service Builder界面，構建后端服務。關於后端OData Service的構建本文不做討論。
8. 一個freestyle的project最簡單也需要以上的操作。
SAP Fiori Elements
詳細的基於Fiori Elements開發的基礎教程在這里和這里（這個鏈接可能需要SAP內部員工權限）。
基於Fiori Elements的開發，前后端概念比較模糊，前端是模板化的，而模板的渲染需要很多后端注解的支持，前后端耦合較高，且對CDS View有一定要求。如果不使用CDS View和注解，就需要使用OData注解，我個人並不推薦這種方式。
我花了一個粗淺的個人理解架構圖。
基本步驟
1. 創建CDS View。CDS View中既要包含你要展示的數據，也要包含這些數據關於UI的注解。這些注解將告訴UI Template的組件如何展示你的數據。關於UI的注解推薦采用annotation extension的方式實現。
@ODate.publish: true注解將自動生成OData Service。
2. 創建project。
這里的project類型選擇SAP Fiori Elements。目前提供了五種，基本SAP的界面類型都包含了，還可以寫自己的擴展。
創建project的時候需要選用第一步中發布的OData Service作為數據源。
3. 創建好的project就可以直接訪問了，Fiori Elements會自動根據你CDS View中的UI注解去渲染和展示數據。
項目的目錄結構如下。
4. 可以通過在本地覆蓋external Annotations的方式來overwirte CDS View的UI注解。注意這里注解都已經轉化成了OData Annotation。
5. 如有需要，可以增加自己的擴展。但是只能是在template暴露的API范圍內。在manifest.json中配置擴展信息。
6. 一個Fiori Elements的project，最復雜的部分就是CDS View的實現，而前端只需要選擇合適的Template，連接到數據源就好了。如果沒有自己的樣式調整和擴展，基本不需要任何代碼工作。
關於Smart Control
Smart Control是一些能夠根據注解自動生成完成很多工作的組件，比如用Smart Field根據注解能自動生成value help，Smart Filter Bar + Smart Table生成的帶有Filter Bar的Data Table
能省去很多配置和編碼工作就能展示后端數據，完成search，filter，sort等很多功能。使用SAP Fiori Elements的限制在於，Templates只有五種，並且里邊的組件都是封裝好的，我們能做的擴展也很有限。
如果在freestyle的project中，使用各種Smart Control控件配合注解，我們能享受到一些UI注解帶來的方便，類似於Fiori Elements的局部快速構建。但是不知道出於何種原因，SAP不再推薦使用Smart Control，
雖然我們依然能使用，但是在SAP的一些文檔中已經把Smart Control的使用方法部分刪除了。
總結
這兩種開發方式各有優缺點。
freestyle的方式，是典型的MVC架構，開發既需要懂JavaScript的前端工程師，也需要懂ABAP的后端工程師。
優點：
- 靈活，可配置
- 基於SAPUI5的強大組件庫，基本能滿足所有UI需求
- MVC架構，前后端分工明確，可並行開發
缺點：
- 同時需要前端和后端開發人員
- SAPUI5對於沒接觸過JavaScript的Abap開發人員來說，學習成本高
- 開發周期長
- 測試復雜
SAP Fiori Elements的方式，是SAP為了讓ABAP開發人員能快速構建Fiori應用而開發的一種方式。
優點：
- 開發速度快且易於維護
- 在不同developer之間交接容易
- 前端幾乎無代碼和測試工作
- 測試簡單。
缺點：
- 靈活性差
- 只能支持特定模板樣式，擴展性差
- 對復雜的增刪改支持較差
如果你開發的App比較簡單，有SAP Fiori Elements對應的模板，並且項目上沒有熟悉JavaScript的工程師，那么SAP Fiori ELements無疑是一個好的選擇。
如果你要開發一個UI復雜，業務邏輯和UI交互邏輯都需要大量定制化的App，那么還是選擇freestyle的更為保險。
總體來說，SAP公司的風格是喜歡把所有的東西都封裝進ABAP的開發范圍。不管是Webdynpro也好，SAP Fiori Elements也好，SAP都是希望工程師能在ABAP范圍內就完成工作，只關注ABAP技術和業務邏輯即可。
這對ABAP工程師來說是一件好事。但是請注意，最好在項目一開始就對所有的頁面有一個大概了解，並確定是否能采用SAP Fiori ELements，避免采用了Fiori Elements進行到一半突然發現有很多不支持的界面，
不得不推倒使用freestyle重來的情況。
本文為欣欣念念原創並首發於博客園，轉載請注明出處。