在移動應用已經無縫融合到我們日常生活的今日，我們的工作和生活幾乎時時刻刻都在和 2C(即 To Customer) 應用打交道。比如手機支付，在線購物，生活繳費，天氣和交通線路查詢等等。

2C 應用的前端開發框架，最著名，最為開發人員所熟知的，就是 Angular，React 和 Vue 這三駕馬車。其實還有另一款名叫 UI5 的開發框架，知道它的開發人員可能少得多，但 UI5 實際上是被事實證明的在企業級前端應用開發領域里一款相當成功的開發框架。

什么是企業級前端應用？一種被前端業界公認的定義是：

企業級前端應用是一種可以創建大型生態系統(Large Ecosystem)的前端應用程序，由一定數量的較小應用程序和控件/開發庫組成。 企業級前端應用通常都會包含至少數百個子頁面和對話框。 所有這些前端資源由數十或數百名開發人員組成的開發團隊同時進行。 企業級前端應用在項目執行過程中，需要設計和實現明確的支持、接口、可配置性，可擴展能力以及提供逐步處理技術債務的方法。

同 Angular 等前端開發框架相比，SAP UI5 在面向企業級用戶的前端應用開發領域具有下列這幾方面的優勢：

• 長期兼容性和可維護性(long-term compatibility & maintenance)
• 豐富的開箱即用的面向企業級前端應用的控件
• 國際化(internationalization)的支持
• 應用的健壯性和安全性(robustness and security)的支持
• Accessibility
• SAP UI5 開箱即用以及周邊社區提供的諸多開發和 support 工具

SAP UI5 也是 SAP Fiori 設計理念和設計系統欽點使用的應用開發框架。

SAP UI5 起源 - 鳳凰計劃(Phoenix)

SAP UI5 最早的起源要追溯到 2008 年 11 月。來自 SAP 不同開發團隊的幾位員工，擠進了一間只能容納四人的小會議室，被授予一項秘密任務：創建一種新的 UI 開發技術。這個項目當時的代號是 Phoneix.

這個代號對應的鳳凰圖標一直沿用至今，成為 SAP UI5 的 Logo，如下圖左上角所示：

這種新的 UI 開發技術，必須具備靈活、可擴展、現代并且獨立于后端實現技術等特性。

我們不妨回憶一下，2008 年時期的 SAP 生態圈，有哪些技術棧，活躍在前端開發舞臺上？

當時 Jerry 剛剛加入 SAP 成都研究院一年多的時間，從事 SAP Business ByDesign 開發。2008 年 SAP BYD 還沒有進入 Feature Pack 2.0 的 LeanStack(精簡技術棧) 時代，仍然基于 ABAP 和 Java 雙棧并存(Dual Stack)架構，UI 開發采取 Visual Composer + Java Webdynpro 的方式。

與此同時，SAP CRM On-Premises 仍然處于新功能的持續開發階段，底層基于 SAP Business Server Page(BSP) 技術的 WebClient UI 框架，為了順應當時企業級應用從 Client/Server 往 Browser/Server 架構遷移的歷史潮流，被用來開發新的 SAP CRM 應用，以替換原本運行在 SAP GUI 中的事物碼。

WebClient UI 的孿生兄弟，ABAP Webdynpro，輔之以 FPM(Floor Plan Manager)，在 SAP SRM UI 開發領域的表現也絲毫不遜色于 WebClient UI. 如今這一對略顯"高齡"的雙子星，仍在 SAP 產品 UI 開發大家族中占據一席之地。

Jerry 目前工作的 SAP Commerce Cloud，其前身在遙遠的 2008 年稱之為 Hybris，UI 采用的是更古老的 JSP 技術。

分析這些前端技術，它們都有一個最大共同點：同后端系統具有強耦合關系。SAP BSP，WebClient UI，ABAP Webdynpro 開發而成的應用，只能在 ABAP 系統運行。Java Webdynpro 和 JSP 頁面，也沒法脫離 JVM 而單獨運行。同后端系統的強耦合，給企業用戶帶來的一大挑戰就是 UI 技術的可升級性。例如要升級 WebClient UI 和 ABAP Webdynpro 的版本以獲得更多特性的支持，就得升級 ABAP Netweaver 對應的 Software Component.

SAP WebClient UI / Webdynpro 的編程范式，使用其提供的開發框架，在應用開發人員和瀏覽器原生支持的 API / CSS 樣式處理之間豎立了一道屏障。這道屏障是一把雙刃劍：一方面，它使得應用開發人員能夠專注于應用的業務邏輯開發，而無需花精力去考慮企業級前端應用開發中至關重要的安全性，國際化，性能和 Accessibility 等產品標準該如何實現；另一方面，也給某些確實需要對 UI 框架進行擴展，以充分利用現代瀏覽器提供最新特性的需求實現，帶來了一些挑戰。

比如 Jerry 還在 SAP 成都研究院數字創新空間團隊工作時，曾經做過一個原型開發，在 SAP CRM WebClient UI 里引入一個基于 WebGL(Web Graphics Library) 標準的第三方庫，Three.js, 來渲染一個不斷旋轉的 3D 足球效果。當時確實費了一些功夫，才讓這個效果在 WebClient UI 應用里正確渲染出來。

SAP 架構師團隊睿智而又富有遠見的架構師們，早就意識到 2008 年當時使用的 SAP UI 技術，存在上述一系列局限，SAP UI5 就是帶著解決這些問題的使命而誕生于世的。

SAP UI5 正式為外界所知，是 SAP 2013 年 5 月在 Orlando SAPPHIRENOW 上發布的關于 Fiori 的通告。隨著第一批總共 25 個基于 SAP UI5 開發而成的全新 Fiori 應用問世，SAP UI5 接過了 SAP 前端領域的開發大旗。

處于萌芽發展時期的 UI5，其編碼實現全部出自一個成熟的 Scrum 開發團隊之手。隨后團隊不斷發展壯大，拆分成一個 Core(核心)團隊，和另一個負責創建 “sap.m” 控件的團隊。起初 sap.m 命名空間下的控件，僅用于移動設備，m 代表 mobile, 后來被重新定義為 UI5 的跨設備主控件庫：main control libraries across devices.

擁抱開源 - OpenUI5 的誕生

Phoenix 計劃時期，SAP UI5 的創始者們都是忠實的開源項目愛好者。項目啟動伊始，就在考慮將其開源，以便能更輕松地與前端社區協作，更早地獲得用戶反饋和錯誤報告，以及更有效地將 UI5 推廣到 SAP 開發生態圈。

2013 年 12 月 11 日，SAP 宣布，UI5 將在 Apache 2.0 開源許可下，以 OpenUI5 的形式進行開源，也就是如今大家在 Github 上看到的這個代碼倉庫：

2014 年 10 月，這個代碼倉庫產生了第一行代碼提交。到了 2022 年 3 月，代碼提交的數量，增長到了 78657.

OpenUI5 包含了 SAP UI5 框架的核心實現和大部分控件庫。這些核心實現和控件庫開發，基本上全由 SAP UI5 團隊完成。有一小部分 SAP UI5 控件庫，由 SAP UI5 之外的其他產品開發團隊負責實現，這些控件庫有的僅僅在某些極特殊的場景下使用，有的包含特殊的知識產權，沒有計劃在開源許可下提供，因此并未包含在 OpenUI5 之內。

SAP UI5 的高速發展和成熟期

隨著 SAP 旗艦級產品 S/4HANA 將 SAP UI5 選為其前端開發技術方案，通過大量的 SAP Fiori 應用的開發，交付和客戶使用過程中獲得的反饋，SAP UI5 進入了高速發展時期，涌現了一大批圍繞 SAP UI5 的開發工具，訪問模塊和基礎設施層，比如 Fiori Launchpad，SAP WebIDE，Chrome 開發者工具擴展 UI5 Inspector，端到端測試框架 UIVeri5，以及 UI5 項目構建和啟動命令行工具 UI5 Tooling 等等。這些新的工具本身也標志著 SAP UI5 和其社區走向成熟。

如今在 Github 上由 SAP 主導的開源項目中，多達 10% 的代碼倉庫都和 SAP UI5 相關。

SAP UI5 不僅僅在功能和控件庫的數量上有所增加，其核心也在不斷的進化，體現在核心更細粒度和更嚴格的模塊化設計，更合適的依賴聲明方式，更能發揮現代瀏覽器異步請求執行能力的編程方式等方面。這些進化發生在 UI5 核心，不會對已有的 SAP UI5 應用正常運行造成影響。

驅動 SAP UI5 進化的另一個來源是 Fiori 設計準則的不斷發展。從誕生之初的 Fiori 1.0 到最新的 3.0 版本，Fiori 始終朝著向用戶提供更 Coherent，更 Simple 和更 Delightful 的應用而努力。Fiori 設計準則本身在發展，作為實現該準則的技術框架，SAP UI5 也不斷調整自身以達到完美實現 Fiori 設計準則的目標。

和最初僅能通過離線壓縮包的交付方式相比，如今 OpenUI5 支持眾多的分發和交互渠道可供應用開發人員挑選：從部署在 CDN(Content Delivery Network，內容分發網絡)上的引導文件 sap-ui-core.js，到 npm registry 上的 openui5 package.

在前端開發生態圈評選出的 9 大 Web Components Libraries 名單里，UI5 Web Components 始終占據一席之地。

UI5 Web Components 是一組獨立的基于 Web Components 標準開發而成的 UI elements，這些元素將樣式和行為完全封裝在自定義 HTML 標記中，因此可以不依賴于 SAP UI5 框架而被單獨使用。某些企業用戶可能并不需要 SAP UI5 框架提供的全部功能，或者已經擁有運行在 Angular，React 或 Vue 框架之上的前端應用，但是這些用戶仍然希望在其應用里使用 UI5 控件。這種情況下，UI5 Web Components 是一種極佳的補充方案。

關于 UI5 Web Components 的詳細介紹，請參考我的文章：Fiori Fundamentals和SAP UI5 Web Components.

SAP UI5 的未來

如果大家持續關注 SAP 官方社區上具有 SAP UI5 Tag 標簽的博客，就會發現以下兩個方向是 SAP UI5 生態圈討論得比較多的話題：

• 繼續推進 UI5 Web Components 的發展

• 繼續完善 SAP UI5 對 TypeScript 的支持

其中 SAP UI5 對 TypeScript 支持的更多細節，請參考我的文章：SAP UI5 未來發展的趨勢之一：擁抱 TypeScript.

Evolution Never Ends.

如果大家對于 SAP UI5 將來的發展方向感興趣，可以登錄 SAP 官方的產品路線圖網站，輸入 SAP UI5 關鍵字來查閱 SAP UI5 未來即將支持的新特性。

總結

同普通的 2C 前端應用相比，企業級前端應用在安全性，健壯性，性能，國際化和 Accessibility 等方面具有更為嚴格的要求。本文基于筆者的實際工作經驗出發，列舉了傳統的同后端系統強耦合的企業級前端應用開發技術的一些局限性，從而引出 SAP UI5 的設計初衷和著力解決的領域痛點。

總結

以上是生活随笔為你收集整理的面向企业级前端应用的开发框架 UI5 的发展简史介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。