introduction of sapui5 technology

8/15/2019 Introduction of SAPUI5 Technology

1/4

Introduction of SAPUI5 technology

Introduction of SAPUI5 technology:SAPUI5 is a client UI technology based on JavaScript, CSS and HT!5"SAPUI5 applications run #ithin a bro#ser"SAPUI5 co$es #ith all of the features needed to cover $ost currentapplication re%uire$ents such as &ull translation Support, built ine'tensibility concepts at code and application level, (eyboard interaction"!ast but not the least, it also uses the open source )*uery library as afoundation

Applications built #ith SAPUI5 are responsive across bro#sers and devices+ they run on s$artphones, tablets, and des(tops" The UI controlsauto$atically adapt the$selves to the capabilities of each device"If you #ish to ta(e a deep dive at penUI5, an open source version of theUI develop$ent tool(it for HT!5, it is available at http-..openui5"org.

What is Sapui5 ? The UI develop$ent tool(it for HT!5 /SAPUI50 is a platfor$ fordeveloping rich user interfaces for $odern 1eb business applications"

Servers co$e into play for deploying your applications, storing the SAPUI5libraries, and connecting to a database" 2epending on the environ$ent in#hich you are using SAPUI5, the libraries and your applications are storedfor instance on an App Server or an HA3A Cloud Platfor$" The preferred#ay to access business data for your application is by using the 2ata$odel through an SAP 4ate#ay"

1hen users access an SAPUI5 application fro$ their device, a re%uest issent to the respective server to load the application into the bro#ser" Thevie# accesses the relevant libraries" Usually, the $odel is alsoinstantiated and business data is fetched fro$ the database"

The SAPUI5 runti$e is a client+side HT!5 rendering library containing arich set of standard and e'tension controls" It provides a light#eightprogra$$ing $odel for des(top and $obile applications" ased on JavaScript, it supports 6ich Internet Application /6IA0 li(e client+side

features" SAPUI5 co$plies #ith penA)a' and can be used together #ithstandard JavaScript libraries"

http://scn.sap.com/community/solution-extensions/blog/2015/05/12/introduction-of-sapui5-technologyhttp://openui5.org/http://openui5.org/http://scn.sap.com/community/solution-extensions/blog/2015/05/12/introduction-of-sapui5-technology


2/4

As SAPUI5 bases on CSS7, HT!5, and the ne# JavaScript API, onlybro#sers #ith HT!5 capabilities are supported"

2epending on the platfor$ your SAPUI5 applications runs on, di8erentbro#sers in di8erent versions are supported" If you (no# the platfor$ andthe bro#ser used by your users, you can decide on the libraries you usefor your application"

1hether you develop a SAPUI5 application for des(top or for $obile, theconcepts are very si$ilar" SAPUI5 provides an additional control librarycalled sap"$, #hich is opti$i9ed for $obile devices, but also runs :ne indes(top bro#sers"

Conclusion:In $y opinion, #hile building UI5 apps, careful approach need to be ta(enin order to avoid a$biguity a$ong diversi:ed structures that get created"It is ideal to follo# the design principles illustrated by SAP for developing&iori 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 iori, the ready to use mobile web applications on SAP, built on SAP UI5 !

SAP "ateway.

#oving from $eb%ynpro to UI5 development is a ma&or shift in the development approach andskills. $ith this document, I wanted to highlight the key differences between these two

commonly used UI frameworks from SAP.

Features SAP UI5 Web Dynpro

Usage scenarios ♣Application to be used

both on desktop and mobile

devices

♣ 'asual usage scenario,

targeting non SAP users

♣

Simple screens♣ it for building stateless

♣ (o build desktop based web

applications

♣ Suitable for developing custom UI for

comple) SAP business (ransactions

♣ Simple and comple) screens

http://openui5.org/http://openui5.org/


3/4

Features SAP UI5 Web Dynpro

apps, both SAP and non*SAP

%evelopment

Skills

+(#-+(#5

avascript-/eury

'SS

ava 0 for $eb%ynpro ava

AAP;for 1eb2ynpro AAP

Platforms !

tools

SAP ava stack

SAP A1AP stack

SAP +A2A 3S

2on SAP $eb Application

servers like (4#'A(

clipse with UI5 plugins

SAP ava stack 0 for $eb%ynpro ava

SAP A1AP stack 0 for $eb%ynpro A1AP

2et$eaver %eveloper Studio62$%S7

and 2et$eaver %evelopment

Infrastructure62$%I7

UI eatures

atest web UI features

available

Ability to customi8e and

e)tend

imited UI features

imited e)tension and customi8ation

possible

1rowser

rendering

9uns :;;< on browser

All UI events client side

(he applications runs on the server

side

#a&ority of UI events are server side,

minimum client side events

Application

Performance

+igh performing due to

client side events

1rowser rendering is

faster as +(# content si8e is

minimal

re=uent performance issues due to

multiple server round trips

Amount of +(# content generated is

high, impacting the browser rendering

performance

#obile support

ully supported withdedicated mobile libraries

for UI 2ot supported

#odels Supports 4%ata,! S42

Supports ava, A1AP, $eb services

models

UI %esign

UI design re=uires e)tensive

coding in +(# and avascript

(SAP is currently developing

new UI5 development

environment with drag and drop

features

$i8ard driven UI design with minimal

coding

re=uired

Content

• 2eploy$ent options for SAP 3et1eaver 4ate#ay

• Introduction to 6


4/4

• 2ata %uery options

• 2ata $odeling basics

• Creating 2ata services #ith the SAP 3et1eaver 4ate#ay Service uilder-

o odeling and i$ple$enting 2ata services $anually

o 6.6&C 4enerator

o 6ede:ning services

o Service co$position

• 6egistering and testing a service

• Security

• Support of $ultiple bac(end syste$s-

o 6outing capability

o ulti origin co$position

• vervie# of the di8erent options to consu$e 2ata services published by

SAP 3et1eaver 4ate#ay

elated

introduction of sapui5 technology

Documents