迈入 SAP Fiori Elements 开发的大门 - 什么是 Fiori Elements，它和 Freestyle UI5 开发方式有何区别？

笔者编写了一套适合 SAP UI5 开发人员循序渐进的学习教程，截至 2023 年 4 月 15 日为止，已经更新了总共 180 篇文章，这是教程的目录。

这套教程侧重于 SAP UI5 Freestyle 开发技术的介绍。感谢众多 SAP UI5 开发者的支持，在教程写作过程中，笔者收到了很多学习者发来的私信，询问关于 Fiori Elements 开发的各种技术问题。这些学习者提出的大量问题，最终促成了本套 Fiori Elements 教程的诞生。

Fiori Elements 和 SAP UI5 Freestyle 开发技术的异同点

为什么笔者要将 Fiori Elements 的开发，单独放到一套新的学习教程去，而不是直接重用 一套适合 SAP UI5 开发人员循序渐进的学习教程 这套教程？

在我看来，二者虽然都是基于 HTML/JavaScript，并且最终开发出来的产物，都是能够部署在 Web 服务器上并配置为 Fiori Launchpad 一个 Tile 的 SAP UI5 应用，但二者在开发理念，开发流程和开发侧重点，适用场景，以及对开发人员的技能要求等诸多方面，都存在不容忽视的差异。

网络上有关 Fiori Elements 和 Freestyle UI5 开发方式的区别，已经有很多文章介绍了，本文笔者谈谈自己的看法。

为了便于理解，我用大家都熟悉的衣食住行里的住来进行类比。

假设大家需要一套住房(开发一个 SAP UI5 应用)，至少有两种不同的办法来实现：

• 方法1：自己选地基，购买水泥，沙子，砖块，混凝土，木材，钢筋，玻璃，涂料，地板材料等等(这些原材料，相当于 SAP UI5 提供的控件集合)。

• 方法2：从开发商处购买精装修后的现房，拎包入住。

显然，采用方法1获得一套住房，需要操作者具有自建住房的技能，比如得去了解建筑设计和规划的基本原理，掌握建筑施工的基本技能，如基础施工、墙体砌筑、屋顶建造等。毛胚房建好之后，还要进行装修，那么还要会墙面处理、地面铺设、家具安装等技能。

方法1 可以类比成采用 SAP UI5 Freestyle 方式进行应用开发。

在这种开发方式下，开发人员可以自由选择使用 SAP UI5 控件集合中提供的大量开箱即用的控件和工具，来实现应用业务逻辑。

Freestyle 开发方式非常灵活，可以充分发挥 SAP UI5 开发人员的创造力和想象力。在这种开发方式中，开发人员可以根据自己的需求和技能水平，自由选择使用哪些控件和组件。Freestyle 开发方式下，SAP UI5 应用的控制器(controller) 和 Component.js 代码均需要开发人员手动编写。

与 Fiori Elements 开发方式相比，SAP UI5 Freestyle 开发方式的学习曲线可能会更陡峭一些，需要 SAP UI5 开发人员具备一定的 JavaScript 基础知识，懂得一些 CSS 基本原理，同时了解前端框架 MVC 设计理念，能够根据 SAP UI5 官方 SDK 找到自己需要使用的 UI5 控件的文档。

然而这些付出当然是有所回报的：Freestyle 开发方式能提供更高的灵活性和自由度，可以帮助开发人员实现更复杂和定制化要求较高的 SAP UI5 应用程序。

然而现实生活中，并不是所有的人都具备自建房屋的能力。大多数普通人选择的是另一种方式：从开发商那里购买修建好并且精装修后的房子，然后拎包入住。

采用这种方式，理论上我们只需要准备足够的资金来购买房屋，而不需要具备其他任何关于自建房和装修的知识，因为一切的一切，开发商都帮助我们打理好了。

同样，使用 Fiori Elements 开发 SAP UI5 应用，开发人员也无需了解太精深的前端开发知识，因为无论是 UI5 应用的界面设计，还是界面元素同数据模型的双向绑定，控制器生命周期钩子函数的实现，以及 Component.js 的实现，这一切统统由 Fiori Elements 框架承担了。开发人员甚至连一行代码都不用写，动动鼠标，在 Fiori Elements 应用创建向导里点击几次下一次按钮，就能得到一个能够正常运行，并且界面设计非常专业，非常 Fiori 化的标准应用出来。这一切都像极了选择拎包入住的购房者的购房体验。

当然凡事有利就有弊，当我们享受了拎包入住(Fiori Elements)的便捷性和省时省心后，可扩展性和个性化设置的大门，也对我们关闭了。

当购房者选定了一个房屋开发商之后，就只能从其提供的有限的样板间里，选择最适合的户型。作为购房者而言，我们不可能更改这些户型设计了。同样，Fiori Elements 也提供了数量有限的"样板间"，即 Fiori Template(模板).

目前 Fiori Elements 提供了五种模板，涵盖了 Fiori 应用的大多数使用场景，使得 SAP UI5 开发人员可以快速构建具有一致性、现代化和响应式的企业级 Web 应用程序：

• List Report
• Worklist
• Object page
• Overview page
• Analytical list page

如果需要实现的界面布局和这五种模板有很大的差异，那么选择 Freestyle 而不是 Fiori Elements 的开发方式，或许是一种更好的选择——精装修的房屋，留给业主的定制化发挥的空间已经很小了，无非是一些室内软装设计，比如根据自己的喜好和风格，选择和搭配一些家具，窗帘，地毯，灯具等等。同理，使用 Fiori Elements 开发而成的应用，留给开发人员进行二次开发和定制化的余地，也只有 Fiori Elements 框架定义的一些增强点而已。本教程后续会详细介绍 Fiori Elements 应用的增强方式。

总结

Fiori Elements 和 SAP UI5 Freestyle 是两种不同的开发方式，二者各有其优势和应用场合。

• Fiori Elements 的使用场合：如果 SAP UI5 应用开发需要在极短的时间快速完成，并且应用仅仅需要完成 SAP Fiori Elements 预置模板就能覆盖的标准流程，对灵活性，自由度和可扩展性没有太多要求，那么 Fiori Elements 是比较合适的选择。

• Freestyle UI5 开发的使用场合：如果应用需要实现非标准化的业务流程和用户界面，对定制化，可扩展性和灵活性有较高要求，则推荐使用 Freestyle UI5 开发方式。
  

本教程后续会开始更新 Fiori Elements 系列开发文章，敬请关注。