Here’s the difference between SAP Fiori and SAPUI5.
SAP Fiori is a set of design guidelines, and SAPUI5 is a framework for building web applications.
So if you want to learn the difference between the two, then you’re in the right place.
Let’s get started!
The difference between SAP Fiori and SAPUI5
Consultants not deeply involved in technology often misunderstand:
SAP Fiori is NOT the same as SAPUI5!
To be fair, SAP’s product naming conventions are not known for being precise and organized.
For example, ECC, which came after SAP R/3 and before SAP S/4HANA, is sometimes referred to as ERP Central Component and sometimes as Enterprise Core Component.
Furthermore, SAP has added to the confusion between SAP Fiori and SAPUI5.
SAP has named its out-of-the-box applications as SAP Fiori apps and the entry point to SAPUI5 applications as the SAP Fiori launchpad.
SAP Fiori represents just the tip of the iceberg of SAP’s new UI (User Interface), which is actually built using SAPUI5.
Let’s dig deeper!
First, what is SAPUI5 . . .
SAPUI5 stands for SAP User Interface for HTML5.
Yes, SAP writes it as SAPUI5 and not SAP UI5, despite the fact they’re two acronyms and not one.
As with all the other SAP acronyms, it has never been:
- SAPR/1
- SAPECC
- SAPS/4HANA
- SAPCRM
- SAPC/4HANA
But always:
- SAP R/1
- SAP ECC
- SAP S/4HANA
- SAP CRM
- SAP C/4HANA
So why?
Digression: SAPUI5 or SAP UI5
Appears like that “SAP UI5” is correct, rather than “SAPUI5.”
The first acronym represents the company’s name: SAP (Systems, Applications, and Products in Data Processing).
The second denotes the technology: UI5 (User Interface for HTML5).
Therefore, according to naming conventions, it should be “SAP UI5,” right?
Moreover, preferring “SAP UI5” over “SAPUI5” is grounded not only in opinion but also in grammatical conventions:
When combining multiple acronyms, they are typically separated by a space rather than merged into one new acronym without spacing between them.
Similarly, for SAP S/4 HANA:
Although SAP refers to it as SAP S/4HANA, this naming convention seems to contradict the guideline mentioned above.
SAP S/4HANA represents the newest version of SAP’s ERP flagship product, standing for SAP Business Suite 4 HANA (the 4th generation of SAP business suites, with HANA being SAP’s database technology).
Thus, “S/4” and “HANA” would logically be “S/4 HANA,” not “S/4HANA,” following the same logic.
The case is similar for SAP C/4HANA, which stands for Customer 4 HANA (the 4th generation of SAP CRM business suites).
However, if choosing “SAPUI5,” “SAP S/4HANA,” and “SAP C/4HANA” aligns with SAP’s branding decisions, these conventions may be preferred.
Returning to the main topic—what exactly is SAPUI5?
SAPUI5 is a framework to build web applications
SAPUI5 is a framework for building responsive web applications.
Responsive means that the web applications adapt their UI to desktop, tablet, and mobile devices. One application to rule them all.
For example, if you visit inui.io (yay) on your PC, you’ll see a different UI than when you visit inui.io on your mobile phone, but it’s the same web application for both desktop and mobile phone.
Wow, so responsive.
The web application detects which device is being used and then adapts its UI accordingly.
Hence, the web is responsive.
An SAPUI5 web application is the client-side or the front-end.
The UI and everything that goes with it, like:
- Display of controls: such as buttons, tables, dialogs, and texts
- Logic behind the scenes: for example, the routing between different sites of an application or what happens when you click a certain button
- Requests to the back-end: for instance, a request for some data after a user views a page with a table of products.
On the other hand, the back-end is, for example, an OData service, the application server with an ABAP stack and CDS views, along with a HANA database.
SAPUI5 is made up of:
- HTML
- CSS
- JavaScript.
HTML is the structure of a website, CSS is how it looks, and JavaScript is its logic.
MVC (Model-View-Controller) architecture runs SAPUI5.
The MVC structure allows you to separate the presentation of information (model) from the interaction with the user (view) and somehow connect all these components (controller).
This separation gives an application structure and aids in development efficiency, including its maintenance.
SAPUI5 separates front-end development from back-end development.
For example, if you have an existing functional OData service, you can develop an SAPUI5 application for that service without modifying the back-end—simply place the SAPUI5 application on top of the OData service.
The most popular frameworks for building web applications are:
- AngularJS (fun fact: SAP uses AngularJS instead of SAPUI5 for the SAP Commerce Cloud)
- Vue.js
- React
Now, let’s check out SAP Fiori!
. . . then, what is SAP Fiori
SAP Fiori is design guidelines.
SAP Fiori isn’t a technology at all. It just determines how a UI looks and feels.
It is a collection of rules for how the user experience of an SAP application is supposed to be—how an SAP application is supposed to appear.
The goal of SAP Fiori is to build an intuitive, simple-to-use UI for all SAP applications.
It is not only to provide the user with a consistent experience across all SAP applications and hence not require adjustment, but also to save time by not clicking around in unnecessarily complex and unintuitive user interfaces.
SAP Fiori gives users a sense of not being stuck in 1990 when using an SAP application.
The SAP GUI is great for admins and developers, but not so much for end-users—have a look:
Business applications should look and feel good, too.
That’s part of a positive user experience.
Therefore, one design to rule them all:
SAP Fiori is kind of the fashion police in SAP. By the way, Fiori is Italian and means “flower.”
That’s why you see pictures of flowers on SAP Fiori—so pretty.
SAP tries to make each SAP user interface look and feel like SAP Fiori.
While SAPUI5 is the most commonly used user interface technology for SAP S/4HANA and some SAP extensions, other SAP applications use different UI technologies such as:
- SAP Commerce Cloud: AngularJS
- SAP Sales Cloud: ABSL (Advanced Business Script Language)
- SAP S/4HANA for Customer Management: SAP CRM Web Client UI
SAP makes those UIs kind of look like SAPUI5 applications, but they’re not.
SAP Fiori is based on five key principles:
- Role-based: The user only sees what they need to know.
- Adaptive: Achieves a seamless user experience across all devices (mobile, tablet, and desktop).
- Coherent: Provides the same look and feel across different apps.
- Simple: Focuses on delivering a simple, intuitive user experience—1 user, 1 use case, and 3 screens.
- Delightful: It’s beautiful and makes the user feel good.
The Difference between SAPUI5 and SAP Fiori
It’s pretty simple:
SAPUI5 is the technology to build SAP web applications.
SAP Fiori is how SAP applications are supposed to look.
SAPUI5 is technology, and SAP Fiori is design guidelines.
You can build an SAPUI5 application without SAP Fiori, but not a full-fledged SAP Fiori application without SAPUI5 (besides native iOS or Android apps, but that’s another story).
For instance, the outdated SAP CRM Web Client received an SAP Fiori upgrade, so it got a new theme that’s kind of like SAP Fiori.
The C/4HANA landscape tries to incorporate the SAP Fiori guidelines as well.
But not to the full extent because SAP Fiori can only be fully realized when the SAPUI5 specifics are used.
So why not just call the combination of SAPUI5 and SAP Fiori just SAP apps instead of SAP Fiori apps?
And for the SAP Fiori Launchpad, let’s just call it SAP Launchpad.
What’s the point of the Fiori other than causing confusion over the separation of SAPUI5 and SAP Fiori?
SAP apps, as referenced by SAP in its SAP apps library, are created only by combining SAP Fiori and SAPUI5, with SAPUI5 doing the heavy lifting.
SAPUI5 isn’t getting its fair share of appreciationllat the moment.
SAPUI5 and SAP Fiori are like a zipper—you can see both when separated, but they do not make full sense unless they’re merged together.
And then you have an SAP app.
Not a SAP Fiori app.
If SAP hadn’t created SAP Fiori and its design guidelines, which are matched by SAPUI5, there would be better frameworks for building SAP web apps than SAPUI5, like AngularJS (which SAP uses for its SAP Commerce Cloud).
Even with SAPUI5 smart controls which are giving SAPUI5 it’s edge compared to other web development frameworks.
Those smart controls could have been easily integrated into another web framework.
SAPUI5 controls do nothing more than wrap an SAPUI5 control in a container, which is fed by annotations, and then manipulate the actual SAPUI5 control according to those annotations.
What do you think? Leave a comment!