Skip to Content
Technical Articles
Author's profile photo sivakumar M

SAPUI5 VS FIORI

Hi,

I struggled a lot to get difference between sapui5 and Fiori.  So In this Document i am going to write what I got in my research.

SAPUI5

UI5 is nothing but development tool kit for html 5. It contains lot of predefined JavaScript library to design new user interface.

UI5 is mainly developed for SAP mobility which means Fiori.

UI5 is a framework based on MVC pattern.By using this frame work developer can easily build web application.

Picture1.png

From above you can easily understand that It will run on any device.

UI5 is SAP own user interface to develop web application.

UI5 is now a days is getting popular to outside of SAP to build  NON-SAP application also.

UI5 uses web technologies like HTML, CSS and JavaScript.

SAPUI5 is technology whereas Fiori is a methodology.

SAPUI5 is Hybrid app (Because of HTML5).

SAPUI5 Apps runs on multiple platforms with full capability as like native apps such us SMP.

FIORI:

Fiori is a new user experience for SAP software . To overcome the complexity of SAP traditional GUI ,New one has been developed  which is Fiori.

Fiori focus mainly on mobility. Fiori uses SAPUI5 for frontend and it uses odata  to get back end data.

Fiori is a design paradigm – not a methodology.

The primary technology used for Fiori is SAPUI5.

Without knowing SAPUI5 knowledge fiori customization is difficult. Fiori contains all the business process in the form of Role based.Currently more than 1000 roles are created  based on business process.

One code line for all screen sizes.

SAP back end contain  Business logic and odata service.

SAP front end which means Net weaver Gateway server contains SAPUI5 control libraries and App specific Fiori UX add-Ons.

In SAP ECC 6 and Ehp7, we can create odata service by using SEGW Transaction.

Fiori used across solutions such as SAP S/4HANA

Fiori apps are Hybrid which means based on web technologies(SAPUI5) and will be connecting to SAP via SAP NW gateway .

Fiori is a package which has collection of sapui5 apps .Refer below link.

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/

The below link will describe the fiori architecture overview and prerequisites

http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/e03be70d-68fb-3010-c6a0-ff56889c2c81?QuickLink=index&overridelayout=true&58652073478233

Note:

SAP UI5 is Mother for All Fiori Apps.

Fiori Apps are build with SAPUI5 which implements HTML Features.

SAP Web IDE is used  for the creation modification of SAPUI5 code. Unlike other tool , SAP Web IDE doesn’t require any installation.

With Regards,

Siva.

Assigned Tags

      15 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo ' Pavan ' Golesar
      ' Pavan ' Golesar

      Thanks, Keep it up! 😉

      --PavanG

      Author's profile photo Former Member
      Former Member

      Thanks Siva

      Author's profile photo Frank Luzat
      Frank Luzat

      Fiori apps are Hybrid which means based on web technologies(SAPUI5) and will be connecting to SAP via SAP NW gateway .

      I think this is not exactly the point.

      If we talk about hybrid apps in the context of Fiori / SAPUI5 people usually mean SAPUI5 applications (= pure HTML, CSS, JS) running in a native container (Apache Cordova  / Phonegap) on a mobile device which provides access to native device capabilities to the UI5 application.

      Author's profile photo sivakumar M
      sivakumar M
      Blog Post Author

      Hi Frank luzat,

      I agree with Your Point

      Author's profile photo Nicolas Posada
      Nicolas Posada

      Great post Siva!

      Author's profile photo Sohail Ahmed
      Sohail Ahmed

      Very nice explanation Siva, Thank you !

      Author's profile photo Praveen Minumula
      Praveen Minumula

      Good explanation

      Author's profile photo Filemom Barbosa
      Filemom Barbosa

      Really good post  sivakumar M ! Thank you very much.

      Author's profile photo Alok Singhal
      Alok Singhal

      Thanks Siva. Explained in very simplified form.

       

       

      Author's profile photo Aaron Liao
      Aaron Liao

      Very well explained. Thanks Siva!

      Author's profile photo Mahdi Abdul Jaleel
      Mahdi Abdul Jaleel

      Very good,  thank you very much

      Author's profile photo Fabio Baptista
      Fabio Baptista

      Nice overview. Thanks Siva.

      Author's profile photo alpha yankhouba diallo
      alpha yankhouba diallo

      very good...thanks

      Author's profile photo Venukumar Chindam
      Venukumar Chindam

      Hi,

      I am not getting from this 2 points

      SAPUI5 is technology whereas Fiori is a methodology.

      Fiori is a design paradigm – not a methodology

      Author's profile photo Pedro Gonzalez-Tarrio
      Pedro Gonzalez-Tarrio

      I think on the last point he really meant "Fiori is a design paradigm – not just (or only) a methodology"