Introduction of SAPUI5 technology

Introduction of SAPUI5 technology:

SAPUI5 is a client UI technology based on JavaScript, CSS and HTML5.
SAPUI5 applications run within a browser.
SAPUI5 comes with all of the features needed to cover most current
application requirements such as Full translation Support, built in
extensibility concepts at code and application level, keyboard interaction.
Last but not the least, it also uses the open source jQuery library as a
foundation
Applications built with SAPUI5 are responsive across browsers and devices
- they run on smartphones, tablets, and desktops. The UI controls
automatically adapt themselves to the capabilities of each device.
If you wish to take a deep dive at OpenUI5, an open source version of the
UI development toolkit for HTML5, it is available at http://openui5.org/
What is Sapui5 ?
The UI development toolkit for HTML5 (SAPUI5) is a platform for
developing rich user interfaces for modern Web business applications.

Servers come into play for deploying your applications, storing the SAPUI5
libraries, and connecting to a database. Depending on the environment in
which you are using SAPUI5, the libraries and your applications are stored
for instance on an App Server or an HANA Cloud Platform. The preferred
way to access business data for your application is by using the OData
model through an SAP Gateway.

When users access an SAPUI5 application from their device, a request is

sent to the respective server to load the application into the browser. The
view accesses the relevant libraries. Usually, the model is also
instantiated and business data is fetched from the database.

The SAPUI5 runtime is a client-side HTML5 rendering library containing a

rich set of standard and extension controls. It provides a lightweight
programming model for desktop and mobile applications. Based on
JavaScript, it supports Rich Internet Application (RIA) like client-side
features. SAPUI5 complies with OpenAjax and can be used together with
standard JavaScript libraries.

As SAPUI5 bases on CSS3, HTML5, and the new JavaScript API, only
browsers with HTML5 capabilities are supported.

Depending on the platform your SAPUI5 applications runs on, different

browsers in different versions are supported. If you know the platform and
the browser used by your users, you can decide on the libraries you use
for your application.

Whether you develop a SAPUI5 application for desktop or for mobile, the
concepts are very similar. SAPUI5 provides an additional control library
called sap.m, which is optimized for mobile devices, but also runs fine in
desktop browsers.
Conclusion:
In my opinion, while building UI5 apps, careful approach need to be taken
in order to avoid ambiguity among diversified structures that get created.
It is ideal to follow the design principles illustrated by SAP for developing
Fiori apps.

Important Links :
https://sapui5.netweaver.ondemand.com/
http://openui5.org/

SAP UI5 framework is getting rapid popularity among SAP web application developers. Also,
SAP has big plans on Fiori, the ready to use mobile web applications on SAP, built on SAP UI5 &
SAP Gateway.
Moving from WebDynpro to UI5 development is a major shift in the development approach and
skills. With this document, I wanted to highlight the key differences between these two
commonly used UI frameworks from SAP.
Features
Usage scenarios

SAP UI5

Web Dynpro

Application to be used
To build desktop based web
both on desktop and mobile
applications
devices
Suitable for developing custom UI for
Casual usage scenario,
complex SAP business Transactions
targeting non SAP users
Simple and complex screens
Simple screens
Fit for building stateless

Features

SAP UI5

Web Dynpro

apps, both SAP and non-SAP

Development
Skills

HTML/HTML5
Javascript/JQeury
CSS

Java for WebDynpro Java

ABAPfor WebDynpro ABAP

Platforms &
tools

SAP Java stack

SAP ABAP stack
SAP HANA XS
Non SAP Web Application
servers like TOMCAT
Eclipse with UI5 plugins

SAP Java stack for WebDynpro Java

SAP ABAP stack for WebDynpro ABAP
NetWeaver Developer Studio(NWDS)
and NetWeaver Development
Infrastructure(NWDI)

UI Features

Latest web UI features

available
Ability to customize and
extend

Limited UI features
Limited extension and customization
possible
side

Browser
rendering

Runs 100% on browser

All UI events client side

Application
Performance

High performing due to

client side events
Browser rendering is
faster as HTML content size is
minimal

Mobile support

Fully supported with

dedicated mobile libraries
for UI

The applications runs on the server

Majority of UI events are server side,

minimum client side events
Frequent performance issues due to
multiple server round trips
Amount of HTML content generated is
high, impacting the browser rendering
performance

Not supported
Supports Java, ABAP, Web services

Models

Supports OData,& JSON

models

UI design requires extensive

coding in HTML and Javascript

UI Design

(SAP is currently developing

Wizard driven UI design with minimal
new UI5 development
environment with drag and drop coding
required
features

Content

Deployment options for SAP NetWeaver Gateway

Introduction to REST

Introduction to OData

OData query options

Data modeling basics

Creating OData services with the SAP NetWeaver Gateway Service Builder:
o

Modeling and implementing OData services manually

BOR/RFC Generator

Redefining services

Service composition

Registering and testing a service

Security

Support of multiple backend systems:

Routing capability

Multi origin composition

Overview of the different options to consume OData services published by

SAP NetWeaver Gateway

Related