Skip to Content
Author's profile photo Former Member

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.


/wp-content/uploads/2015/03/texteditorlogocollage_668812.png

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.


http://img.picturequotes.com/2/2/1378/you-were-born-an-original-dont-die-a-copy-quote-1.jpg

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

http://www.ibmsystemsmag.com/getattachment/c247b44e-07b3-4ca9-9724-d913fb9dc3c2/

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


http://www.keepcalmstudio.com/_gallery/300/O2tJXT.png

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.


http://www.barbiedecker.com/wp-content/uploads/2014/11/Problems-solving.jpg

   

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.

http://d1lwft0f0qzya1.cloudfront.net/dims4/COKE/43f697d/2147483647/thumbnail/596x334/quality/75/?url=http%3A%2F%2Fassets.coca-colacompany.com%2F5a%2F02%2Febc1d0f842468408be5de9740884%2Fcoding1-604.jpg

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

Assigned Tags

      42 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Good one. Thanks

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      In the landing page of UI5 community, you can find the getting started with UI5 which has the link of the docs.

      Author's profile photo Joao Sousa
      Joao Sousa

      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.

      Author's profile photo chetna dabra
      chetna dabra

      Very well written...

      Author's profile photo Former Member
      Former Member

      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....

      Author's profile photo Joao Sousa
      Joao Sousa

      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.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Joao Sousa
      Joao Sousa

      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.

      Author's profile photo Venkatesh M
      Venkatesh M

      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++.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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

      Author's profile photo Venkatesh M
      Venkatesh M

      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?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Venkatesh M
      Venkatesh M

      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?

      Author's profile photo Joao Sousa
      Joao Sousa

      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.

      Author's profile photo Former Member
      Former Member

      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!!!

      Author's profile photo Viswanatha Reddy A
      Viswanatha Reddy A

      Nice Blog Sakthi 🙂

      Author's profile photo Syambabu Allu
      Syambabu Allu

      Well written for beginners..Like me 🙂

      Thanks,

      Syam

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Capture.JPG

      Author's profile photo Former Member
      Former Member

      That's a great advice. Sure it helps. Thanks

      Author's profile photo Former Member
      Former Member

      Well said sakthi...

      Author's profile photo Former Member
      Former Member

      nice tips thank you!

      Author's profile photo Santhosh Gowda
      Santhosh Gowda

      well Said 🙂 Great Blog. 100Likes 😉

      Author's profile photo Praveen K P
      Praveen K P

      Good one , thanks 🙂

      Author's profile photo Former Member
      Former Member

      Excellent write-up.

      Author's profile photo Former Member
      Former Member

      Good one Thanks,

      Can I know most frequently using components in SAP UI5.

      Author's profile photo Flavio Furlan
      Flavio Furlan

      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!

      Author's profile photo Dominik Auras
      Dominik Auras

      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. 🙁

      Author's profile photo Sakthivel Elango
      Sakthivel Elango

      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

      Author's profile photo Gabriel Gomez
      Gabriel Gomez

      @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.

      Author's profile photo Vimal Sharma
      Vimal Sharma

      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

      Author's profile photo Sakthivel Elango
      Sakthivel Elango

      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.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      Great information. Thank you.

      Author's profile photo Vishal Dalvi
      Vishal Dalvi

      Completely agreed, very helpful tips for beginners.

      Author's profile photo Gokulakumar Kamalanathan
      Gokulakumar Kamalanathan

      yes i also agree with you.. 🙂

      Author's profile photo Ravindra kalyan Vallabhuni
      Ravindra kalyan Vallabhuni

      Nice one Sakthivel .

      Author's profile photo Former Member
      Former Member

      Insightful, Nice one...:)

      Author's profile photo Former Member
      Former Member

      awesome blog.

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo BHARANIDHARAN S P M
      BHARANIDHARAN S P M

      Good article