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的原创文章，请关注公众号"汪子熙":