SAP Fiori and SAPUI5 are not the same. Even up until today both terms are mixed up, sometimes even interchanged.
What is SAP Fiori?
If you ask SAP, they summarize it as follows:
SAP Fiori is the UX of the Intelligent Enterprise that changes the way you work. It equips designers and developers with a set of tools and guidelines to create apps for any platform faster than ever – providing a consistent, innovative experience for both creators and users. SAP Fiori enables you to turn new ideas into great apps as quickly as the market demands.
SAP Fiori is the toolkit to ensure app development is in line with SAP’s UX strategy.
How does an action button look like? What color has the cancel button? Is “Cancel” the consistent wording or should it be “Reject”? When should I use this control?
All these design questions are answered by the Fiori Design Guidelines.
This speeds up your design process a lot. There is no need to discuss basic design questions. Almost all answers can be found in the Guides.
This leads inevitably to a more consistent design across all your Fiori applications.
SAP is currently in the process of applying the Fiori Design Language to all their technology platforms.
Fiori Design Principles
SAP Fiori is based on five key principles:
- Role-based Designed for the needs of the user’s business role
- Adaptive The same User Experience across all device types (Desktop, Phone, Tablet)
- Coherent UI Elements behave the same across all apps
- Simple The 1-1-3 design principle: One specific task for one specific user role should be accomplished with max. 3 levels of navigation
- Delightful Really just that. Neat design that is fun to use
With SAP Fiori 3, the as of today latest version of SAP Fiori, SAP provides design principles for iOS, Android, and web apps.
What is SAPUI5?
SAP User Interface for HTML5 (SAPUI5) is the development framework to build web applications that follow the Fiori design principles.
A SAPUI5 app is a web application that runs client-side in the web browser.
These apps are build using JavaScript, XML, and HTML5 and utilize other technologies like OData and JSON.
MVC Design Pattern
SAPUI5 is based on the Model-View-Controller (MVC) design pattern to give the application structure.
For UI5 apps the Model is usually an OData Model to consume OData Services provided by an SAP system.
The View part is covered by extensive UI controls that follow the Fiori design guidelines.
Model and View are getting their commands from the Controller.
Summary: Technology vs. Methodology
Whereas SAPUI5 provides a framework for web application development, SAP Fiori delivers the UX guidelines.
In theory, you don’t need SAP Fiori to develop a SAPUI5 application. On the other hand, it is recommended to follow the Fiori design principles to ensure a consistent user experience throughout all SAP business applications.
The Open Source version of SAPUI5, called OpenUI5, can be used by the public and is not limited to SAP customers.