我的心血之作：一套适合 SAP UI5 从业人员从入门到进阶的学习教程，以及教程背后的故事

一转眼 2023 年又要结束了。我从 2007 年开始，以软件开发工程师的角色进入职场，马上也快满 17 年了。

在这快 17 年的软件开发职业生涯里，我也见识并使用了许许多多的开发技术，编程语言，开发框架，平台。IT 界这十多年来涌现出的一些新技术，我也主动或被动地去追逐过。

比如 2015 年时，大数据计算框架 Spark 非常火爆。虽然我的工作内容，和 Spark 没有半点关系，但我还是随波逐流，看到技术社区上很多人都在讨论 Spark，我也跟着学了起来，包括这个框架的开发语言 Scala.

可是我学习这些流行技术的动机究竟是什么？现在回想起来，可能还是自己的程序员思维在作祟吧——因为 Spark/Scala 流行，我跟着学，说明我跟上了技术发展的最新潮流。这算不算是程序员的虚荣心？当时断断续续花了大半年的功夫，每天下班后学习 Spark/Scala, 可是效果如何呢？因为在工作中根本任何实战机会，后来就不了了之了，白白浪费了大半年的时间。到现在如果你问我，我当年到底学了哪些内容，我最多只能说出当初所学的 5% 内容。

这些年来也曾经和一些同行讨论过技术这个话题。有的同行觉得大厂用的流行技术都是最先进的，如果自己用了这些技术，就说明自己也是走在技术发展最前列。有的同行喜欢开源技术，认为一门技术，使用者越多，说明这项技术越受欢迎，越有前途。

每人都有权利表达自己的观点，对于这些观点，我不发表自己的看法。关注我的朋友们绝大多数都是 SAP 圈子的从业者。在过去很长一段时间里，ABAP 几乎就是 SAP 的代名词。在现在和将来，ABAP 也一如既往是 SAP 旗舰级产品，SAP S/4HANA 的实现语言。我已经把自己 16 年积累下来的 ABAP 开发经验，输出成一套 ABAP 学习教程(目前仍然在持续更新中)，我之前的文章里已经介绍过这套教程：

一套适合 ABAP 初级和中级开发人员，从入门到提高的 ABAP 学习教程

继 SAPGUI，BSP，WebClient UI 和 ABAP Webdynpro 之后，Fiori 成了 SAP 从 2012 年起就开始力推的 UI 设计语言( Design Language)和用户体验设计规范( User Experience Design Guideline). Fiori 的技术实现，采用的前端框架就是 SAP UI5. 包括 SAP 旗舰级产品 SAP S/4HANA 在内的众多 SAP 产品的 UI 界面，都是采用 SAP UI5 开发而成，甚至 SAP 公司内部，众多员工使用的 Internal 系统，也是用的 SAP UI5 开发的界面。SAP UI5 这款前端框架，或许没有 Angular，Vue 和 React 这些流行框架有着同等数量级的使用者，但论起对 SAP 生态圈的重要性，SAP UI5 绝对远胜市面上任何一款前端框架。

笔者 2013 年正式接触 SAP UI5，在工作中使用这个框架进行 SAP CRM Fiori 应用的开发。这一年我正式从 ABAP 技术栈切换到 JavaScript/HTML 技术栈进行编程工作，刚开始写 SAP UI5 应用代码时，各种陌生，别扭，不自在。所以最近看到一位朋友在 上给我的私信，我以前是做 ABAP 的，最近刚接触 SAP UI5，看到 XML 视图里那些怪兽级别的语法，感觉好可怕，我真的感同身受。我也是以零前端开发基础转到 SAP UI5 开发的，所以不少朋友遇到的困扰，我特别能理解，只因我也曾亲身经历过。

2014 年算是我艰难转型的一年。2015 年我就感觉好多了，也开始在 SAP 官方社区上发布一些关于 SAP UI5 的技术博客，内容主要包含这几类：

1. 工作中遇到的 SAP UI5 问题，我的分析和解决思路。
2. SAP UI5 开发技巧。这些技巧一般都是从我工作中实际的开发需求出发，记录了我对这些需求的技术实现细节。
3. SAP UI5 源代码分析。

我在 SAP 官方社区总共发布了 633 篇技术博客，其中 SAP UI5/Fiori 有 221 篇，超过了总数的三分之一。这 200 多篇博客，都是用英文写作的，而且都是面向 SAP UI5 的进阶者。

2016 年，我自认为对 SAP UI5 的运用已经纯熟了，想更上一层楼。正好在 SAP 公司内网 Portal 看到了 SAP 德国总部 UI5 开发团队，招聘 Fellowship 的一则公告，工作内容非常吸引我：在 6 个月的时间里，进行 SAP UI5 Extensibility 模块的设计和开发。我当时认为自己过往的开发经历和这个职位是比较吻合的，因为我 2008 年到 2011 年，一直从事 SAP Business-by-Design 这款产品的 Extensibility 相关工作，自认为对 SAP 产品 Extensibility 的设计理念有比较深的了解，再加上我已经有使用 SAP UI5 进行应用开发的实战经验了。因此我很快写好了简历，投递给德国总部 UI5 团队的 manager. 很快我收到了回复，团队 manager 对我的简历确实很感兴趣，无奈这个职位没有出差的预算，因此只接受德国本地员工的申请，我就这样遗憾的错过了一个能够参与 SAP UI5 框架开发的机会。

好在 2020 年我获得了基于 Angular 进行 SAP 另一款代号为 Spartacus 的 Storefront 框架的开发机会，算是一定程度上满足了我在工作中进行框架级开发的心愿吧，有点失之桑榆，收之东隅的感觉。

这些年来也陆续有很多出版社的朋友，通过社交媒体联系上我，建议我把这么多年写的关于 SAP UI5 的技术文章，整理成图书出版。

因为工作和家庭的原因，我现阶段没有时间和精力写书。但是这些建议给了我一个启发：把这些年来我关于 SAP UI5 的技术文章进行归纳整理，以一种更加系统的方式输出。于是就有了本文接下来介绍的这套 SAP UI5 学习教程。

教程亮点

• 写作风格深入浅出。笔者虽然是 SAP UI5 技术专家，但没有在文章中使用艰深的技术词藻，来炫耀自己对于前端框架理解的深度和广度。每篇文章都用平实和通俗易懂的语言，把一个个 SAP UI5 知识点讲解清楚。
• 有自己的独到见解。我们固然可以从 SAP UI5 帮助文档里找到控件的功能说明和 API 列表，不过我也经常收到一些学习者的咨询，询问观察到的 SAP UI5 某某功能点的行为，为什么是这样？为什么 SAP 要这样设计？背后的动机是什么？这些 Why 都成为笔者的写作灵感和素材来源。笔者结合自己多年的 SAP UI5 使用经验，教程每篇文章都力求传达出自己的独特见解，不但给大家讲解了 SAP UI5 知识点，同时还分享自己对这些知识点的个人理解。通过这些拓展介绍，力求让大家在学习过程中，做到知其然更知其所以然。
• 从入门到进阶。本教程从 Hello World 级别，只有几行代码，能够直接在浏览器里打开并运行的 SAP UI5 应用开始，由浅入深，逐步介绍 SAP UI5 开发涉及到的方方面面。每篇文章只精讲一个知识点。建议大家如果没有任何 SAP UI5 基础，则按照文章序号依次进行学习。如果已经有开发基础，想进一步提高，则可以根据教程目录里文章的标题，挑选自己感兴趣的知识点进行学习，不用受文章序号的限制。
• 图文并茂。笔者在 SAP 中国研究院撰写内部技术文档时，就养成了图文并茂的写作习惯。一图胜万语。不少抽象的知识点，就算大段文字描述，也很难帮助初学者有一个直观的理解。此时配上几张图片，往往事半功倍。另外编程语言的学习是一个对动手能力要求很高的活动，教程里这些在开发工具里的实际截图，能帮助学习者把握动手操作的要点，高效掌握 SAP UI5 开发的核心步骤。
• 内容全面，自成体系。本教程计划通过多达 300 余篇的篇幅，来全面介绍 SAP UI5. 目前已经完成了 199 篇。而 300 篇远非教程最终的篇幅，正所谓学无止境，笔者会在写作过程中，根据学习者的反馈和要求，在本教程的写作列表中不断添加新的 TODO 项目。
• 面向实战。本教程写作的素材主要来自两方面。第一方面是笔者多年 SAP UI5 开发生涯过程中，总结出每一个 SAP UI5 开发者都必须掌握的核心内容，将其以文章的形式输出。另一方面，笔者经常会从自己的微信公众号，知乎咨询，知识星球，和国内各大技术社区收到 SAP UI5 从业人员给我发起的各种咨询。有些问题我如果觉得非常具有代表性，也会将背后的知识点的讲解，编入这套教程。因此，教程的大多数文章，都是 SAP UI5 开发者在工作中会遇到的实际问题和任务，每篇文章都配有学习者能够自己动手练习的完整源代码，这些代码发布在我的 Github 上，每篇文章配套的源代码存储在一个以文章序号命名的文件夹内，方便大家查阅。

• 授人以渔。所谓授人以鱼不如授人以渔。本教程不少文章，来源于笔者在 SAP 官方社区发布的英文博客。这些博客记录的是我在实际工作中遇到的具体问题，以及我的分析思路和解决方案。我把这些英文博客遇到的问题，提炼到了本教程的文章中，希望大家从教程文章里，不仅仅学到 SAP UI5 具体的知识点，更能学会我是如何使用 Chrome 开发者工具，UI5 Inspector 等各种工具对问题进行隔离，分析，定位的套路。
• 反馈及时。学习者在学习这套教程中如果遇到问题，可以在对应的文章末尾留言。我会每天抽时间查看评论区并回复。包括每天上下班的地铁途中，中午晚上吃饭的间隙，种种碎片时间段，我都会和学习者的评论留言互动。这些互动，其实也是我自己不断查漏补缺，完善自己 SAP UI5 知识体系的一个渠道。学无止境。大家可以通过目前已经完成的 199 篇文章的评论区，来查看以往的学习者曾经遇到的问题，以及我的解答。

学习者的收获

跟随本套 SAP UI5 教程进行学习后，大家能够获得下面这些收获：

• 能够自行搭建 SAP UI5 本地开发环境和云上浏览器内的开发环境配置。本人相比云上浏览器里的 SAP Business Application Studio，更喜欢在本地使用 Visual Studio Code 进行开发。大家也可以根据个人喜好，在这两种开发环境中任选一种。
• 了解并能熟练使用 Visual Studio Code/SAP Business Application Studio 提供的各种 Extension，提高 SAP UI5 开发效率。
• 熟悉 SAP UI5 实战项目中使用频次最高的控件们的使用方式。遇到标准 SAP UI5 控件无法满足需求的时候，知道如何创建自定义控件。
• 熟悉 SAP UI5 数据绑定的设计原理和在应用开发中的运用方式。遇到数据绑定的相关问题，能知道从哪里设置断点进行调试。熟悉 OData 模型和 JSON 模型的使用。
• 熟悉将本地开发好的 SAP UI5 应用，部署到远端 ABAP 服务器，以及公网 Node.js 服务器上的步骤。
• 了解 SAP UI5 应用的运行生命周期。
• 熟悉如何将本地开发好的 SAP UI5 应用，配置到 SAP 产品的 Fiori LaunchPad 中的步骤。
• 当 SAP UI5 应用不能按照自己期望的方式工作时，知道大致应该从哪些方面去分析问题，而不是一筹莫展。
• 当遇到因为 SAP UI5 版本升级导致应用运行出现故障时，知道如何去分析并解决因为版本更迭导致的问题。

本教程适合哪些学习者

• 之前从未接触过 SAP UI5 的开发人员。对于这部分朋友，我建议大家在学习本套教程的时候，同时在网络上搜索一些 JavaScript/HTML 的入门教程配套着看。这种入门级的教程网络上很多。大家千万别对 JavaScript 这门编程语言有畏难心理。诚然，因为 JavaScript 本身动态灵活的语言特性，精通 JavaScript 要比精通 ABAP 难很多。但是，我们的目标是胜任 SAP UI5 开发工作。要实现这个目标，根本不需要达到精通 JavaScript 的程度，只需要会运用它就行了。而且个人认为，SAP UI5 在开发企业级前端应用方面的一大优势是，它要求使用者对 JavaScript/HTML 的掌握程度，远远低于 Angular，React 和 Vue.
• 已经在工作中有过几个月到三年的 SAP UI5 使用经验，能胜任日常工作，但是没有系统而全面学习过 SAP UI5，想进一步提高自己 SAP UI5 技术水平的初级 SAP UI5 开发人员。
• 有三年以上 SAP UI5 编程经验，想朝着 SAP UI5 专家的方向努力，但是不知道具体如何进阶的 SAP UI5 中级水平的开发人员。

限于文章篇幅，我不打算将本教程文章目录罗列在本文下方。大家可以点击这个链接，获得本教程全部 199 篇文章的目录。

祝大家学习愉快！