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 driven – SAP 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.
- 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?
- Learning Curve? How difficult is it to learn the new technology?
- 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.
In terms of performance and user experience there is no question,
I think your reply was truncated. Did you have more to say?
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. 😉
Hi Jonathan Baker great post!!, but can we use a angular or react web-based app inside the fiori launchpad?, cause as far as I know the Fiori Launchpad call the component.js file inside de app we develop.
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.
Great Post, I don't Know about SAP. But you explained Angular and React in well manner. Keep Write more posts like this.
Best Regards,
RamCE, ReactJS Training Expert
Thanks!
@jonathab Baker
We are working on a POC to create sales order through SAP Netweaver gateway.Through SAPUI5 we are able to place an order.Where as when trying with Angular/Ajax call requesting the API it is throwing an error with 404 not found.
Please find below gist to see the code.
https://gist.github.com/prasadyallapu/222eb8abef92b36b9adc10bbff901a69
Let me know if It is hard to understand.I will try to explain it. 🙂
Thanks!
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:
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
Unless SAP releases and choose Angular or REACT, it’s advisable to stay with SAP UI5 technology. For future upgrades, finding resources skilled in custom development and so on, you should go with what SAP provides. You don’t want to end up having to support two different UI technology where you have to use existing out of the box Fiori/UI5 apps while custom work in Angular or REACT.
Very nice post Jonathan,
I started my career in web development including AngularJS, PHP, Ruby .NET and then moved to become an technical SAP developer working on ABAP and WebDynrpo. Having built web projects with different technologies, when UI5 and SAPUI5 first come out I felt like SAP was playing catch up, after all it was just about time. Never the less it was a step in the right direction.
It was also excepted that SAP will release a web development library that is easy to use, has lots of ready made components (similar to ABAP) and somehow limited in functionality compared to what's other frameworks offered in terms of flexibility. After all, their bet was on ABAP developers converting into SAPUI5 developers, because let's be honest, UI5 will never be too main stream to the point where normal web developers abandon AngularJS and React.
What really bugged me is seeing many SAPUI5 developers on the market, who don't know anything in web development but SAPUI5. They don't know how to get anything done outside the SAPUI5 library or how to use HTML components and external libraries. In a sense, they are very limited, and I always advised them to explore other libraries to know the extent of what is possible.
The tutorials you motioned in this post were just what I wanted every SAPUI5 developer to get their hands dirty with, at least it's a start from SAP. Although the Angular and React tutorials you referenced in your post seems to have been removed for unknown reasons.