V tomto článku se podíváme technologický stack pro vývoj moderních webových aplikací, který v našem frontend týmu používáme. Máme několik různých druhů stacků, jejichž použití se liší podle projektu, ale skoro všechny jsou odvozené od JAMstack architektury, která v posledních letech nabyla popularity.
JAMstack
JAMstack je zkratka pro Javascript, API a Markup. Je to způsob vyvíjení klientských webových aplikací v Javascriptu, ve kterém probíhá komunikace s backendovým serverem přes HTTP protokol, a aplikace je nasazená jako obyčejné statické soubory s doručením uživateli přes Content Delivery Network (CDN) síť.¹
Tento koncept vývoje web aplikací v Ackee používáme už přes 5 let a stále se snažíme jej postupně vylepšovat a modernizovat. Náš stack rozdělujeme do tří kategorií podle velikosti a druhu projektu. Každý z nich stručně popíšu.
Single-page webové aplikace
Největší část našeho portfolia jsou interaktivní webové enterprise aplikace. Vyvíjíme je jako Single Page Applications (SPA) v Reactu v kombinaci s Reduxem pro správu stavu. Jako základ pro každý projekt používáme náš upravený fork Create React App (CRA), který mimo jiné umožňuje do aplikace zaintegrovat prvky progresivních webových aplikací (PWA) jako kešování obsahu nebo push notifikace přímo do prohlížeče. Komunikace s backend serverem, obvykle REST API, probíhá Javascriptem přes HTTP protokol nebo gRPC. Pro tento účel jsme si napsali malou knihovnu nazvanou Antonio.
Největší výhodou tohoto přístupu je oddělení frontendu od backendu, které vede k nezávislému a lehce škálovatelnému agilnímu vývoji. Vyhovují nám principy a mentální modely Reactu, protože často vedou na elegantní řešení složitějších problémů. Navíc je jednoduše upravitelný podle našich potřeb.
Microsity a statické weby
Pro statické weby a microsity je náš hlavní nástroj Gatsby.js. Ten jsme si opravdu zamilovali, protože můžeme vyvíjet tyto weby úplně stejně jako ostatní aplikace v Reactu a kód je pak automaticky převeden do statického HTML markupu během buildu. Dokonce můžeme zůstat i u JS-in-CSS přístupu, který se nám osvěčil pro state-driven stylování a atomické CSS. Používáme na to knihovnu Fela. V neposlední řadě se v Gatsbym taky dají zapnout PWA funkcionality. S těmi jsme si vyhráli v našem webu prezentujícím open-source projekty, které v Ackee vyvíjíme.
Isomorfní webové aplikace
Obě předchozí kategorie odpovídají JAMstack architektuře. Když je ale na projektu potřeba lepší optimalizace pro vyhledáváče (SEO), isomorfní webové aplikace si vedou lépe. Jedná se o aplikace, které i na frontendu používají jednoduchý server (obvykle Node.js), aby se na klienta posílal celý HTML markup, ne pouze Javascript. Pro tyto projekty také používáme CRA skeleton, ale k němu přidáme Node.js server pro servírování HTML. Tato architektura je obvykle těžší na udržování a taky má své mouchy oproti předchozím dvěma.
Nasazení
Continues Integration a Delivery spolu s nasazováním z GIT repozitáře je pro nás standard. Webové aplikace i microsity nasazujeme jako statické soubory do Google Cloud Bucketu. Obsah z bucketu je uživateli doručován přes Cloudfare CDN, která minimalizuje latenci přenosu a zvyšuje rychlost doručení. Více o tom, jak nasazujeme a proč, se dočtete v našem článku.
Závěr
V tomto článku jsme si ukázali, jaké technologie a architekturu pro vývoj webových aplikací používáme a jak weby nasazujeme. V týmu neustále prozkoumáváme nové možnosti a pravidelně náš tech-stack aktualizujeme, abychom drželi krok s velmi rychle se vyvíjejícím odvětvím webového vývoje a dokázali poskytovat kvalitní služby.
Zní to dobře? Přidejte se. Právě nabíráme!
[1] Jamstack.org
