My Journey to UI5 – Part 1
A little preamble
I’m writing this document more for my help in keep track of my success and, even more, my errors, following Fiori’s master rule “fall first, fall often”.
I’m using a real case from my company to try UI5: it’s a bit scaring since if things will not sort out well, it will be a real problem!
This will not be a pure technical blog, but a more descriptive one, with links over links to the sources I used.
The tech parts will follow in later entries.
My background
When I read about UI5, I was scared. Literally.
It has been almost 12 years since I developed anything for the web (in early 2Ks I worked with PHP) and surely I do not remember the last time I worked with JavaScript!
So it has been mandatory and useful get the bases to avoid running around like a drunken chicken trying to understand what a single row of code does.
There are a bunch of sources where you can learn and refine your JS skill:
- https://developer.mozilla.org/en-US/Learn/JavaScript
- http://javascriptissexy.com/how-to-learn-javascript-properly/
- http://www.w3schools.com/js/
- https://www.codecademy.com/
- https://mva.microsoft.com/training-topics/web-development#!level=100&jobf=Developer&lang=1033
I focused on Codeacademy (I heard a lot of stories about it and I was curious to try it out) and JavascriptIsSexy (hot name!).
I know the choice is not brain-guided, but it ended up with me understanding the basics and the core concepts of JavaScript so I’m pretty satisfied.
I encourage everyone to try out as many tutorials and site as possible to find which methodology and style fit better for herself.
Learn UI5’s basics
I was aware about the difference between OpenUI5 and SAPUI5 and, even if in a far away future my company will probably require to switch to OpenUI5, I sticked as starting point with SAPUI5 due the larger (and more familiar to me) community on SCN.
So I downloaded Eclipse ADT with all the option except the one for SAP Hana (we are on 7.31) and then… well, where I start from?
The best way I found out to learn something about UI5 has been following the tutorial “Walkthrough” https://sapui5.netweaver.ondemand.com/#docs/guide/3da5f4be63264db99f2e5b04c5e853db.html
And with “following the tutorial” I mean, following it step by step, deleting everything and trying to redo it by myself, adding or removing the pieces just to try.
This procedure (“fall first, fall often”, do you remember?) reminded me when I was a child and play with Lego: the first couple of times I followed the instructions, then I always tried to build my galleon or my spaceship just “guessing” the right way.
I do not need to say how many times I failed and throw everything away (yes, I’m still talking about my first app), but I think that’s the best way to catch up with the mechanisms of something.
It has been hard, really hard due my steamy temper, discovering that my ABAP skill were useless in this world and that I keep crushing and crashing against silly things I never ever cared about (because with common SAPGUI and ABAP objects/FM we many nice features out of the box while with UI5 you have to think about them).
But they really were? No, as you’ll find out in later blogs if you find interesting following them, exactly the opposite.
O Data, OData, wherefore art thou OData?
Even if you can build a standalone app without any connection with SAP, we all know that we HAVE to communicate with SAP, reading and writing data, so, when I somehow mastered the basic concepts of MVC and UI5, I moved to study how SAP can generate an OData service.
After a bit of googling, I found this guide (maybe not so recent since it’s from 2012) which is written really well by Bertram Ganz and Bernhard Siewert
http://sapassets.edgesuite.net/sapcom/docs/2012/11/44779e8c-5b7c-0010-82c7-eda71af511fa.pdf
If you, like me, are new to OData Services, follow this guide and in a couple of hours you’ll have your Service ready and running.
Another guide, a bit more recent, I used a lot is http://scn.sap.com/docs/DOC-61821 from Mohamed Meeran
Both of the guides rely on FMs to manage the data retrieval and update and, even if there is nothing wrong with them, I looked for something more… nice: http://www.abap-developers.com/2014/07/simple-openui5-application-i-how-to-create-odata-model-using-segw/
http://scn.sap.com/people/peter.marcely ’s guide showed me how to bypass the FM and to use directly the classes generated for the Services.
I found it better, since I got less objects to manage (a dictionary structure and the classes) and I stick with OOP which is always nice in my opinion.
I got the ropes now, and all the tools available for my first app: I got my Lego’s pieces, all scattered around, a full set of instructions and a monster headache because I do not know from where to start…
Here you can find my Part 2
I'm just starting to learn about sapui5 and all the resourses you mentioned are very helpful. Thank you for posting it, looking forward to the part 2. =)
P.s. You have a nice writing style and your text sounds like a story, which makes it quite interesting to read.
Thanks for your kind words, Alexandra.
About my style: writing short stories is a little hobby of mine 🙂
Your're welcome, I enjoyed reading the article. =)
Btw, I found courses on openSAP rather helpful in learning the basics of sapui5, in particular Developing Web Apps with SAPUI5. In the course WebIDE is used, but you can do all the exercises on eclipse, too.
It shows - article structure is nice and logical, and the text reads smoothly, if I can use that word. How long have you been writing, if you don't mind me asking?
Nice guide Simone.
Just wanted to add, the free courses offered by Microsoft Academy are really great for absolute beginners on HTML, CSS and JS.
https://mva.microsoft.com/training-topics/web-development#!level=100&jobf=Developer&lang=1033
Benedict
Thanks Benedict! I add your link in my post 🙂
just started learning UI5 couple of weeks back. I can totally relate to you . Waiting for Part 2 🙂
I started learning SAPUI5 in the beginning of this year, and in some points I'm related with you! 🙂 Waiting for the next journeys! Thank you for sharing your experience!
Good One! i am starting on this journey myself! Still finding my Legos though! this should help me out.
thanks a Ton.
Take it like a game or you'll go mad -yell from the asylum-
Hello,
Simone Milesi
Thank you for this nice Blog. Your Bloggling style is engaging. I am working on SAPUI5 for quite some time. I really found it hard to start as I didn't know where to start! You have laid out a nice learning path. It helps to connect the dots from the backend to frontend with Odata as a cross point inbetween.
Can you please link the part 2 and part 3 to this blog so that it will be easy to navigate for the readers/coders.
Best Regards,
Rekha
Hi Rekha,
here you find part 2 and part 3
I'll add in the main part