Software Design: Strategies for Modular Programming and Loose Coupling
Tags: javascript, programming, react, typescript
Published: 2024-05-15 22:59:25

I was working on a sound button based on a design created by Figma. The basic function is when clicking the button, the background color changes and the icon animation starts. The challenging aspect was how to structure it or separate functions into components. My senior developer always emphasized loose coupling and that solved the issue.

So, in this article, I'll dig deeper into software design, especially modular programming and loose coupling.

**Module**

> In computer software, a module is an extension to a main program dedicated to a specific function. In programming, a module is a section of code that is added in as a whole or is designed for easy reusability.

[Techtarget](https://www.techtarget.com/whatis/definition/module#:~:text=In%20computer%20hardware%2C%20a%20module,is%20designed%20for%20easy%20reusability)

A module is a small unit that encapsulates a specific functionality or a series of functionalities. 

**Modular Programming**
Modular programming is a technique that simplifies complex software development by breaking it down into smaller, manageable pieces, or modules for easy maintenance, simple updates, and reusable code across projects.

Modular programming is mainstream among developers due to code organization, reusability, scalability, maintainability, collaboration, and testing.

But I still wonder how...

TechTarget mentions this about software modules:

> Large software packages may have modules to define the sections of its functionality. This is often used to make the software easier to use for **a specific use case** or to define where **boundaries** exist in a program.

In my case, I should've considered how the sound button would be used in our project.

Here's another question: where are the boundaries?

**Granularity**
To be brief, granularity is a level of detail. High-level is more coarse and low-level is fined. So, choosing the right level of granularity is to define the module boundaries.

Larry Constantine developed the concepts of cohesion and coupling.
[Wikipedia](https://en.wikipedia.org/wiki/Larry_Constantine)

Cohesion is "_the degree to which the internal contents of a module are related_." 
Coupling is "_the degree to which a module depends upon other modules_."

An example of high cohesion would be an authentication module that only handles user login, registration, and password management.

**Tight Coupling**
The components in a system are connected and dependent on each other. Changes in one component affect the other component.

Here's an example:
Class A contains a conditional statement such as if (value > 10). Class B creates a new instance of Class A and utilizes its method, which relies on this condition. If the condition is modified, for example, to if (value > 20), it could lead to failure in Class B.

**Loose Coupling**
The components are independent of each other. Each component has its own defined interface.

Initially, I misunderstood this concept. While components don't necessarily need to be completely independent, they should be weakly or loosely associated with each other. It means changes in one component will have minimal impact on another component.

High cohesion correlates with loose coupling. Therefore, achieving both high cohesion and loose coupling is desirable for code organization, reusability, scalability, maintainability, collaboration, and testing.

**Considerations before tackling the issue**
I should have applied these principles before addressing the issue.

**What I should have considered before tackling this issue:**
- How the sound button would be utilized within our project. 
  For instance, determining which component should be reusable and which should remain static
- What methods each class should have

**What prevented me from taking action:**
- I initially had a bias towards utilizing the exact designs created by designers in Figma by exporting them as PNG files.
- Additionally, I felt a little overwhelmed by the new libraries for our project.

**The questions I should've asked (to a team or myself):**
- How and where will the sound button be integrated into our project?
- What parts should remain dynamic, and which should remain static?
- How should we approach the creation of the components?
- Is it acceptable to modify the design by applying CSS or custom styles due to the libraries we utilize?

I've gained insights into software design, focusing on modular programming, high cohesion, and loose coupling, understanding their importance in software development. Before diving into coding, I will take a moment to consider how the functions will be utilized within our project.