`
JerryWang_SAP
  • 浏览: 264112 次
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论
阅读更多
今天继续由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的原创文章,请关注公众号"汪子熙":
 
0
0
分享到:
评论
相关资源推荐
  • 通过一个实际例子学习SAP UI5的控件绘制和渲染
  • SAPUI5 (19) - 多页面程序及简单的页面导航
  • Chrome sapui5开发调试工具 ui5框架内置工具:ctl + shift + alt + s 打开ui5 explorer窗口chrome插件: UI5 Inspector
  • SAP UI5 文档 SAP UI5 文档SAP UI5 文档SAP UI5 文档SAP UI5 文档SAP UI5 文档
  • SAP前端——使用SAPUI5来创建Web应用UI 前言对于SAP产品开发而言,功能需求的实现当之无愧, 但是前端UI展示一直被吐槽,不够友好的界面,较为繁琐的操作流程,给用户增添了很多学习和使用上的烦恼。但是自从SAPUI5诞生以来,移动显示,多元化的页面,不仅美观,更加实用便捷,下面我们来看看如何简单创建一个SAPUI5的应用。首页创建首先一个web应用程序,需要一个入口文件index.html:<!DOCTYPE HTML> <html>
  • sapui5 Fiori表格Table对不同分辨率设备的自适应responsive 例子代码: 效果:参考: https://experience.sap.com/fiori-design-web/responsive-table/
  • sap ui5教程(0)简介、环境搭建、创建项目 因为去sap公司实习原因,即将接触sap ui5框架,这里记录我对sap ui5的学习过程 1、简介 SAP UI5sap ui5sap公司推出的前端 UI框架,用js编写,有丰富的组件可以组合使用。 OpenUI5: SAP UI5的开源版本,核心框架和SAP UI5一样,但移除了一些库 模式: sap ui5采用MVC(model业务模型,view显示页面,controlle
  • SAPUI5 (12) - 对象显示组件 SAPUI5提供了几个专门用于显示数据的组件,可以让编码更加简单,显示更加漂亮
  • SAPUI5是什么?Fiori告诉我们将来UI开发用哪种技术? 最近在奥兰多举行的SAP用户大会上,SAP发布了一套外观令人印象深刻的应用 'Fiori',基于SAP新的HTML5框架(即SAPUI5)。SAPUI5(基于HTML/CSS/Javascript,在jQuery等库之上)已经做了一年多时间,但上周SAP发布的Fiori应用已经表明SAP非常认真的将SAPUI5作为以后UI开发的工具集。DJ Adams一年前在他的这篇博客内已预见到SAPU
  • SAPUI5教程——框架简介以及应用实践 前言SAPUI5SAP公司推出的一款前端UI技术框架,基于HTML5技术,开发语言为Javascript, 诞生于2011年,此款移动框架和SAP 系列产品贴合紧密,开发迅速,符合SAP系统的整体风格,SAPUI5是一款封闭框架(收费), 如果拥有SAP Netweaver License才可以免费试用,与SAPUI5相对应的还有一款开源框架被托管在github平台,大家可以去fork,学习一下。
  • SAPUI5入门到精通1---sapui5介绍 个人觉的SAPUI5前景还是不错的!!-----只写精华,不要震精,尽可能记住每一句话!打算用14遍将核心内容写完一句话概括SAPUI5----HTML5的工具包!    SAPUI5是啥,你怎么得到他!!    SAPUI5是一个工具包,可以轻松构建SAP和非SAP相关的Web应用程序。作为客户端工具,SAPUI5由CSS,HTML5和JavaScript组成,它允许您将应用程序的前端开发与任何...
  • SAPUI5入门到精通2---了解SAPUI5的结构 1.SAPUI5的关键库以及它们的设计目的      2.  兼容和不兼容的SAPUl5库3.SAPUI5中的MVC模式(数据绑定还有一个一次性的)4.知道控制器(controller)的生命周期5.下图可以看出SAPUI5常见项目需要的文件以及应用程序加载顺序sap.ui.core(命名空间本身包含所有的SAPUI5 jQuery插件(jQuery.sap.*),核心本身和属于它的所有组件,以及...
  • SAPUI5教程——查看系统安装的SAPUI5版本 前言查看SAPUI5的版本信息,将决定了你应用什么样的api在你的项目当中,那么在ECC系统当中应该如何查看,我们具体来看一下。具体步骤输入SICF,将看到如下界面:在service中输入* UI5_UI5 * 执行F8, 会看到如下图:找到UI5_UI5,右键点击Test运行,将会在浏览器中打开如下界面:此页面注明了当前版本信息。
  • SAPUI5教程——最全中文学习指南(必看) 前言技术的变革日新月异,求知的迫切与日俱增,现如今云计算,大数据,虚拟现实,无一不充斥着我们的眼帘,这一切的宗旨,旨在为凭借更高的体验,满足更多的需求,追求更高的价值,创造更多的利益。那么我们今天要讲的是SAP公司所推出的一个革新的用户体验——SAP Fiori, SAP Fiori其实是一个很大的概念,可以称之为一套系统,更可以称为一个框架,其架构理念旨在为简化传统的操作流程,提供其工作效率。
  • SAPUI5视频套餐教程 本套餐包含三套教程:SAP FIORI系列视频教程:详细的讲解了SAP FIORI开发准备,组件使用,应用部署的全过程;SAPUI5高级教程(PDFViewer示例):进阶讲解了SAPUI5第三方类库集成,自定义组件开发;SAP BUILD应用指南:详细介绍了如何使用SAP Fiori设计工具快速设计一个Fiori App,本套餐为所有课程的优惠套餐,帮助大家系统性学习SAP FIORI。教程链接地
  • sapui5 表格不同行的颜色控制
  • SAPUI5 (24) - 增删改查之查询数据 CRUD是应用程序的核心。openui5是一个前端的UI库,CRUD是通过oData的服务来完成。openui5提交基于http协议的请求给服务器,其它交给服务器端处理。oData协议是微软公司发起,比web service更轻量级的通讯协议。SAP的Neweaver Gateway 就是SAP以OData形式暴露后端业务数据的一个组件。SAPUI5提供的方便的数据绑定功能,将前端展示组件绑定到后端
  • SAPUI5 (03) - 简单控件的使用 SAPUI5 控件的基本使用方法,以及控件的两种基本关系 agrregation 和association。
  • sap ui5教程(附件)API简介 一、sap.ui.core namespace : SAPUI5的核心运行环境(包括ui5 的jquery插件,核心组件,用于control,component的基类,model、view、controller类) sap.ui.component 创建一个新的组件实例或者查找一个已经存在的组件 1、创建一个新的组件实例,该函数的参数是一个组件配置对象 var oComponen...
  • SAPUI5 (38) - OData Model 的单向绑定和双向绑定
Global site tag (gtag.js) - Google Analytics