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