What is Object Oriented Programming? Wiki says:

Object-oriented programming (OOP) is a programming paradigm based on the concept of “objects“, which can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods).

Which actually sounds good enough to understand. We have objects, objects have fields and methods. There are different subtypes of OOP and the most common is class-based, which means that we create classes and from them we are able to instantiate objects. Technically JavaScript is prototype-based programming language, not class-based, but I will pretend that it’s not actually true and talk about it as it would be class-based 🙂

Class is a blueprint. It is a template for creating the objects. All the objects will have the same fields and methods as class does.

Object is an instance of the class, like a clone. Let’s imagine car factory, from this perspective factory would be “new” keyword, car blueprint would be a class and cars would be objects.

Field is something that stores information about the object. It should always sound as a fact: id, height, width, language, urlParameters, date, etc.

Method is an action. Methods should always contain some action in naming: doSomething(), create(something), getNearestHolidayTo(today) etc.

I don’t really like examples from the world which you will never meet, so I will try not to give examples with Dogs, Cats and so on 🙂

Example of UI5 class named Document:

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

	return ManagedObject.extend("com.blog.classes.Document", {
		sDocumentId: null,
		constructor: function(sDocumentId) {
			ManagedObject.prototype.constructor.apply(this, []);
			this.sDocumentId = sDocumentId;

			return this;
		},
		getDataMap: function() {
			return {
				DOCUMENT_ID: this.sDocumentId
			};
		}
	});
});

Lets take that apart. There is a class “com.blog.classes.Document”, which has field sDocumentId and two methods: constructor, getDataMap.

sDocumentId is a field of type string ( I hope that you are aware of Hungarian Notation. If not – Hungarian Notation -> Naming Conventions )

getDataMap is a method, which does something. In this case it produces a map with DOCUMENT_ID and returns it.

Here we have method called constructor. That’s a special method, which is called when new object of the class is instantiated.

How can we use this class?

First thing what needs to be done is import class in sap.ui.define. Afterwards it will be available for usage.

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"com/blog/classes/Document"
], function(
	Controller,
	Document
) {
	"use strict";

	return Controller.extend("com.blog.classes.Master", {
		onInit: function() {
			const sDocumentId = "67000023";
			const oDocument = new Document(sDocumentId);
			const mDocumentData = oDocument.getDataMap();
		}
	});
});

So what do we see here? Document class is imported in sap.ui.define, and in onInit method of Master.controller.js we decided to instantiate it (create an instance). We need to provide sDocumentId (in real life you would get it from backend) for instantiating object of Document class.

new Document(sDocumentId);

that’s  exactly the place what is called “instantiation”. When new keyword is used, it creates the object of Document class. It means that exactly at that moment Document class is used as a template for generating the object with fields and methods. In the process of instantiation constructor method is called. What is passed

new Document(<HERE>)

is exactly what will be received

constructor: function(<HERE>) {}

After instantiation of the object all fields and methods becomes available. Right below instantiation  method getDataMap is called, which returns { DOCUMENT_ID: “67000023” } and puts it into mDocumentData variable.

I have promised to provide examples from other languages as well, so that’s how the same code would look like in typescript:

Document.ts

import ManagedObject from "sap/ui/base/ManagedObject";

export default class Document extends ManagedObject {
	documentId: string;
	constructor(documentId: string) {
		super();
		this.documentId = documentId;
	}
	getDataMap(): { DOCUMENT_ID: string } {
		return {
			DOCUMENT_ID: this.documentId
		}
	}
}

Master.controller.ts

import Controller from "sap/ui/core/mvc/Controller";
import Document from "com/blog/controller/Document";

class MasterController extends Controller {
	onInit() {
		const sDocumentId = "67000023";
		const oDocument = new Document(sDocumentId);
		const mDocumentData = oDocument.getDataMap();
	}
}

Document class in Java:

import java.util.HashMap;

public class Document {
    String documentId;
    Document(String documentId) {
        this.documentId = documentId;
    }
    
    public HashMap<String, String> getDataMap() {
        HashMap<String, String> data = new HashMap<String, String>();
        data.put("DOCUMENT_ID", this.documentId);
        return data;
    }
}

Using document class in Java:

import java.util.HashMap;

public class Main {
    public static void main(String[] args) {
        String documentId = "67000023";
        Document document = new Document(documentId);
        HashMap<String, String> documentData = document.getDataMap();
    }
}

Different languages, same idea.

Typescript is absolutely the same as javascript, just with strict typing system, which means that everything has strictly defined type. That’s exactly what can be seen in Document class: documentId is of type string, getDataMap is a method which returns object with DOCUMENT_ID field and string value. Take your time and feel free to compare both languages. There are no big differences for now, but further we go, more differences will appear.

From SAPUI5 Extension perspective I was trying to reproduce part of the typescript logic. The best part about typescript is that because of static typing system it is able to provide completion items automatically, which is not a case for javascript, because any field can be any type and any method can return anything.
This is what you get out of the box using typescript:

By using plain javascript you get nothing, but SAPUI5 Extension parses the class and as a result it is able to provide fields and methods as well:

UML Diagrams

UML Diagrams stands for Unified Modeling Language. It’s a set of standarts to visualise the design of the system. I will use them a lot later on in order to explain some of the theory.

Class Diagrams

Here is a diagram for classes which were mentioned above:

It’s pretty easy to understand: you can see classes, fields, methods, relationships. The arrow is a relationship between classes, in this case it means “Master controller uses Document”.

Sequence diagrams

Sequence diagrams are used to show how objects works together. In our case it looks as follows:

Conclusion

At the end of this post it should be clear what is a class, an object, field and method.

Hopefully you survived till this moment. Stay strong, it’s just part 1 🙂

Agenda can be found here