Nejlepší postupy pro vývoj webových aplikací z mých zkušeností v oboru
Pokud se jimi ještě neřídíte, zvažte, zda s tím hned nezačít
Před několika měsíci, jsem začal pracovat na ročním projektu vývoje webových aplikací a uvědomil jsem si, kolik vývojářů si není zcela vědomo nejlepších průmyslových postupů při vývoji front-endu webových aplikací. Dokonce ani já jsem si některých postupů nebyl vědom. Proto jsem se rozhodl napsat tento článek, abych se podělil o to, co vím a co jsem se dozvěděl o nejlepších postupech, které je třeba dodržovat při vývoji webové aplikace.
Tento článek se zaměří na nejlepší postupy při vývoji front-endu, protože kvalita kódu front-endu je podle mých zkušeností nejvíce rozhodujícím faktorem skvělé webové aplikace, ale většina vývojářů tyto postupy nedodržuje a vyvíjí své jednotlivé komponenty. Pokud vývojáři front-endu nebudou tyto postupy dodržovat, bude opravdu obtížné kód spravovat, nebude existovat konzistence napříč designem a negativní dopad to bude mít i na rychlost webové aplikace. Při dodržování těchto postupů bude kód přehlednější, bude se lépe spravovat a zvýší se produktivita všech vývojářů.
V tomto článku budu hovořit o osvědčených postupech, které je třeba dodržovat při strukturování architektury front-endu projektu, psaní kódu front-endu a přípravě na nasazení. Pojďme tedy začít.
Když začnete pracovat na projektu, je třeba nejprve správně strukturovat architekturu front-endového kódu. A toto jsou osvědčené postupy, které musí dodržovat každý vývojář front-endu projektu.
Strukturování kódu stylů
Ve složce stylů vytvořte samostatné složky pro konfigurace, základnu, rozvržení, komponenty a stránky v závislosti na vaší webové aplikaci. Pomocí samostatného souboru typografie definujte velikosti a barvy pro všechny textové značky HTML(například h1,h2,…) použité ve webové aplikaci. Barvy by měly být definovány v souboru proměnných a přiřaďte barvy proměnným s vhodnými názvy a použijte tyto proměnné, když je třeba použít barvy na celém webovém serveru. Zařaďte tyto soubory stylů dovnitř vytvořených složek podobně jako na obrázku níže.
Tyto soubory pak můžete importovat do hlavního souboru stylu. Pokud ve své webové aplikaci používáte soubor scss, pak by se soubor main.scss podobal níže uvedenému kódu.
Strukturování kódu JS
Strukturování jazyka JavaScript v podstatě znamená rozdělení souborů a oddělení vlastního jazyka JavaScript od toho, který pochází z jiných míst. Zásuvné moduly, dodavatel a skripty jsou hlavní tři složky, do kterých můžeme rozdělit soubory JS. Složka Plugins by zahrnovala užitečné části kódu, které používáme všude ve webové aplikaci, například zásuvné moduly jQuery, vendors by byl kód JavaScriptu třetích stran, jako jsou frameworky a knihovny, například knihovna slick, a složka scripts by obsahovala skripty, které píšeme pro logiku naší webové aplikace.
