SAP Fiori and UI5 | The Difference in 100 Seconds

[z_brandon]

I read a brilliant blog post recently by showkath.naseem called SAPUI5 vs SAP Fiori Elements (FE) and it remined me that even to this day there are still people out there who are not 100% clear on the difference between Fiori, UI5 and Fiori Elements. So to help clear up the subject in 2020 I outlined the following points in a short video.

 

SAP Fiori:

• Is a set of design principles (or design language) from SAP that is there to help developers plan and build UI5 applications in line with SAP's UX strategy. (https://experience.sap.com/fiori/)


• The latest version is Fiori 3 and includes guidelines for apps built on Android, iOS and the web.


• Apps that follow the Fiori design language can be built using a combination of UI5 and Fiori Elements.

 

SAP UI5:

• Is a development framework that a developer would use to actually build a front-end application that follows the Fiori design guidelines.


• UI5 apps are built using HTML5, JS, XML, OData and JSON.


• Based on the Model, View, Controller (or MVC) design pattern
  
  
  
  • You build an OData model - normally an SAP Gateway or CDS service
  
  
  • That you display to the user in a view, preferably built using XML
  
  
  • And the user interacts with that model through a controller, written in JS.
  
  
  
  


• When planning a UI5 App its best practice to use the Fiori design documentation to help build the best possible app. (for example when building a simple analytical table - https://experience.sap.com/fiori-design-web/analytical-table-alv/)

 

SAP Fiori Elements:

• Is a sort of hybrid of Fiori and UI5.


• They can be used directly in your UI5 code helping you keep within the Fiori design guidelines. (https://sapui5.hana.ondemand.com/#/api/sap.f)


• Another great example is you can build a CDS view and through annotations and metadata you can autogenerate UI5 code using the Fiori Elements Framework.

 

I think the biggest misconception, especially amongst most functionals and recruiters, is that Fiori is the key word. I believe a better description is that Fiori is part of a larger context of tools and design patterns that make up the overall SAP UI and UX.

If you have a different idea or think I've missed something, then please do let me know in the comments.

 

Thanks for reading!