SAP UI5和微信小程式對比之我見

今天繼續由SAP成都研究院著名的菜園子小哥Wang Cong，給大家分享他作為一個SAP前端人員是如何看待SAP UI5和微信小程式的異同點的。

關於Wang Cong種菜的手藝，大家請移步到他以前的文章  SAP成都研究院非典型程式猿，菜園子小哥：當我用UI5診斷工具時我用些什麼  去觀摩，這裡不再贅述。

下面是他的正文。

---

近幾年微信小程式發展之勢如火如荼，越來越多的使用者放棄原生App，轉而投入小程式的懷抱，大有"一個微信行天下"的趨勢。

面對如此巨大的流量機遇，百度、阿里等公司也紛紛在自家的核心產品中推出小程式功能，欲與騰訊的微信在這場入口大戰中一較高下。至少在今天看來，微信小程式的生態圈依然是其中最為繁榮的。

同為"前端框架"，SAP UI5與微信小程式有著諸多異同點。這裡我們摘取其中本人覺得比較有特點的方面進行對比，看看二者相似的表象下隱含著哪些設計理念上的區別。

本文僅代表作者個人作為一個前端開發人員的個人觀點。

UI5是SAP開發的一套開源的前端框架，而微信小程式則是侷限在微信內部，表現形式類似於普通App。

雖然兩者的核心(或者說大部分功能)都是與使用者進行互動，但從架構的角度看，存在很多本質上的不同，我們可以從介面的角度窺見一二。

入口

UI5不依託任何平臺，透過UI5實現的頁面可以從多種入口進行訪問，基本上只要支援瀏覽器功能的平臺，都可以訪問UI5頁面。而微信則是微信小程式的唯一入口。

後端

UI5是一個純粹的前端框架，對於後端沒有做任何的限制，同時也沒有任何的支援。微信小程式不但允許你自由地選擇後端，而且提供了一些基礎的後端支援，在很多情況下開發者甚至無需搭建自己的伺服器，就能滿足需求。這些支援有：

(1) 資料庫： 微信小程式提供遠端的類似MongoDB的JSON資料庫支援，使用者不需要購買資料庫，也不需要任何複雜的前期配置，就能在小程式中直接對JSON資料庫進行增刪查改等操作。

(2) 儲存： 類似於上面提到的JSON資料庫，使用者可以在微信小程式中直接利用免費且免配置的遠端儲存空間來儲存檔案。

(3) 雲函式： 除了資料庫和儲存之外，微信小程式還提供了後端邏輯的支援。雲函式可以理解成一個功能有限的後端伺服器，也可以理解成一個執行在雲端的JavaScript方法。優點是方便，一鍵部署而且免費。缺點是功能有限，無法實現複雜的後端功能。

以上功能全部免費免配置，如果發現免費的配額不夠，可以申請提升配額或考慮自己搭建伺服器。

訪問限制

作為開放的框架，UI5對於外部訪問沒有做任何限制。而微信小程式則有著嚴格的稽核機制，首先要訪問的連結必須是https的安全連結，其次地址必須提交給微信進行稽核，稽核過後還需維護在小程式後臺的訪問列表當中。

如果上述步驟沒有做好，就連騰訊自己的官網都無法訪問。其實這樣做的原因也很容易理解：使用者透過微信小程式訪問的所有連結，最初的入口都是微信本身，這也是微信為了自身生態安全而做的必要控制。

但這項限制在本文發稿時為止還不是特別完善。因為雲函式尚未對訪問做限制，開發者可以使用雲函式作為路由，訪問未經稽核的連結。

從上面和下面兩張圖中我們可以看出UI5應用和微信小程式在介面方面的區別，其中虛線框內分別為UI5和微信小程式框架內所提供的功能範圍。

技術細節

一個熟悉SAP UI5的前端開發人員，上手微信小程式應該沒有什麼難度。兩者同為前端框架在設計上自然有很多相似的地方。例如：

(1) 在微信小程式中的 app.js 極其類似於UI5中的 component.js ，都代表整個應用的一個全域性例項。某些作用範圍為全域性的方法或資料都可以存於其中。

(2) 兩者在資料繫結方面,都支援靈活的表示式繫結，將更多的本應出現在controller層的邏輯向前推放到view層當中，簡化邏輯層。

(3) 兩者都支援列表渲染，例如UI5中的ListBase中的items屬性，而微信小程式中則是透過 wx:for 屬性實現同樣的功能。

(4) 兩者都支援自定義控制元件/模板，UI5有component和custom control，微信小程式有component和template。

但兩者也有很多技術上的區別，例如：

(1) 前文提到的 列表渲染 ，UI5僅支援對列表類控制元件的子控制元件進行列表渲染。而微信小程式則顯得更加靈活一些，任何一個控制元件都可以透過 wx:for 屬性進行重複渲染。例如上面例子中被重複渲染的就是image元素。

(2) 除了列表渲染，微信小程式更支援wx:if的 條件渲染 。即if條件檢測的結果為true時渲染，為false時則忽略。UI5中實現類似功能則更多是透過控制 visible 屬性來進行。

(3)  Routing的實現 。兩者都是使用棧的方式記錄跳轉的歷史，但是與UI5的"寬容"不同，微信小程式最多僅支援5層跳轉。

如使用者需要繼續向下訪問，則必須透過其他workaround實現，例如透過redirectTo將棧頂的舊頁面彈出棧，換成新頁面。

(4) 資料繫結方面。

UI5的資料繫結功能極其強大，支援各種型別的資料模型的排序和篩選，並且提供雙向繫結和單向繫結多種繫結方式。另外資料在view層和controller層的反饋也更加積極。

關於SAP UI5和Angular資料繫結的比較，可以參考Jerry這篇文章：

https://blogs.sap.com/2016/06/30/compare-data-binding-mechanism-sapui5-and-angular/

關於SAP UI5和Vue資料雙向繫結的實現區別，可以參考Jerry這篇文章：

https://blogs.sap.com/2017/06/14/two-way-data-binding-ui5-vs-vue/

相對而言微信小程式的資料繫結功能要稍弱一些。首先不提供排序和篩選功能。另外反饋也不夠積極：view層改動資料模型需要藉助觸發事件來呼叫controller層中的方法進行手動賦值；controller層在更改模型時也必須透過setData方法，才能讓改動在view層中生效。

(5) 微信小程式的底層是"巨人"微信, 因此可以藉助微信方便地呼叫很多硬體以及軟體API，例如：NFC，WIFI，藍芽，微信運動，生物認證，二維碼，登陸以及支付功能等。

(6) 縱觀兩者的控制元件庫，我們可以發現UI5可謂大而全，就連一個表格都要提供responsive table，grid table，smart table等, 目的就是為了支援尺寸各異的不同裝置以及各種業務場景。而微信小程式則極其專注在移動端的常用控制元件，輕量，簡易且統一。

理念

綜合以上的比較，我們可以大致發現UI5和微信小程式自面世起便肩負著不同的使命。

UI5是SAP為其自研的企業管理軟體前端頁面所設計的前端框架，以此來實現SAP推薦的Fiori風格的前端應用。它的出現體現了SAP對於確保未來產品擁有統一風格，友好介面和良好使用者體驗的決心。

而微信小程式雖然小，卻足以彰顯微信擴張的雄心：透過豐富的前後端支援以及簡易的上手體驗，實現生態圈的急速擴充。而入口和外部訪問的限制則是快速擴張的同時，仍然恪守的那份理智。輕量，小巧，快速，簡易，移動，一站式。微信想要對你說的是，你的生活，被我承包了。

關於SAP UI5和微信小程式，SAP成都研究院的開發人員們做過很多研究，如果您想進行更多閱讀，可以參考下面的連結：

(1) 我的同事，SAP成都研究院大衛哥Wu David的文章： SAP C4C中國本地化之微信小程式整合

(2) 以前Jerry寫的 SAP UI5框架程式碼自學教程

(3) Jerry在SAP社群上發表過的 59篇SAP UI5相關的文章合集

(4) Jerry和您聊聊Chrome開發者工具： 關於Chrome開發者工具一些搞笑的故事

(5) Jerry透過自己除錯的方式解決過的UI5的問題合集：

https://blogs.sap.com/2016/04/30/my-ui5-debugging-tips-and-experience-collection-how-to-resolve-ui5-issues-through-debugging-by-yourself/

(6) Jerry日常工作中使用Chrome開發者工具積累的一些技巧：

https://blogs.sap.com/2016/03/15/chrome-development-tool-tips-used-in-my-daily-work/

(7)  Jerry的碎碎念：SAPUI5, Angular, React和Vue

(8) Yang Joey的文章： SAP Cloud for Customer 使用SAP UI5的獨特之處

(9) 我自己的文章： 當我用UI5診斷工具時我用些什麼

(10) Jerry的文章： 在Kubernetes上執行SAP UI5應用

(11) Jerry的文章： SAP Fiori + Vue = ？

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":