Skip to Content

Building Web Applications – SAPUI5, AngularJS, or REACT?

Choosing a view technology – Hands On!

Updated!  React tutorials have now been added to the mix, look for the link below…

SAP Developer Tutorials

One of the great new developer tools we rolled out in the past year is the new – Github drivenSAP Developer Tutorials.  The great part about them is the ability to create and publish tutorials on any number of topics.  Our original catalog of 25 tutorials is now over 100, and growing each day.

So, not only can we discuss which technology is right for you and your organization.  You can try multiple technologies, side by side, and get a hands-on feel for them as well.

Choosing a front end technology

The great part about building a web application today is that the concept of a Single Page Application (or SPA) has now become a mature technology offering.  There are many different technologies that make it easy to create, mock up, and then build your SPA.  The two major things you need – browser capabilities, and mature toolsets, have now both become mainstream.

Let’s talk about the toolkits.

(In a separate post, I’ll go back and discuss the underlying browser technologies, and what they mean.)

Comparing the toolkits

There are several major toolkits that have emerged from the open source community that let you build SPA’s.  The two dominant favorites are AngularJS, and REACT.  But, SAP also has a mature front end technology, called SAPUI5.  It also has an open source option, OpenUI5.

All of these technologies can build fast, responsive Single Page Applications.  So, what’s the difference between them?  And which one should you pick?

There are several major distinctions between the multiple choices.

  1. Fiori support?  This is the first question I get asked.  Which technologies support Fiori, and how easy is it to use products like the Fiori Launchpad with the technology?
  2. Learning Curve?  How difficult is it to learn the new technology?
  3. HTML or JavaScript?  This may seem like a confusing question, because all frameworks use both HTML and JavaScript.  But different frameworks use different amounts of each, so your strengths (or weaknesses) in a specific technology can be used well.

So, let’s walk through the options

The Choices

SAPUI5

Try it yourself:  Hands on with SAPUI5 Tutorials

SAPUI5 (and OpenUI5) are the web technologies that SAP uses for all of it’s new Fiori applications. Applications built using SAPUI5 will be instantly recognizable to anyone who works with our other applications, with minimal effort by the developers.

SAPUI5 is also easy to use.  As the tutorials show, you can be up and running in a matter of minutes.  It’s fully support on HANA Cloud Platform, and our new Web IDE makes it easy to develop and test inside of a browser.

SAPUI5 is JavaScript and XML based.  The developer will write almost no HTML code.  You put the screens together using either XML files, or directly in JavaScript code.  Then, you write all of the logic in Javascript functions.

The toolkit has an extensive library of visual controls.  And, it’s completely comfortable with ODATA, so data transport is easy.

AngularJS

Try it yourself:  Hands on with AngularJS and OData

Our latest tutorial uses the same screen design and test data as our SAPUI5 tutorial, but does it using the open source AngularJS framework (supported by Google).  It’s very mature, well documented, and there are plenty of web tutorials and websites to help you learn it’s many aspects.

AngularJS is also very easy to use.  The framework provides plenty of out-of-the-box controls and functions that make it easy to design a very responsive, and clean, SPA.  There are several good IDE’s that you can use to develop in it, because all of the code is either HTML5 or JavaScript.

AngularJS is an HTML5 based language.  It’s design philosophy is that you write an HTML page, and then “attach functionality” by inserting attributes directly in your HTML.  Then, in the back, you can write JavaScript to do all the work, and connect all the pieces.

The toolkit, being HTML5 based, uses all the common HTML5 controls you are used to seeing.  It can also integrate with other open-source controls, making it very flexible.

If your company has a very specific look-and-feel for it’s applications, and you need to duplicate that look-and-feel, AngularJS is a good choice for building that design.

REACT

Update!  Try it yourself – Hands on with REACT and ODATA

React, supported by Facebook, is the third choice (and the most popular choice of many European companies).  It is also very mature, and well documented.  And it also has a popular following, with many web tutorials and documents to help learn its use.

REACT is a JavaScript based toolkit.  Like SAPUI5, it reduces (but unlike SAPUI5, does not eliminate) the HTML you need to write an application.  In REACT, you build controls as JavaScript components, and then embed the HTML in those components.  When you build the screen, a processor takes all the HTML pieces and puts it all together.

Unlike SAPUI5, the REACT framework allows you to embed your HTML inside the JavaScript components directly.  So the HTML and the JavaScript share a single file, making it easier to see how they interact with each other.

REACT’s mix-together philosophy makes it easy to create very powerful custom components on a page.  If your organization is more code than HTML, REACT might be a good choice for you.  It also allows for customization of your pages, so it can be used in many different environments.

Conclusion – you decide!

This is just a very brief review of three different “view” technologies (using the MVC design philosophy) that you could use for your project.  Feel free to try them out, and send me an email or post a comment if you have any thoughts or suggestions.

17 Comments
You must be Logged on to comment or reply to a post.
  • I have used all of the mentioned toolkit to develop SAP Proof of Concept (PoC) applications in Brazil and I can tell you that working with SAP systems and SAP businesses people can rely on SAPUI5 and get the most out of it.

    I think AngularJS and React has the same knowledge curve although AngularJS has more stackoverflow questions and answers and better official documentation.

    SAPUI5 has sparse documentation and working examples but the knowledge curve would be smaller since we have the controls already built.

    Anyway, great article to analyze the different options. And all of them integrates with SAP HANA Cloud Platform (HCP) using Git repository. 😉

     

    • That’s a great question!

      The Fiori launchpad can link to anything on the web, including both SAPUI5 and non-UI5 applications.  So you can build your application in any of these technologies, and have a launch icon in your launchpad.

      I don’t have the exact details with me at the moment, but I’ll try to write a blog about this in the near future.  In the meantime, you can look at the Launchpad documentation for ways to set up third party websites.

  • Hi Jonathan,

    I am an ABAP developer who has more or less made the leap to SAPUI5. I understand your well done comparison of the different development platforms. What I don’t understand so well, do I have a choice? If I develop exclusively in the SAP environment? I mean, we are using SAP Gateway, SAP Netweaver Portal.

    Thanks 🙂

    • You do have a choice!  You could develop in any of these technologies.

      But, with your specific configuration, I strongly suggest you stay with UI5.  The applications you are developing are all designed to work with SAP, and UI5 is strongest with SAP applications.  It’s also the framework we use for our S/4HANA release, which means you will be able to modify those applications as well.

      Many businesses have web applications outside of SAP.  Often, that framework is not UI5 (in fact, is’ almost always something else).  I wanted to show is that you can standardize on a framework for all your applications, and the SAP applications can also use that same framework, if that is what you want to do.

      We are working very hard to make SAP open and accessible.  I hope this helps explain how that works in web front end applications.

  • Very nice summary Jonathan. I like it and appreciate 🙂

    Regarding OpenUI5, with respect to visual controls, what is the flexibility with with we can develop custom controls? often I have confronted with situation where we have to develop let’s say web app with enterprise functions in it. where the visuals needs are dynamic, as well data feeds could be different. what are your thoughts?

    And 🙂 in a scenario where I am not using UI5 visual controls, but using SAP for gateway and back-end developments, how and where UI rendering could be facilitated, a separate UI server?

    Thanks!

     

    • Two questions, both great ones.  Let me separate them out in to different replies.

      What is the flexibility with with we can develop custom controls?

      It’s pretty easy to do.  Here is a blog on creating a custom control, and another on extending an existing control to add additional custom properties.  UI5 is designed to be extensible in that fashion.

      The important thing to remember is that UI5 is a full visual framework, like Angular and React.  Each framework takes a different approach to building a web page.  All the frameworks provide some type of control (or, when they don’t, they support other frameworks that add them for you).  The big difference is the methodology.

      In UI5’s case, it’s also look & feel, as it closely adheres to the Fiori design philosophy.  The others are more open ended about design.

      Any of these should be able to provide you with enterprise specific functions.

       

    • OK, on to the other question…

      And 🙂 in a scenario where I am not using UI5 visual controls, but using SAP for gateway and back-end developments, how and where UI rendering could be facilitated, a separate UI server?

      This is a interesting question, because it highlights the difference in these frameworks and the historical way we presented web pages.

      In the past, web pages were generated on the server.  Technologies (like PHP or Java, to name a few) did all the dynamic work on the server, and the end result was HTML sent to the browser.  There may have been some JavaScript, to support dynamic components, but the browser just rendered.

      Now, however, that has all changed.  UI5, Angular, and React are all client side engines.  They don’t do any visual processing on the server.  All the frameworks send JavaScript files, as well as other static files with settings and details, to the browser.  The browser runs the JavaScript, and builds the page dynamically on the client machine.  In this new world, the server is only doing back-end work.  This is a very true interpretation of Model-View-Controller, as the server is now only the controller.

      So, to answer your question, you could use just about anything to serve as the web server.  Apache, Tomcat, Microsoft, or a custom system.  Any HTTP server that can send static files can act as the source for your front end.

      I hope that answers your question.  Let me know if you need further details!

       

      Cheers,
      Jonathan

  • Very nice article. It clearly explains differences between all the web frameworks . Not sure if it’s a right question to ask here, you can delete if it’s irrelevant. I used to be an ABAP Developer few years back and from past couple of years completely working on AngularJs only. Thinking of learning UI5 as I already have SAP experience hoping I can land on some good job. Is it a good idea to do ?

     

    • I can’t tell you if you will land a job or not, but I can comment on the frameworks.

      All of the S/4HANA GUI’s developed by SAP are written in UI5.  If you are looking to work with a company that has SAP installed, and is looking to modify those GUI’s, then UI5 experience will help you do that.

      Adding Angular to the mix will help, as knowing more than one language will make you a better developer, more able to see problems and potential solutions.

      Again, just a few thoughts.  Good luck on your job search!

  • Hello Jonathan,

    Thank you for the detailed comparison between the various client side frameworks in the context of usage within SAP.

    I have been doing some serious reading into AngularJS and TypeScript as I feel the TypeScript way of doing things provides me complete confidence over the JS code I am writing. I am more or less comfortable with the TS concepts.

    However, when I think about integrating my AngularJS or ReactJS apps into the FLP, things go a bit haywire. By integration I mean the deep integration where the App runs in the FLP container and does not launch in a separate Tab (I presume, when configuring tiles in FLP, you can either choose to use the ComponentJS way which is deep integration or the URL way which is a loosely coupled integration).

    I am referring only to Deep integration here since the other option is quite simple. The reasons, that I can think of are:

    1. Deep integration into FLP requires that the application provide a Component JS that in turn points to the element to render and the metadata to load and a manifest descriptor.
    2. The FLP uses these 2 critical components. They act as the bridge for the App container to propagate context from the launchpad to the app and back (for e.g. Clicking on LeaveRequest tile with a count showing 2, and approving one and rejecting the other and coming back to the FLP will show the Tile count as 1 [mainly the OData stuff here]).
    3. FLP does not allow apps having their own Index.html (well technically they can have but that is ignored by the FLP). This means that apps are forced to use SAPUI5 version that is being used by FLP as the underlying UI5 library of choice. This is not a deal breaker, this makes sure that applications such as those being delivered by S/4HANA share the same look and feel and do not look like superseding each other. But this absence of a bootstrap is a challenge in AngularJS world, I will come to that next.
    4. AngularJS, apart from the MV* [* => Whatever] and Directives and components requires that the Angular lib be loaded into a script tag. This way, angular can understand the custom HTML attributes such as ng-app and ng-controller or ng-… which are crucial for the rest of the stuff to work (simple example, understanding {{HERE}} as an expression to be evaluated instead of as a string that should be printed on screen). Of couse, we could do something like have an IIFE at startup that modifies the DOM using jQuery, and injects the script tag into the header and execute the angular library and other stuffs…But this is really a workaround, something I usually do not recommend (injecting script tags at runtime sound worse than using eval().
    5. Too much of effort has to go into making the Angular App look and feel similar to the overarching container theme (and react and adjust during Theme change).
    6. And I think there are many more steps missing, that are important to get this kind of a scenario working.

    I am still investing some time and effort into trying to get this kind of a usecase working, If you have already managed to crack these issues, I would love to understand how you got about doing it.

    Thanks,

    Niranjan

    • Niranjan,

      As far as I know, there are no solutions for the problem you are describing.

      Running a non-UI5 application inside of the dashboard as a pop-out (deep integration) means that you are running both frameworks at the same time.  I don’t recommend this, as the frameworks are not compatible, and keeping them from breaking each other would be a lot of work.  When the frameworks are updated, it would be even more work, testing for new issues.

      I do look forward to your research, however, to see if you find a way around it.

       

      Cheers,
      Jonathan