Angular.JS in the HANA Cloud Platform

One of the great things about HANA Cloud Platform (HCP) is how flexible it is with multiple different technologies.

But, I’ve run in to the following question at many of the talks and CodeJam’s I have presented at during the past year:  If our organization doesn’t want to use SAP UI5, what other platforms should I use?

The problem is that almost all of our HCP documentation talks about UI5.  This makes sense, since we wrote UI5 and therefore almost all of the tools for it are part of HCP.  In fact, when you start a project, almost all of the choices are about which version of UI5 to use.  But, this doesn’t mean that UI5 is your only option.   HCP supports many other front end toolkits.

So, we wrote a new set of tutorials, about other technologies which can also be used in HCP.  The latest is Angular with HANA Cloud Platform.

What is Angular.JS?

Simply put, Angular.JS another JavaScript framework to help build Single Page Applications (SPA’s).

Okay.  I admit, that’s the stock answer.  To best describe it, start with UI5.  Most of UI5 is written and is stored on a server (like HCP), but really, UI5 runs entirely in a browser.  It’s a bunch of JavaScript libraries, which load your custom code (in JavaScript) and configurations (in XML).  UI5 code is sent from the server to the browser – and the browser is where all of the computing and work is done.

Angular is also a JavaScript framework for creating interactive applications.  It also runs entirely in the browser, so all the work is done in JavaScript.   The developer can use Angular to link JavaScript variables and functions to elements on the screen, and the framework also provides notifications of events that occur so the JavaScript code can take appropriate action.

Differences between Angular and UI5

There are several major differences between UI5 and Angular – starting with the fact that UI5 was written by SAP, and Angular.JS by Google.

Angular and UI5 use different concepts of how to work with HTML.  In UI5, the web page is designed using XML (the view) and JavaScript (the controller).  UI5 generates the HTML dynamically, so the developer never sees the HTML.  This is a template generation design concept.  Angular uses the raw HTML page as the view, and then uses custom element tags to connect the Angular javascript to the HTML page.  This is an injection framework design.

The major difference between the two is the page design.  In UI5, the page design and layout is mostly defined by the framework, and the components place themselves inside that overall framework.  Angular provides a “blank page” concept, so the design can be just about anything.

UI5 contains a lot of pre-built components that come “in the box”.  Angular doesn’t have any components in the core libraries.  But, like most open source systems, there are multiple projects out there which provide large numbers of custom components.  Both frameworks allow you to create your own components, customizing the code as much as you want.

Which should you choose?

Which is better?  This seemingly easy question is actually very hard to answer.

Many organizations ask the “architecture” group to come up with a set of standards.  Those standards cross lots of technologies and programs.  So, you should choose the front end library that makes the most sense to you.

Feel free to use SAP UI5, React, Angular.JS, or your own choice of framework.  HCP supports all of them!