Skip to Content

Authors

                     /profile/5swBO64dnbgAIpsuPcOFAF/documents/uF8Pjj4zi8tAc7hwfrcXXL/thumbnail?max_x=850&max_y=850                                         http://avatars.wdf.sap.corp:1080/avatar/I304251

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

/profile/5swBO64dnbgAIpsuPcOFAF/documents/hphdayiz4rfp2fJbHNytDi/thumbnail?max_x=850&max_y=850

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.

                                           /profile/5swBO64dnbgAIpsuPcOFAF/documents/efAjfVY2cVjcJOFSoBPcvH/thumbnail?max_x=850&max_y=850

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

                                        /profile/5swBO64dnbgAIpsuPcOFAF/documents/Up1uL3OMtzB6jPJacwqLJI/thumbnail?max_x=850&max_y=850

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.

                              sapui5 architecture2.png

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.
To report this post you need to login first.

10 Comments

You must be Logged on to comment or reply to a post.

  1. Paul Hardy

    Web Dynpro was never really meant to be used on a mobile device. It also looks hideous, even worse than the SAP GUI, which you would think was impossible, but there you go, people can do anything if they put their mind to it.

    UI5 is a million times better, I would not quite put it as “beautiful” but it is head and shoulders above anything that came before, and as a die-hard ABAP programmer I found the learning curve for UI5 a lot easier than Web Dynpro even given all the “scary” new technology like JavaScript.

    Also UI5 enforces the MVC model, and I am yet to be convinced that Web Dynpro does, as you can put model type code in the view……

    (0) 
    1. Raghavendra Prabhu Mithal

      Hi Paul,

      Congrats for being member of month.

      I am hard core abap programmer, and honestly it is a uphill task to mold into a UI5 programmer, but I am trying. The best thing I liked about UI5 is that you can extend the controls which has enormous advantages when we have wonderful libraries like Angular, D3 etc. I just happend extend UI5 with D3 and results are amazing 🙂 .

      regards,

      raghavendra

      (0) 
  2. Jelena Perfiljeva

    Had to double-check the date on this post – it is indeed 2016. Who in their right mind would still use Web Dynpro? Also, as Paul pointed out, it’s not even comparable to UI5.

    What exactly is the purpose of posting this on SCN? What value does it add? Very much confused by this post…

    (0) 
    1. Matt Fraser

      A great many customers would still use WebDynpro. ESS/MSS remains a WebDynpro set of applications. And, so far at least for us, WebDynpro looks easier to customize than UI5. We’ve just gotten our feet wet with trying to adapt a standard UI5 interface, and it wasn’t the most pleasant experience. We also have run into many issues with browser compatibility, even when everyone uses the same version of the same browser across the organization, when trying to have UI5 screens called from NWBC screens and so forth.

      That doesn’t mean we aren’t planning to put a lot more time and effort into UI5 going forward, but WebDynpro isn’t written off as part of the arsenal just yet.

      (0) 
      1. Jelena Perfiljeva

        No doubt it’s still used, but would anyone deliberately choose Web Dynpro for some new UI project if both were an option?

        When Web Dynpro is the only option that actually works (like in ESS/MSS case) then what’s the point comparing it to UI5 or anything else for that matter?

        (0) 
        1. Daniel Ruiz

          hi Jelena,

          Customers will.. and it’s rather simple to understand why.. when you look into SAP slides and presentations about the “roadmap” – or those “new, renew and enabled” crazy b.s. talk, WebDynpro is still there on the slides and there are reasons in the SAP material for it to be there.. not that I agree with any of those reasons, again all b.s. talk but customers will follow such.. which makes sense if they want to increase their ROI.

          I’m aware of several places that utilizes technologies like BSP and WDA and not to say, unless you leap the “average” ABAP developer to learn Javascript all other developers will point out how UI5 is heavy and lacking comparing to other open-source alternatives.. so then again, why on earth use UI5 vs a Polymer / Angular? – the only reason is that a company called SAP said so, and customer do whatever they say without a lot of questioning..

          Until there is a statement of SAP telling customers “we stopped WDA, please move to UI5” (sort of the kiss of death for WDJ when they moved to WDA) we will still have large customers utilizing WDA.. and I do look forward for it, however it won’t happen in the next 3 or 4 years I’m afraid.

          (0) 
          1. Jelena Perfiljeva

            Daniel – thanks for the comment (so far the comments here are better than the blog itself 🙂 ).  I believe a blog comparing UI5 to “open-source alternatives” would have much more value than this one.

            Comparing WD to UI5 just seems to make as much sense as comparing, say, SAPScript to Smart Forms or Adobe Forms. Yeah, I know what’s what, how they are different or better/worse. So what? In most cases customers are somewhat limited by the choices made by SAP (SAPScript in FI, Smart Forms in SD, etc.), so what value a comparative analysis would add?

            This was also posted in “Inside SAP Labs” space. What the heck are “SAP Labs” doing running WD vs. UI5 analysis? Is there nothing better for them to do and share on SCN?

            (0) 
            1. Daniel Ruiz

              hi Jelena,

              well, you won’t see a comparison in here because other frameworks would *smash* UI5 in nearly all aspects and you won’t see a comparison outside “SDN” because people in the planet does not even “acknowledge” the existence of something like UI5 or WebDynpro.. it’s SAP world and code-wise, rather insignificant – if compared to an open and widely used framework.

              it is of my opinion a nice blog would be: “how to use imgur when blogging in SDN” – not too sure if someone in SAP Labs would do it thou!

              🙂

              (0) 
  3. Paul Hardy

    We use the Enterprise Portal, like many companies do, as a life support machine for ESS/MSS. So that is the only Web Dynpro I am exposed to in my day to day life.

    My boss wants us to migrate the leave application type stuff to UI5, and let the Portal die in it’s sleep.

    There is just a long enough gap between me putting in leave requests for me to forget just how ugly the WDA application looks.

    Now, amazing as it may seem I have a rather childish sense of humour. Moreover I can laugh at the same joke again and again, and find it just as funny even the thousandth time.

    In this case the joke is just how incredibly ugly and dysfunctional the leave request application is. By the time I have hit the “submit” button I am laughing fit to burst, tears streaming down my face. The whole experience turns what you would expect to be a rather mundane task into something rather like going to the Circus to see the clowns.

    I especially like the feature where you can write a really detailed explanation of why you want the leave request, and then it truncates that explanation down so your boss only sees the first three words. By the way – this is not a custom application in any way shape or form, it is an “out of the box” type thing. I’m not quite mad enough yet to fall about laughing at how bad my own programs are – I leave that to other people.

    Laughter is the best medicine, so hat’s off to Web Dynpro for brightening my day every once in a while.

    (0) 
    1. Matt Fraser

      We’re still on the WDJ versions of ESS/MSS, and frankly have been thinking getting them into WDA would be a big improvement, at least in maintainability.

      At some point we will have to think hard about how this all fits together as we start to roll out Fiori for other things.

      (0) 

Leave a Reply