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

29次阅读

共计 4396 个字符,预计需要花费 11 分钟才能阅读完成。

在挪动利用曾经无缝交融到咱们日常生活的今日,咱们的工作和生存简直时时刻刻都在和 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 的设计初衷和着力解决的畛域痛点。

正文完
 0