今天繼續由SAP成都研究院著名的菜園子小哥Wang Cong，給大家分享他作為一個SAP前端人員是如何看待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 = ？