Application Best Practices

This guide tells you what you need to know to build non-trivial enterprise scale applications (apps) with SAPUI5.

SAPUI5 is not a restrictive UI framework but more a collection of UI controls together with loosely coupled infrastructure components like basic MVC support, data binding, localization and others. This approach offers great flexibility but also requires more care in application development and will most likely yield in diverse application structures.

This document describes best practices on how to structure application projects along the most typical scenarios with a clean and consistent structure. Technically, the whole application could also just be coded into one single HTML file - and the simple "Hello World" applications are built exactly like this to make basic functionality easy to understand. But when creating reasonably complex applications a clean architecture is key for efficient development and maintainability. There are many degrees of freedom where this documentation decides for one of the possible options. E.g. when it comes to the file structure or the granularity of views or even the usage of the MVC concept at all. This does not mean that other options are wrong. In fact, other options may suit specific applications even better and some decisions also depend on project experience, team setup or plain taste. Nevertheless, this document should provide valuable suggestions for a good application structure, it's just important to know that this is not the only possible or correct way to build SAPUI5 applications.

This document contains sections that refer to concepts or controls which are only available in the sap.m library of SAPUI5, but most suggestions are the same or very similar for desktop applications. Indeed, the controls in the sap.m library are not just for "mobile", but for all platforms. They are designed to work responsively depending on the device on which they're running.

In Part 1 of this document, "Preparing", we start with a high level overview of what aspects of SAPUI5 development will be covered. We then describe the key features of an app, and why they're important. Along the way, references will be made to existing documentation where you can find out more information about a particular area.

We'll look at design patterns, which are in common use across the web, but particularly in the SAP Fiori app suites. We'll also set the scene for the app that we'll build in this guide, by describing the business scenario.

Finally, we'll discuss various conventions that are used throughout this document, and in particular, in the code examples. There are technical conventions such as the naming of variables, style conventions such as how a control definition will be laid out in XML, and conventions in terminology such as how we refer to the main control (often an sap.m.SplitApp or similar control) in a root view.

In Part 2 "Building", we will start from scratch, and in a series of discrete steps, we will build the app that we described in the business scenario in Part 1. Each step covers a different aspect of app design and realisation. For example, there are sections on the SAPUI5 bootstrap, the device model, routing, MVC and more. At the end of each section, we'll consider how far we've got in building the app, and show what the app looks like so far, so you know how far you should be if you're coding along yourself.

This part of the guide is designed to be followed step by step, but is also written in such a way that you can also jump straight to a specific section and use it as reference when you're building your own apps in SAPUI5. If you follow Part 2 step by step, you will end up with a fully functioning app that you can use as a starting point for other work.

To give you an idea of where this document will take us, this is what the app will look like at the end of Part 2: