面向企业级前端应用的开发框架 UI5 的发展简史介绍

在移动应用已经无缝融合到我们日常生活的今日,我们的工作和生活几乎时时刻刻都在和 2C(即 To Customer) 应用打交道。比如手机支付,在线购物,生活缴费,天气和交通线路查询等等。

2C 应用的前端开发框架,最著名,最为开发人员所熟知的,就是 Angular,React 和 Vue 这三驾马车。其实还有另一款名叫 UI5 的开发框架,知道它的开发人员可能少得多,但 UI5 实际上是被事实证明的在企业级前端应用开发领域里一款相当成功的开发框架。

什么是企业级前端应用?一种被前端业界公认的定义是:

企业级前端应用是一种可以创建大型生态系统(Large Ecosystem)的前端应用程序,由一定数量的较小应用程序和控件/开发库组成。 企业级前端应用通常都会包含至少数百个子页面和对话框。 所有这些前端资源由数十或数百名开发人员组成的开发团队同时进行。 企业级前端应用在项目执行过程中,需要设计和实现明确的支持、接口、可配置性,可扩展能力以及提供逐步处理技术债务的方法。

同 Angular 等前端开发框架相比,SAP UI5 在面向企业级用户的前端应用开发领域具有下列这几方面的优势:

  • 长期兼容性和可维护性(long-term compatibility & maintenance)
  • 丰富的开箱即用的面向企业级前端应用的控件
  • 国际化(internationalization)的支持
  • 应用的健壮性和安全性(robustness and security)的支持
  • Accessibility
  • SAP UI5 开箱即用以及周边社区提供的诸多开发和 support 工具

SAP UI5 也是 SAP Fiori 设计理念和设计系统钦点使用的应用开发框架。

SAP UI5 起源 - 凤凰计划(Phoenix)

SAP UI5 最早的起源要追溯到 2008 年 11 月。来自 SAP 不同开发团队的几位员工,挤进了一间只能容纳四人的小会议室,被授予一项秘密任务:创建一种新的 UI 开发技术。这个项目当时的代号是 Phoneix.

这个代号对应的凤凰图标一直沿用至今,成为 SAP UI5 的 Logo,如下图左上角所示:

这种新的 UI 开发技术,必须具备灵活、可扩展、现代并且独立于后端实现技术等特性。

我们不妨回忆一下,2008 年时期的 SAP 生态圈,有哪些技术栈,活跃在前端开发舞台上?

当时 Jerry 刚刚加入 SAP 成都研究院一年多的时间,从事 SAP Business ByDesign 开发。2008 年 SAP BYD 还没有进入 Feature Pack 2.0 的 LeanStack(精简技术栈) 时代,仍然基于 ABAP 和 Java 双栈并存(Dual Stack)架构,UI 开发采取 Visual Composer + Java Webdynpro 的方式。

与此同时,SAP CRM On-Premises 仍然处于新功能的持续开发阶段,底层基于 SAP Business Server Page(BSP) 技术的 WebClient UI 框架,为了顺应当时企业级应用从 Client/Server 往 Browser/Server 架构迁移的历史潮流,被用来开发新的 SAP CRM 应用,以替换原本运行在 SAP GUI 中的事物码。

WebClient UI 的孪生兄弟,ABAP Webdynpro,辅之以 FPM(Floor Plan Manager),在 SAP SRM UI 开发领域的表现也丝毫不逊色于 WebClient UI. 如今这一对略显"高龄"的双子星,仍在 SAP 产品 UI 开发大家族中占据一席之地。

Jerry 目前工作的 SAP Commerce Cloud,其前身在遥远的 2008 年称之为 Hybris,UI 采用的是更古老的 JSP 技术。

分析这些前端技术,它们都有一个最大共同点:同后端系统具有强耦合关系。SAP BSP,WebClient UI,ABAP Webdynpro 开发而成的应用,只能在 ABAP 系统运行。Java Webdynpro 和 JSP 页面,也没法脱离 JVM 而单独运行。同后端系统的强耦合,给企业用户带来的一大挑战就是 UI 技术的可升级性。例如要升级 WebClient UI 和 ABAP Webdynpro 的版本以获得更多特性的支持,就得升级 ABAP Netweaver 对应的 Software Component.

SAP WebClient UI / Webdynpro 的编程范式,使用其提供的开发框架,在应用开发人员和浏览器原生支持的 API / CSS 样式处理之间竖立了一道屏障。这道屏障是一把双刃剑:一方面,它使得应用开发人员能够专注于应用的业务逻辑开发,而无需花精力去考虑企业级前端应用开发中至关重要的安全性,国际化,性能和 Accessibility 等产品标准该如何实现;另一方面,也给某些确实需要对 UI 框架进行扩展,以充分利用现代浏览器提供最新特性的需求实现,带来了一些挑战。

比如 Jerry 还在 SAP 成都研究院数字创新空间团队工作时,曾经做过一个原型开发,在 SAP CRM WebClient UI 里引入一个基于 WebGL(Web Graphics Library) 标准的第三方库,Three.js, 来渲染一个不断旋转的 3D 足球效果。当时确实费了一些功夫,才让这个效果在 WebClient UI 应用里正确渲染出来。

SAP 架构师团队睿智而又富有远见的架构师们,早就意识到 2008 年当时使用的 SAP UI 技术,存在上述一系列局限,SAP UI5 就是带着解决这些问题的使命而诞生于世的。

SAP UI5 正式为外界所知,是 SAP 2013 年 5 月在 Orlando SAPPHIRENOW 上发布的关于 Fiori 的通告。随着第一批总共 25 个基于 SAP UI5 开发而成的全新 Fiori 应用问世,SAP UI5 接过了 SAP 前端领域的开发大旗。

处于萌芽发展时期的 UI5,其编码实现全部出自一个成熟的 Scrum 开发团队之手。随后团队不断发展壮大,拆分成一个 Core(核心)团队,和另一个负责创建 "sap.m" 控件的团队。起初 sap.m 命名空间下的控件,仅用于移动设备,m 代表 mobile, 后来被重新定义为 UI5 的跨设备主控件库:main control libraries across devices.

拥抱开源 - OpenUI5 的诞生

Phoenix 计划时期,SAP UI5 的创始者们都是忠实的开源项目爱好者。项目启动伊始,就在考虑将其开源,以便能更轻松地与前端社区协作,更早地获得用户反馈和错误报告,以及更有效地将 UI5 推广到 SAP 开发生态圈。

2013 年 12 月 11 日,SAP 宣布,UI5 将在 Apache 2.0 开源许可下,以 OpenUI5 的形式进行开源,也就是如今大家在 Github 上看到的这个代码仓库

2014 年 10 月,这个代码仓库产生了第一行代码提交。到了 2022 年 3 月,代码提交的数量,增长到了 78657.

OpenUI5 包含了 SAP UI5 框架的核心实现和大部分控件库。这些核心实现和控件库开发,基本上全由 SAP UI5 团队完成。有一小部分 SAP UI5 控件库,由 SAP UI5 之外的其他产品开发团队负责实现,这些控件库有的仅仅在某些极特殊的场景下使用,有的包含特殊的知识产权,没有计划在开源许可下提供,因此并未包含在 OpenUI5 之内。

SAP UI5 的高速发展和成熟期

随着 SAP 旗舰级产品 S/4HANA 将 SAP UI5 选为其前端开发技术方案,通过大量的 SAP Fiori 应用的开发,交付和客户使用过程中获得的反馈,SAP UI5 进入了高速发展时期,涌现了一大批围绕 SAP UI5 的开发工具,访问模块和基础设施层,比如 Fiori Launchpad,SAP WebIDE,Chrome 开发者工具扩展 UI5 Inspector,端到端测试框架 UIVeri5,以及 UI5 项目构建和启动命令行工具 UI5 Tooling 等等。这些新的工具本身也标志着 SAP UI5 和其社区走向成熟。

如今在 Github 上由 SAP 主导的开源项目中,多达 10% 的代码仓库都和 SAP UI5 相关。

SAP UI5 不仅仅在功能和控件库的数量上有所增加,其核心也在不断的进化,体现在核心更细粒度和更严格的模块化设计,更合适的依赖声明方式,更能发挥现代浏览器异步请求执行能力的编程方式等方面。这些进化发生在 UI5 核心,不会对已有的 SAP UI5 应用正常运行造成影响。

驱动 SAP UI5 进化的另一个来源是 Fiori 设计准则的不断发展。从诞生之初的 Fiori 1.0 到最新的 3.0 版本,Fiori 始终朝着向用户提供更 Coherent,更 Simple 和更 Delightful 的应用而努力。Fiori 设计准则本身在发展,作为实现该准则的技术框架,SAP UI5 也不断调整自身以达到完美实现 Fiori 设计准则的目标。

和最初仅能通过离线压缩包的交付方式相比,如今 OpenUI5 支持众多的分发和交互渠道可供应用开发人员挑选:从部署在 CDN(Content Delivery Network,内容分发网络)上的引导文件 sap-ui-core.js,到 npm registry 上的 openui5 package.

在前端开发生态圈评选出的 9 大 Web Components Libraries 名单里,UI5 Web Components 始终占据一席之地。

UI5 Web Components 是一组独立的基于 Web Components 标准开发而成的 UI elements,这些元素将样式和行为完全封装在自定义 HTML 标记中,因此可以不依赖于 SAP UI5 框架而被单独使用。某些企业用户可能并不需要 SAP UI5 框架提供的全部功能,或者已经拥有运行在 Angular,React 或 Vue 框架之上的前端应用,但是这些用户仍然希望在其应用里使用 UI5 控件。这种情况下,UI5 Web Components 是一种极佳的补充方案。

关于 UI5 Web Components 的详细介绍,请参考我的文章:Fiori Fundamentals和SAP UI5 Web Components.

SAP UI5 的未来

如果大家持续关注 SAP 官方社区上具有 SAP UI5 Tag 标签的博客,就会发现以下两个方向是 SAP UI5 生态圈讨论得比较多的话题:

  • 继续推进 UI5 Web Components 的发展

  • 继续完善 SAP UI5 对 TypeScript 的支持

其中 SAP UI5 对 TypeScript 支持的更多细节,请参考我的文章:SAP UI5 未来发展的趋势之一:拥抱 TypeScript.

Evolution Never Ends.

如果大家对于 SAP UI5 将来的发展方向感兴趣,可以登录 SAP 官方的产品路线图网站,输入 SAP UI5 关键字来查阅 SAP UI5 未来即将支持的新特性。

总结

同普通的 2C 前端应用相比,企业级前端应用在安全性,健壮性,性能,国际化和 Accessibility 等方面具有更为严格的要求。本文基于笔者的实际工作经验出发,列举了传统的同后端系统强耦合的企业级前端应用开发技术的一些局限性,从而引出 SAP UI5 的设计初衷和着力解决的领域痛点。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容