Best practices to build apps with SAPUI5

[Former Member]

This BLOG will Guide us what we need to keep in mind to build apps with SAPUI5. :smile:

Best practice 1: Determine View creation Approach early

• In SAPUI5 view can be made using
  • HTML
  • XML
  • JSON
  • JavaScript
• Choice is on skillet of development team.
• XML is more simple and HTML can be embedded into an XML view

Features comparison among different view

JS view Advantages over others	XML view Advantages over others
Self-container registration of custom library locations Properties of other types (object) Multiple event listener and/or without scope Customization data binding (formatter, data type, factory approach) Dynamic control creation (based on model data, but outside data binding feature) Templating Code completion (Eclipse)	Embedded HTML (without use of HTML control) Code completion (Eclipse) with limitation Validation

Best practice 2: Ensure Application Independence

• The application should be accessible via an icon / a bookmark
• Index.html should be the delivery mechanism for the appà
• Build the app so that you can take its functionality and embed it to into any other structure such as the Fiori launch pad, the HTML – based user facing component.

Best practice 3: Use of Component to Encapsulate the App

• An app developed that is independent can typically be build by separate teams working on pieces of the overall functionality
• Requires building the app using the component concept
• The component approach allows you to run the app within a standalone HTML page or within larger context such as the Fiori Launch pad.

Makeup of the componenet.js

General information

• Include metadata such as app name , version , library dependencies
• Specially the rootView to be displayed
• In the example seen on the prior page , there was no rootView element.
• createContent function is used instead of rootView
• createContent allows you more flexibility in the how the view is built

Config Information

• Can specify information like the name of the resource bundle being used for internationalization
• Can specify the URL of an OData service of the model
• Both pieces of config information could also be performed in the createcontent function mentioned above

Routing Information

• Requires for book marking and resuming application UI state.

Best Practice 4: Minimal code in index.html

• Only these bare essentials should be in the index.html
  • Meta
  • The UI5 bootstrap code which loads the UI5 runtime core
  • HTML Body containing the declaration of one or more UI-areas.
  • Minimal logic to point to the componentContainer

Best Practice 5: Make the App Addressable, UI-Focused and responsive

• Allows for “deep linking”
  • Where the user can bookmark places in an app and be able to come back and pick up where they left off.
  • Do not requires that the user has to start at the top page of a website and descend through multiple link just to get information about specific page.
• Focus on the UI by the following MVC approach in keeping data model handling, the UI logic separate.
• Build the app so that it makes the best use of available screen real-estate and navigation regardless of the device(Phone ,tablet ,desktop)
  • Make use of the sap.m library which was designed from the ground up to support this requirement.
  • Create a “Device model” that will allow you to determine things such as if the device is touch-capable.

Device model

• sap.ui.Device library allows you to determine various runtime platform characteristics
• These characteristics are stored in a client-side JSON model
• This model is defined in Component, as seen below, & then is used throughout  application
• Example of device model in List control’s mode attribute

Best Practice 6: Localization support

• Driven explicitly or via the user’s locale settings.
• Sap.m.controls support right --> left language
• Manage the static text of the app separately, in a way that they can be easily swapped from different locale.

Best Practice 7: Make the use of patterns like master details.

• A master detail is a very commonly used designed pattern.
• List shown in the master and information about the selected item shown in the details
• Supported by sap.m.SplitApp control
• SplitApp is a container control which has 2 sections in the form of aggregations master and details page.

Best Practice 8:  create custom utilities to share code

• When developing an app there is always a need to reuse javascript coding across multiple views/controllers
• Store such code in separate files in a util folder

Thanks Note

Thanks to  for providing such a good information.

Thanks to Avijit Dhar of IBM for his help while Learning SAPUI5 App Development.

A Big Thanks to Dipankar Saha and Sudipta Mukherjee from IBM who always encourage me to write such blog.