#HTML5, #OpenUI5, #SAPUI5 and #SAPFiori… How are they working together?
It started from a question by a customer:
“What should we implement SAPUI5 or SAP Fiori or HTML applications?”
I was thinking that this question was just an isolated misunderstanding caused on the low experience on web development technologies, but after few weeks presenting SAP Fiori across several customers this question was popular; in each presentation there was at least a similar one.
“Why we should implement UI5, we want SAP Fiori?”
“Should we use OpenUI5 or SAPUI5?”
“We do not want any SAP proprietary technology, we would like to use commercial standard HTML5 and jQuery”
The doubt was raising time by time and I tweeted this and some of my followers engaged with me on this topic.
Do you know the relationship between the UI terms used nowadays in SAP?
Let’s try to have a recap and clarify…
UI5 vs SAP Fiori
An easy way to clarify the difference between the two can be resumed in this easy comparison when you build an house.
The house is the final product built following the architecture best practice (SAP Fiori application), the tools are the instruments and materials that you used to build it (SAPUI5).
“SAP Fiori is the new user experience (UX) for SAP software. It applies modern design principles for a completely reimagined user experience. SAP Fiori UX represents a personalized, responsive and simple user experience across devices and deployment options.” (https://experience.sap.com/fiori/)
SAP Fiori is the paradigm that drives the development of new SAP UX. SAP Fiori can also refer to the set of application (600+) that have been build using the SAP Fiori paradigm. You can find the list of all the SAP Fiori apps at Fiori Apps Library.
SAPUI5 is the framework that you use to build SAP Fiori applications, so it is the collection of tools.
SAPUI5 comes into two main flavors:
- Main (formerly Mobile) (sap.m) that collects a set of components that are mobile ready and are auto adaptive to the device that is used (e.g. Smartphone, Tablet, Desktop) delivering the same user experience. SAP Fiori applications are based on this library. This library has to be preferred for new applications.
- Desktop (sap.ui) has been used as the “Desktop” experience for UI5 applications. The components are designed for being used on big screen (i.e. Desktop) and they are not adapting based on the device used. SAP UI add-on for SRM is based on this library.
The tools
Now it is time to understand better the tools. Which is the relationship between SAPUI5 and other technologies such as HTML5, OpenUI5 and jQuery?
SAPUI5 is a library built on top of other libraries, mostly open source, and industry standard languages.
Lets start from the bottom…
HTML5, CSS3 and JavaScript
These are the most common languages used for web application development.
- HTML5 (HyperText Markup Language) is a markup language used for structuring and presenting content on a web page.
- CCS3 (Cascading Style Sheets) is a style sheet language used for representing a content defined in a markup language.
- JavaScript is a programming language that is largely used in combination with HTML and CSS to deliver content on a web page.
These technologies are available since a long time, HTML first release is in 1993, CSS in 1996, Javascript in 1995. Across the years they have been renew based on the evolution of the World Wide Web introducing new functionalities and being more powerful.
jQuery
jQuery is a free and open source cross-platform JavaScript library, that aims to provide a unique set of functionality that are compatible with most of the available browsers. The use of this library allows developers to concentrate on the functionalities without spend time to make their code compatible with the different JavaScript engines.
jQuery also provides a set of features that allows developers to create animations and handle events easily.
jQuery is the most popular JavaScript library in the entire World Wide Web, so it has to be considered as a standard de facto for web development.
openUI5
openUI5 is a free open source application framework, based on jQuery, JavaScript, HTML5 and CSS3, to create cross platform business applications. OpenUI5 was open sourced by SAP in 2013 after few years that was used from SAP to deliver business applications.
sapmentors played a great role on this accomplishment suggesting and promoting the cause, 13 reasons why SAP should open-source SAPUI5 by Jan Penninkhof, and finally at SAP TechEd Bangalore in December 2013 it was announced.
openUI5 vs SAPUI5
openUI5 and SAPUI5 are basically the same framework, the only difference between the two is that SAPUI5 contains some other extra libraries such as API for Analysis Path Framework (APF), SAP Collaboration for Social Media Integration and viz charting library, that are not open source so cannot be included in the open source version.
I will not explain all the differences, but I will suggest to have a read to the following blog post What is OpenUI5 / SAPUI5 ? by Andreas Kunz that covers this topic.
This blog wanted to be an easy overview on the differences and relations between the terminologies used in these days for SAP UI applications.
Please share your thoughts in order to improve it and share the knowledge across SAP Community.
Hi Ivan,
that do not just confuse the customers. I recently talked to some developers which also wasn't sure about the differences and how to start.
This is a great blog. Thank you for sharing.
~Florian
Absolutely right Florian, also many developers are still confused.
Thank you
Ivan
I hear the same a LOT. To me, it boils down to several missteps on SAP's part and poor communication. If you have been around SAP for more than a handful of years, this is of course nothing new. 😛
First....FIORI was announced....but this was the Fiori applications....so at first it was like "oh this is like SAP's little own Apple app store". But then...Fiori became the entire underlying new UX design strategy....rather than rename it or communicate better, it just confused everyone (I even blogged about it).
Second....same issue with SAPUI5....it came out....but then SAP decided later to release the OpenUI5 "version" to aid in the adoption by the larger developer communities (not to mention show SAP as "open source" friendly which is a new image it desperately needed)....so how the two actually differ and why is confusing to many folks too. I am not sure why it wasn't just released as OpenUI5 and have the developers decide to load/import the "SAP specific" parts as needed....like importing/loading an additional library if needed.
Third....again, it comes down to communication....SAPUI5/OpenUI5 is in fact HTML5-based...hence the naming.....but they are also built upon foundations of JQuery as well....and what that means, is a whole other discussion you have to have with people first learning. haha (and once again, I blogged about this too when I was first learning OpenUI5! haha). And further still.....you don't "pigeon hole" yourself in if you use SAPUI5 or OpenUI5....they are just libraries (really just a bunch of controls)....so nothing is stopping you (as others have demonstrated!) from using them with other frameworks (such as Angular, Meteor, etc). if you so please.
Chris,
sure for new developers some concepts are really basic ones, but developers can easily fill the gap...
The problem is that now some decision makers haven't a clear picture and as you mentioned the way that SAP adopted to communicate this evolution was not clear.
Same misstep was not so long ago.....releasing HANA as "the in-memory database ...the biggest technical breakthrough of the century!!!!".....and then months later trying to go back and re-communicate it as HANA as "the platform...which includes the in-memory database piece we spoke of before....but is more than that with all these other pieces...oh, and did we mention the cloud?". 😆 😆 😆 😆
Brilliant Ivan.
Ahh yeah everytime its a pain explaining the difference. Thankyou, now I can share this blog with many people to refer who are starting with ui5 or fiori
🙂 🙂
Yes..this what i am expected about UI5 and Fiori.
Thanks,
Syam
Good for people with functional domain to understand these terms.
Nice one very useful
Thanks
Thank you nice blog:)
Thanks nicely explained!
--Pavan G
SAP is responsible for all this misunderstanding. It is not customer's or developer's fault. Giving many different names for the same stuff is the perfect way to make things unnecessarily complicated. Of course all this mess have a good reason behind it (from the SAP point of view) but it is really sad to see that instead of keeping sapui5 in evidence SAP decided to put it aside and bring fiori to the scene as their rockstar. Maybe they thought that putting everything in the same bag (name, product) would make things simpler but it turns out that the effect is just the opposite.
Christian,
I'm agree with you.
I'm not stating that it is a customer or consultant fault, but unfortunately we need to have them to close these gaps with SAP.
If we look at HANA brand is used everywhere now even if HANA DB or application is not part of it... HANA Vora for example... What will "HANA" be next year?
Ivan
Hi Christian
I agree with you. May be its marking tricks (first confuse the customer and do business) sorry am wrong !!
Now customer are thinking that SAP Fiori and SAP UI5 are two different product for UI
I need to say thanks to Ivan Femia for this blog
Manoj
Hi, Ivan. Great post. I was about to do one similar to this but I've never blogged before. If you'd like some tech tips or helps to improve your next post, let me know. I'll be very glad to help you.
Sharing this content through my networks right now!
Regards,
Rick
Thank you Henrique...
As mentioned, if you have any useful information that can improve the quality of the post I will be really happy to include them in the post.
Thank you for your support...
Ivan
Hi Ivan,
Very nice article,I am a Web developer and mobile app developer and interested in learning SAPUI5 and currently I am working on SAP EP. Can I shift to SAPUI5 technology or else do I need to learn any other technologies.
Could you please suggest me on this?
Venkat,
If you have a web developer background you should be familiar with HTML CSS and JS so you are more than ready to use to SAPUI5
Ivan
Thanks for your reply.Yes I am familiar with HTML, CSS ,JS and Jquery. Do I need any ABAP knowledge to work on SAPUI5?
No ABAP needed for SAPUI5, Venkatesh Machineni, though knowledge on NetWeaver or HANA XS could help sometimes, if you plan to develop SAP applications UI.
But, basically, SAPUI5 is client-side and can be used standalone. Even without SAP applications.
Hi Ivan,
First of all thanks for this article. It cleans my mind as get ride off all confused points. Let me know please , may we use SAPUI5 or OpenUI5 on SAP B1 HANA?
Thanks for helping