Náš frontend tech-stack pro vývoj aplikací v roce 2022

O našem frontendovém tech-stacku a o tom, jak píšeme aplikace a weby v Ackee, jsme psali už v roce 2020. Ale za dva “developer-roky” se toho může hodně změnit. Co za konkrétní změny jsme provedli a co můžeme čekat v příštích letech? Čtěte dál!

Next.js

Framework založený na Reactu v posledních letech nabral zběsilé tempo ve vlastním vývoji i rozšiřování velikosti komunity okolo něj. Stal se zásadním nástrojem pro psaní serverových aplikací a výrazně promlouvá i do formování a směřování Reactu.

Náš frontendový tým se s Next.js poprvé potkal ve verzi 2 a je třeba říci, že od té doby do současné verze 12 ušel ohromně dlouhou cestu a vyvinul se v nástroj splňující požadavky na moderní webové aplikace. I v našem týmu jsme jej zvolili jako řešení pro psaní isomorfních webových aplikací – tam, kde nám už single page aplikace založené na Create React App stacku nestačí.

Dokonce velice zvažujeme i opuštění námi oblíbeného nástroje pro statické weby a microsites Gatsby.js a nahrazení právě Next.js. Gatsby sice přidal ve verzi 4 možnost serverového renderování a smazal tak velkou konkurenční výhodu, kterou Next.js měl, ale v rámci efektivnějšího vývoje je pro nás používání pouze jednoho frameworku pro aplikace i weby logičtější i udržitelnější volba.

TypeScript

Další velkou změnou byl přechod na TypeScript. Ne, že by to byla novinka, s TypeScriptem jsme koketovali a snahu o zavedení měli už dřív. Při rozmanitém vývoji různých typů aplikací jako máme v Ackee, ale ne vždy jde vše tak rychle, je potřeba zajistit vzájemnou zastupitelnost a taky přijetí TypeScriptu na projekty – abychom ho podporovali a věděli, jak na něj. 

To se nám povedlo. Některé staré projekty jsme do Typescriptu dokonce zmigrovali a dnes už všechny nové začínají jen na naší TypeScriptové šabloně, kterou máme jak pro CRA projekty, tak ty v Next.js.

A proč jsme na TypeScript přešli? Statické typy pomohou s lepší orientací v kódu na projektu a omezení zásadních chyb v implementaci nejen nováčkům, ale i vývojářům, kteří znají projekt od shora dolů. Ti ocení chytřejší napovídání v IDE nebo taky silnější kontrakt s API za pomoci sdílených typů datového modelu.

State management

Pro webové aplikace je uchovávání stavu aplikace a jejich součástí nutnost. Ať už jde o aktuální stav UI nebo načtená data, u větších aplikací vždycky potřebujeme nějaký systém pro správu stavu. Několik let používáme Redux – je to sice skvělý nástroj, ale trochu moc “ukecaný”. S povděkem jsme tedy přijali a do našeho stacku zahrnuli Redux toolkit, což je sada utilit, výrazně zjednodušující vytváření jednotlivých částí stavu aplikace, přímo od autorů Reduxu. Kromě toho jsme ale zaznamenali také vlnu nového typu frameworků jako jsou Recoil.js, Jotai, apod., které mají za cíl zjednodušit správu stavu a jejich částečné zařazení do našeho stacku je tak na pořadu dne.

Stylování

V oblasti stylování se pořád držíme state driven řešení Fela.js. Pro větší aplikace i weby se nám totiž velmi osvědčil z hlediska komponentově orientovaného návrhu aplikace. Ale i tak vnímáme snahu frontendového světa o změnu CSS in JS řešení, jako jednu z brzd výkonu aplikací, pomocí no-runtime knihoven jako jsou Vanilla extract nebo Linaria. Jsou v našem technologickém radaru a je možné, že to bude jedna z dalších velkých změn v našem stacku. Ale ty nelze dělat ukvapeně.

Bundlery a buildery

V této kategorii se držíme osvědčeného Webpacku a Babel, ačkoliv do toho trochu vstoupil již zmiňovaný Typescript. Vzhledem k oficiálnímu představení podpory ES modulů v Node.js jsme i my začali experimentovat s výrazně rychlejšími unbundled řešeními jako je Vite. Pro zlepšení aspektu rychlosti jsme vyzkoušeli i non-Node.js builder ESbuild nebo zero-config builder Parcel. Sice na nich zatím nezakládáme každý nový projekt, ale pro určité specifické případy je využíváme. Třeba Parcel se svým presetem nám výborně posloužil pro tvorbu browser extensiony k správci hesel Passwd.

Lepší, ale stabilní

Může se zdát, že se nás stack neposouvá nějak výrazně, ale není to tak. Jen do něj zařazujeme nové nástroje postupně, až po tom, co je řádně vyzkoušíme a uznáme, že obstojí našim požadavkům na vývoj komplexních webových aplikací. Sice se stále držíme Reactu, to ale neznamená že nezkoušíme další trendující frameworky jako třeba Svelte. Jednak proto, abychom si stále ověřovali, že nám v technologiích neujíždí pomyslný vlak, a taky abychom byli připraveni na různé požadavky našich klientů.

Z vývoje frontendových nástrojů posledních let je patrná snaha napravit škody na rychlosti webových aplikací a jejich vývoje, napáchané během prudkého rozmachu v posledních dvou dekádách. Proto možná brzy budeme implementovat v našich aplikacích architekturu ostrovů, abychom zmenšili velikost javascriptových bundlů, a snažit se přenést co nejvíce funkčnosti aplikace z runtimu do bundletimu, jako to dělá třeba právě Svelte. Všemu hraje do karet i to, že jsme se konečně rozloučili s Internet explorer a spoustu polyfillů a fallbacků můžeme konečně zahodit…