Skip to Content
Author's profile photo Former Member

Side by Side: SAPUI5 vs. React & Angular2

Two of the most popular Javascript frameworks and libraries are React and Angular2. There’re many articles that compare them against each other. However, they’re rarely compared with SAPUI5. The purpose of this article is to take a look into SAPUI5 and try to compare it with React and Angular2.

First, I will present an overview table listing all criteria and a score for each framework. Then I will talk about the features I think are a strength of SAPUI5. And finally, I will talk about SAPUI5 weaknesses compared to React and Angular2.

Disclaimer: Javascript frameworks and libraries are growing fast over time and changing constantly. So, the information presented here could be incorrect or irrelevant in the future.


Comparison Overview

SAPUI5 Advantages

Rich Responsive Control Set:

SAPUI5 includes more than 200 UI controls ranging from basic elements to complex UI patterns. You can use them straight out of the box, or extend and tweak them to meet your requirements.

On the other hand, No UI control is included as part of React or Angular2.

Localization and Internationalization (i18n):

Both SAPUI5 and Angular2 support localization. However, one advantage of SAPUI5 is that you include translated text in Resource Bundle files and you ship these files as part of your application. However, with Angular2, You build and deploy a separate version of the application for each supported language.

On the other hand, React doesn’t provide any help to localize your application. If you want to localize your application, you can use third party helper libraries like react-intl


SAPUI5 controls are accessible by default and provide the following accessibility features:

  • Keyboard handling
  • Screen Reader Support to aid people with visual impairments
  • High-Contrast Black (HCB) Theme that supports people with visual impairments.

With React and Angular2 applications, the developer of the UI control needs to take care of the accessibility features of the application. This is also true if you want to build custom UI control in SAPUI5.


SAPUI5, React and Angular2 all provide excellent support for security like XSS protection. However, SAPUI5 provide additional security features:

  • Clickjacking protection (need to be configured, as needed, by the application)
  • Cross-site request forgery (CSRF) protection for the data sent to the server by SAPUI5 with OData model.
  • URL Whitelist Filtering API

Also Angular2 provide additional security features:

  • CSRF protection helpers
  • Cross-site script inclusion (XSSI): Angular HTTP library automatically strips the string “)]}’,\n” from all responses before further parsing.


SAPUI5 provides two standard themes and these themes can be customized and adapted using UI Theme Designer.

Since React and Angular2 doesn’t provide any built-in UI controls, it doesn’t make sense to include themes as part of the framework. So, when developing applications with React or Angular2, you need to take care on how build it in such a way that you can apply multiple themes to the application.

Design Consistency / SAP Fiori UX:

I consider this as an advantage of SAPUI5 because it is the right UI framework to easily implement SAP Fiori Design Guidelines. For existing SAP customers, this makes sense as it helps them to achieve design consistency across all applications given that these applications could be developed by different teams including Fiori applications shipped by SAP.

However, SAPUI5 might not be the right choice if you decide to use different design language (ex. Material Design).

For the purpose of this blog post, I’m assuming the reader is already an SAP customer.

Development efficiency:

With SAP Fiori Elements you can use smart templates to create SAP Fiori applications based on OData services and annotations requiring no JavaScript UI coding. An app based on smart templates uses predefined template views and controllers that are provided centrally, so no application-specific view instances are required. The SAPUI5 runtime interprets metadata and annotations of the underlying OData service and uses the corresponding views for the SAP Fiori app at startup.

UI Flexibility and Personalization:

SAPUI5 Flexibility Services enable different user groups to personalize SAP Fiori apps and adapt their user interface at runtime. End users personalize apps for themselves, key users adapt apps for their team, and developers create new or modify existing apps

Development Tools:

The recommended development tool for SAPUI5 is the SAP Web IDE which is part of SAP HANA Cloud Platform and it is available commercially. SAP Web IDE is a web-based tool that enables you to create and extend end user applications for browser and mobile devices. It simplifies the end-to-end application lifecycle: development, packaging, deployment, and customer extensions for SAPUI5 and SAP Fiori applications, and allows developers to collaborate with business experts and designers to fulfill end user requirements and expectations more effectively. SAP Web IDE provide the following features in one product: You can create project based from a template, use Translation Hub to translate your application, use client mock server for faster development, use OData modeler, … etc.

Support Tools:

SAPUI5Angular2 and React all provide Chrome Extensions to help developers visualize the application through component trees, and visual debugging tools. Developers get immediate insight into their application structure, change detection and performance characteristics. However, SAPUI5 provides SAPUI5 Diagnostic which is a web-based support tools that can called without any installed extension on the browser. This tool provides the following:

  • Technical Information like SAPUI5 version, jQuery version, user agent, bootstrap configuration, loaded libraries… etc.
  • Activating the Debug Sources
  • Control Tree with Binding Info
  • Debugging View
  • XML View Conversion
  • Performance Measurement

Single Page Application and Routing Support:

SAPUI5 and Angular2 has a built-in support for routing making it easy to build single page application without any external dependency. On the other hand, React is a library to build user interfaces without any additional features like routing. However, you can add routing support and build single page application with external/community library React Router.

CDN Support:

If you decided not to bundle the framework dependencies within your application, you can use CDNs instead. SAPUI5 dependencies are hosted on one of the top CDN providers (Akamai). On the other hand, React is hosted on unpkg CDN which is an open source community effort making it less reliable/trusted. Regarding Angular2, until the writing of this post, I didn’t find any official CDN.



SAPUI5 Disadvantages


React and Angular2 have better performance than SAPUI5 both in initial loading and rendering. Both have much smaller dependences file size which affect the initial loading of the application. In addition, React rendering performance is much faster due to its Virtual DOM. The Virtual DOM in React is an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects.

Moreover, Angular2  rendering is also faster than SAPUI5 due to Angular2 Change Detection.

However, in SAPUI5, performance improvements can be achieved by explicitly setting the value of changed DOM element instead of re-rendering of the whole component. In addition, initial loading time can be improved. You can read the following posts for more information: Optimizing OpenUI5/SAPUI5 Apps and SAPUI5 Application Startup Performance – Best Practices

Templating Support:

As mentioned above, SAPUI5 comes with many UI controls ready to be used. However, sometimes you need to develop your own custom control. Developing custom controls in SAPUI5 is really painful and more difficult since there is no support for templates. This means you need to mix the output html with the Javascript as follows:

renderer : function (oRM, oControl) {

On the other hand, developing custom controls or components is easier with Angular2 due to its simple and powerful templates. For example:

<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
   <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>


React doesn’t support templates, however, it uses its own syntax JSX. JSX is a preprocessor step that adds XML syntax to JavaScript. For example:

render() {
    return (
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.handleChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>



Both React and Angular2 can run on client-side and server-side.

Server rendering has the following advantages:

  • Performance improvements for initial page load because the first request is processed by the server and subsequent requests are processed by the client.
  • Search Engine Optimization (SEO).

On the other hand, SAPUI5 is tightly coupled with the DOM and therefore the code can run only on the client.

Build Tools:

React and Angular2 takes advantage of Open Source tools which provides wide range of verities and options unlike OpenUI5.

  • npm: React and Angular2 packages are published to npm repository making it easy to install and update packages. On the other side, OpenUI5 is not published to npm repository. The only way to install OpenUI5 packages is through bower.
  • Webpack: It is easy to use Webpack as a module bundler with React and Angular2 and there are comprehensive guides for the different configurations and options. Webpack has the following advantages:
    • Dead asset elimination
    • Easier code splitting
    • You control how assets are processed
    • Great speed benefits when used correctly
    • Hot page reloading
  • You have the freedom of using any transpiler you prefer. You can use TypeScript, ES5, Dart, and ES6 … etc.

Mobile Native Development:

Building a native mobile application requires different skill set than developing a web application. Native applications needs experienced Swift/Objective-C and Java developers. Because sometimes you don’t have the resources and people with the required skill set, you tend to develop a hybrid application. Hybrid applications have their own problems which is out of the scope of this article. However, if your team already know React, you can build a native mobile application using Javascript with React Native. In addition, part of your application code can be reused between the web application and the native mobile application.

Also with Angular2, you can build native mobile apps with Ionic, NativeScript and React Native.


Other Frameworks

Another UI framework you might consider is Kendo UI. There are many similarities between it and SAPUI5. Kendo UI Pro provides about 70 UI control. It includes about 15 themes including Fiori and Material Design. It has a localization support and accessibility and It support OData out of the box. However, it doesn’t provide smart templates, metadata driven UI capabilities, code-free UI changes and end-user personalization.

Also, you might consider: Vue.js, Ember.js, Aurelia.js, or Polymer


SAPUI5, React and Angular2 all are great UI frameworks that get the job done. Whatever framework of choice, it always comes into either personal preference or it suits your use case better.

In my opinion, building applications on top of SAP infrastructure/systems, it makes more sense to use SAPUI5. On the other hand, if my application requires a lot of custom controls that don’t exist in SAPUI5, I would consider React or Angular2.

Did you have experience with any of these frameworks? Which framework you will use for your next project and why?

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Christopher Solomon
      Christopher Solomon

      I literally JUST had this same conversation with Maksim Rashchynski this past week. Nice write up. I too have "played" with all 3 (and the previous Angular as well). There is no clear you point out...and things change so fast in that world as it is. Nice work on the blog!


      Author's profile photo Mike Doyle
      Mike Doyle

      Nice work Fahad, I think it's great to measure 'ourselves' against the best in the industry.  You mention performance and that I think is where we need to see further improvement with UI5.  Aside from that it's a great framework with great controls.

      Author's profile photo Lars Hvam
      Lars Hvam

      Thanks for the writeup, few notes/comments:


      Rich Responsive Control set/Theming/Design Consistency

      Both Angular and React does not include UI controls, but there are UI frameworks like Semantic UI and Material-UI which can be used to get a consistent feel.



      One way to compare popularity is stars on github,

      OpenUI5: 1.300

      angular.js: 55.000

      React: 61.000


      Or try searching on Google,

      openui5(and sapui5) tutorial: 260.000 hits

      angular tutorial: 2.600.000 hits

      react tutorial: 2.300.000 hits


      It looks like the non-SAP world is headed towards angular/react.



      For CDN I like to use, it has a lot of libraries easily accessible, and most are automatically updated from npm when a new version is released.


      ABAP and react example

      I like to use react, as it provides a lot of flexibility. For those interested, you can look at abapGitServer where the web frontend is built using react. It is hosted on the ABAP Application server(7.03+), no additional servers and licenses required.

      Author's profile photo Daniel Vladinov
      Daniel Vladinov

      As for UI comparision : SAPUI5, Oracle JET, KendoUI, Semantic UI, Material-UI one can check this trend view: link

      Author's profile photo Sven Kannengiesser
      Sven Kannengiesser

      Wow, Fahad! Nice job! So, now I know who to contact in future if I have questions regarding UI5 or Angular 😉 Keep up the good work. And hopefully we'll meet again some time.

      Author's profile photo Former Member
      Former Member

      Hi Fahad,

      Thanks for writing a great blog. One other factor I would have loved to see is a comparison of developer adoption. That's difficult but this Google Trends chart shows SAPUI5 lagging the other two by a fair margin

      Not what we want to see. SAP needs to clearly do more with building the ecosystem.



      Author's profile photo Former Member
      Former Member

      It would be interesting to see the comparison between SAPUI5 and Oracle JET



      Author's profile photo Christopher Solomon
      Christopher Solomon

      I think it remains to be seen Oracle Jet just rolled out in the last part of 2016.

      Author's profile photo Witalij Rudnicki
      Witalij Rudnicki

      Hi Srihari. Looking forward to your blog comparing UI5 and JET! Regards.

      Author's profile photo Nicolas Bost
      Nicolas Bost

      Great article , very detailed ! Thanks a lot.

      Author's profile photo Julio Alberto Martinez Real
      Julio Alberto Martinez Real

      Very very very good blog.

      SAPUI5 is for SAPers and only for SAPers. I really doubt anyone outside sap world used it.


      The main point is performance and sapui5 is far away the others.

      Author's profile photo Barry Neaves
      Barry Neaves

      This is a very useful blog.  Thank you for taking the time to share this information.

      Good work Fahad.

      Author's profile photo Igor Silva
      Igor Silva

      Very tendentious post.


      Author's profile photo Former Member
      Former Member


      • Angular and React can do everything UI5 seems to have as "advantage" (in your list) by using open source well-known libraries;
      • No matter what you do UI5 is not capable of rendering as fast as React or even getting close to Angular2;


      Author's profile photo York Chen
      York Chen

      I don't think it suitable to compare ui5 with react. react doesn't support two way binding, doesn't contain ui controls, themes, UI design. That's because react is not created for that things.


      UI5 is more like "a MVC framework + a UI libiary".

      If you are considering the features related to UI libiary. Please compare UI5 with others libraries like symantic ui, bootstrap, ionic,kendo ui.....

      Author's profile photo Paul Todd
      Paul Todd

      The thing that is really hitting SAPUI5 is the lack of an external ecosystem. With react and angular there is a very rich ecosystem of 3rd party developers that are developing controls and tools for the various platforms that is driving adoption of their platforms.


      SAP it seems even with openui5 have been unable to reach the developers to build on the system.


      I'm not saying it is bad but it is ensuring UI5 remains a SAP only product in developer mindsets.


      Having used all the above platforms extensively React is by far the best for testing and component isolation IMHO. You can end up using as much of ES5/ES6 as you want or do not want.

      Author's profile photo Anastasiia Stefanuk
      Anastasiia Stefanuk

      Thank you for your article. It is hard to compare SAPUI5 or OpenUI5 vs AngularJS, because SAPUI5 was made with the purpose of building Enterprise level Business Applications. Angular is considered to be the most popular JavaScript framework and it is really great for making web applications. SAPUI5 is a JavaScript library that provides powerful tools for developing and controlling user interface or UI components in web applications In any case, they are equally good for their purposes.

      Author's profile photo Andy Choi
      Andy Choi

      We have built several SAPUI5 applications and AngularJS - equivalent development productivity,

      But I am hearing many complaints of performance issue in SAPUI5.


      Wishlist for SAPUI5

      1. TypeScript in WebIDE
      2. AngularJS, React grade performance
      Author's profile photo Miguel Lara
      Miguel Lara

      I Loooove working with Angular 2+, (currently working on 5). The ideal situation for me would be if there was a UI Framework for Angular with FIORI style controls for look consistency on SAP applications.

      We are going to start moving our external Angular tools to be integrated inside B1 and port our add-ons using a decoupled design and I would love to keep using angular for this, but for look consistency we are planning to transition to UI5, the only thing I am concern about is that I will probably miss a lot of the nice Angular features and capabilities.

      Also kind of worried about performance now that I read a few of the comments here.

      Author's profile photo Mladen Droshev
      Mladen Droshev

      Miguel Lara fortunately there are such libraries already -

      check them out!

      Author's profile photo Luca Lulani
      Luca Lulani

      I do love Angular as well! Although React seems to be the one which is most used, I still believe Angular is the best choice right now as it has a clearer distinction between component views and controller. And with Typescript it's even easier to develop with. Angular is used in Ionic, which is the best hybrid app library right now, to me (can't wait for Ionic 4...). Community is very very huge and there are libraries for mainly anything.

      SAPUI5 is not as straightforward as the other two frameworks in my opinion, you have little possibilities of customisations and its performance are quite poor in respect to Angular or React. It surely gives a seamless integration with SCP, although you can deploy Angular apps to SCP, use some services, etc.

      Author's profile photo David Hock
      David Hock

      This is such a great article. Any chance to update it for 2019? I understand UI5 has native IOS/Android? Any accessibility improvements for React?

      It would be cool to know if there is any React equivalent to UI5 Smart Forms and Smart tables driven by  OData $metadata and annotations. I did find a 3rd party angular smart table. What metadata form driven capabilities are in React?

      Author's profile photo Venkata Narasimha Rao Sandu
      Venkata Narasimha Rao Sandu

      can you also add vue.js framework in comparison with above java script frameworks ?

      Author's profile photo Avishek Sharma
      Avishek Sharma

      Vue stands in between Angular and React, with its usability being much more easy again.

      Author's profile photo Avishek Sharma
      Avishek Sharma

      I Love how UI5 has a lot of features built out of the box which React/Angular dont seem to have. Its been 5 years and UI5 has changed a lot, like a lot. There are UI5 web components available to be used in React/Angular and even Django, so that does help in a lot faster development using already built components.

      Despite being a bit slower, the functionality side is 5X more stronger on the UI5 side. OpenUI5 makes it much better being both open source and a large set of tools for application development not just for SAP, but also for any sort of application you want to make.