Authors

Vijaya Kumar Veeraraj (I068092)           Vishal V K (I304251)

Introduction

Software is an integral part of today’s world. “Mobile while mobile” concept through smartphones, tablets and other devices has made it easier to access applications and services in private as well as in business life. Such a ubiquitous mobile world demands a better user experience for business applications as the software would be more desirable to the end user.

The two predominant SAP technologies used for development of User Interfaces are Web Dynpro and SAPUI5. Both of which have their own advantages and limitations. Being in the SAP world, sometimes we face a situation to choose between the two technologies. Here we have attempted to provide a comparison between Web Dynpro and SAPUI5, by taking into consideration the scenarios where we use them, performance and the technical details involved. This helps the reader to compare their requirements for the software and then decide whether to use Web Dynpro or SAPUI5.

Overview

Web Dynpro

• Web Dynpro is a programming model provided by SAP. Web Dynpro is implemented using Java and ABAP. It is well suited to generate standardized user interfaces(UIs) and minimize the time needed to realize Web applications.
• Web Dynpro applications are built using declarative programming techniques based on the Model View Controller (MVC) paradigm.
• Used for creating desktop applications.

SAPUI5

• SAPUI5 is a JavaScript-based UI library which is designed to build cross-platform business applications. It combines new qualities such as openness, flexibility and high speed of innovation with known SAP strengths like enterprise readiness and product standard support.
• It also has a powerful support to theming based on CSS.
• SAPUI5 applications can run both on desktop as well as mobile devices. sap.ui.commons library controls are used for creating desktop applications and sap.m library controls are used for creating mobile applications.
• SAPUI5 also provides application developers to create new UI libraries and custom controls. This way, UI5 development groups will not become a bottleneck for application groups who need a certain functionality.

Architecture

Web Dynpro

The above diagram shows the architecture of a Web Dynpro application and   it is based on the Model View Controller paradigm.

The model forms the interface to the back end system and thus enables the Web Dynpro application access to back end data.

The view is responsible for the representation of the data in the browser.

The controller lies between the view and the model. The controller formats the model data to be displayed in the view, processes the user entries made by the user, and returns them to the model.

Views and Controllers form a 1:1 relationship. It is also possible to have View less component and there is no need to have windows. In this case, the component does not implement an interface view. Components without any visual interface are called faceless components.

An application is an entry point into a Web Dynpro component. Web Dynpro applications may be embedded in the portal environment, they may be displayed by the SAP NetWeaver Business Client, or they may be displayed by a browser.

SAPUI5

It follows the MVC architecture. On the client side, Views are responsible for defining and rendering the UI. The App View is the top-level view, which contains the other view. The Model is either in JSON or XML, manages the application data. I18N Model is used for locale-dependent texts, OData Model for data retrieved from the backend using OData services, and device Model for device specific data required during runtime. Along with these, the developer can create named models also. The Controller reacts to the View events and user interaction by modifying the View and the Model.

The above diagram gives an overview of the basic files for every SAPUI5 application.

• manifest.json: The manifest.json file is used to configure the app settings and put the important information needed to run the application. Configurations include information regarding the models, routing etc. Using this file not only helps you to write less application code, but also ensures that you can access the information needed before the app is instantiated.
• Component.js: The Component.js implements the logic to create the application’s root view (App view) and the model instances. The component container loads the component when the app is started. The SAP Fiori Launchpad acts as the Component container. For standalone applications, the index.html file contains the component container with a reference to the component.
• Root view: The App.view.xml defines the root view of the application. In most applications, the App.view.xml contains App or SplitApp as the root control.
  

Required skill set

Web Dynpro

The main skills that one needs to have for creating WD applications are

• ABAP OO : Used for Web Dynpro ABAP
• JAVA : Used for Web Dynpro JAVA

SAPUI5

The main skills that one needs to have for creating SAPUI5 applications are

• JavaScript: Used for creating the Views and Controllers.
• XML: Used for creating the Views and Fragments.
• CSS: Used for theming and adding custom styles in the Views.
• Gateway and OData services: Integration with backend systems. The purpose of the Open Data protocol (OData) is to provide a REST-based protocol for CRUD-style operations (Create, Read, Update and Delete) against resources exposed as data services. An understanding of the metadata file of a service and consumption of OData services is essential.

Key features

Web Dynpro

• Web Dynpro ABAP is integrated flawlessly into the SAPGui Workbench (SE80) and it does not require open source add-ons like Eclipse for development.
• Web Dynpro is generally used for Server-side rendering and server-side runtime environment into which many dedicated “hook methods” are available. The developer places his own custom coding within these hook methods in order to implement the desired business functionality. These hook methods belong to one of the broad categories of either “life-cycle” or “round-trip”; that is, those methods that are concerned with the life-cycle of a software component (processing that takes place at start up and shut down etc.), or those methods that are concerned with processing the fixed sequence of events that take place during a client-initiated round trip to the server.
• Stateful applications are supported. If the page is changed, the required data remains intact so that you can access it at any time throughout the entire application context.
• Web Dynpro is developer friendly as it provides wizards for the definition of forms and tables in the UI and source code in the controller methods, and also for other reusable components. Thus repetitive tasks of UI coding would be eliminated, thereby reducing the development time and effort significantly.
• Anyone with basic ABAP knowledge will be able to create Web Dynpro applications with ease.

SAPUI5

• SAPUI5 uses standards-based Web technologies to build a bridge between Web applications and mobile devices. HTML5 UIs with a native look and feel can be created, and the run on any device including tablets and smartphones. Both desktop and mobile applications reuse the same core library and the same Model and Controller implementations.
• Build beautiful HTML5 UIs with a modular control library for both desktop and mobile applications. It uses standard controls such as Value holders, Layouts and Dialogs. It takes user experience to the next level with various UX controls such as Shell, ThingInspector, etc. It also includes light analytical patterns by using graphics based on SVG or Canvas.
• SAPUI5 also has support for theming capabilities to design beautiful UIs which fulfill user requirements. To separate structure from layout, SAPUI5 uses CSS3-based techniques allowing you to change the visual design of your applications without any modification.
• Applications fetch data from backend ABAP or HANA systems by connecting with the help of OData services. The data fetched is either in JSON or in XML format.
• SAPUI5 applications are stateless. In the mobile world, connectivity to the application server is not very stable. The server must not hold a state, which may be lost when the connection is lost, or which leaves objects in a locked state, as the transaction cannot be completed. It is acceptable to read data somehow informing the client that the data is not up-to-date as someone else has changed it (optimistic locks). The OData-protocol implies such a stateless behavior. The frontend developer can simply rely on the model to which they bind the UI to be stateless, but the backend-developers have to to fulfil the provisioning side of the protocol.

Advantages

Web Dynpro

• When business applications are mapped to an ERP system, many complex standard applications are created whose user interfaces do not necessarily meet individual requirements. With the Web Dynpro ABAP configuration framework, you can adapt Web Dynpro applications without having to change the source code in the application.
• Code-free UI configuration is possible in Web Dynpro ABAP, since developers can adapt Web Dynpro components for the whole system, and define which settings can be overwritten in customizing or personalization. Developer can define the configuration at design time in the configuration editor. Administrators can use this editor to adapt a configuration in the customizing layer. Thus, we are maximizing design and minimizing coding effort.
• End users can personalize a Web Dynpro application at runtime. User adaptation options are restricted to functions that do not affect the running of an application. At application runtime, for instance, user can move table columns, hide UI elements using the context menu, or set default values for input fields. These adaptations are persisted implicitly, and the user is not requested to save these changes.
• Modification-free adaptation and extension of UIs can be done in Web Dynpro applications which are integrated with Floor Plan Manager and the Business Object Processing Framework (BOPF).

SAPUI5

• SAPUI5 applications can be rendered both on the desktop and mobile devices thus providing more agility through availability on any device & for any platform.
• SAPUI5 is a library built on top of JavaScript and jQuery. JavaScript itself being a loosely-typed language, it has no fixed data types. JavaScript is also object oriented and hence, each controller can be visualized as a class and each function of the controller as a class method.
• Enhanced User productivity and better user experience through increased flexibility, openness and pixel perfect design.
• Integrated deployment of applications to SAP platforms. ABAP development tools and SAPUI5 ABAP Repository Team Provider plugin have to be installed in the Eclipse IDE for running applications on ABAP server.
• Application performance is faster due to client side events. Responsiveness of applications is faster. As HTML content size is minimal, rendering on the browser is also faster.
• SAPUI5 supports data transfer for all JSON, XML and oData formats. The MVC architecture ensures that there is no / minimal changes required in the application, if the data format is changed.
• Ability to customize and extend existing Controls. This provides an added advantage to the developer to create controls according to their requirements without having to wait for the application groups to provide the functionality.
• Open source plugins and libraries can be easily integrated with SAPUI5 applications.
• Theming features based on CSS3 help to provide a beautiful and pleasant UI.
• The frontend development can be separated completely form the backend development, thus making parallel development possible.
• Canvas and SVG are helpful for animation and graphical representation with Charts, etc. Thus it also provides Analytical capabilities which can be utilized when integrated with HANA as backend.