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
- 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
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
- 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
- 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
- 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
- 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.
- 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
- Store such code in separate files in a util folder
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.