专栏首页Jerry的SAP技术分享SAP不同产品的UI开发策略概述

SAP不同产品的UI开发策略概述

今天我看了SAP Cloud for Customer UI的JavaScript代码,下面我是结合S/4 HANA和CRM,以及SAP Engagement Center,Revenue Cloud的UI开发,画的一个图。

从上图能够看出,这些UI开发可以归纳为两种方式:

(1) metadata drive development - 元数据驱动的开发模式

developer不直接和JavaScript和Html打交道,而是用SAP自己开发的工具来开发UI metadata,这些UI metadata可能以json, xml或者纯文本存储在Server上. 例如CRM的WebClient UI workbench, S/4 HANA的ABAP development studio,以及C4C的UI designer,这些都是开发metadata的工具。Runtime时,SAP自己开发的UI framework,会自动读取这些metadata,生成native的html source code. end user永远不会直接和metadata打交道,他们只能看见UI runtime翻译好的native html code.

(2) native UI development - 原生UI开发方式

这就是现在CECenter, nGom, CaaS的developer的开发方都是: 用各种通用的UI开发工具直接开发native code. 这些native code虽然也不是最后end user直接看到的code,但是已经比较接近了,经过各种前端pack工具打包build之后,生成了最后end user看到的source code.

这两种方式优缺点都很明显。

Metadata drive development的优点

(1) 对应用developer的技术要求不高,新手经过简单培训即可上手。某些工具更是傻瓜化的,托托拽拽即可把UI画出来。 通过这种UI开发工具画UI就好象流水线作业。

(2) 大量build UI的routine work已经被各种开发工具封装起来,开发复杂度已经转嫁给UI Runtime Convert engine了。这样developer用这种专门的开发工具,短时间内就能开发出look and feel一致,并且quality,performance, product standard各方面都自动被UI runtime framework所保证的应用出来。

根据我面试的经验,BAT和国内其他稍具规模的公司,都有类似的自己的UI开发工具,最次也有自己的控件库,应用developer很少直接从native html开始写。

Metadata drive development的缺点

(1) 不够灵活。某些功能如果开发工具不支持,那几乎无法通过标准的办法来做,只能想各种workaround. 当然设计得比较好的框架会为这种extensibility提供solution,比如S/4 HANA的smart template提供的breakout hook, 比如CRM WebClient UI的iterator能允许Developer直接渲染html. C4C UI是否有类似机制我还不清楚.

(2) 排错麻烦。 因为大量细节被开发工具和UI framework掩盖了,所以一旦遇到runtime behavior does not work as expected, 一般水平的developer要么求助老手,要么Google。而这些工具都是封闭的,只有SAP生态圈的人用,往往Google不出太多有用的信息。 我对这种错误也只能自己debug.

(3) 技术封闭. 外面的公司一般不用。

(4) 对于缺乏求知欲的developer来说,这种开发方式对他们技术提高没啥帮助。如果developer对自己的要求只是把UI画出来,不去了解背后的原理,那么他无论做再长的时间,最多也只是某种开发工具的熟练工而已。

Native UI development的优点

(1) 灵活。 因为是native开发了,加上现在JS提供了越来越强大的API support, 甚至能直接操作硬件。所以提这种开发方式理论上能实现一切需求。

(2) “对技术的投资有持续性”.

这是我直接引用一位新同事的原话。 因为native UI用的所有工具都是业界通用的,用的框架也都是open source的,比如现在部分team用的Angular。

(3) 相对metadata driven的开发方式,native 开发更锻炼人.

这种开发方式很多routine的工作都得developer自己去做了,quality, performance, product standard这些都要自己去动脑筋。给Developer提供了很好的锤炼技术的机会。

Native UI development的缺点

应用开发周期长,对developer水平要求高, 容易出bug.

说了这么多,下面来说说C4C的UI 渲染。

我现在看到的这个UI是咋画出来的?

前面已经说了,每个user登陆后能看到的Work center是后台一个FM算出来的。 比如算出来default workcenter是Feed, 那么UI会发一个http 请求到后台请求Feed workcenter的metadata:

请求里就有这个metadata的path: https://my500046.c4c.saphybriscloud.cn/sap/ap/ui/json?app.component=/BYD_COD/UIInfrastructure/FEED/COD_FEED_WCVIEW.WCVIEW.uiwocview&h=cf58b5003a257fc7655b7cdafd674700&g=4ff52fb8fa91325afc38eef8d6b2640e

path:

/BYD_COD/UIInfrastructure/FEED/COD_FEED_WCVIEW.WCVIEW.uiwocview 通过这个path到metadata repository里找。

UI runtime framework拿到这个metadata后,就能把控件一个个画出来。 比如我想看这个drop down list咋画出来的:

可以在ControlFactory.createControl这个function里设置断点,这是control绘制的入口:

最后你会发现drop down list的build就是在这里完成的:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用SAP WebIDE创建SAP Fiori Elements应用

    Category选择为SAP Fiori Elements,模板选择为List Report Application:

    Jerry Wang
  • 动态控制C4C UI元素的显示和隐藏

    C4C UI上UI元素的显示和隐藏可以通过Key User在Adaptation模式里通过编辑一些简单的rule去控制,诸如这种格式:

    Jerry Wang
  • SAP Cloud for Customer Extensibility的设计与实现

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • UI初学者的弯路,你走过几条?

    对于初学UI设计的人而言,可能对UI具体是做什么,或者自己是否能顺利转行胜任这样的岗位存在一定的顾虑,今天我们就来重点说说UI是做什么的,以及学UI到有哪些需要...

    宇相
  • UI设计中的软件知识

    最近挺想学学UI的,因为我们公司没有UI,所以做页面都是全靠摸索,老是被领导说没有审美[捂脸]

    彼岸舞
  • 浅谈UI与前端:现状及展望

    向来以审美自居的我自然少不了谈谈UI设计。虽说从未从事过UI相关工作,但着实接触了许多UI相关的东西,并且考虑下份工作从事设计。

    冰之角
  • 如何快速优化手游性能问题?从UGUI优化说起

    作者Feefi,加入腾讯多年,目前主要从事Unity项目UI开发及优化相关工作,曾获得国际软件设计大赛“成都创业金钥匙”奖。

    WeTest质量开放平台团队
  • 带你彻底了解Android Jetpack组件的Paging库

    初次接除 paging, 可能会一脸懵逼,感觉出来了很多 API, 不知道从哪里下手。我们先对 paging 的组成部分进行一个了解。

    用户1269200
  • express 与 express-generator

    其实express只是一个框架,那么npm install -g express 也仅仅是安装了这个框架,其作用是自己构建express项目的时候,库已经可以引...

    bear_fish
  • R基于TCGA数据画生存曲线

    常见如对于同一种癌症类型使用放疗的患者与使用化疗的患者之间的生存是否存在显著差异,从而判断使用哪种治疗方法更有利于患者的生存。

    生信交流平台

扫码关注云+社区

领取腾讯云代金券