Anubhav’s Learning Series

ABCD
Anubhav Oberoy
www.onlinefioritrainings.com

- Best Practices in SAP UI5

- Naming conventions
- Gold standards to create and deliver your apps
- What common mistakes developers do

www.onlinefioritrainings.com
Some Inspiration before we start dance….

www.onlinefioritrainings.com
Anybody can develop

Code Stability Performance

Initialize
Prototype Fragmentation Stable Ids Asynchronous loading
Development Tools Nami-convension Labels and tooltips Pagination
Project structure Modules definition Internationalization Server side preparatio
File/folder names n for analytics
JS Code Visual appeal
Service usage Advance performance
CSS Code Git commits
ESLint Checks Product Standards

www.onlinefioritrainings.com
OData Service usage
• A Fiori app should always consume one Odata service (1:1)
• When we try to create model, use manifest.json Dev Qlt
• Never hardcode the host and port no. as a Odata url Dev.myhost.com qty.myhost.com

• Odata services supports the desired operations like paging,

Searching, filtering
Fiori Fiori
Dev.myhost.com Dev.myhost.com

www.onlinefioritrainings.com
Fragmentation
• Do not put all fragments at design time in XML views, Avoid hidden fragment
• Instantiate fragments when really need using JS code
• Make sure we give stable ids inside fragment controls
• We put safeguarding conditions to avoid creating multiple instances of same fragment again and again
• Clean-up when you quit fragment – destroy()

www.onlinefioritrainings.com
Avoid using old statements
jQuery.sap.require
jQuery.sap.declare

sap.ui.define
sap.ui.declare

www.onlinefioritrainings.com
Don’t use timeouts, use callbacks

Browser Gateway

www.onlinefioritrainings.com
Impact of Stable Ids
Selenium  Record and Reply
OPA5
User assistance
Adapt UI – In-app Extensions Find element on ui
Send a command
data entry
Click on certain
button

www.onlinefioritrainings.com
 Class A Class B Class C Class A Class B Class C
Index.html sap.m sap.ui.core Index.html sap.m sap.ui.core

x x

y y

www.onlinefioritrainings.com
Old vs New approach
Benefits
• When the browser loads resources asynchronously, it doesn’t freeze.
• App can load the resources like libraries, components, modules in parallel which contributes to overall performance
improvement.
• App loads more smoothly
• User feels a very good appeal when app loads

AMD like syntax

Module definitions should be based on Asynchronous Module Definition syntax

jQuery.sap.require(“”) – load a module
jQuery.sap.define(“”) – define a new module

sap.ui.define([dependencies], function(dep objects){}); -- dependencies are loaded in advance before executing module and
then the callback function is invoked.
sap.ui.require([dependencies],function(dep obj){}); -- dep are resolved on demand after initial module execution (dynamic
dependency)

www.onlinefioritrainings.com
If you have index.html as launcher (free-style Fiori app)
• data-sap-ui-preload="async“
• To avoid loading errors use call back as attachInit
• Async loading of views
• Async loading of CompContainer

www.onlinefioritrainings.com
 Thank you
Watch more on
www.onlinefioritrainings.com

www.onlinefioritrainings.com