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的原創文章，請關注公衆號"汪子熙":