[vc_row][vc_column][vc_single_image source=”featured_image” img_size=”1130×450″ alignment=”center”][vc_column_text]
Before we establish a relationship between SAP UI5 and Fiori, let us first understand them, one by one. Subsequently we can look at the difference between the both of them
SAP UI5
In its expanded form it is SAP User Interface 5 and as its name suggests, is SAP’s user interface to develop web applications. We could also think of it as a framework to build responsive web applications. Applications that tend to adapt their user interface to desktops, tablets and mobile phones are “responsive” apps.
Hence, we could define SAP UI5 in layman’s terms as a set of libraries that we can use to build desktop and mobile apps that run in a browser.
Before we get into the framework of SAP UI5, we need to know that it uses the MVC architecture. SAP UI5 applications are designed using the MVC architecture or the Model-View-Controller architecture.
MVC (Model-View-Controller) architecture
Model is the business data coming from the SAP system. It can be thought of as a bridge that gets the external request from the user interface and responds back with the required information.
View manages display of information to the user. It defines the user interface.
Controller is the mediator that takes the input given by the devices, communicates with model and/or view to trigger the necessary action.
MVC separates the representation of information (model) from the user interaction (view) but binds both together with the help of the controller.
SAP UI5 Framework
It would now make sense if we say that the SAP UI5 framework is made up of HTML, CSS and Javascript. HTML gives the website its structure, CSS is responsible for the look and feel of the website and JavaScript is all the logic that happens behind the scenes.
So, in using the MVC architecture, SAP UI5 separates the front end and the back end development. In other words, we do not need to touch the back end (for eg: an existing OData service) to develop an SAP UI5 application for that service.
Let us now move on to understanding SAP Fiori. After that, we will be able to see the relationship between SAP UI5 and Fiori and understand the difference between the two.
SAP Fiori
For someone who has worked with SAP ECC or its other applications, it would be clear that although the functionalities are up to the mark, as per industry standards, the user experience leaves much to be desired. With Smart Phones taking the world by storm and mind blowing user experiences being the order of the day, SAP realized that it had to catch up quickly. This is how SAP’s innovative, responsive user experience came into being in 2013.
To illustrate, here is a screen shot of SAP Fiori Launchpad which gives us a collection of SAP Fiori apps by typing in the URL, in the browser, like any website.
We can also go through the blog “ What is SAP Fiori application and benefits?” to understand Fiori better.
We have seen what SAP UI5 and Fiori are. So, what is the relationship between the two and why are we talking about both of them in the same blog ?
Difference between SAP Fiori and SAP UI5
To understand the relationship between both of them, let us first see the difference between them.
SAP Fiori is a set of design guidelines that determine how a user interface is supposed to look and feel. It is a collection of rules that decide on the user experience (UX) of a SAP application. Hence, the aim of SAP Fiori is an user interface that is consistent, simple, intuitive and responsive for all SAP applications.
Whereas, SAP UI5 is the technology to build responsive web apps. In other words, SAP UI5 is the coding language for SAP Fiori. Therefore, we cannot build a SAP Fiori application without the underlying SAP UI5 framework. The merger of both creates responsive Fiori apps.
Conclusion
Now that we are clear about the difference between SAP Fiori and SAP UI5, we can summarize by saying that many businesses are increasingly beginning to rely on the combination of both to keep up with today’s mobile workforce. Fiori’s simple and intuitive user interface allows users to perform common everyday functions quickly with utmost ease.
[/vc_column_text][/vc_column][/vc_row]