Best practices to build apps with SAPUI5

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

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

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.