Using SAP OpenUI5 on your .NET business apps

In this article we explain how to attain the goal of applying the SAP OpenUI5 user interface library to create line-of-business applications that have the same look and feel of SAP HR applications, like SuccessFactors and SAP Fiori apps. The challenge is to achieve this goal using Microsoft ASP.NET MVC as the underlying technology for SAP HR cloud extensions. We also show that it is easy to convert existing .NET business application to use OpenUI5 when the user interface coding is completely isolated from the application logic.

Why use SAP OpenUI5?

Why are we now using SAPUI5 as the javascript UI library of our web applications?

When choosing a JavaScript UI library to be used on business oriented web applications, the main aspects to be considered are:

• The core JavaScript framework in which the library is built on (jQuery, AngularJS, Prototype, …);
• The amount and coverage of UI controls offered by the library;
• If it has databinding capabilities, which is the underlying technology that makes possible a true Model-View-Controller (MVC) client side implementation;
• Supported data sources for databinding (OData, JSON, XML);
• A responsive layout strategy to fully embrace the mobile first design approach;
• Performance of the UI controls in different browsers, taking into account memory and CPU usage;
• If it is stable, reliable, frequently updated, and with a strong market adoption.

In order to fulfill these user interface needs and objectives, we usually need to use a combination of frameworks. This combination has to be carefully chosen to avoid technical conflicts and overlapping features. To achieve the mentioned goals we suggest the combination of 3 technologies:

1. Wijmo by GrapeCity or Kendo UI by Telerik - both are a third party UI control library built on jQuery;
2. Knockout - a JavaScript framework to implement MVVM and MVC design patterns, databinding;
3. Bootstrap - a CSS framework for responsive layouts.

With these three technologies you are able to implement a web application that uses the latest HTML5, CSS and JavaScript frameworks, with a responsive layout, good browser performance and a clean user interface for business applications. However, your development and sustaining teams need to learn all three technologies and, as requirements complexity increases, they will need to dig deeper on each technology as well.

Advantages and disadvantages

OpenUI5 offers all these possibilities in a (almost) single framework based on jQuery and jQuery UI, which is, in terms of usage, very similar to jQuery UI widgets. This makes it very easy to use for most developers who worked previously with jQuery UI.

Figure 1/ Combination of client side frameworks versus OpenUI5

Based on our needs, OpenUI5 shows some great advantages:

• The number of controls and components offered by OpenUI5 is wide and keeps growing on every release. They cover most of the needs of a typical business application (menus, data grid, collapsing panels, forms, etc.);
• Databinding capabilities, allowing the use of MVVM/MVC design patterns with local JSON and XML models, as well as remote OData data sources;
• Responsive layout engine built into all UI controls, which allows them to be used on both mobile and desktop browsers;
• Ability to create new redistributable UI components;
• Built-in internationalization and localization support;
• It is developed by SAP, has a three month release cycle, and is the core framework for all SAP Fiori apps.

But we also encountered some disadvantages:

• Low flexibility to change the behavior and look and feel of existing components and controls (though OpenUI5 has a UI theme designer);
• The rendering of UI controls is completely done in JavaScript, meaning that there is no HTML whatsoever on the application code! The HTML is generated by direct creation and manipulation of DOM elements. This is a game changer for developers who are used to manually create HTML5 tags on the server side and then attach a JavaScript component for client side dynamic behaviors;
• A decline on browser performance due to a highly complex component architecture fully based on JavaScript for rendering HTML5, which increases the payload of JavaScript files, as well as memory and CPU consumption on the browser;

How does OpenUI5 fit to a Microsoft ASP.NET MVC web application?

One of the key questions that we had to put to ourselves was: will we be able to keep our development methodologies and technologies with OpenUI5 as we did with previous libraries?

From our research we learned that OpenUI5 fulfills our needs in terms of a JavaScript UI library for line of business web applications. However, we are not willing to abandon the ASP.NET MVC server side architecture.

We build our applications based on industry standard design patterns, mainly Domain Models, Data Access Layer, Repositories, and Service Layer. These patterns, including dependency injection, allow us to have a separation of concerns that makes unit testing possible on all layers where the business logic resides.

Figure 2/ OpenUI5 on the last layer of a typical ASP.NET web app architecture

Based on our development methodologies, OpenUI5 would appear on the last layer – the web based user interface. We evaluated the use of OpenUI5 for web applications developed in the .NET Framework ASP.NET MVC, without losing the built-in capabilities of form submissions, model validation, partial web page refresh, and – the most important one – the URL routing system that transforms HTTP operations over URLs to the invocation of MVC actions (methods) on controllers (classes). The OpenUI5 architecture leans towards the implementation of single page applications (also known as SPAs or OPAs – one page applications) with client side views and a single URL for the entire application, which would completely invalidate the server side ASP.NET MVC coding with Razor views.

Technical implementation

To be able to use the ASP.NET MVC server side URL routing and its project structure organized into MVC Areas, Controllers and Views, we need to use Razor Views to generate JavaScript instead of HTML5. In this way, we are changing the typical content of Razor Views, but not its intent. Razor Views are still views that rely on a model provided by the controller; only the rendering technology changes; it becomes purely JavaScript. The Razor syntax is now used to generate JavaScript objects to become client side models, populate properties of the OpenUI5 components, or even to dynamically create OpenUI5 components.

As a good development practice, all JavaScript code should be validated using tools likeJSLint or JSHint. This can only be achieved when the JavaScript code resides on its own files, without any Razor syntax! This requires all JavaScript coding to be moved outside the Razor Views. We decided to add a “twin” file to every Razor view, which will contain the JavaScript for that view. The code that remains on the Razor views is simply an invocation of the JavaScript code from the twin file, providing parameter values obtained from the MVC model.

Figure 3/ JavaScript files for each Razor view

Figure 4/ Single JavaScript function call from within the Razor view

This architecture has the following benefits:

• All JavaScript coding resides in its own files, without Razor syntax. This allows them to be validated by external tools like JSLint or JSHint. Using the naming convention of placing the JavaScript file with the same name and location of the Razor View, they are kept together on the Visual Studio project.
• The browser will cache all JavaScript files, meaning that they will be received only once. The Razor views will generate a single JavaScript function invocation, which will be just a fraction of the total JavaScript for that view. Each URL requested by the browser will bring just a few JavaScript method invocation from each Razor view that contributed to the full page.
• Bundling and minifying all the JavaScript files is natively provided by the ASP.NET MVC infrastructure.

By default, the folder where Razor views are located is protected to disallow any browser request to its content. To allow the individual JavaScript files to be provided in debug mode, an exception must be added on the “web.config” file located on the “Views” folder.

Figure 5/ Allowing JavaScript files to be retrived from the Views folder

Figure 6/ Sample of a JavaScript file to create OpenUI5 components

Development efficiency

The use of a comprehensive UI control library frees developers from having to create low level HTML5 and CSS3 coding of user interface components. These handmade components are often made using a combination of server side and client side coding, increasing code complexity and maintenance. With OpenUI5 the developer can focus only on choosing the most appropriate component for the desired user interface. Creating a new OpenUI5 theme for corporate branding of a business application can be offloaded from the application developers to a separate design team.

Summary

The SAP OpenUI5 control library is an obvious choice when you are developing custom applications to extend SAP HR cloud products like SuccessFactors or SAP Fiori apps. You will be able to provide a consistent user experience across the entire HR landscape. Existing ASP.NET MVC applications can easily have their UI coding re-implemented to use OpenUI5, without leaving the .NET platform and also avoiding the single page applications design. The only downsides are the lack of flexibility on customizing existing components and an increased CPU and memory consumption on the browser, which can be minimized with careful JavaScript coding. This will be a subject for future articles.

SAP’s OpenUI5 JavaScript Library is Surprisingly Well Done, Comparable to AngularJS

I really wanted to hate the SAP OpenUI5 Javascript library introduction at OSCON yesterday. I’m an AngularJS zealot (and I love the brilliance of ReactJS). The SAP team started off with such great fodder for my expectations with their presentation with an unexciting application that bragged about the German victory over Brazil in the semi finals of the World Cup.  That did not sit well with me. Despite my German heritage, after living in Brazil for a year, I now consider “meu coração é brasileiro.” So just a few minutes in, SAP was already down a goal in my book.

There are things about the SAP UI5 library that worry me. Often times they said things like “very little code” when the font size was so small no one in the first row could see the text and this obviously represented only a portion of the code for that particular demo. The SAP team has a strange approach to open source and forks (more on this below). Their testing story was uninspiring when compared to something like AngularJS. There are issues with the SAP UI5 library, but in the end, there are a lot of good things. Actually, a lot more than I would have imagined, and that says a lot about a new open source entry in the world of full stack client-side JavaScript libraries.

The OpenUI5 framework offers a library with the goal of delivering a complete set of components for building web applications. There are other frameworks which offer this, and others which have better offerings on some facets. But, because this is the first JS library offered from a massive enterprise like SAP without a tight linkage to a backend (so let’s ignore Microsoft’s offerings for now), there are some places where OpenUI5 shines compared to other frameworks.

Being “enterprise grade” means these things according to SAP:

• extra quality assurance
• supportability
• internationalization and right-to-left support
• accessibility
• extensibility
• theming

Situating QA as the first offering is a high standard to reach, a standard set by AngularJS. No other framework offers the test coverage that AngularJS does, and no other framework offers the ability to test JavaScript better than AngularJS. But, the SAP team is thinking about testing and stated they test their code against a large matrix of browsers, including IE9, which means they are at parity with AngularJS. Though SAP does not publish their test statistics (this is a big deal to me!), the test cases are included in the download of the OpenUI5 framework. When I asked in the QA session about their testing recommendations, they said they recommend Qunit and Selenium. I’d say they get a C+ for their testing story: their intentions are good, but the delivery is lacking (but could easily improve given their trajectory). And, given the wide variety of needs that enterprise customers of a company like SAP, I would bet they will iron out the kinks and have good either through manual or automated QA.

From here on out in the presentation, the SAP offering looked better and better despite my initial cynicism.  Ignoring supportability (perhaps this translates into something sensible in German), the fact that SAP mentions internationalization and right to left support is import. Other JS frameworks and libraries offer these tools, but they are almost always community supported. The AngularJS story for internationalization is finally in a good place, but it has never been a first class citizen, and never had a reliable roadmap. SAP delivers solutions worldwide with this toolkit and I expect their i18n and RTL support to be tolerable at the least and well supported at best.

Large organizations often legally have to support accessibility (adding information to the markup for screen readers, for example) in their applications, but open source projects are not bound by the same requirements and often fall short with accessibility features. Any toolkit can support accessibility, and the SAP team did not demo accessibility, but I expect this has occupied the time of someone internal to (and paid by) SAP more than other alternative JS library hackers. If I were considering a library and needed to support accessibility, I would strongly consider OpenUI5.

I was less impressed with the code examples and “extensibility.” Without digging deeply into the documentation, it would be difficult to compare the component libraries and there was code which was not explained fully in the demo. I liked that there were imperative code samples (pure JavaScript) and an XML declarative syntax, offering both methods of building applications using the SAP components. If you are worried about usage of the word “XML”, it looked closer to custom defined tags like AngularJS directives than namespace hell tinged XML documents like you might see in a Microsoft specification. I can’t vouch for the efficacy of the declarative code but I liked that these options were available.

Theming was very impressive. The SAP team displayed their “theme designer” which was tightly integrated with the component library. Their demonstration about how to change theming was powerful, looked simple, and displayed a deep integration with the SAP JavaScript components. I am sure SAP sales engineers will be demoing this hard when they do on-site client explanations. Most importantly, the theming is built on LESS, a standardized and open tool for maintaining CSS libraries. Coupling a great GUI like the theme designer with tried and true command line tools like LESS is a winning combination that will attract all types of developers and designers to the OpenUI5 library.

Finally, the SAP team showed a tool called “SAP UI5 Diagnostics” which seemed similar to Batarang, an AngularJS tool which allows deep inspection into AngularJS technologies. I was surprised to see a powerful tool like this, and it evidently allows introspection of the 180 components SAP delivers with OpenUI5 in addition to custom components you have built yourself. The JS interfaces for creating custom components make it possible to deliver a tool like this that knows about custom components, a tool which even allows you to change data in the model and update it inside a preview client view.

It should be noted that this library occupies a strange place in the open source ecosystem. If you go to the GitHub page you’ll see only a README which points back to a project download page. The presenters noted that they were not yet accepting forks (though there are strangely 38 forks) and so it is impossible to contribute back to this library (or at least using a pull request on GitHub). This makes this library open source in name, but not entirely in the sense of community that usually arises around a project. Nowadays most people think of open source as something you can use freely, modify freely, AND contribute changes back freely (GitHub has made this possible in a way that Richard Stallman probably never imagined). At first glance this choice seems strange as I assume open source projects get free marketing and exposure by accepting contributions. People promote the things they patch. But, after seeing the recent talk at ng-conf by Igor Minar, a core AngularJS team member, describing “patch overwhelm,” the SAP team might be preserving some team sanity by at least strategizing in advance on how they will accept contributions differently than communities like AngularJS do. For context, Vice President and Global Head of Developer Relations Thomas Grassl said to The New Stack’s Alex Williams that they will begin accepting contributions in about a month. He said SAP originally developed OpenUI5 for internal purposes and has had to change the build process before accepting contributions from the community. Regardless, for all the reasons stated, it would make sense for SAP to resolve this contributor question as soon as possible.

I came in with low expectations, but the SAP team delivered a beautiful presentation showcasing the power of their newly open sourced OpenUI5 tools. If I were considering an enterprise class JavaScript toolkit for building responsive and powerful web applications, SAP OpenUI5 would be at the top of my list. I would even recommend it to my Brazilian friends.

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! THATgot 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 finallywent 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 thejQuery 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 toGraham 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

Ref:

http://scn.sap.com/community/developer-center/front-end/blog/2014/10/16/my-path-to-learning-openui5deeper-down-the-rabbit-hole-and-back-again