Alternatives
Maqola yozilish jarayonida
Uning yaratilishini tezlashtirish uchun siz:
- 📢 Fikr-mulohaza ulashing chiptada (sharhlar/reaksiya emoji)
- 💬 Mavzu boyicha to'plamlarni chiptaga yig'ish suhbatdan olingan material
- ⚒️ Hissa qo‘shish har qanday boshqa yo'l bilan
🍰 Stay tuned!
History of architecture approaches
Big Ball of Mud
Maqola yozilish jarayonida
Uning yaratilishini tezlashtirish uchun siz:
- 📢 Fikr-mulohaza ulashing chiptada (sharhlar/reaksiya emoji)
- 💬 Mavzu boyicha to'plamlarni chiptaga yig'ish suhbatdan olingan material
- ⚒️ Hissa qo‘shish har qanday boshqa yo'l bilan
🍰 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
Maqola yozilish jarayonida
Uning yaratilishini tezlashtirish uchun siz:
- 📢 Fikr-mulohaza ulashing chiptada (sharhlar/reaksiya emoji)
- 💬 Mavzu boyicha to'plamlarni chiptaga yig'ish suhbatdan olingan material
- ⚒️ Hissa qo‘shish har qanday boshqa yo'l bilan
🍰 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
Maqola yozilish jarayonida
Uning yaratilishini tezlashtirish uchun siz:
- 📢 Fikr-mulohaza ulashing chiptada (sharhlar/reaksiya emoji)
- 💬 Mavzu boyicha to'plamlarni chiptaga yig'ish suhbatdan olingan material
- ⚒️ Hissa qo‘shish har qanday boshqa yo'l bilan
🍰 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
Maqola yozilish jarayonida
Uning yaratilishini tezlashtirish uchun siz:
- 📢 Fikr-mulohaza ulashing chiptada (sharhlar/reaksiya emoji)
- 💬 Mavzu boyicha to'plamlarni chiptaga yig'ish suhbatdan olingan material
- ⚒️ Hissa qo‘shish har qanday boshqa yo'l bilan
🍰 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
Maqola yozilish jarayonida
Uning yaratilishini tezlashtirish uchun siz:
- 📢 Fikr-mulohaza ulashing chiptada (sharhlar/reaksiya emoji)
- 💬 Mavzu boyicha to'plamlarni chiptaga yig'ish suhbatdan olingan material
- ⚒️ Hissa qo‘shish har qanday boshqa yo'l bilan
🍰 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
Maqola yozilish jarayonida
Uning yaratilishini tezlashtirish uchun siz:
- 📢 Fikr-mulohaza ulashing chiptada (sharhlar/reaksiya emoji)
- 💬 Mavzu boyicha to'plamlarni chiptaga yig'ish suhbatdan olingan material
- ⚒️ Hissa qo‘shish har qanday boshqa yo'l bilan
🍰 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 thepages
layer 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
Maqola yozilish jarayonida
Uning yaratilishini tezlashtirish uchun siz:
- 📢 Fikr-mulohaza ulashing chiptada (sharhlar/reaksiya emoji)
- 💬 Mavzu boyicha to'plamlarni chiptaga yig'ish suhbatdan olingan material
- ⚒️ Hissa qo‘shish har qanday boshqa yo'l bilan
🍰 Stay tuned!
About the approach; About applicability in the frontend; FSD position
About compatibility, historical development and comparison