Module 2: UI5 Development Environment

A proper development environment is critical for productivity, consistency, and scalability in SAPUI5 projects.
This module covers modern UI5 tooling, project structure, and how UI5 apps actually run.

---

1. SAP Business Application Studio (BAS)

---

What is BAS?

SAP Business Application Studio (BAS) is SAP’s cloud-based IDE, built on VS Code, optimized for:

• SAPUI5
• Fiori
• CAP
• RAP-based applications

SAP Recommendation

BAS is the official and preferred IDE for SAPUI5 development.

---

Key Features

• Preconfigured UI5/Fiori dev spaces
• Built-in UI5 tooling
• OData service integration
• Fiori tools (List Report/Object Page generators)
• Cloud deployment support

---

BAS Dev Space Types

Dev Space	Use Case
SAP Fiori	UI5 + Fiori Elements
Full Stack Cloud	UI5 + CAP
SAP Cloud Business Application	Enterprise apps

Best Practice

Use SAP Fiori Dev Space for UI5/Fiori projects.

---

2. VS Code + UI5 Tooling (Local Development)

---

When to Use VS Code?

VS Code is ideal when:

• Developing locally
• Working offline
• Building OpenUI5 apps
• Integrating with GitHub CI/CD

---

Required Tools

• Node.js (LTS)
• npm
• VS Code
• UI5 CLI
• UI5 Language Assistant (VS Code extension)

Common Mistake

Do NOT rely on plain JavaScript + HTML without UI5 tooling.

---

3. UI5 CLI

---

What is UI5 CLI?

UI5 CLI is a command-line tool to:

• Scaffold UI5 projects
• Run UI5 apps locally
• Build UI5 apps
• Manage dependencies

---

Installing UI5 CLI

npm install --global @ui5/cli

Creating a UI5 Project

ui5 init

This generates:

• ui5.yaml – Project metadata
• Dependency configuration

Interview Insight

UI5 CLI is mandatory knowledge for modern UI5 developers.

---

4. UI5 Project Structure Overview

Typical UI5 Project Structure

webapp/
 ├─ controller/
 ├─ view/
 ├─ model/
 ├─ i18n/
 ├─ css/
 ├─ Component.js
 ├─ manifest.json
 └─ index.html

Key Folders Explained

Folder	Purpose
controller	Event handling & logic
view	XML views
model	Client-side models
i18n	Translatable texts
css	Custom styles

Clean UI5

Keep business logic out of views.

---

5. Component.js

What is Component.js?

Component.js is the entry point of a UI5 application.

Responsibilities

• App initialization
• Model setup
• Router initialization

Minimal Component.js Example

sap.ui.define([
  "sap/ui/core/UIComponent"
], function (UIComponent) {
  "use strict";

  return UIComponent.extend("com.app.demo.Component", {
    metadata: {
      manifest: "json"
    },

    init: function () {
      UIComponent.prototype.init.apply(this, arguments);
      this.getRouter().initialize();
    }
  });
});

Key Rule

Never put UI logic directly in Component.js.

---

6. manifest.json (Application Descriptor)

What is manifest.json?

manifest.json is the central configuration file for:

• App metadata
• Models
• Routing
• Dependencies

SAP Rule

Everything configurable goes into manifest.json.

Important Sections

Section	Purpose
sap.app	App metadata
sap.ui	UI5 configuration
sap.ui5	Models, routing, root view

Example: Model Configuration

"sap.ui5": {
  "models": {
    "": {
      "type": "sap.ui.model.odata.v2.ODataModel",
      "settings": {
        "serviceUrl": "/sap/opu/odata/sap/Z_SERVICE/"
      }
    }
  }
}

---

7. Running UI5 Apps Locally

Using UI5 CLI

ui5 serve

Access: http://localhost:8080

Benefits of Local Run

• Fast development
• No transport dependency
• Easy debugging
• CI/CD friendly

Best Practice

Develop locally → deploy later.

---

8. How UI5 App Starts (Execution Flow)

index.html
   ↓
Component.js
   ↓
manifest.json
   ↓
Router
   ↓
Views

Understanding This Flow

This flow explains 90% of UI5 startup issues.

---

9. BAS vs VS Code – Comparison

Aspect	BAS	VS Code
Setup	Zero	Manual
SAP Integration	Excellent	Limited
Offline	❌	✅
Enterprise Ready	✅	⚠️

Recommendation

Use BAS for SAP projects, VS Code for learning & open-source.

---

10. Common Beginner Mistakes

Avoid These

• Hardcoding models in controllers
• Editing index.html unnecessarily
• Ignoring manifest.json
• No UI5 CLI usage
• Mixing backend URLs in code

---

11. Interview-Grade Explanation

Q: What is the role of Component.js and manifest.json in UI5?

Answer:

Component.js initializes the application and router, while manifest.json acts as the application descriptor, defining models, routing, dependencies, and metadata in a declarative manner.

---

12. Summary

• BAS is SAP's official UI5 IDE
• UI5 CLI enables local development
• Component.js is the app entry point
• manifest.json is the configuration backbone
• Local execution improves productivity

---

13. What's Next?

➡️ Module 3: MVC Architecture in SAPUI5

Learning Tip

Master the tooling early — UI5 development becomes 10x easier.