The Importance of Pseudocode: Developing a Web App Using the Principles of Atomic Design

In the realm of modern web development, crafting interactive user experiences is paramount, and JavaScript stands as the pivotal tool for such dynamic interactions. For developers, an intimate understanding of JavaScript's capabilities is a prerequisite, even before leveraging the abstraction layers provided by frameworks like React and Angular.

To go deeper into this topic, I will present in this article a case study of a task management web app I made called "Priorities Online".

"Priorities Online" will be handy here to exemplify JavaScript web app development, integrating user interaction and dynamic content manipulation without the overhead of heavy frameworks. This article will delve into the intricate process of building this application, leveraging the concept of Atomic Design, which is proposed in line with the fundamental principles of object-oriented programming (OOP).

To make our web app, before starting to write code, I sketch a visual frame of how it could look and then I plan a layout using this methodology that I write in a markdown program like Obsidian, where I write pseudo code and plan each part of the app beforehand within its respective structural frame.

From Wireframes to Functional Outline

To start off, I want to have at least a visual clue of how the app will be, that is why I usually start to develop my apps creating some wireframes for Figma. Once I have those, I proceed to outline the app's functionality in Obsidian or other note taking app with markdown functionalities using the Atomic Design principles to organize the components systematically. This meticulous planning phase is pivotal, forming a clear pathway from design to development.

Atomic Design: A Modular Approach

Atomic Design, a concept I came across online years ago, is an insightful paradigm for decomposing complex interfaces into fundamental building blocks within a hierarchical structure. It borrows from the natural world, where sentient beings can be broken down into organisms, molecules, and atoms, all residing within a specific environment (this being a term I've personally added to the original layout). In this manner, Atomic Design offers a logical blueprint for constructing a web app with a clear separation of concerns, facilitating maintenance and scalability. This conceptual approach is coupled with the principles of encapsulation, inheritance and compartmentalization used in OOP in general.

Environment: The Single Page Application

"Priorities Online" breathes within a single-page application environment, with the index file orchestrating the overall structure. It encompasses two organisms that facilitate user navigation and action zones: the "sideBar" for navigation and the "contentBox", where the action happens.

Organisms: Dynamic UI Elements

The organisms, such as the "sideBar" and "contentBox," are the cornerstone components that define the spatial and functional organization of the web app. The sidebar acts as a navigation hub, while the content box is the central area for user interaction and task management. They house various molecules, which are combinations of atomic elements working together to execute a particular task module.

Molecules and Atoms: Reusable Components

Molecules are combinations of various elements that perform a particular function—like a task "molecule" that includes a button to add tasks. As shown, molecules can be conceptualized as a parallel to "modules" in real code. Atoms can be considered as the smallest reusable units, like buttons or input boxes, etc. These design units are leveraged across different modules, ensuring a consistent and maintainable codebase. In the Priorities Online app, an example of an atom would be the "Add Task" button, which resides in the task module (or molecule).

I also like to utilize the concept of "particle" (as a broader sense than atom) as an analogue to classes of prototypes, which have properties (or "subatomic particles") shared all across.

Implementing the Vision: Pseudocode to Execution

Having set out all the pseudocode with the Atomic Design in mind in obsidian, and having all the structure in place, I translated the pseudocode to real javascript (and jQuery) code, which was now easier as we have delineated already how the UI elements interact within the DOM. And through the app's functionality is rooted in JavaScript, its pseudocode serves as its architectural blueprint:

• The environment is the single page application (index.html)
• The organisms are the main divs within the "environment": sideBar and contentBox.
• The molecules are the different modules used throughout the app: priorities.js, projects.js, tasks.js, etc.
• There are two particles or classes for "projects" and "tasks" defined in the tasks and priorities modules.
• The atoms are the different objects also shared throughout the app or locally. Many of them are defined with classes for styling.

With this article I hope to have illustrated how a systematic approach to design and development can yield a robust approach for abstraction thus simplifying the development process.

For the code itself, you can check it here.
Here is the pseudocode.
And here you can see the app live.