From 1b2da0c45d4ce15b0f405117b13961667ecf60b4 Mon Sep 17 00:00:00 2001 From: Yan Levin <78198187+midas-png@users.noreply.github.com> Date: Fri, 24 May 2024 17:57:37 +0300 Subject: [PATCH] feat: added atomic design alternative docs (#671) --- .../current/about/alternatives.mdx | 47 +++++++++++++++-- .../current/about/alternatives.mdx | 50 +++++++++++++++++-- 2 files changed, 88 insertions(+), 9 deletions(-) diff --git a/i18n/en/docusaurus-plugin-content-docs/current/about/alternatives.mdx b/i18n/en/docusaurus-plugin-content-docs/current/about/alternatives.mdx index 3d84b7c96e..cd258dd4f9 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/about/alternatives.mdx +++ b/i18n/en/docusaurus-plugin-content-docs/current/about/alternatives.mdx @@ -90,18 +90,57 @@ Framework-agnostic, conventional-approach ## Atomic Design - +### What is it? +In Atomic Design, the scope of responsibility is divided into standardized layers. -> About the approach; About applicability in the frontend; FSD position +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. -About compatibility, applicability in methodology and scope of responsibility, mapping layers +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](https://atomicdesign.bradfrost.com/table-of-contents/) - [(Thread) About applicability in shared / ui](https://t.me/feature_sliced/1653) - [(Video) Briefly about Atomic Design](https://youtu.be/Yi-A20x2dcA) - [(Talk) Ilya Azin - Feature-Sliced Design (fragment about Atomic Design)](https://youtu.be/SnzPAr_FJ7w?t=587) - ## Feature Driven diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/about/alternatives.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/about/alternatives.mdx index bc8c88d4f7..018bc847b4 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/about/alternatives.mdx +++ b/i18n/ru/docusaurus-plugin-content-docs/current/about/alternatives.mdx @@ -92,11 +92,51 @@ Framework-agnostic, conventional-подход ## Atomic Design - - -> О подходе; О применимости в фронтенде; позиция FSD - -Про совместимость, применимость в методологии и скоуп ответственности, сопоставление слоев +### Что это? + +В Atomic Design сфера ответственности разделена на стандартизированные слои.  + +Atomic Design разбивается на **5 слоев** (сверху вниз): + +1. `pages` - Назначение аналогично слою `pages` в FSD. +2. `templates` - Компоненты задающие структуру страницы, без привязки к контенту. +3. `organisms` - Модули состоящие из молекул, обладающие бизнес логикой. +4. `moleculs` - Более сложные компоненты, в которых, как правило, нет бизнес логики. +5. `atoms` - UI компоненты без бизнес логики. + +Модули на одном слое взаимодействуют только с модулями, находящимися на слоях ниже, как в FSD. +То есть, молекулы строятся из атомов, организмы из молекул, шаблоны из организмов, страницы из шаблонов. +Также Atomic Design подразумевает использование **Public API** внутри модулей для изоляции. + +### Применимость во фронтенде +Atomic Design относительно часто встречается в проектах. Atomic Design популярнее среди веб-дизайнеров,  +нежели в разработке. Веб-дизайнеры часто используют Atomic Design для создания масштабируемых и легко поддерживаемых дизайнов.  +В разработке Atomic Design часто смешивается с другими архитектурными методологиями. + +Однако, так как Atomic Design концентрирует внимание на UI компонентах и их композицию, возникает проблема реализации +бизнес логики в рамках архитектуры. + +Проблема заключается в том, что Atomic Design не предусматривает четкого уровня ответственности для бизнес-логики,  +что приводит к распределению по различным компонентам и уровням, усложняя поддержку и тестирование.  +Бизнес-логика становится размыта, что затрудняет четкое разделение ответственности и делает код менее +модульным и переиспользуемым. + +### Как оно сочетается с FSD? +В контексте FSD некоторые элементы Atomic Design могут быть применены для  +создания гибких и масштабируемых UI компонентов. Слои `atoms` и `molecules` можно реализовать в  +`shared/ui` в FSD, что упрощает переиспользование и поддержку базовых UI элементов.  + +```sh +├── shared +│   ├── ui  +│   │   ├── atoms +│   │   ├── molecules +│   ... +``` + +Сравнение FSD и Atomic Design показывает, что обе методологии стремятся к модульности и переиспользованию,  +но акцентируют внимание на разных аспектах. Atomic Design ориентирован на визуальные компоненты  +и их композицию. FSD фокусируется на разбиении функциональности приложения на независимые модули и их взаимосвязи. - [Методология Atomic Design](https://atomicdesign.bradfrost.com/table-of-contents/) - [(Тред) Про применимость в shared/ui](https://t.me/feature_sliced/1653)