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!

     I guess maybe it would help to describe my background first though if I am going to talk about how I “learned” OpenUI5. If others were to follow, I would want them to understand the foundation/background I came from before getting into this. First off, I am NOT a “unique snowflake”. Nothing unique about my background or anyone else who has done any kind of web development over the years. I have coded HTML and CSS through all their iterations, and of course most recently, HTML5 CSS3. Along with that, I have a experience in the usual related web dev technologies (JavaScript, JSON, AJAX, PHP) as well as some not-so-popular ones by comparison (classic ASP/ ASP.NET web forms and MVC) …even written a few of my own C# web services from time to time (haha) . I had occasionally used JQuery (Lightbox plugin for example) where things were easier with it but for the most part steered clear from “JavaScript frameworks” just as much as CSS pre-compilers like LESS (think of it as programmable stylesheets). I always considered myself more of a “hand coder” and did not like to rely on others except where absolutely necessary and/or to not “reinvent the wheel”. Along with my “hand code everything” stubbornness, I had watched so many “JavaScript frameworks” rise and fall over the years…so many seemed to come into fashion and then disappear just as quickly. I had just been waiting to see how the “dust would settle”. Now, however, with SAP jumping into the fray, I thought it was my turn as well. Time to get to gettin’ …as they say (haha)…

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's Weblog

Like most how-tos, it began with the familiar “step 1″….set up Node.JS…..but what is Node.JS?…..I found this (The Node Beginner Book » A comprehensive Node.js tutorial) The Node Beginner Book » A comprehensive Node.js tutorial and went through it…even spent the $9 to get the whole thing….thought of it as a little “tip” and “thank you” for his hard work and nice write up….learned lots from that tutorial….also checked out some other Node.JS tutorials/books but didn’t spend too much more time on it (this blog is referenced in the OSCON material as well and is REALLY good too =>UI5 SDK on Node.js )…I got the main point of it by now (think of it as a web server without being a web server…allows you to run server side Javascript without a server…allows some awesome non-blocking, asynchronous wizardry…but you can do soooo much more with it too!)…Node.js did get me off track further a bit by looking at the Google V8 JavaScript engine….which then got me looking at Mozilla’s “Rhino” JavaScript engine and then I stopped reading the Wiki’s about the various engines. (haha)

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)

Before I got ahead of myself, I had to jump over to something else that was bugging me now…like my sidetrack “learning” Node.JS….this brought more questions…..OpenUI5 seems great….but how does it compare to other “frameworks”….I recalled BLAG mentioning a few and I had played around with JQuery a time or 2 myself….if I wanted to really understand OpenUI5, I figured I needed to really try to understand its strengths and weaknesses compared to others as well as how and where it really shines the most. If you look for “Javascript Frameworks”, you will find quite a lot…and I wasn’t about to go through each and every one!

Comparison of JavaScript frameworks – Wikipedia, the free encyclopedia

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

http://bitworking.org/news/2014/05/zero_framework_manifesto

Like many, I often (inadvertently) used “library” and “framework” interchangeably myself. That rant against JavaScript frameworks had me really thinking…especially the point he made about “snippets/Gist < Library < Framework”. So I “pressed pause” on my self-teaching and wanted to better check this out. I had often seen mention of the “SAPUI5 framework” in early blurbs about it, but then, checking out the OpenUI5 page, it describes itself as “OpenUI5 is an Open Source JavaScript UI library“. Looking around, it seems that for SAPUI5/OpenUI5, many people would switch the terms. But what about others? Looking up JQuery, it is listed as a “cross-platform JavaScript library”, however if you look elsewhere, people call it a “framework” as well. I saw a question on Stack Overflow about what to really call it. One funny quote/response caught my attention, “One person’s library is another person’s framework.” (haha). But another response put it well as “A framework is something that usually forces a certain way of implementing a solution, whereas [a libary] is just a [set of tools/controls/functions] to make implementing what you want to do easier.” Ok….I got that….but I also got that a LOT of other people seem confused on the differentiation, so I felt better knowing I was not alone. (haha)

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

Best JavaScript MVC Frameworks 2013-2014 | JonathanMH

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

  jQuery Hotshot eBook: Dan Wellman

  jQuery For Dummies: Lynn Beighley

Backbone.js (many places refer to it as the most “popular”…”most involved community”…etc…so I thought it best to start with)

     Backbone.js Tutorials

     Backbone.js  (the famous “TO DO” list and examples)

     Developing Backbone.js Applications  (awesome OPEN SOURCE version of the O’Reilly book!)

     Backbone.js Is Not An MVC Framework! (this was an interesting read!)

     (and I found that if doing anything with Backbone in addition to Underscore.JS and JQuery, you will often find mentioned Require.js and Marionette.js to do even more with Backbone)

Agility.js (actually found this one through a Backbone.js tutorial site…since it was “easy”….another one to check out haha)

    Agility.js Javascript MVC library  (meh…I found it pretty simple…kind of a dumbed down version of Backbone)

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

AngularJS Fundamentals In 60-ish Minutes – YouTube

AngularJS Tutorial &amp;#8211; Learn AngularJS in 30 minutes | RevillWeb

Introduction to Angular.js in 50 Examples (part 1) – YouTube  (Part 1 and 2 are VERY good! Steps you through everything nicely!)

http://code.tutsplus.com/tutorials/building-a-web-app-from-scratch-in-angularjs–net-32944  (really fun and good one…but only after learning basics!)

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

http://www.artandlogic.com/blog/2013/05/ive-been-doing-it-wrong-part-1-of-3/ (really good 3 part series! can apply elsewhere too!)

AngularJS Lessons – Screencast Video Tutorials @eggheadio  (lots of good tutorial videos!)\

AngularJS for jQuery Developers

angular-app · GitHub (full blown, real world AngularJS built app….good to learn from just like looking at SAP code to learn ABAP! haha)

https://builtwith.angularjs.org/ (good collection of actual AngularJS apps…good to learn from and spark ideas!)

Backbonejs vs Angularjs : Demystifying the myths | Next Big Thing (good read!)

Others I looked at, browsed over, but really did not spend too much time on….

Knockout.js

Ember.js

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:

Blag’s bag of rants: Getting Started with PhantomJS – Book Review

Blag’s bag of rants: MeteorJS and SAP HANA

Blag’s bag of rants: Mastering Web Application Development with AngularJS – Book Review

Blag’s bag of rants: Instant AngularJS Starter – Book Review

Blag’s bag of rants: Learning jQuery, Third Edition – Book Review

web site vs. web app?

Like the “gray area” I discovered with JavaScript “frameworks” vs. “libraries“, I soon found myself pondering the same thing around “web stuff” in going through all the above examples, tutorials and such. Like I said, web development is not new to me, but I never really thought that much of what “it” was that I created. I always just said “web stuff” if someone asked. I was always just coding web pages (or code that would create said pages in respect to scripting). Some just displayed content. Some were interactive. I might code up specific pages or groups of pages as a full web site. If my pages “did something”, I might even interchangeably refer to them as a “web site” or “web application” and not think much of it. But there is really something different between a “web site” and a “web app” isn’t there? How is a “single web page” different from a “single page web app”….or are they? Well, once again, I was not alone in this debate….

http://www.visionmobile.com/blog/2013/07/web-sites-vs-web-apps-what-the-experts-think/

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:

1. 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/“
2. 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.

Sublime Text

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:

Sublime Text – Download

Code checking and formatting in Sublime Text

qmacro/SublimeUI5 · GitHub

Perfect Workflow in SublimeText2 (Learn Sublime Text in-and-out…free course with free sign-up! Thanks to Graham Robinson for this gem!!!)

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

GitHub

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

http://yow.eventer.com/yow-2012-1012/how-github-works-by-zach-holman-1285

Miscellaneous (other useful nuggets found along the way)

Postman – REST Client (VERY cool REST client for CHROME!)

RESTClient, (cool Firefox add-on much like Postman)

JSHint, a JavaScript Code Quality Tool (Pretty sure folks know this one but it is a very good JS debugger…SublimeText2 has a package for it too!)

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…

DJ Adams

Alvaro Tejada Galindo (aka. BLAG)

Graham Robinson

Chris Paine