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.
