ConceptsLocate this document in the navigation structure

This chapter and its sections introduce the SAPUI5 architecture and the main concepts, such as the Model View Controller and Components.

SAPUI5 is a client UI technology based on JavaScript, CSS and HTML5. SAPUI5 applications run in a browser. Depending on the device the application is to run on (mobile, tablet or desktop PC), you use different UI libraries.

Servers come into play for deploying your applications, storing the SAPUI5 libraries and connecting to a database. Depending on the environment in which SAPUI5 is used, the libraries or your applications are stored on an SAP NetWeaver Application Server or an SAP HANA Cloud Platform, for instance. the preferred way to access business data for your application is using the OData model through a SAP Gateway.

When users access an SAPUI5 application from their device, a request is sent to the respective server to load the application into the browser. The view accesses the relevant libraries. Usually the model is also instantiated and business data is fetched from the database.

SAPUI5 Architecture Overview

Model View Controller

SAPUI5 uses the model view controller (MVC) concept to achieve the following objectives:

  • Support development in distributed teams with different source locations

  • Propose file structure, naming, and usage patterns

  • Add capability of UI declaration (in comparison to a programmatic construction)


In this section:
    Model View Controller (MVC)
    The Model View Controller (MVC) concept is used in SAPUI5 to separate the representation of information from the user interaction. This separation facilitates development and the changing of parts independently.
    Resource Handling
    In SAPUI5, resources are handled in a client-side and a server-side part.
    Libraries and Supported Combinations
    SAPUI5 provides a set of JavaScript and CSS libraries, which can be combined in an application using the combinations outlined below.
    Components
    Components are independent and reusable parts used in SAPUI5 applications.
    Fragments
    Fragments are light-weight UI parts (UI sub-trees) which can be reused, defined similar to views, but do not have any controller or other behavior code involved.
    Messages
    SAPUI5 provides a central management of UI and server messages.
Related Information
Data Binding