Skip to main content

Alternatives

WIP

The article is in the process of writing

To bring the release of the article closer, you can:


🍰 Stay tuned!

History of architecture approaches

Big Ball of Mud​

WIP

The article is in the process of writing

To bring the release of the article closer, you can:


🍰 Stay tuned!

What is it; Why is it so common; When it starts to bring problems; What to do and how does FSD help in this

Smart & Dumb components​

WIP

The article is in the process of writing

To bring the release of the article closer, you can:


🍰 Stay tuned!

About the approach; About applicability in the frontend; Methodology position

About obsolescence, about a new view from the methodology

Why component-containers approach is evil?

Design Principles​

WIP

The article is in the process of writing

To bring the release of the article closer, you can:


🍰 Stay tuned!

What are we talking about; FSD position

SOLID, GRASP, KISS, YAGNI, ... - and why they don't work well together in practice

And how does it aggregate these practices

DDD​

WIP

The article is in the process of writing

To bring the release of the article closer, you can:


🍰 Stay tuned!

About the approach; Why does it work poorly in practice

What is the difference, how does it improve applicability, where does it adopt practices

Clean Architecture​

WIP

The article is in the process of writing

To bring the release of the article closer, you can:


🍰 Stay tuned!

About the approach; About applicability in the frontend; FSD position

How are they similar (to many), how are they different

Frameworks​

WIP

The article is in the process of writing

To bring the release of the article closer, you can:


🍰 Stay tuned!

About applicability in the frontend; Why frameworks do not solve problems; why there is no single approach; FSD position

Framework-agnostic, conventional-approach

Atomic Design​

What is it?​

In Atomic Design, the scope of responsibility is divided into standardized layers.

Atomic Design is broken down into 5 layers (from top to bottom):

  1. pages - Functionality similar to the pages layer in FSD.
  2. templates - Components that define the structure of a page without tying to specific content.
  3. organisms - Modules consisting of molecules that have business logic.
  4. molecules - More complex components that generally do not contain business logic.
  5. atoms - UI components without business logic.

Modules at one layer interact only with modules in the layers below, similar to FSD. That is, molecules are built from atoms, organisms from molecules, templates from organisms, and pages from templates. Atomic Design also implies the use of Public API within modules for isolation.

Applicability to frontend​

Atomic Design is relatively common in projects. Atomic Design is more popular among web designers than in development. Web designers often use Atomic Design to create scalable and easily maintainable designs. In development, Atomic Design is often mixed with other architectural methodologies.

However, since Atomic Design focuses on UI components and their composition, a problem arises with implementing business logic within the architecture.

The problem is that Atomic Design does not provide a clear level of responsibility for business logic, leading to its distribution across various components and levels, complicating maintenance and testing. The business logic becomes blurred, making it difficult to clearly separate responsibilities and rendering the code less modular and reusable.

How does it relate to FSD?​

In the context of FSD, some elements of Atomic Design can be applied to create flexible and scalable UI components. The atoms and molecules layers can be implemented in shared/ui in FSD, simplifying the reuse and maintenance of basic UI elements.

β”œβ”€β”€ shared
β”‚ β”œβ”€β”€ ui
β”‚ β”‚ β”œβ”€β”€ atoms
β”‚ β”‚ β”œβ”€β”€ molecules
β”‚ ...

A comparison of FSD and Atomic Design shows that both methodologies strive for modularity and reusability but focus on different aspects. Atomic Design is oriented towards visual components and their composition. FSD focuses on dividing the application's functionality into independent modules and their interconnections.

Feature Driven​

WIP

The article is in the process of writing

To bring the release of the article closer, you can:


🍰 Stay tuned!

About the approach; About applicability in the frontend; FSD position

About compatibility, historical development and comparison