面向企业级前端应用的开发框架|面向企业级前端应用的开发框架 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，如下图左上角所示：

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

文章图片

这种新的 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 未来即将支持的新特性。

文章图片

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