5 Steps to start with SAPUI5 Development [2021]

[filemombarbosa]

About me

Hi guys! Hope you are all doing well. I'm Filemom Barbosa, a Brazilian SAP Developer. I've been working and studying the following technologies in the last years: SAP ABAP, Gateway, SAPUI5, HANA modeling and development (XS Classic and XSA), SAP TDF, Javascript, PHP, Rest APIs, Information Security, Linux among others.

Here in my very first post, I write some tips based on my experiences and some useful SAP Learning Resources, as directly and as fast as possible! So I won't get technical in this post. If you want technical information, please let me know in the comments section below this Post.

A little Disclaimer: The steps I purpose here is not mandatory, I'm just showing a way that worked for me. Feel free to take your own decisions about it.

Main content

1. Know the difference between SAPUI5 VS FIORI

Even before starting studying about SAPUI5 and making nice Apps with it, we need to understand what SAPUI5 really is and what is that used for, so we can better take advantage of this cool technology and build Apps properly.

SAPUI5 is NOT Fiori. SAPUI5 is the Framework, an SDK used to build Fiori Like Apps, it is the "floor" (SAPUI5) to build the "house" (App).

Here is a good explanation from about the difference:

SAPUI5 VS FIORI

2. Be familiar with JavaScript

SAPUI5 is based on JavaScript, so it is crucial to understand how this language works, so you can handle the SAPUI5 functionalities and your own JavaScript code instructions. Other topics that will be in hand knowing a little bit more about are HTML and CSS.

The same root JavaScript syntax can be used to handle both Front-end scripts (the code that runs in the Client, e.g. Browse) and Back-end scripts (the code that runs in the Server, e.g. Hana XSA, Server running NodeJs), the main difference between these two scenarios is the purpose of the code. For example, In the Front-end scripts we normally deal with User interface elements, such as Input, Labels, validations, Back-end AJAX calls for send or get information from the database, etc. On the other hand, in hte back-end scripts we normally deal with business logic, validations, database direct communication, data generation and so on.

More about JavaScript used in the Front-end:

https://www.w3schools.com/js/default.asp - If you are a software developer, it's not necessary to read all topics, just focus on the main thing like, condition, loops, AJAX Calls, JSON object etc.

More about JavaScript used in the Back-end: 

https://www.w3schools.com/js/js_es6.asp - The purpose here is to show you that the way we code JavaScript changes a little bit because of the Back-end requirements routines. Check the Classes, Promises, etc.

https://www.w3schools.com/nodejs/ - Here you can see how the JavaScript code is implemented in a real Back-end server using NodeJs, which is a real world possibility once Hana offers environments to run NodeJs Apps.

3. Start SAPUI5 content immersion

The term "immersion" I mean you don't need to understand SAPUI5 immediately because I Know there are so many spread content on the internet and its not possible to consume all that, so the tip here is, to show you that there are more them one point of information that can be used in a way to get "The Big Picture", then going more deep gradually with other contents. At this point you will need a web server to run the SAPUI5 scripts properly, which can be a software like, NodeJs, WAMPP, WAMPSERVER, you also need some code editor like VSCode, Sublimetext. You can also just use the SAP Web IDE which is mentioned during the learning content.

Some SAPUI5 immersion content, take them in following order:

Walkthrough - SAPUI5 - Read those 38 lessons more then one time, if possible. That will help to digest so much new information.

Developing Web Apps with SAPUI5 - Take this free course by sign up to OpenSap. Even though this course is a bit "old" there are so many core concepts that are played until now.

4. Learning about Fiori App Development with SAPUI5

At this point you should have a consistent base knowledge about SAPUI5, so we have the floor ready "to build the house"! We can build Apps to run out of SAP Fiori (Fiori Launchpad), but as we are running for an SAP development Carrier, there is not better way to be "In The Game" then coding Fiori Apps or being able to extend, fix or implement them. So learn about the Fiori ecosystem and be able to build your SAPUI5 Apps and Deploy to the Fiori launchpad and do much more! 

More about Fiori:

SAP Fiori Overview: Design, Develop and Deploy - Take this free course by sign up to OpenSap.

5. Keep learning

In this world of development things changes constantly, so dont forget to stay tuned and update yourself about SAPUI5 and Fiori.

Some News resources:

https://sapui5.hana.ondemand.com/#/topic

https://community.sap.com/topics

SAP Community - Youtube

SAP Developers - Youtube

SAP Learing Hub courses (It's necessary to have an active paid subscription to access the content):

UX100 SAP Fiori – Foundation

UX402E Advanced SAPUI5 Development

UX403 SAP Fiori Elements Development

UX410 Developing SAP Fiori UIs

Also check out the Learn Journey purposed in SAP Help Portal:

SAPUI5 and SAP Fiori Applications - Learning Journey

Count on me

I know there is so much content to get, but I'm sure everybody is able to learn new things, following this tips or by themselves. So be patient, focused, keep coding and help others!
If there are some topics inside the learning content that does not get clear to you at all, or you have some advise to me in other to get the post better, let me know in the comments section, so I can try to help you out as best as I can.

Thank you for reading!

Regards

Filemom barbosa

SAP Developer