Náš frontend tech stack: dôraz na výkon a škálovateľnosť

TypeScript

TypeScript sa stal neoddeliteľnou súčasťou nášho stacku a bez neho si už prácu nevieme ani predstaviť. Pomáha nám včas zachytiť chyby, udržiavať robustnejší code base a efektívnejšie škálovať naše projekty. Okrem toho zlepšuje komunikáciu medzi frontendovou a backendovou časťou našich aplikácií.

React

React je dnes tak populárnym a rozšíreným, že môžeme pokojne povedať, že sa stal de facto štandardom vo svete frontendového vývoja. To bol jeden z kľúčových dôvodov, prečo sme si ho vybrali ako základ nášho tech stacku. Jeho rozsiahly ekosystém ponúka množstvo knižníc, nástrojov, dokumentácie a tutoriálov, ktoré výrazne uľahčujú vývoj. Popularita Reactu navyše zaručuje, že je “future-proof” - je takmer isté, že bude vyvíjaný a udržiavaný aj v budúcnosti. 

Next.js

Dlho sme sa pri setupe našich frontendových aplikácií spoliehali na Create React App (CRA). Tento nástroj však postupom času prestal byť udržiavaný (za rok 2023 v ňom pribudli len 2 commity). V istom okamihu ho dokonca samotný React vo svojej dokumentácii prestal odporúčať. V priebehu posledných dvoch rokov sme teda pre všetky nové projekty prešli na Next.js. Next.js ponúka oproti CRA niekoľko výhod vrátane server side renderingu, static side generation a rôznych optimalizácií výkonu (mimo iného napr. veľmi užitočný Image komponent). Tento prechod nám umožnil vytvárať výkonnejšie a SEO-friendly aplikácie pri zachovaní skvelej developer experience. 

Node.js

Na väčšine projektov v Goodrequeste je backendový kód vytváraný špecializovaným tímom. No keďže Next.js zahŕňa aj backendové funkcionality (server side rendering), musíme základnú prácu s Node.js ovládať aj ako frontend developeri. 

Strapi

Na marketingové a iné “content heavy” webové stránky používame Strapi ako náš headless systém pro správu obsahu (CMS). Strapi poskytuje marketingovým tímom intuitívny a prehľadný admin panel, ktorý umožňuje efektívne vytvárať a spravovať obsah. Flexibilný a prispôsobiteľný backend umožňuje nám, vývojárom, implementovať vlastné funkcie špecifické pre daný projekt. Strapi poskytuje tak REST, ako aj GraphQL rozhranie na komunikáciu s frontendovou časťou aplikácie. 

REST / GraphQL

Vo väčšine projektov používame na komunikáciu medzi frontendom a backendom tradičné REST rozhrania. Pri projektoch využívajúcich Strapi CMS sme však postupom času prešli na GraphQL. V oboch prípadoch používame nástroje na generovanie Typescript typov, aby komunikácia medzi frontendom a backendom bola podľa možností čo najviac “type-safe” a tým pádom bezpečnejšia a udržateľnejšia. 

Ant Design

Ant Design (Antd) je už dlhú dobu naším hlavným UI frameworkom. Ponúka pomerne komplexnú sadu komponentov so širokým využitím. Používanie Antd však nie je bez problémov. Hlavným je prístupnosť (accesibility). Vytváranie prístupnych digitálnych produktov je v zozname našich priorít na vysokom mieste. Niektoré Antd komponenty však v tomto smere zaostávajú, čo pre nás znamená, že musíme robiť rôzne manuálne opravy a vylepšenia. Druhým problematickým bodom je štýlovanie Antd komponentov. Náš dizajn tím vytvára jedinečné a moderné dizajny, často na mieru pre daný projekt. To pre nás vývojárov znamená, že existújuce Antd komponenty musíme viac či menej upravovať, čo sa z dlhodobého hľadiska ukázalo náročné a ťažko udržiavateľné. 

V dôsledku toho sme experimentovali s inými UI knižnicami. Vyskúšali sme Radix UI, ktorá ponúka nenaštýlované komponenty. Hoci naša skúsenosť s Radixom bola vcelku pozitívna, štýlovanie všetkých komponentov na mieru sa úkazalo byť pomerne časovo náročné. V súčasnosti experimentujeme s knižnicou Mantine, ktorá sa zatiaľ javí vynikajúco. V porovnaní s Atnd síce ponúka menej, no stále pomerne široký počet komponentov. Prístupnosť je na oveľa lepšej úrovni a preťažovanie štýlov je oveľa jednoduchšie ako v Antd. Ak sa Mantine osvedčí, plánujeme ho začať používať na všetkých našich budúcich projektoch. 

Styled-Components

Pri prací s CSS sme vyskúšali viacero rôznych prístupov od SASS, cez Tailwind až po Styled-Components, pričom práve Styled-Components sa nám osvedčili najviac. Umožňujú nám totiž písať štýly veľmi podobné “vanilla” CSS, s rôznymi vylepšeniami naviac (napr. dynamické štýly na základe parametrov), pri súčasnej kolokácii a “scopingu” štýlov na daný komponent. Pri štýlovaní využívame tzv. “tokeny”, ktoré nám dodávajú naši dizajnéri priamo exportom z Figmy. 

TanStack Query and React Hook Form

Správa stavu a načítanie údajov sú kritickými aspektmi každej frontendovej aplikácie. TanStack Query (predtým React Query) výrazne zlepšil spôsob, akým spracovávame stav servera. Jeho možnosti ukladania do vyrovnávacej pamäte a synchronizácie zabezpečujú, že naše aplikácie sú efektívne a reagujú rýchlo. React Hook Form zjednodušuje správu formulárov a poskytuje výkonné a flexibilné riešenie na spracovanie stavu formulára a validáciu. 

Zod a OpenAPI-TypeScript

Validácia a typová bezpečnosť sú pre robustné aplikácie kľúčové. Zod nám umožňuje jednoducho definovať schémy a validovať údaje. OpenAPI-TypeScript výrazne zlepšil našu komunikáciu s API generovaním typov TypeScript zo špecifikácií OpenAPI. To zabezpečuje typovú bezpečnosť a konzistenciu medzi naším frontendom a backendom, čím sa znižuje pravdepodobnosť chýb počas behu. 

ESLint, Prettier a Stylelint

Kvalita a konzistentnosť kódu sú prvoradé. ESLint nám pomáha zachytiť potenciálne problémy a presadzovať štandardy kódovania, zatiaľ čo Prettier zabezpečuje konzistentné formátovanie nášho kódu. Stylelint udržiava naše CSS čisté a bezchybné, vďaka čomu sú naše štýly lepšie udržiavateľné. 

Google reCAPTCHA, Vault a GitHub CI/CD

Bezpečnosť a automatizácia sú rovnako súčasťou nášho vývojového procesu. Google reCAPTCHA pomáha chrániť naše aplikácie pred spamom a zneužitím. Trezor bezpečne spravuje naše tajomstvá a citlivé údaje. Prechod na GitHub umožnil nášmu tímu DevOps implementovať pokročilé CI/CD procesy, ktoré zefektívňujú naše vývojové pracovné postupy a zabezpečujú rýchlejšie a spoľahlivejšie nasadenie. 

Cypress End-to-End testovanie

End-to-end testovanie je dôležitým doplnkom na zabezpečenie toho, aby naše aplikácie fungovali tak, ako majú. Pri vybraných projektoch využívame v koordinácii s naším backendovým tímom výkonný testovací rámec Cypress, ktorý nám umožňuje písať komplexné testy a zachytávať problémy skôr, ako sa dostanú do produkcie. 

Docker, Kubernetes, Sentry, AWS a S3

Naša infraštruktúra a monitorovací zásobník sú rovnako dôležité. Docker a Kubernetes uľahčujú kontajnerizáciu a orchestráciu, čo umožňuje škálovateľné a odolné nasadenie. Sentry nám pomáha monitorovať a odstraňovať chyby v reálnom čase. AWS a S3 poskytujú základ pre naše potreby hostingu a úložiska, čím zabezpečujú, že naše aplikácie sú rýchle a spoľahlivé. 

Figma

Hoci je Figma primárne nástroj pre dizajnérov, my ako frontendoví vývojári s ňou trávime značné množstvo času. Jej intuitívne používateľské rozhranie nám umožňuje efektívne prevádzať návrhy do kódu, čím zabezpečuje bezproblémovú spoluprácu medzi návrhom a vývojom. Vďaka tomu je Figma neoceniteľnou súčasťou nášho pracovného postupu.

Záver

Náš frontendový tech stack prešiel od prvých dní Goodrequestu dlhú cestu. Prijatie Next.js a integrácia rôznych moderných, ale osvedčených technológií výrazne zlepšili náš vývojový proces. Napriek tomu, že sa naďalej vyvíjame, neustále hľadáme nové technológie, ktoré môžu ešte viac zlepšiť našu efektivitu a skúsenosti vývojárov a umožniť nám vytvárať robustnejšie, škálovateľné a výkonnejšie aplikácie.