Alternatives
The article is in the process of writing
To bring the release of the article closer, you can:
- π’ Share your feedback at article (comment/emoji-reaction)
- π¬ Collect the relevant material on the topic from chat
- βοΈ Contribute in any other way
π° Stay tuned!
History of architecture approaches
Big Ball of Mudβ
The article is in the process of writing
To bring the release of the article closer, you can:
- π’ Share your feedback at article (comment/emoji-reaction)
- π¬ Collect the relevant material on the topic from chat
- βοΈ Contribute in any other way
π° 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
- (Article) Oleg Isonen - Last words on UI architecture before an AI takes over
- (Report) Julia Nikolaeva, iSpring - Big Ball of Mud and other problems of the monolith, we have handled
- (Article) DD - Big Ball of mud
Smart & Dumb componentsβ
The article is in the process of writing
To bring the release of the article closer, you can:
- π’ Share your feedback at article (comment/emoji-reaction)
- π¬ Collect the relevant material on the topic from chat
- βοΈ Contribute in any other way
π° 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β
The article is in the process of writing
To bring the release of the article closer, you can:
- π’ Share your feedback at article (comment/emoji-reaction)
- π¬ Collect the relevant material on the topic from chat
- βοΈ Contribute in any other way
π° 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β
The article is in the process of writing
To bring the release of the article closer, you can:
- π’ Share your feedback at article (comment/emoji-reaction)
- π¬ Collect the relevant material on the topic from chat
- βοΈ Contribute in any other way
π° 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
- (Article) DDD, Hexagonal, Onion, Clean, CQRS, ... How I put it all together
- (Talk) Ilya Azin - Feature-Sliced Design (fragment about Clean Architecture, DDD)
Clean Architectureβ
The article is in the process of writing
To bring the release of the article closer, you can:
- π’ Share your feedback at article (comment/emoji-reaction)
- π¬ Collect the relevant material on the topic from chat
- βοΈ Contribute in any other way
π° Stay tuned!
About the approach; About applicability in the frontend; FSD position
How are they similar (to many), how are they different
- (Thread) About use-case/interactor in the methodology
- (Thread) About DI in the methodology
- (Article) Alex Bespoyasov - Clean Architecture on frontend
- (Article) DDD, Hexagonal, Onion, Clean, CQRS, ... How I put it all together
- (Talk) Ilya Azin - Feature-Sliced Design (fragment about Clean Architecture, DDD)
- (Article) Misconceptions of Clean Architecture
Frameworksβ
The article is in the process of writing
To bring the release of the article closer, you can:
- π’ Share your feedback at article (comment/emoji-reaction)
- π¬ Collect the relevant material on the topic from chat
- βοΈ Contribute in any other way
π° 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
- (Article) About the reasons for creating the methodology (fragment about frameworks)
- (Thread) About the applicability of the methodology for different frameworks
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):
pages- Functionality similar to thepageslayer in FSD.templates- Components that define the structure of a page without tying to specific content.organisms- Modules consisting of molecules that have business logic.molecules- More complex components that generally do not contain business logic.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.
- Atomic Design Methodology
- (Thread) About applicability in shared / ui
- (Video) Briefly about Atomic Design
- (Talk) Ilya Azin - Feature-Sliced Design (fragment about Atomic Design)
Feature Drivenβ
The article is in the process of writing
To bring the release of the article closer, you can:
- π’ Share your feedback at article (comment/emoji-reaction)
- π¬ Collect the relevant material on the topic from chat
- βοΈ Contribute in any other way
π° Stay tuned!
About the approach; About applicability in the frontend; FSD position
About compatibility, historical development and comparison