Product Information
SAP Fiori and UI5 | The Difference in 100 Seconds
I read a brilliant blog post recently by Showkath Ali 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!
Nice one!
Strongly reminds me of Fireship's (Fireship.io) videos on YT. Short, helpful and lots of information in a short amount of time. Love it!
BR,
Marco
Thanks Marco Beier !
Hi Brandon,
To build on your short summary, SAP Fiori elements is a UI development library based on UI5. It incorporates the SAP Fiori design system into several app templates, called page types, that cover the most common use cases for SAP Fiori apps.
These page types provide both the user interface and related logic, so developers can create a running app very quickly by simply connecting to a data source and selecting the relevant page type for their app. The resulting app is a fully functioning SAPUI5 app that follows the SAP Fiori design language for Web.
Regards,
Peter
Thanks for elaborating Peter. Fiori elements are fantastic for building apps quickly and reliably and they cover many of the use cases.
I agree with Peter, and I believe saying that SAP Fiori elements are "a sort of hybrid of Fiori and UI5" is misleading as SAP Fiori elements is an integral part of SAPUI5. I'd rather say SAP Fiori elements are a UI5 library that helps developers to create web apps following the SAP Fiori design guidelines even more efficiently.
Thanks for the feedback Margot Wollny. I see where you and Peter Spielvogel are coming from and it makes perfect sense. The reason I used the term "hybrid" is because many of my colleagues have found a slight disconnect between the sort of standard SAP UI5 libraries and the Fiori ones, even in 2020. What I mean is, in many projects I've seen the developers still try and solve the more complex problems using the main UI5 libraries themslves rather than focus on Fiori (or Fiori Elements) first, as a best practice.
That being said I think more and more dev's are aiming at aligning their work with the Fiori best practices and so I still think a kind of hybrid model does exists to some extent between the two, at least for the time being. However, I fully agree with you and recommend to anyone reading this that they should have the Fiori guidelines page open at all times when planning their UI5 solutions 🙂
I would suggest taking also at the new fundamental libs (ie https://sap.github.io/fundamental-ngx).
UI5 is full-featured Fiori solution but it looks like a fork of the old angularjs, not to mention the lock-in vibe you get using it.
Typescript is here to stay and so are modern frontend frameworks. I hope SAP is going to invest more on this and less on UI5.
Thanks for sharing Radis Vremo. I agree with you on TypeScript, it's a brilliant new technology 🙂
Such a great summary Brandon Caulfield I get asked this all the time, and instead of stumbling thru an answer,I can now provide a coherent, cogent response!