SAP|SAP UI5 的前世今生 SAPUI5的前世今生

Jerry 在加入 SAP 电商云 Spartacus 开发团队从零开始学习 Angular 时，对这款出身名门的前端开发框架的来龙去脉，做了一些简单的了解。
本公众号一万多粉丝里，有不少朋友都在日常工作中使用 SAP UI5 开发前端应用，但可能并不是每一位朋友对 SAP UI5 的前世今生都熟悉，因此我想用本文对 SAP UI5 的发展历史做一个简单的介绍。
本文部分内容来自 SAP UI5 开发人员 Andreas Kunz 的一篇 SAP 社区博客。大家可以点击文末的"查看原文"访问原始的英文博客。
同目前国内外流行的前端开发框架的三驾马车 Angular，React 和 Vue 一样，SAP UI5 也是一款基于 JavaScript 的前端开发框架。同这三个同行相比，SAP UI5 在面向企业级用户的前端应用开发领域更具优势，主要体现在以下这些方面：

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

【SAP|SAP UI5 的前世今生】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 上看到的这个代码仓库：
https://github.com/SAP/openui5

文章图片

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 未来即将支持的新特性。
感谢阅读。
https://roadmaps.sap.com/