6. Introduction to System Design & UML Diagrams
You've been writing classes for weeks. Today we're zooming out. Systems-level thinking means seeing how multiple classes work together to solve a real problem. This isn't just academic—when you interview, you'll be asked to design systems.
By the end of this lesson, you'll be able to answer this question: Consider an application for making a pet adoption system: What classes exist, what are their responsibilities, and what are the interactions between them? Illustrate this system with a UML diagram.
Table of Contents:
Key Concepts
System design is the process of understanding the responsibilities of the components of a system and their relationships/interactions to/with one another.
Class Systems are classes with relationships and responsibilities working together
An entity is a single component of a system, such as a class in a class system.
Unified Modeling Language (UML) is an industry-standard format for representing the components of a system, their responsibilities, and their relationships.
A multiplicity labels how many of one class relates to another (e.g. "one-to-many" → "One doctor has many appointments")
OOP Review / Practice
Create a Book class:
Properties:
title: String, public, set by the constructorauthor: String, public, set by the constructorgenre: String, public, set by the constructor
Methods: None
Then, create a Library class:
Properties:
name: String, public, set by the constructorbooks: Book[], private, starting value of[]
Methods:
getBooks(): Returns a copy of the private books arrayaddBook(book): Adds the given book to the private books array. Bonus if you can add a guard clause that ensures that all books added to the library come from theBookclass.
Example Usage:
const myBook = new Book("Beloved", "Toni Morrison", "Historical Fiction");
console.log(myBook); // Book { title: "Beloved", author: "Toni Morrison", genre: "Historical Fiction"}
const myLibrary = new Library("Brooklyn Central");
console.log(myLibrary); // Library { name: "Brooklyn Central"}
// Adding a book
myLibrary.addBook(myBook);
console.log(myLibrary.getBooks()); // [ Book { title: "Beloved", author: "Toni Morrison", genre: "Historical Fiction"} ]
// Only allow Book instances to be added. These shouldn't be added!
myLibrary.addBook("not a book");
myLibrary.addBook({ description: "I'm a book!" });
console.log(myLibrary.getBooks()); // [ Book { title: "Beloved", author: "Toni Morrison", genre: "Historical Fiction"} ]Case Study: Pet Adoption Center
Imagine that a nation-wide Pet Adoption Center approaches you to build an application for them. The application needs to handle the following:
Each shelter location needs a way to accept new Pets to be put up for adoption and keep track of them.
Adopters need some way to apply for pet adoption.
The shelter needs a way to review applications and approve or reject them.
Pause and Think: How would you go about building an application to handle these requirements? Where would you start?
System Design
System design is the process of understanding (1) the components of a system, (2) the responsibilities of those components, and (3) their relationships to/interactions with each other.
System design is a very broad term but in the context of Object-Oriented Programming (OOP), we can narrow its definition down a bit:
Components: The classes in your application (the "things").
Example: a Library and Book
Responsibilities: The properties and methods that each class "owns"
Example: A Library has
#booksand methodsaddBook,getBooks
Relationships: Inheritance or references between classes
Example: a Library references Books, or perhaps a Biography extends a Book
UML Diagrams & Iterative Design
Designing a system well can be really hard. Often times, many iterations of "wrong" solutions must be thrown away before the "right" solution emerges. To provide structure to this iterative design process, engineers turn to UML Diagrams.
Unified Modeling Language (UML) and UML Diagrams are the industry-standard format for visualizing:
the components/classes of a system (a.k.a. "entities")
the responsibilities of each entity (properties and methods)
the relationships between entities
A UML diagram for the Pet Shelter might look like this:
Take a few minutes to scan over the diagram.
This system looks pretty complex, and it is! But it didn't get created in an hour — it took many iterations to get to this somewhat final form.
UML Diagrams provide engineers a way to iterate on and communicate about a system's design without committing any time or resources to implementing it in code.
UML Syntax: Class Responsibilities
In a UML diagram, each box represents a single entity (class) with its name, properties, and methods inside:
A
+indicates a public property (e.g.+ name: String)A
-indicates a private property (e.g.- isAvailable: Boolean)Each property is listed with their data type.
Methods include parameter names and the returned type.
Practice: On your whiteboard or in your journal, draw a UML diagram for the Book class and the Libary class:
class Book {
constructor(title, author, genre) {
this.title = title;
this.author = author;
this.genre = genre;
}
}
class Library {
#books = [];
constructor(name) {
this.name = name;
}
addBook(book) {
if (!(book instanceof Book)) {
console.log("book must be a valid Book instance")
return;
}
this.#books.push(book);
}
getBooks() {
return [...this.#books]
}
}UML Syntax: Relationships
To illustrate relationships between classes in a system, we use a combination of arrows, labels, and multiplicity notation:
Arrows: Uni-Directional vs. Bi-Directional
Arrows indicate that one class reference another. References can either be uni-directional (one-way) or bi-directional (two-way)
Multiplicity
The numbers at each end of the arrow is called multiplicity notation. It indicates how many instances of one class can be associated with instances of another class:
For example, each shelter holds references to 0 or more pets which can be notated like: Shelter 1 --> 0..* Pet
More examples of multiplicity notation include:
Exactly one:
1Zero or more:
0..*One or more:
1..*
Label
The labels are a nice touch to include in your UML diagram.
Practice
Practice: Add an arrow to your UML diagram to indicate the relationship between your Library and Book class. Include a label and multiplicity notation.
System Design Analysis
Now that we understand how to create a UML diagram, how do we decide what goes into it?
Let's analyze the Pet Adoption Center system design and see if we can learn from it. Remember, the Pet Adoption Center requested that the system include the following:
The shelter needs a way to accept new Pets to be put up for adoption.
Adopters need some way to apply for pet adoption.
The shelter needs a way to review applications and approve or reject them.
Analyze the UML diagram for the pet adoption system and, for each feature, identify:
Are any new class instances created? If so, with what properties?
Which properties are used from each class to make the feature work?
Which methods are invoked, and in what order, to make the feature work?
Last updated