HTML5 vs. SAPUI5

It has taken a long time for SAP to introduce modern UI technologies. The main difficulties are the adaptability to individual requirements and the less than intuitive usability.

During an evaluation phase for HTML5 UI technologies, the idea arose to write an article about UI technologies. Especially about those that are typically used in the SAP environment.

The WebDynpro framework is now well proven and also offers interesting possibilities for custom developments. So you can use predefined templates for user interfaces and a comfortable development environment with a WYSIWYG editor.

As with all closed frameworks, SAP as the manufacturer is the framework provider and thus strictly defines the boundaries. Thus, the entire control of the communication with the backend system is defined on the server.

There is no possibility for individual coding on the client side, as would be necessary, for example, when integrating certain multimedia content (e.g. video).

On the other hand, these limitations also offer advantages, especially in topics such as release planning, support, and data security and stability. Due to the limitations described above, SAP is breaking new ground and providing a relatively new UI framework: SAPUI5!

So far, SAPUI5 is mainly known through the Fiori apps, but it is a more open concept with more intervention options compared to WebDynpro.

SAPUI5

SAPUI5 is also a framework and offers a collection of design and control elements based on HTML5. Furthermore, with SAPUI5, SAP provides a concept for data binding, which is already known in a similar form from WebDynpro.

This ensures data exchange between the user interface and backend systems (SAPUI5 also allows non-SAP systems to be connected). For this purpose, the SAPUI5 framework provides a form of Model View Controller (MVC), which regulates how data is transferred from the interface to the business logic and from the business logic to the interface.

With the help of this principle, interfaces can be produced quickly and easily in order to implement initial projects and convey impressions of the solution. However, the framework is not only composed of SAP's own libraries, but also uses other open source libraries such as jQuery, Bootstrap, Cordova/Phonegap.

Currently, there are two versions (also called combination versions): one for mobile application purposes and one for the desktop area.

One difference between the two variants is that the mobile variant includes a smaller library optimized for mobile applications for performance reasons.

Due to the powerful mobile devices, the ever improving network coverage and the higher mobile data rates, the difference between these variations becomes negligible. Only the adaptation to different screen sizes with the help of Responsive Design is really relevant.

Frameworks

As already mentioned, SAPUI5 is a framework. For classification purposes, we will therefore briefly discuss the advantages and disadvantages of such frameworks.

When developing your own software, you are always faced with the question of whether to use existing frameworks or to develop everything yourself. As a developer, you often hear the statement:

"Why not use an existing framework and not always reinvent the wheel?"

In our view, there are two indicators that can provide information about the use of a framework: firstly, the period of use of the solution, and secondly, the flexibility in terms of adaptability to new requirements.

If you want to quickly create something presentable, frameworks can certainly be the means of choice. If you want to use the solution in the long term or even keep it permanently open for changes, further measures are necessary when using frameworks to mitigate their disadvantages.

In principle, frameworks or components used should always be integrated in such a way that they are not an elementary part of the solution, in order to avoid functional dependencies.

This can be achieved by a software architecture that abstracts from third-party components as best as possible so that they remain interchangeable. For example, it should not matter in the flow logic which input options the GUI provides.

All this leads us to the decision that we like to look at how a framework works and then adopt individual concepts from it if necessary. Of course, this approach is costly at first glance, but the corresponding possibilities for extension requirements are then also known and the adjustments can be made in a much more controlled and thus safer manner.

Frameworks, as the name implies, set a framework to create solutions. These constraints can help to produce fast results, because a framework takes many decisions (consciously or unconsciously) away from us.

But who ultimately decides for or against a framework? Project manager? Developer? The optimal solution would be: both together. However, there are often very different opinions and interests here:

Risk minimization versus flexibility, short-term results versus long-term option diversity.

Only when everyone is aware of this in sufficient depth can a conscious and correct decision be made here as well.

HTML5

In contrast to the frameworks (WebDynpro, SAPUI5), HTML5 is merely a markup language and represents the current version (according to the W3C specification) of HTML (Hypertext Markup Language).

HTML is used to describe and link web content (such as text, images, videos) in electronic document form. This includes web pages and other web-based solutions with a graphical interface that are displayed using web browsers or other browser engines.

When developing an HTML solution, CSS (Cascading Style Sheets) is usually used for the layout of HTML documents. This was also the case in previous HTML versions and is continued with the current HTML version.

However, HTML and CSS alone are not yet sufficient to map the scope of performance of dynamic and more complex HTML5 solutions. For this, the additional component JS (JavaScript) is needed.

JavaScript is a scripting language used to implement dynamics in HTML documents. Since the main goals of a solution are derived from the business requirements, HTML5 is particularly suitable for interfaces with a high degree of flexibility and individual design.

Application scenarios

Typical Pikon application scenarios involve data exchange with a backend system (e.g. SAP ERP). In SAP, an HTML5 solution can be implemented using a Business Server Page (BSP) or in combination with a WebDynpro application.

Such an application does not run exclusively on the SAP server, but primarily on a mobile client, and a way must be found to communicate with SAP.

The Internet Communication Framework (ICF) in SAP NetWeaver is the classic way to do this in the web environment. Here, a client can send data to the SAP server using an ICF service, for example, and the SAP server returns the corresponding data. SAPUI5 saves us this path with the SAP NetWeaver Gateway and oData Services.

Conclusion

In summary, we can say that a pure HTML5 development with a mixture of self-created and deliberately used third-party components is the means of choice for us, even if some knowledge, discipline and effort is required here for implementation.

But especially when a whole team of developers is working on something, it makes sense to work on the structuring as well as comprehensibility of a solution, and the effort becomes more worthwhile with every change request that follows and is implemented later.

So if you can't live with the limitations of a framework, HTML5 is a perfectly viable option in the SAP environment as well.

All in all, the decision as to whether and which framework should be used can only ever be made against the background of the concrete requirements, especially with regard to the individuality and adaptability of the software.