Skip to Content

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.

To report this post you need to login first.

15 Comments

You must be Logged on to comment or reply to a post.

  1. Henrique Mattos

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

     

    (1) 
    1. Jonathan Baker Post author

      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.

      (2) 
  2. Carmine DAgostino

    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 🙂

    (0) 
    1. Jonathan Baker Post author

      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.

      (0) 
  3. Vijay Thammannagowda

    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!

     

    (0) 
    1. Jonathan Baker Post author

      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.

       

      (0) 
    2. Jonathan Baker Post author

      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

      (1) 
  4. Sri UIDEV

    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 ?

     

    (0) 
    1. Jonathan Baker Post author

      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!

      (0) 

Leave a Reply