今天我看了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就是在这里完成的：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

SAP不同产品的UI开发策略概述相关推荐

谈谈 SAP 产品 UI 开发中的组件概念
这是 Jerry 2021 年的第 54 篇文章,也是汪子熙公众号总共第 331 篇原创文章. 任何企业级软件的前端开发,都离不开组件(Component)这个概念.撇开具体的 UI 开发技术不谈,所 ...
SAP CRM WebClient UI和Hybris backoffice UI开发的相同点
CRM WebClient和Hybris backoffice的UI开发都不需要开发人员手写原生的html代码. CRM WebClient UI 在CRM WebUI workbench里,开发人员 ...
Cover V2将启用两条产品线本周开始进行V2 UI开发
2月24日,DeFi保险协议Cover Protocol官方公布V2产品计划.根据该计划,Cover V2将启用两条产品线:1.点对点保险市场,与V1相同,任何人都可以成为做市商提供承保:2.保险货币 ...
Kendo UI开发教程(9): Kendo UI Validator 概述
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...
ASP.NET Core 企业开发架构概述
ASP.NET Core 企业开发架构概述企业开发框架包括垂直方向架构和水平方向架构.垂直方向架构是指一个应用程序的由下到上叠加多层的架构,同时这样的程序又叫整体式程序.水平方向架构是指将大应用分成 ...
「翻译」SAP零售预测和补货–简要概述
SAP零售预测和补货–简要概述总体目标和适用范围 SAP Forecasting and Replenishment(F&R)是专门为零售商门店和配送中心的高效补货而创建的解决方案.其主要目 ...
给具有SAP传统产品ABAP开发经验的朋友介绍SAP C4C
给项目经理介绍完SAP C4C之后,我们SAP内部的开发人员聚在一起,大家对这个项目的整体架构设计进行review. 因为大家工作的产品不同,所以先要给所有人做简要的介绍. 轮到我的时候,我事先了解到 ...
SAP建议客户将UI技术迁移到Fiori的六大原因
Fiori是SAP下一代UI策略的战略性解决方案,SAP已经并且将会持续努力提供稳定可靠的服务为用户提供优越的用户体验: (1) Fiori包含了丰富的企业级应用控件库,该控件库是由SAP第一流的Ja ...
（转）ASP.NET Core 企业开发架构概述
目录一. 垂直方向架构 1. 多层架构 2. 典型框架二. 水平方向架构 1. SOA架构 2. 微服务架构 3. 整体式 vs SOA架构 vs 微服务架构 4. SOA典型框架 5. 微服务典 ...

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

Metadata drive development的优点

Metadata drive development的缺点

Native UI development的优点

Native UI development的缺点

SAP不同产品的UI开发策略概述相关推荐

最新文章

热门文章