Dobrý den, čtenáři!
Znáte tu situaci, kdy se pustíte do probíhajícího projektu a pak zjistíte, že je jen chaos? Struktura projektu je disastah takže se pokusíte znovu použít komponenty, ale je to téměř nemožné nebo to zabere více času, než je vytvořit od začátku. Poté, co najdete miliony řádků duplicitního kódu, konečně získáte odvahu a zeptáte se sami sebe:„Mám zůstat, nebo mám prostě jít?“.
No, řekl bych vám, abyste běželi, ALE, můžete zkusit refraktorovat/znovu vytvořit strukturu projektu pomocí Atomového návrhu! Usnadní život nejen vám, ale i každému dalšímu vývojáři, který se do projektu zapojí. Nemáte zač
ATOMICKÝ DESIGN????
Atomový design je metodologie složená z pěti odlišných fází. Pracují společně na vytvoření systému návrhu rozhraní záměrnějším a hierarchickým způsobem. Těchto pět stupňů se skládá z atomů -> molekuly -> organismy -> šablony a stránky. Každá fáze hraje klíčovou roli v hierarchii našeho systému návrhu rozhraní.
Brzy vysvětlím každou fázi, ale jak můžete předpokládat, je to podobné jako v chemii. Atomy se spojují a vytvářejí molekuly, molekuly se dále spojují a vytvářejí relativně složité organismy atd.
Atomy našich rozhraní slouží jako základní stavební kameny. Atom by měl obsahovat základní prvky HTML, jako jsou vstupy, tlačítka a další, které nelze dále rozebírat bez ztráty jejich funkčnosti.
Každý atom má své vlastní jedinečné vlastnosti, jako jsou rozměry obrázku nebo velikost písma primárního nadpisu. V kontextu knihovny vzorů atomy demonstrují vaše základní styly, což pomáhá udržovat váš návrhový systém.
Ale je důležité si uvědomit, že atomy ožívají pouze s aplikací.
Molekuly jsou jednoduché skupiny prvků uživatelského rozhraní fungující společně jako jednotka. Například štítek formuláře, vyhledávací vstup a tlačítko mohou spojit a vytvořit molekulu vyhledávacího formuláře a najednou mají tyto atomy svůj účel. Hurá!
Atom značky nyní definuje vstupní atom. Kliknutím na tlačítko atom odešle formulář a výsledkem je jednoduchá, přenosná a opakovaně použitelná komponenta, kterou lze umístit kamkoli, kde je potřeba vyhledávací komponenta.
Zatížení jednoho vzoru příliš velkou složitostí činí software nepraktickým. Jak to můžeš změnit? Snadné vytvořením jednoduchých molekul uživatelského rozhraní, které podpoří opětovné použití, usnadní testování a podpoří konzistenci prostřednictvím rozhraní.
Organismy jsou relativně složité komponenty uživatelského rozhraní složené z:
a) skupiny molekul a/nebo
b) atomy a/nebo
c) jiné organismy.
Tyto organismy tvoří odlišné části rozhraní.
Vraťme se k naší molekule vyhledávacího formuláře a vložme ji do kontextu organismu hlavičky s dalšími prvky, jako je obrázek loga a navigace. Záhlaví nyní tvoří samostatnou sekci rozhraní.
Konečně můžeme říci, že organismy demonstrují menší a jednodušší složky v akci a slouží jako odlišné vzory, které lze znovu použít.
Šablona je něco jako drátěný model. Úkolem šablony je vytvářet vztahy mezi organismy a dalšími složkami prostřednictvím pozic, umístění a vzorů stránek, ale bez jakýchkoli stylů nebo dat.
Když taková šablona převezme implementaci obsahu, stane se instancí kompozice, kterou nazýváme stránka.
Takže teď, když lépe rozumíte Atomic designu, pojďme se podívat, jak jej můžeme použít k vytvoření našeho návrhového systému v projektu.
Návrhový systém nemusí být připraven, než začneme vytvářet aplikaci React – může mít základní komponenty a růst s tím, jak aplikace roste. Nicméně prvky, které musí být připraveny, jsou prvky, ze kterých se skládá stránka, kterou vytváříme.
Nebudu vás provádět celým procesem, pouze vám ukážu konečný výsledek – jak by měla vypadat struktura aplikace při použití atomic designu. :)
Ve výše uvedené struktuře jsou stránky mimo složku komponent, protože stránka není komponentou a měla by být blíže servisní vrstvě aplikace.
Abych to shrnul, proč byste měli používat Atomic design?
Pro mě je to nejefektivnější způsob, jak stavět věci z menších, soustředěných a nezávislých kusů. Dává vám možnost přejít mezi abstraktním a konkrétním.
S Atomic designem můžete vidět, jak vypadají rozhraní, která jsou rozdělena na jejich atomy, a jak, když se zkombinují, vytvoří formu konečného produktu.
Dále vám nabízí řadu hlavních výhod, jako jsou:
- Rychlejší prototypování
- Jednodušší aktualizace a revize
- Vylepšená konzistence
- Méně křížové kontroly při testování
- Odstraňte chyby
- Systém funguje jako jediný zdroj pravdy
To je obal! Doufám, že tento příspěvek pomůže každému, kdo strukturuje projekty od nuly, aby byl organizovanější a efektivnější.