在移動(dòng)應(yīng)用已經(jīng)無(wú)縫融合到我們?nèi)粘Ｉ畹慕袢?#xff0c;我們的工作和生活幾乎時(shí)時(shí)刻刻都在和 2C(即 To Customer) 應(yīng)用打交道。比如手機(jī)支付，在線購(gòu)物，生活繳費(fèi)，天氣和交通線路查詢等等。

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

什么是企業(yè)級(jí)前端應(yīng)用？一種被前端業(yè)界公認(rèn)的定義是：

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

同 Angular 等前端開發(fā)框架相比，SAP UI5 在面向企業(yè)級(jí)用戶的前端應(yīng)用開發(fā)領(lǐng)域具有下列這幾方面的優(yōu)勢(shì)：

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

SAP UI5 也是 SAP Fiori 設(shè)計(jì)理念和設(shè)計(jì)系統(tǒng)欽點(diǎn)使用的應(yīng)用開發(fā)框架。

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

SAP UI5 最早的起源要追溯到 2008 年 11 月。來(lái)自 SAP 不同開發(fā)團(tuán)隊(duì)的幾位員工，擠進(jìn)了一間只能容納四人的小會(huì)議室，被授予一項(xiàng)秘密任務(wù)：創(chuàng)建一種新的 UI 開發(fā)技術(shù)。這個(gè)項(xiàng)目當(dāng)時(shí)的代號(hào)是 Phoneix.

這個(gè)代號(hào)對(duì)應(yīng)的鳳凰圖標(biāo)一直沿用至今，成為 SAP UI5 的 Logo，如下圖左上角所示：

這種新的 UI 開發(fā)技術(shù)，必須具備靈活、可擴(kuò)展、現(xiàn)代并且獨(dú)立于后端實(shí)現(xiàn)技術(shù)等特性。

我們不妨回憶一下，2008 年時(shí)期的 SAP 生態(tài)圈，有哪些技術(shù)棧，活躍在前端開發(fā)舞臺(tái)上？

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

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

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

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

分析這些前端技術(shù)，它們都有一個(gè)最大共同點(diǎn)：同后端系統(tǒng)具有強(qiáng)耦合關(guān)系。SAP BSP，WebClient UI，ABAP Webdynpro 開發(fā)而成的應(yīng)用，只能在 ABAP 系統(tǒng)運(yùn)行。Java Webdynpro 和 JSP 頁(yè)面，也沒法脫離 JVM 而單獨(dú)運(yùn)行。同后端系統(tǒng)的強(qiáng)耦合，給企業(yè)用戶帶來(lái)的一大挑戰(zhàn)就是 UI 技術(shù)的可升級(jí)性。例如要升級(jí) WebClient UI 和 ABAP Webdynpro 的版本以獲得更多特性的支持，就得升級(jí) ABAP Netweaver 對(duì)應(yīng)的 Software Component.

SAP WebClient UI / Webdynpro 的編程范式，使用其提供的開發(fā)框架，在應(yīng)用開發(fā)人員和瀏覽器原生支持的 API / CSS 樣式處理之間豎立了一道屏障。這道屏障是一把雙刃劍：一方面，它使得應(yīng)用開發(fā)人員能夠?qū)Ｗ⒂趹?yīng)用的業(yè)務(wù)邏輯開發(fā)，而無(wú)需花精力去考慮企業(yè)級(jí)前端應(yīng)用開發(fā)中至關(guān)重要的安全性，國(guó)際化，性能和 Accessibility 等產(chǎn)品標(biāo)準(zhǔn)該如何實(shí)現(xiàn)；另一方面，也給某些確實(shí)需要對(duì) UI 框架進(jìn)行擴(kuò)展，以充分利用現(xiàn)代瀏覽器提供最新特性的需求實(shí)現(xiàn)，帶來(lái)了一些挑戰(zhàn)。

比如 Jerry 還在 SAP 成都研究院數(shù)字創(chuàng)新空間團(tuán)隊(duì)工作時(shí)，曾經(jīng)做過(guò)一個(gè)原型開發(fā)，在 SAP CRM WebClient UI 里引入一個(gè)基于 WebGL(Web Graphics Library) 標(biāo)準(zhǔn)的第三方庫(kù)，Three.js, 來(lái)渲染一個(gè)不斷旋轉(zhuǎn)的 3D 足球效果。當(dāng)時(shí)確實(shí)費(fèi)了一些功夫，才讓這個(gè)效果在 WebClient UI 應(yīng)用里正確渲染出來(lái)。

SAP 架構(gòu)師團(tuán)隊(duì)睿智而又富有遠(yuǎn)見的架構(gòu)師們，早就意識(shí)到 2008 年當(dāng)時(shí)使用的 SAP UI 技術(shù)，存在上述一系列局限，SAP UI5 就是帶著解決這些問(wèn)題的使命而誕生于世的。

SAP UI5 正式為外界所知，是 SAP 2013 年 5 月在 Orlando SAPPHIRENOW 上發(fā)布的關(guān)于 Fiori 的通告。隨著第一批總共 25 個(gè)基于 SAP UI5 開發(fā)而成的全新 Fiori 應(yīng)用問(wèn)世，SAP UI5 接過(guò)了 SAP 前端領(lǐng)域的開發(fā)大旗。

處于萌芽發(fā)展時(shí)期的 UI5，其編碼實(shí)現(xiàn)全部出自一個(gè)成熟的 Scrum 開發(fā)團(tuán)隊(duì)之手。隨后團(tuán)隊(duì)不斷發(fā)展壯大，拆分成一個(gè) Core(核心)團(tuán)隊(duì)，和另一個(gè)負(fù)責(zé)創(chuàng)建 “sap.m” 控件的團(tuán)隊(duì)。起初 sap.m 命名空間下的控件，僅用于移動(dòng)設(shè)備，m 代表 mobile, 后來(lái)被重新定義為 UI5 的跨設(shè)備主控件庫(kù)：main control libraries across devices.

擁抱開源 - OpenUI5 的誕生

Phoenix 計(jì)劃時(shí)期，SAP UI5 的創(chuàng)始者們都是忠實(shí)的開源項(xiàng)目愛好者。項(xiàng)目啟動(dòng)伊始，就在考慮將其開源，以便能更輕松地與前端社區(qū)協(xié)作，更早地獲得用戶反饋和錯(cuò)誤報(bào)告，以及更有效地將 UI5 推廣到 SAP 開發(fā)生態(tài)圈。

2013 年 12 月 11 日，SAP 宣布，UI5 將在 Apache 2.0 開源許可下，以 OpenUI5 的形式進(jìn)行開源，也就是如今大家在 Github 上看到的這個(gè)代碼倉(cāng)庫(kù)：

2014 年 10 月，這個(gè)代碼倉(cāng)庫(kù)產(chǎn)生了第一行代碼提交。到了 2022 年 3 月，代碼提交的數(shù)量，增長(zhǎng)到了 78657.

OpenUI5 包含了 SAP UI5 框架的核心實(shí)現(xiàn)和大部分控件庫(kù)。這些核心實(shí)現(xiàn)和控件庫(kù)開發(fā)，基本上全由 SAP UI5 團(tuán)隊(duì)完成。有一小部分 SAP UI5 控件庫(kù)，由 SAP UI5 之外的其他產(chǎn)品開發(fā)團(tuán)隊(duì)負(fù)責(zé)實(shí)現(xiàn)，這些控件庫(kù)有的僅僅在某些極特殊的場(chǎng)景下使用，有的包含特殊的知識(shí)產(chǎn)權(quán)，沒有計(jì)劃在開源許可下提供，因此并未包含在 OpenUI5 之內(nèi)。

SAP UI5 的高速發(fā)展和成熟期

隨著 SAP 旗艦級(jí)產(chǎn)品 S/4HANA 將 SAP UI5 選為其前端開發(fā)技術(shù)方案，通過(guò)大量的 SAP Fiori 應(yīng)用的開發(fā)，交付和客戶使用過(guò)程中獲得的反饋，SAP UI5 進(jìn)入了高速發(fā)展時(shí)期，涌現(xiàn)了一大批圍繞 SAP UI5 的開發(fā)工具，訪問(wèn)模塊和基礎(chǔ)設(shè)施層，比如 Fiori Launchpad，SAP WebIDE，Chrome 開發(fā)者工具擴(kuò)展 UI5 Inspector，端到端測(cè)試框架 UIVeri5，以及 UI5 項(xiàng)目構(gòu)建和啟動(dòng)命令行工具 UI5 Tooling 等等。這些新的工具本身也標(biāo)志著 SAP UI5 和其社區(qū)走向成熟。

如今在 Github 上由 SAP 主導(dǎo)的開源項(xiàng)目中，多達(dá) 10% 的代碼倉(cāng)庫(kù)都和 SAP UI5 相關(guān)。

SAP UI5 不僅僅在功能和控件庫(kù)的數(shù)量上有所增加，其核心也在不斷的進(jìn)化，體現(xiàn)在核心更細(xì)粒度和更嚴(yán)格的模塊化設(shè)計(jì)，更合適的依賴聲明方式，更能發(fā)揮現(xiàn)代瀏覽器異步請(qǐng)求執(zhí)行能力的編程方式等方面。這些進(jìn)化發(fā)生在 UI5 核心，不會(huì)對(duì)已有的 SAP UI5 應(yīng)用正常運(yùn)行造成影響。

驅(qū)動(dòng) SAP UI5 進(jìn)化的另一個(gè)來(lái)源是 Fiori 設(shè)計(jì)準(zhǔn)則的不斷發(fā)展。從誕生之初的 Fiori 1.0 到最新的 3.0 版本，Fiori 始終朝著向用戶提供更 Coherent，更 Simple 和更 Delightful 的應(yīng)用而努力。Fiori 設(shè)計(jì)準(zhǔn)則本身在發(fā)展，作為實(shí)現(xiàn)該準(zhǔn)則的技術(shù)框架，SAP UI5 也不斷調(diào)整自身以達(dá)到完美實(shí)現(xiàn) Fiori 設(shè)計(jì)準(zhǔn)則的目標(biāo)。

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

在前端開發(fā)生態(tài)圈評(píng)選出的 9 大 Web Components Libraries 名單里，UI5 Web Components 始終占據(jù)一席之地。

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

關(guān)于 UI5 Web Components 的詳細(xì)介紹，請(qǐng)參考我的文章：Fiori Fundamentals和SAP UI5 Web Components.

SAP UI5 的未來(lái)

如果大家持續(xù)關(guān)注 SAP 官方社區(qū)上具有 SAP UI5 Tag 標(biāo)簽的博客，就會(huì)發(fā)現(xiàn)以下兩個(gè)方向是 SAP UI5 生態(tài)圈討論得比較多的話題：

• 繼續(xù)推進(jìn) UI5 Web Components 的發(fā)展

• 繼續(xù)完善 SAP UI5 對(duì) TypeScript 的支持

其中 SAP UI5 對(duì) TypeScript 支持的更多細(xì)節(jié)，請(qǐng)參考我的文章：SAP UI5 未來(lái)發(fā)展的趨勢(shì)之一：擁抱 TypeScript.

Evolution Never Ends.

如果大家對(duì)于 SAP UI5 將來(lái)的發(fā)展方向感興趣，可以登錄 SAP 官方的產(chǎn)品路線圖網(wǎng)站，輸入 SAP UI5 關(guān)鍵字來(lái)查閱 SAP UI5 未來(lái)即將支持的新特性。

總結(jié)

同普通的 2C 前端應(yīng)用相比，企業(yè)級(jí)前端應(yīng)用在安全性，健壯性，性能，國(guó)際化和 Accessibility 等方面具有更為嚴(yán)格的要求。本文基于筆者的實(shí)際工作經(jīng)驗(yàn)出發(fā)，列舉了傳統(tǒng)的同后端系統(tǒng)強(qiáng)耦合的企業(yè)級(jí)前端應(yīng)用開發(fā)技術(shù)的一些局限性，從而引出 SAP UI5 的設(shè)計(jì)初衷和著力解決的領(lǐng)域痛點(diǎn)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。