SAPUI5 Controls vs. UI5 Web Components

Press "s"

to see everything we said during our presentation

Hello

Fabienne Pipping

🎓 Media Computer Science Student
💼 Working Student @advades

Nerd at heart

Hi there!

Alexander Seibel

💼 SAP Development Consultant @advades

❤️ <code/>

UI5con 2019

Frameworks

Performance Score

98/100

95/100

98/100

Of course I ended up on the official page of the UI5 webcomponents and I remember that there were three simple examples, just a small to do list, all looking the same, but they were implemented with different frameworks
One with View, one with Angular, and one with react
And I ran a google light house performance test on all three of them, for those who dont know google lighthose, it's part of the chrome development tools in your audits tab
In those audits, a website can achive a score from 1 to 100, with 100 as the best possible score you can get
And those were the results: React an view both achieved a score of 98, while angular was slightly worse with a score of 95
But it's still awesome
Considering that nothing in life is ever that easy and perfect, we decided to take a deeper look and compare "classical" UI5 with the UI5 Web Components in a real world example using React.js

Use Case

SAPolis

European Union

For this example:
Lets imagine a town called SAP-city or Sapolis (just stole this idea from metropolis, pardon me , if i pronounce too german) and this town needs an application to have an overview about their upcoming public events. So we have some sort of organizer, where staff members can create new events and see existing events. We thought about maybe even make this overview of the events public, so town citizens are able to see whats happening in their hometown, as well
Then there is this huge institution called Euopean Union with a ton of laws and requirements concerning accessibility such as EU 2016/2102 and the WCAG Guidelines. I dont wanna bother you with that stuff too much.Lets keep things short and say everyone and their mother, maybe even your cat, must be able to access the application.
The use of a completely thought throug design language (in case of colorization, contrasts and so on) would be a great start to build a accessible app and by pure chance, SAP Fiori is such a design language and would be perfect for our eventmanger
so, lets build the 1.000.000th organizer cause the world doesnt have enough already. Not the hero we needed, but the hero we get
We developed two eventmangagers, one with react and the UI5web components and one with SAPUI5, both look similiar and have the same functionality

React with UI5 Web Components

SAPUI5

Comparison

Documentation

SAPUI5

UI5 Web Components

And if thats the documentation for SAPUI5, than thats the documentation for react with the UI5 web components. Ist not about the chaos, but about the amount
In SAPUI5 we have a huge online documentation with an API, we have a ton of examples, we have the platform openSAP for free, there are many blogs and books about SAPUI5 and so on
On the contrary, we have react, with an overall okay documentation and then there are the UI5 web components with little documentation and nearly nothing about the combination of react an the web components. The only plus was a way more active stackoverflow community from react, but in the end, developing the sapolis eventmanager in react took way more time than with SAPUI5

Scope

SAPUI5 Controls

~600

UI5 Web Components

None-Control-Elements

SAPUI5

UI5 Web Components

					

	UI5 Web Components are awesome:
	awesomeness

Performance

Google Lighthouse

Metric	Weight
first-contentful-paint	3
first-meaningful-paint	1
first-cpu-idle	2
interactive	5
speed-index	4
estimated-input-latency	0

Again, the google lighthouse audits were used, using a user centered approach of measauring it
This means:
Lighthouse doesn't look at when are all my files loaded, but when can the user see first content, when is he able to interact with my application and thats exactly what those metrics with their weight do.
By the weight you can see which ones are the most important ones, so first-conentful paint is when my user sees the content, interactive means when can he interact with the application and the speed index is the average loading time till UI Elements are displayed. So those three are the most important ones.
Again, we have a score from 1 to 100, with 100 as the best possible score
Any guessings? Which performance scored SAPUI5? … And React with the UI5 Web Components?

Performance

Score

SAPUI5

UI5 Web Components

Those are the results
SAPUI5 got a score of 30, while React with the UI5 Web Components got a score of 95. The results depend on your testing environment, if you wanna recreate this, your results may differ
In SAPUI5, it takes 5 seconds till we're able to see first content and we have to wait further 4 seconds to be able to interact with the application. Makes in total 9 seconds till the user can start effectively working with our Fiori App. And in our other application with React, whick looks completely the same and provides the same functionality, youve seen it, the site is fully loaded after 2,6 seconds.
The reason for this, is, that in SAPUI5, we have a ton of unused CSS that is loaded, even for controls we havent even used. And there is the SAP ui core library, which somehow blocks rendering.
On the contrary, we have a react, a framework that comes with much less overhead and as a developer, i was able to specify, which resources I want to have loaded in my application
This makes react extremely lightweight
Moreover, react uses a virtual dom, so if the state of one of my UI components changes, those actions are executed on a virtual dom. React then compares my changed virtual dom with my real dom and only changes those elements, which differ from the real dom
Maybe to add something here: We don't want to put SAPUI5 Controls in a bad light. We have seen it today. The UI5 Team is working hard on the performance, we have seen the performance improvements to make the core smaller and just use the controls and libraries which I really need. The performance is getting better.

Accessibility

SAPUI5

UI5 Web Components

Accessibility

SAPUI5 Controls ≠ UI5 Web Components

Turns out there not equal
I detected some more differences, for example the profile picture and logo in my shellbar. In react, my testsoftware wasnt happy with them, complaining about missing alternative texts. And in SAPUI5, this simply wasnt the case. I can just assume, that those pictures in SAPUI5 are rendered with the aria attribute presentation or something like that.
So: If you want to build your application with react, be careful, you have a lot more work to do concerning accessibility. And sometimes there isnt even a direct way of changing somehing from predefined components such as those profile pictures

Other striking differences

Architecture
Need of CSS

SAPUI5 Controls

+ Documentation
+ Scope
+ Accessibility

UI5 Web Components

+ Flexibility
+ Performance