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.
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
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.
Top comments (2)
Thank you, very good article.
We at Elanat team offered two products:
The most important thing we paid attention to in these two products was modularity support.
Adding modules in the CodeBehind framework and Elanat CMS is done in the simplest possible way.
To understand the simplicity of module support in our products, you can view the following articles:
Hi Ayako yk
Your tips are very useful
Thanks for sharing