Decoding Modern Frontend Projects with UML: A Developer's Guide

Hey there fellow developers, have you ever been handed a frontend project from another team and felt like you're trying to navigate through an intricate labyrinth? It's totally relatable, especially in smaller teams where documentation might be scarce or outdated. The reason for this complexity is that modern frontend development has transcended simple HTML pages and evolved into sophisticated, dynamic applications.

Today's frontend projects often involve intricate state management, real-time data handling, modular components, and complex build tools that all contribute to the application-like experience. They are built with advanced JavaScript frameworks or libraries such as React, Angular, or Vue.js, which bring a level of interactivity and functionality that rivals traditional desktop applications.

These advancements mean that understanding the architecture and flow of a frontend project can be daunting without proper guidance. That's why having a tool like UML (Unified Modeling Language) can be invaluable. Let's chill and discuss how and why UML will solve this problem for us.

So bear with me and let's start this journey together!

Table of Contents

1. Understanding UML
2. The Role of UML in Frontend Projects
3. Using Class Diagrams and Sequence Diagrams to Understand a Simple React App
4. Conclusion

Understanding UML

What is the UML?

UML, or Unified Modeling Language, is a standardized way to visualize the design of a system. It was created to forge a common, semantically and syntactically rich visual modeling language for the architecture, design, and implementation of complex software systems both structurally and behaviorally.

UML has several diagram types:

• Class Diagrams: Show the static structure of the system.
• Use Case Diagrams: Identify the actors in a system and their use cases.
• Sequence Diagrams: Illustrate how objects interact in a particular scenario of a use case.
• Activity Diagrams: Represent workflows showing the sequence of activities.
• State Diagrams: Reflect the states of an object through its lifetime.
• Component Diagrams: Depict how components are wired together to form larger components or software systems.
• Deployment Diagrams: Focus on the physical deployment of artifacts on nodes.

Why we need to use UML?

Visuals are key. Diagrams show us how classes, objects, modules, components, servers, and browsers interact and connect with users. Making charts helps us grasp things better than jumping into a complex codebase directly that packed with too much information. So we will focus on two questions:

• what is the relationship between them
• how they interact with each other

So with this mindset, let's take a quick look at the main components of the UML: class diagram and sequence diagram.

So What is Class Diagram?

A class diagram is a visual representation of the structure and relationships of classes in object-oriented programming. here is a simple example:

In this example three classes at the bottom are inherited from the Animal class as you can see the arrows are pointing to it, so this diagram simply explained the relationship between these classes. another key point is that each class has three columns which is the title and properties and methods, you will also notice the symbol + and - which means public and private.

And What is Sequence Diagram?

A sequence diagram is a type of interaction diagram that shows how objects interact in a particular scenario of a system. It illustrates the sequence of messages exchanged between objects or components over time to achieve a specific functionality or behavior. here is a basic example:

Key Elements of a Sequence Diagram:

• Lifelines: Represent the existence of an object at a particular time. A lifeline is shown as a dashed line.
• Messages: The communication between objects, depicted as arrows. Synchronous messages wait for a response, while asynchronous messages do not.
• Activation Bars: Rectangles on a lifeline that show when an object is active or performing an operation.

The Role of UML in Frontend Projects

UML was originally created for object-oriented systems. Nowadays, frontend apps are made with components in Vue, Angular, Svelte, or React. This is why UML isn't common among frontend developers. Yet, if we consider each component as a class.

Using Class Diagrams and Sequence Diagrams to Understand a Simple React App

I know this might seem tricky. To help explain, we'll look at the GitHub link below. It takes you to an easy React app. I'll use this as an example to show how class diagrams and sequence diagrams can help us figure out how the app works:

https://github.com/aditya-sridhar/simple-reactjs-app?tab=readme-ov-file

This is the screenshot for our app for demonstration:

Integrate Class Diagram

This application simply display a list of customers and their details, so we have three main components here:

1. App Component: The main component that sets up the routing for the application and renders the header with the logo and title.
2. Customers?Component : This Component displays a list of customers. This Component gets the data from a json file in assets folder
3. CustomerDetails?Component : This Component Displays the details of the selected customer. This Component gets its data from a json file in assets folder as well. This Component is the Child Component of?Customers?Component

Now, let's explore how we can utilize a class diagram to illustrate the relationships and elements of each component.

In the previous section, we discussed that each class in a class diagram typically consists of three columns: class name, properties, and methods.

In a React component, these translate to props, states, and methods. Props can be viewed as public properties (prefixed with +) of the class, while states are considered private properties (prefixed with -). With this understanding, we can create a straightforward diagram as follows:

I also added the notation 1..* to show that the CustomerDetails component can be shown from once up to as many times as needed.

While the class diagram provides insights into the props, states, and methods of each component, it lacks detailing on how these components and users interact with one another.

To delve deeper into this interaction and illustrate the sequence of events, let's explore the integration of a sequence diagram in the next topic.

Integrate Sequence Diagram

Creating a sequence diagram involves two main steps:

1. Identify the participants that will interact with the system.
2. Link the participants through the messages they exchange during interaction.

Let's start by pinpointing the participants, also referred to as lifelines in a sequence diagram. Here's the list:

• User
• Client Browser
• Web Server
• App Component
• Customer Component
• CustomerDetails Component

Now we figure out what is the message that exchanges between each lifeline and their sequence. let's focus on the interaction happened during the first rendering, as like below:

So we listed down the messages exchanged between different objects and components, which is really important to understand the flow of data and the dependencies among the components.

By doing this, we can identify potential bottlenecks or areas that might cause performance issues. Here's what we have observed:

1. Initialization: The root component starts the process by initializing the state and setting up the necessary props.
2. Component Mounting: Child components receive the initial state and props from the parent, triggering their own mounting sequence.
3. API Calls: Some components may make API calls to fetch additional data required for rendering.
4. State Updates: As data is received, components update their state, which may cause re-renders if the new state differs from the old one.
5. Prop Drilling: Parent components pass down props to children, sometimes several layers deep, which can lead to a cascade of updates if any prop changes.

Conclusion

In this guide, we've walked through the basics of UML and how it can be a game-changer for frontend development. We've seen that while UML might seem more suited to backend systems, it has a lot to offer in understanding and documenting the structure and behavior of frontend applications as well.

Key Takeaways

• UML is versatile: It's not just for backend systems; frontend projects can benefit from its visual clarity.
• Class diagrams: They help us visualize the static structure of our components, making the architecture easier to understand.
• Sequence diagrams: These diagrams shine a light on dynamic interactions, showing us the flow of data and events through our application.

By integrating class and sequence diagrams into our workflow, we create a clear roadmap of our application's functionality. This helps not only in onboarding new team members but also in maintaining and scaling our project effectively.

So, let's embrace UML in our frontend projects. It's a powerful ally that can simplify complexity and bring order to potential chaos. Remember, a picture is worth a thousand lines of code!