My path to learning OpenUI5…..deeper down the rabbit hole and back again!
First off, I apologize for the length of the blog, but hey, no good journey is short one….I mean, what would “Lord of the Rings” have been if it began with Frodo taking the ring from his home, walking into his village and melting the ring in the town’s bonfire…done and DONE!…but not quite the same story. haha Sooooo……
Many moons ago now (“many” in technology terms) when the SAPUI5 announcement was made, I like many others had the same reaction…”and the crowd goes mild“….er what?!?!”…I was a little excited, but as I had no immediate need for it and did not have any clients even looking at HANA, the Gateway or anything else, I just kinda thought “well, SAP has yet another new web development solution….let’s see how it goes and then MAYBE I will get interested.” Perhaps after all these years, I was finally jaded on new SAP development technologies/models. I had been through the original ITS, the *improved* ITS with “flow control”, through BSP with CRM/SRM, toyed with WebDynpro JAVA (enough to know I hated NWDI and everything it took to get in place just to START to code), and had really been enjoying WebDynpro ABAP for a while now. I figured if anything, it would be a bit like any other MVC-based framework….and even like good old WebDynpro ABAP….coding up the “views”, their iterations, etc. should be fairly straightforward with the “real work” being as always, coding business rules/logic and interacting with data correctly on the backend…..been there, done that a bazillion time…. just another language/model/syntax/etc to learn to do it….so I kinda kept “interested from a distance”. But then in December 2013, SAP announced OpenUI5…open source and free!!! It felt like a big “Merry Christmas” gift from SAP to us. Better still, it was not just for SAP. I could work with it for “other” things! THAT got me interested!
Jumping right in….oh! This water is DEEP!
I started looking for OpenUI5 info around early 2014. I wanted to find code examples, tutorials, the usual…..but found nothing really there. I found the runtime and SDK links….github page but no forks….what gives?
I started kind of studying SDK….a bit confusing…..where to start? Install is an “install”? What kind of web server? Where to put it local? Any good CDN?
Then I found DJ Adams’ blog and furthermore his “OSCON” tutorial…. OpenUI5 Tutorial at OSCON 2014 | DJ&#039;s Weblog
Back to DJ’s tutorial….went through the whole thing….it was GREAT! I got really excited by what I saw and how easy it was to build. I do not want to sound like a “brown noser”, but I gotta say that DJ and the team did a VERY good job on this tutorial….it covers everything quite well with well explained, easy to follow steps. Kudos, DJ! The light-bulbs finally went on!…but I wanted to do more…dive deeper into OpenUI5….I had kicked the tires…I wanted to open this baby up and see what she could really do out on the open road! (haha)
So I stuck with the few that seemed most prevalent today…. AngularJS, JQuery, and Backbone.js and Agility.js (only because one of the Backbones sites claimed it was “a simpler alternative to Backbone.js.” haha).
the Library vs Framework conundrum
As I was going through some AngularJS tutorials, I happened upon this very interesting page….
It only gets muddier when you consider things like this…”Generally a framework implies a [special] execution context while a library is just some external API that is used. However, by this definition then a jQuery Plugin would use the jQuery framework ” (stackoverflow.com)….so even a defined “library” can actually be a “framework” depending on how you look at it.
In the end, I just figured “Ok….it is what it is.” and went back to learning. I even found another great quote to support this….“Don’t worry about it. Worry about what the particular library or framework can do to help you.” That says it ALL! (haha)
Back to it with reckless abandon! (ie. I don’t care if it is a library, framework, toolset, etc….I just want to build something!!!)
To cut to the chase….here are the sites (aside from the official ones) that I studed/used/followed/read in order to learn the “basics” about each option. I am in no way saying these are the “only” ones or even the best ones to learn from, but they were the ones I found most immediately that helped me out..
Comparison of frameworks
JQuery (started here just to brush up on my JQuery since most all other “frameworks” have some manner….soft or hard…of dependence on it)
HTML5, CSS3, and jQuery with Adobe Dreamweaver CS5.5 Learn by Video: David Powers (EXCELLENT ALL AROUND for HTML5, CSS3 and JQuery!)
Backbone.js (many places refer to it as the most “popular”…”most involved community”…etc…so I thought it best to start with)
Agility.js (actually found this one through a Backbone.js tutorial site…since it was “easy”….another one to check out haha)
AngularJS (since it is now backed by Google and seems to be gaining in popularity, I thought it was a good one to get familiar with.)
Introduction to Angular.js in 50 Examples (part 1) – YouTube (Part 1 and 2 are VERY good! Steps you through everything nicely!)
https://docs.angularjs.org/tutorial (this is Angular’s own tutorial….once I felt a bit more comfortable with “what” Angular was, I dove into this one….and it was fun!)
Others I looked at, browsed over, but really did not spend too much time on….
Meteor (described as one of the few “top to bottom” frameworks where others are considered “front end”….might have to dive deeper into this one later haha)
Bootstrap (aka. Twitter Bootstrap) probably the most similar to OpenUI5 actually and documentation is nice! (haha)
…and again, I often would reference back to Blag’s blog and look at the book reviews he had done since he is a fellow SAP Mentor/Geek/Gearhead/Friend and I trust his opinions:
After reading through that article (as well as others), I came to the understanding (as many others did) that there is really not a cut-and-dry difference of the two….and more often than not, we actually see a blended version of both. I think the whole “site” vs “app” debate is more often being largely fueled by marketing types to spice it up the sound of their solution and create this false impression of “site = old/dated” and “app = cool/new”. In the end, I do not think that the difference in sites vs apps is technical at this point. In my opinion, it is simply an evolution in the user interaction experience that has come about due to the popularity and growth of “non-desktop” access. Users’ expectations have just changed. Developing anything with a slant/focus on “web site” vs “web app” is about as pointless as developing a “desktop only” or “mobile only” solution in most cases. We have grown past that…users have grown past that.
However, one thing I read did strike me…..could I build a full blown web site with any of the MVC frameworks I looked at earlier? Sure…..but it would be so overblown and likely a nightmare to maintain. When faced with developing a “web solution” for a given requirement, I will focus more on “best tool(s) for the job” rather than “what to call it”.
Back on track…full speed ahead!
So after spending time going through each of those, doing non-SAP examples, etc., I was all ready to jump back into OpenUI5 with reckless abandon now that I understood better it’s place in the (web development) world.
First off was getting things set up. What web server to use? Well, since like I said, I do a fair bit of (dot)Net development, I already had IIS going. I also had Node.JS as an option now (and a cool one it is!!!). But I also found another DJ Adams’ document ( Getting Started with SAPUI5: Alternative Guide ) that walks you through setting up a nice Apache web server for your use! Next up…where was I going to develop my code? Which IDE to use? Well, again, I already had Visual Studio (the “express” version is free if you want to use it). I also had Eclipse. Both seemed a bit much for my simple web apps though. I had seen Sublime Text used in many videos and tutorials for many of the things I went through to this point, so I figured I would give it a try (and LOVE it! more on that later…). Last of course…Which libraries to grab and where to put them? Well, the latter is just a matter of personal taste and there are opinions on where is best. I actually wish SAP had a nice CDN, so I wouldn’t have to bother with “grabbing” or “locating”. Anyways, I downloaded the “latest and greatest” OpenUI5 SDK (and runtime for grins) from the official GitHub location, OpenUI5 – Download . I started off with the 1.20.10 version but over the course of this, I ended with the 1.22.8 version. So now, I was all ready to go!
And wouldn’t you know it…lucky me….just as I was jumping back to it, I found NEW (new to me at least) documentation for the “mobile” library….WITH CODE EXAMPLES!!!! YEA!!!!! It can be found here: OpenUI5 Explored Not to mention, the Facebook SAP Developer group (SAP Developer Center | Facebook) start posting up some more info!
Before long though, I realized that I had this unnerving feeling of stumbling around and not really “getting it”. I felt in working through these tutorials and “starters”, I was really just “copying” the steps without understanding really why I was doing this-and-that, knowing options I could add/change, and figuring out what all was going on behind it. Sure, I had working code and nifty OpenUI5 apps, but I really had no idea how or why they really worked. So, as I probably should have done from the start, I dove right into the SDK and began reading it from end-to-end (some parts 2 and 3 times even). I worked through the “Create Your First SAPUI5 Application“, then on to the “Create Your First Mobile SAPUI5 Application“, and I thought I was steaming along. Then, I tackled the “Application Best Practices” example and things came to a slow grind. Not only did it get complicated quickly, but the steps were rather confusing. Add to this that the code has bugs, and I was ready to pull my hair out (or just go back to ignoring OpenUI5 haha). I will save all the details, but will say that I got it working thanks to some helpful forum posts I found as well as things I had to figure out myself. These include:
- change the OData service call in your Component.js file from serviceUrl : “/uilib-sample/proxy/http/services.odata.org/V2/(S(sapuidemotdg))/OData/OData.svc/” to serviceUrl : “http://services.odata.org/V2/(S(sapuidemotdg))/OData/OData.svc/“
- this will lead you to another problem….a CORS error (ie. No ‘Access–Control–Allow–Origin‘ header is present) in Chrome. To correct this on my Windows machine, I had to make sure all Chrome browsers are closed and run the command line “Chrome.exe –disable-web-security http://localhost/<path to your TDG example location>/index.html“. You can look it up for your own system.
So I got through that and got back to reading the SDK. It was about then that I found all the other MUCH SIMPLER examples that are in the SDK (look under the “test-resources/sap/” directory…especially in the “demokit” directories under the branches for “ui” and “m”). These should keep you busy for a long while like they did me. (haha)
After going through the SDK, I was feeling a LOT better about my comfort level with OpenUI5, but I wanted to put myself to the test. I decided to go back through DJ Adams’ (and team) great OSCON tutorial mentioned (and linked!) above and try to do it all on my own…as well as in other ways (ie. HTML views). Now THAT was an interesting “self assessment”! (haha)
…And then, something amazing happened……time had crept up on me, and it was that time again….time to go to SAP TechED (&& d-code now!) in Vegas…time to sit in on all kinds of SAP/OpenUI5 lectures, hands-on workshops, expert meet-and-greets, etc….and not to mention finding out how all of this ties into River IDE (now renamed “SAP Web IDE”) and Fiori. Perfect timing!!!!
Sadly, this is where our journey comes to an end…for now. I am by no means an OpenUI5 expert now, but I do think I went from “noob” to “slightly dangerous” level. (haha) Now, that I am learning more and more, be warned…..more and more OpenUI5 related blogs WILL follow! (haha)
BONUS BITS!!! : Other Helpful Bits Discovered Along the Way
Going through most of the tutorials, examples, etc. with the other “frameworks” as well as OpenUI5, I found a few tools,links,”things” (technical term),etc. here and there that I thought might be useful to others as well.
I used Eclipse as well as Visual Studio 2010 Ultimate, but I also finally fiddled around with Sublime Text (version 2) because I had heard so much about it as well as many examples used it. I did find it very easy to set up, personalize and get working how I wanted. It really did make life a bit easier….at least for the more basic work I was doing (ie. no need for integrated testing tools and packagers….thought it does have packages for things like that too!) These links really helped me out to get it up and going:
OpenUI5 for Visual Studio
And, since my prior experience in the .Net/Visual Studio world, I found this blog and walk through example for developing SAPUI5 in Visual Studio to be interesting…. Getting started with SAPUI5 and another one too SAP UI 5 aka Open UI 5 application development with Visual Studio. Both were fairly straightforward. The first was more geared to SAPUI5 and was fairly old (2012?). I read through it but not much else as much has changed since then. The second one was pretty basic (more just to show how to include the SAPUI5/OpenUI5 “resources” into a Visual Studio project).
And since OpenUI5 is OPEN SOURCE (as is most everything else I delved into), I had to get up to speed on GitHub. If you don’t know what it is (like me before this journey….I just thought “oh its like a code sharing thing”), well, there are plenty of sites (including GitHub) that will step you through it all. However, this was a really good “talk” about GitHub that really made me have a deeper understanding (as well as think of ways to apply these ideas elsewhere)…..
Miscellaneous (other useful nuggets found along the way)
PLEASE feel free to add your own “cool tools and links” in the comments below as well!
Respect and Acknowledgement
I do want to end (and make sure) I give proper acknowledgement to those who really got me motivated and inspired to dive into OpenUI5. Oddly enough, they are all fellow SAP Mentors….but then, that makes perfect sense as one of the qualities of any SAP Mentor is that they actively try to inspire, teach and motivate others. Without their many posts, blogs, nudges, pushes, etc., I don’t know if I would have finally thrown my hands in the air and exclaimed “ok! OK! Enough already!!!…I give up..I will learn OpenUI5!!!!” (haha). Soooo many thanks and respect to the following for the “push” into that deep water…
Alvaro Tejada Galindo (aka. BLAG)