EDUCAÇÃO E TECNOLOGIA

SAP UI5 vs SAP Fiori Elements (FE)

This blog post written based on new SAP cutting edge technologies, framework, tools to implement Fiori Apps & deliver software quality  out-of-box .I personally reached out to SAP Software experts (Engineering, UX Team) to gather their unique prospective on this subject .I’ve also crawled the most popular SAP Blogs for this topic .So rest assured that you are getting only fresh and up-to date content here. Stay tuned @ SAP

SAP Fiori is the design principles, practices and the design style guide.

SAP Fiori (new version Fiori 3) apps can be implemented either by using SAP UI5 or SAP Fiori elements.

Fiori uses SAPUI5 for frontend and it uses OData to get back end data. One code line for all screen sizes like Browser, Mobile .. i.e It will run on any device (Mobile ,Tablet , Desktop)

https://experience.sap.com/fiori-design-web/

Official delivered Fiori apps can be found in the Fiori Apps Library Fiori Apps Library

SAP Fiori 3 is SAP’s new target design system, which evolves the SAP Fiori design for all SAP products to fully support the Intelligent Suite, running on any device.

https://experience.sap.com/news/sap-fiori-3-first-parts-available-for-sapui5-developers/

https://blogs.sap.com/2019/09/30/fiori-3-available-for-developers/

What is SAP User Experience! & SAP’s user experience strategy

SAP’s user experience strategy

UX/UI is essential for promoting a high level of quality and consistency across all pages of web application .UX may require more creativity than UI ,at the end of the day, the design of a website has to be user centric and add value to end user .
In the world of design thinking, design is a three-phase process of “discover, design and deliver.” Other companies use different words and different steps, but in general it is always the same.
In order to complete all three phases of the “Design Thinking” process, organizations require a new set of skills and mindset, including facilitation, coaching, brainstorming and idea generation (Design Thinking).
Design Thinking in 500 Words or less refer https://experience.sap.com/basics/post-101/
https://blogs.sap.com/2015/02/01/the-right-people-a-key-to-innovation/It combines empathy, creativity and rationality to meet user needs and drive business success

Learn more about how SAP can help augment your team’s staffing and how to build the right skills in your organization.
AppHaus : https://experience.sap.com/designservices/

UX and UI depend on each other. UX should focus on the end user

UI vs. UX:  Difference

https://blogs.sap.com/2015/02/09/ui-vs-ux-what-a-difference-a-letter-makes/

SAP Fiori UX represents a personalized, responsive and simple user experience across devices and deployment options.” (https://experience.sap.com/fiori/)

UI5 is a technology whereas Fiori is a methodology. UI5 offers framework, development tool kit for html 5 , contains lot of predefined JavaScript libraries based on MVC pattern. By using this framework developer can easily build web application. … UI5 uses web technologies like HTML, CSS and JavaScript.

SAP Fiori elements ensure design consistency and auto compliance (no extra development effort) with the latest design guidelines, while reducing the amount of frontend code needed to build SAP Fiori apps. SAP Fiori elements have proven savings in front-end development of up to 80% more than before. And, by the way, SAP Fiori elements are free.

The application team selects the relevant floorplan then framework generates the application screens.  SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns & reduction in development effort.

As I said Fiori Apps can be implemented either using SAP UI5 code or Fiori Elements.

Fiori Elements + CAP(Cloud Application Programming )  is advanced programming model ( Free style app development )

You can read my other blog to know advantages of CAP

Below table illustrates the implementing Fiori apps using SAP UI vs FE

 

SAP UI5 SAP Fiori Elements (FE)
UI Developer has to write lot of SAP UI5 Code so project development & maintenance cost will be huge in development, testing & further huge SOFTWARE MAINTENANCE COSY  of project  for any organization .

SAP ­UI ­Development ­Toolkit ­for ­HTML5

” data-original-title aria-label=”SAPUI5 SAPedia ” aria-describedby=”popover486803″>SAPUI5 code will be auto generated based on Cloud ­Delivery ­ServiceCore ­Data ­Services

” data-original-title aria-label=”CDS SAPedia “>CDS View annotations & metdata using FE Framework

No need to write SAP UI5 Code , No JavaScript coding.

SAP UI5 + backend code needs to be written FE+ CAP offers out of box Smart Table, Paging, filtering, sorting….many enterprise ready features

Write custom code (UI5,HTML,JQuery.. etc) to build Controls,

Models , jQuery/Ajax code to Invoke REST API’s, OData Services

Declarative programming

Automate many tedious tasks

Minimizes boilerplate code

Generate UI, Service invocation automatically

Provides Out of box features

Possible deviation from Fiori guidelines

Provide flexibility for customization but lose Fiori advantages.

FE cannot break SAP Fiori standards & UX Guidelines If UX changes design, then FE leverage framework
Need to write additional code toolbar or change behavior  in a responsive table

By default, Responsiveness & Adaptiveness  (Run Multiple devices)

As FE strictly follow Fiori3 Guidelines

Rework to migrate to new version

Default Forward compatibility (Fiori4, Fiori new version guidelines)

No additional effort required

Code Effort will be more & Development Cost also Reduce coding time & development effort drastically
When code is huge maintenance cost also will be more Very minimal maintenance cost
Possible code refactor & revamp cod for better performance optimizations Best possible performance from the very beginning.
Custom code + more development effort

Support UI Adaptation, Floor Plans, List Report & Object Page

Customization Possible

 

Customization (Work in progress)

Example: Dynamic list of option depending of another dynamic field

  1. We can navigate to Fiori3 elements APP  to SAP UI5 custom app
  2. Implement Custom Pages
  3. In Object Page : Custom sections are supported

* Double check the detailed documentation

Open to implement any fancy feature request Complex logic not always possible with Fiori elements as of now
Opensource/Third party library integration possible Not supported as of now

Support’s ODataV2 & OData V4

*Use ODataV4 Model has improved performance over ODataV2 Model

But please visit ODataV4 Model documentation and ensure that all required features are available

Support’s ODataV2 & OData V4

Use ODataV4 Model has improved performance over ODataV2 Model

Note:  Now the choice is based on your business/end user requirements. Please be aware that before choosing SAP Fiori Elements or SAP UI or any technology check that all required features are in place before developing application as per end user requirement. Double check the detailed documentation of the features as certain part of feature may be missing or any deviation.

SAP Fiori Elements  

The SAP Fiori elements framework supports the dynamic page layout for all available floorplans. In addition, the flexible column layout is supported for all available floorplans except the overview page, which is not allowed within the flexible column layout.

One of the big benefits of SAP Fiori elements is the reduction in development effort. This is especially important for features like draft handling or the flexible column layout.

SAP Fiori elements use the global edit flow, which includes draft handling, or the local edit flow without draft handling. SAP Fiori elements also offer message handling.

If you need these features in your app, you should go with SAP Fiori elements.

SAP Fiori Elements  Supported Floorplans and Layouts The following floorplans are available as SAP Fiori elements:

For an overview of all available floorplans and layouts, see Overview – Layouts, Floorplans, and Frameworks.

For more information on when to use SAP Fiori elements, see the usage guide.

If you want to learn more about SAP Fiori elements please go to www.sapfiorielements.com.

Watch the first episode: Getting Started with SAP Fiori elements: Introduction

Read : Introduction to SAP Fiori Elements

SAP Fiori Design Guideline : https://experience.sap.com/fiori-design-web/

Slack Channel : SAP Fiori Elements

SAP Fiori tools : https://github.wdf.sap.corp/ux-engineering/tools-suite

SAP Fiori  Elements Community : https://community.sap.com/topics/fiori-elements

SAPUI5 technical guidelines for SAP Fiori elements, Developing Apps with SAP Fiori Elements :  https://sapui5.hana.ondemand.com/sdk/#/topic/03265b0408e2432c9571d6b3feb6b1fd

Few Videos

  1. Introducing Fiori elements
  2. Introducing Overview pages
  3. Introducing List Report and Object pages
  4. Introducing Analytical List Report pages
  5. Understanding Odata and annotations
  6. Turning OData into Applications
  7. Creating Overview pages
  8. Creating List Report and Object pages
  9. Creating Analytical List Report pages
  10. Introducing Worklist pages
  11. Creating Worklist pages

SAP Business Application Studio

The SAP Fiori tools extensions can be used locally in Microsoft Visual Studio Code (VSCode) or SAP Application Studio (SBAS).

“SAP Business Application Studio (SBAS) is a powerful and new development environment i.e next generation of SAP Web IDE available as a cloud service on SAP’s Multi-Cloud environment (Cloud Foundry) and provides desktop-like experience similar to leading IDEs VSCode,.. etc with command line, integrated debugging and optimized code editors. At the heart of SBAS are the Dev Spaces, which are like isolated virtual machines in the cloud containing tailored tools and pre-installed runtimes per business scenario, such as: SAP Fiori, SAP S/4 HANA extensions ,Java Code Editor ,build and deploy the application as multitarget applications (MTA).and more.In SAP Business Application Studio, the developer is provided with one or more Development Spaces. As a developer, you can chose which tools will be installed on your dev space by selecting the suitable extension pack…

Refer this blog post for more details  https://blogs.sap.com/2020/02/27/sap-business-application-studio-is-generally-available/

Setup  : https://developers.sap.com/tutorials/appstudio-onboarding.html

References : https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-overview-ui5con-2019/

Basic Steps: Please follow wizard & setup your development environment & Fiori App creation

Click on Create Dev Space ,then Choose Dev Space plugin/extension support for your project .

Select View Menu –> Find Command –> Type SAP

As the product evolves*, additional SAP scenarios and technologies ,extensions  will be added in App Studio

I also would like to share comparison Side by Side: SAPUI5 vs. React & Angular2

Source  : https://blogs.sap.com/2017/03/04/side-by-side-sapui5-vs.-react-angular2/

Thank you SAP . CAP + Fiori Elements has boost me as a full-stack engineer .With the help of Fiori Elements + CAP , I am able to build modern web apps with db, a fully out of box CRUD + Query enabled OData API that serves a Fiori Elements UI in a really short time! i.e save time and development costs and I can also profit from enterprise ready features such as authentication and internationalization…

Developing Apps with SAP Fiori Elements

Stay curious :

Fiori elements floor plans with OData V4 and CAPM – Coming soon

https://blogs.sap.com/2020/03/17/fiori-elements-floorplans-for-odata-v4-coming-soon/

If there’s anything else (please let me know) I’ll add it to this blog post as and when it appears or occurs to me.

Happy Coding!