Few tips for beginners to become a PRO in UI5.
Hey All,
Having been an active user in the UI5 community since a year i have analyzed a bit on where developers go wrong when trying to learn UI5. So i just thought of blogging out my personal views on how to approach it & maybe the way how i learnt it.
Me primarily being a front-end dev, i was interested to explore much of what’s happening rather than just the bits & pieces of the development. So for anyone looking to be a PRO, i would recommend some of these
1. Start with a simple text editor. Ex – Notepad++, sublime text.
Well, it is known that SAP offers awesome development tools like SAP web ide, Plugins for Eclipse & there are also other third party tools. But as a beginner when we start using these i believe we don’t get the underneath basic knowledge on how the complete app works. We start coding directly in the views using the templates offered by SAP. These come handy for development but when you really want to learn i would recommend to use an editor like notepad++/sublime text where you’ll have to completely code the entire app from the scratch. I too started my learning as a beginner using the Eclipse plugins but when i switched to Sublime text where i had to code completely i realized how much i actually knew UI5.
2. Learn to use the API reference & don’t copy the code from UI5 demokit
With UI5, there a lot of options where the readymade code is available. You’ll find the code for all the controls in UI5 Demokit. I was blindly doing the same but i had no idea what other options the controls offered apart from the one provided in the sample code. That’s when i came to know that you have an API reference in the UI5 demokit which has documented all the properties, aggregations, methods, events of the controls. Since i learnt how to code a single control by following the API reference, i was able to do the same for all the other controls and more importantly i knew what all the controls offered now.
3. Knowing how to Debug is a must!
More often when we run the code it ends up with some issues. Posting the code in SCN/getting help from colleagues immediately we face an issue is not going to really help in a longer run. Actually browsers say chrome have inbuilt debugging tools which we will have to use it to the best to debug the issue. In fact, it’s really simple once you learn how to setup a breakpoint & how to check the requests in the network log to get a pointer on most of the issues. The debugging skills helps us solving the issues by ourselves, but when that doesn’t help creating a discussion in SCN/stackoverflow is good to go.
If you find some time, go through the video on debugging UI5 Apps – Debugging UI5 Applications – YouTube by UI5 developers Tobias Oetzel & Cahit Guerguec
4. Start with js views & 5. Learn JavaScript as much as you can
Often there leads to a confusion on which view to use in the development. Though XML views are the one being recommended, for any beginner i would suggest js views. The intention is to make sure that we start writing as much as code in JavaScript as JavaScript is something to be learnt to learn UI5! Being comfortable with JavaScript is indeed required here. Migrating from JS view to XML view is not really a tougher one. (just Ctrl + Alt + Shift + S)
For anyone whose career is into web development JavaScript plays a vital role, be it front-end/back-end. So here learning JavaScript is directly proportional to learning UI5. I would recommend to go through blogs/docs on JavaScript. I got a better insights by reading the design patterns in JavaScript by Addyosmani & also on object oriented JavaScript.
One of the better places to learn JavaScript would be Mozilla developer Network, https://developer.mozilla.org/en-US/docs/Web/JavaScript
6. Try to solve questions in SCN
Trying to solve the questions is SCN has remarkably made me improvise my skills. It’s like ‘The more you solve, the better you become’! And more than that it gives me a confidence that I’ll be able to tackle most of the issues if i face.
7. Look out the source code of UI5
The source code of UI5 is something where we get to see the code written by some of the most intellectual guys. It might look a bit mystery out there in the beginning, but going forward you’ll be able to take away few good things from the code & thats how one becomes a PRO at it.
I would suggest these for the one who wants to have a career with UI5 or front-end technologies in a longer run. It might take a bit of time but it’ll prove to be worthy & at least have worked out for me. I would also like to know the views of UI5 experts out here on how they approached 🙂
Last do make sure you keep aligned with all the latest updates – OpenUI5 Blog
– Sakthivel
Good one. Thanks
Helpful points for beginners like me..Thanks
Do we have getting started with UI5 docs or if you could guide me how someone with JS background can start getting their hands dirty with UI5 on a beginner level?
Regards
Batish
In the landing page of UI5 community, you can find the getting started with UI5 which has the link of the docs.
I completely agree that you only realize how much you actually know when you code from scratch. I had used a lot of customs templates for quick apps, but only when I did one from scratch did I realize that a lot I didn't understand, and how much powerful it is when you know what you are doing.
I tried Notepad++ but I ended up with WebStorm as a favorite (still no templates or auto-tasks so it's still consistent with your argument) regarding 4 I rather separate the views (XML) from the controller JavaScript. This way it's easier for me to visualize, and I'm going to write a lot of JavaScript anyway.
Regarding 6, use JSBin like it is advised unless it's impossible. You get answers a lot faster, since people can interact with your code.
Finally API Reference vs UI5 Explored I do agree. Copy pasting takes away from understanding the power of the API, but the reference also needs to improve. Some methods and parameters are poorly explained.
Very well written...
Nice post, for me also 1 hour to see and understand the sAP UI5 project´s structure but i have coded a lot of web applications experience,,, for new people i think it´s hard....
I learned both Webdynpro and SAPUI5 by myself with zero training, and Webdynpro was much easier. Better tool support because it's integrated in Netweaver, models are designed in the context, WYSIWYG layout editor from the start (SAP WebIDE Layout editor is still barely functional).
In the end you pay for the flexibility, the more you code, the more power you have and SAPUI5 is more powerful.
Hi Sousa,
I agree with you, but for WebDynpro how can I learn if I do not have access to SAP system?
as a freelancer, I think I did not have access to Netweaver and Co.
Best Regards.
Zouhair
I don't understand. This is about SAPUI5 not Web Dynpro.
For Web Dynpro you need access to a SAP system, but that's not the case with SAPUI5 which has the OpenUI5 variant.
Hi Sakthivel ,
How can I develop sapui5 application in Notepad++, we require sapui5 plugin right?
Please let me know the procedure for developing sapui5 app in notepad++.
No, you don't require any of the plugins! You only need a local server to serve your UI5 app as well as libraries. You can install any server you wish to locally in your machine. Ex- Apache Tomcat, node.js.
You can refer to this blog for serving ui5 via node.js
UI5 SDK on Node.js
I mean,Need to download sdk for development and where i need to place that sdk in Apache tomcat?
How can we get project structure as in eclipse if we use notepad++?
can u plz post notepad++ SAPUi5 application structure?
If you just google out, "how to serve static files using tomcat" you'll find lot of blogs on it.
Regarding the project structure, its completely your own wish how you wanna structure the app.You'll have to manually create folders and place your files within it.
OK, Thanks for your quick reply.
I think we should have sdk folder for development in order to refer sapui-core.js and all related files?
It's easier to reference the SDK online in the index.html: https://openui5.hana.ondemand.com/resources/sap-ui-core.js
This is a web applications, the folder structure is up to you. The only things really required is the index.html and Component.js.
Thank you for writing this! It is a great help to me, a beginner, and I hope to be able to pay it forward some day!! I appreciate all the suggestions and the links are valuable resources!!!
Nice Blog Sakthi 🙂
Well written for beginners..Like me 🙂
Thanks,
Syam
Thanks.
What is the prerequisite skill required before I jump start into learning the sapui5?
PS: I have no exposure to HTML or JavaScript.
Your response would help people like me to get started from basics.
Thanks
Bharathy
For any web based front-end development one needs to understand javascript, html,css which is the basic foundation here. With UI5 as we don't manually need to design the UI using html/css, the focus shifts more on to javascript. I believe the Mozilla Developer Network is a better place to learn javascript .
JavaScript Guide - JavaScript | MDN
But additionally at least a very basic knowledge on HTML/CSS is very useful as in the end what renders in the browsers is entirely HTML/CSS.
Some time back when i had to give a presentation on UI5 in a SIT event, i had this on my slide.
That's a great advice. Sure it helps. Thanks
Well said sakthi...
nice tips thank you!
well Said 🙂 Great Blog. 100Likes 😉
Good one , thanks 🙂
Excellent write-up.
Good one Thanks,
Can I know most frequently using components in SAP UI5.
Very good!!!
I really agree with all points! I was using Eclipse and I give up to use Notepad++ (the only good text editor that my company allow me to install 😐 )
Two things that really help me when I'm learning new language:
1. Select a good book, read and make ALL examples/exercises. It will help you to set a goal and measure your progress. For SAPUI5, I'm follow a Portuguese book, written by Fabio Pagoti. It's a very good and objective book to introduce UI5 to ABAP developers.
2. Develop some small-medium projects. I usually develop the (a) Bhaskara Equation, (b) Tic-tac-toe game and (c) Simple Blog Engine (inspired by this), for almost all new languages I decided to start to learn.
Best regards!
I would like to get in with JavaScrip views!
Are there any example applications that are using JS views?
I can only find examples with XML views. 🙁
You can find source code of few sample examples in js.
Look out for all the html files in the below github link.
openui5/src/sap.m/test/sap/m at master · SAP/openui5 · GitHub
All the example's code in the 'Control' tab of demokit is in js.
SAPUI5 SDK - Demo Kit
@Dominik: There is a book called "Getting Started with SAPUI5" from Miroslav Antolovic. From the website of Sap-press you can download (for free) all the examples used in the book. Mr. Antolovic uses exclusively javascript for the views. Best regards.
Hi Sakthivel,
I am new to UI5 and downloaded the SDK demo kit. Now how can I proceed further ?
I have also studied the getting started with UI5 in UI5 community but got confused.
So can you please tell me the next step on installing UI5.?
Thanks,
Vimal
To get started, you need to choose a developer environment and set it up. You can find info about this in the demokit developer environment section.
https://sapui5.hana.ondemand.com/#docs/guide/b1fbe1a22f8d4a5bbb601591e27b68d1.html
It's your wish whether you want to go with Web IDE/ Eclipse/ Node.js based. The documentation covers the all the ide's.
Hi Sakthi,
Great Blog,
I would like to know that how we can deploy our applications to our mobile/ tablet instead running the application from mobile/ tablet browser through URL.
Thanks,
Rumeshbabu S
Great information. Thank you.
Completely agreed, very helpful tips for beginners.
yes i also agree with you.. 🙂
Nice one Sakthivel .
Insightful, Nice one...:)
awesome blog.
newbie please advise how to install development env and start with hello world. i have working knowledge of abap, hana. could anyone please tell how to ramp up in ui5. thank you so much guys. appreciate your timely reply.
Good article