Ahoj,

jmenuji se Patrik a v Atlasu pracuji už třetím rokem. Začínal jsem jako junior/intermediate frontend vývojář a v současné době řeším chod celého frontend týmu. Jednotlivé technologie, které na frontendu využíváme volíme podle různých kritérií, ať už se jedná o jednoduchost, přehlednost, moderní přístup či obsáhlou komunitu…

O jaké technologie tedy jde a proč zrovna tyto?

TypeScript

Rozhodli jsme se vyvíjet frontend pro všechny naše aplikace v programovacím jazyku TypeScript, hlavním důvodem je největší komunita oproti jiným jazykům, ve kterých se dá psát rozumně frontend webových aplikací a taky dostačující typová bezpečnost.

React

Komponenty píšeme jako pure functions a využíváme nejmodernějších principů Reactu jako například React hooks, díky kterým sdílíme co nejvíce logiky napříč komponentami nebo React Context, abychom zabránili prop drill.

Komunikace se serverem

V Atlasu jsme rozdělení mezi menší full-stack týmy, backend naši kolegové píší v Javě, server poskytuje GraphQL rozhraní, se kterým komunikujeme prostřednictvím Apollo klienta s využitím Apollo hooks generované automaticky pomocí GraphQL Code Generator. GraphQL jsme se rozhodli používat již na začátku, kvůli typové bezpečnosti a self-documentation. Navíc jako bonus tento client driven přístup zjednodušuje práci na frontendu.

Kaskádové styly

Co se týče kaskádových stylů, využíváme principy CSS-in-JS, konkrétně implementaci StyledComponents, tento přístup nám umožňuje jednoduše psát styly na úrovni JavaScriptu. Hlavní výhodou je například dědičnost komponent nebo řešení vykreslování daných komponent na specifická zařízení.

Sdílení komponent

Na sdílení komponent napříč našimi projekty jsme vytvořili open-source knihovnu, kterou jsme pojmenovali React Atlantic, komponenty máme nakreslené našimi grafiky a nakódované pomocí StyledComponents. Tyto komponenty máme plně otestované.

Testování

Testujeme pomocí Jest, React Testing Library a Enzyme.

Formuláře

O formuláře se nám starají knihovny jako Formik nebo React Hook Form s využítím Yup schémat pro jednoduchou verifikaci jednotlivých formulářových polí.

Routování

Routing našich aplikací řešíme pomocí React Router nebo taky odlehčenou knihovnou Reach Router, vždy záleží na komplexnosti samotné aplikace.

Code conventions

Code style nám hlídají technologie jako ESLint a Prettier. K přehlednosti Git repozitáře na frontendu používáme conventional commits.

Jaké technologie používáte na frontendu Vy a proč? Dejte nám vědět! 🙂

Klíčová slova

TypeScript, React, GraphQL, Apollo, GraphQL Code Generator, Styled Components, Formik, React Hook Form, i18next, Jest, Enzyme, React Testing Library, Yup, ESLint, Prettier, Husky, Docker, React Atlantic, Moment, Reach Router, Git, Conventional commits, Jenkins, React Router, Reach Router