Nekonzistence codebase mezi týmy může být velký problém, obzvlášť s přibývajícím počtem projektů. V Notum jsme se rozhodli tento problém řešit zavedením jednotných pravidel, které vynucujeme pomocí ESLint a tvorbou výchozí šablony ze které začínáme všechny naše React projekty.

ESLint

ESLint slouží ke statické analýze kódu a na základě předdefinovaných pravidel je schopný upozornit, popřípadě opravit chyby. Pravidla je možné si nakonfigurovat kompletně dle vlastních potřeb, v případě, že si nejste jisti jaké pravidla zvolit, dají se využít i tzv. Presety. Presety jsou již vytvořené sady pravidel, stačí je pomocí npm nainstalovat do projektu.

Instalace ESLintu je jednoduchá a dá se doinstalovat do jakéhokoliv již rozdělaného projektu.

npx eslint --init

Pomocí tohoto příkazu vyvoláme wizard, ve kterém si můžeme eslint nakonfigurovat a vybrat z předdefinovaných presetů.

ESLint běží v konzoli, takže je možné ho spustit i na CI/CD například při tvorbě Pull Requestu (Merge Requestu) a zakázat merge do develop nebo produkčních větví a díky tomu zachovat čistější codebase.

V Notum jsme se rozhodli pro tvorbu vlastního presetu, který splňuje naše požadavky, vycházíme ale již ze známého AirBnb presetu.

CRA Template

Create React App umožňuje tvorbu vlastní šablon. Na npmjs.com již existuje několik stovek existujících šablon, bohužel většina z nich vytváří pouze některé části projektu, jako například Redux. Kvůli tomu, že se šablony nedají. kombinovat jsme se opět rozhodli vytvořit si vlastní.

Instalace nového projektu se díky šabloně dá zvládnout jedním příkazem.

npx create-react-app my-app --template @notum-cz/cra-template-notum-material-ui

Tvorba CRA šablony je náročnější než tvorba ESLint pravidel a nedá se použít na již vytvořené projekty, ale pro nové projekty se vyplatí.

Co nešlo podle plánu?

Jako asi u všeho změny vždy nejsou úplně podle plánu a i v našem případě došlo k několika problémům.

Nasazení ESLint na staré projekty

Při nasazení na již běžicí projekty se může stát, že chyb je opravdu hodně. V našem případě se jednalo i o vyšší stovky. Oprava chyb tak může zabrat i desítky hodin, což se né vždy musí vyplatit. Pokud se ale i přes to na projekt rozhodnete ESLint nasadit, doporučuji ze začátku použít plugin, který ze všech errorů udělá pouze varování a tak nerozbije celý CI/CD proces.

Oprava CRA templatě přímo v nových projektech

Další velice důležitá věc je pravidelně aktualizovat CRA šablonu. Pro správnou aktualizaci je ale důležité mít správný feedback. Dost často se totiž stane, že někdo v projektu upraví nefunkční část šablony a již nedá nikomu dál vědět. Proto doporučujeme si vytvořit dokument, kde se všechny problémy budou psát a člověk zodpovědný za šablonu je bude aktualizovat. My se rozhodli přejít na Github Issues, kde píšeme všechny chyby. Takže i vývojáři i já jako člověk zodpovědný za šablonu vidím co nefunguje a popřípadě můžu upozornit tým na jiném projektu a předat jim řešení k již vzniklému problému jinde.

Závěrem

Díky ESLint a CRA Template se nám v Notum podařilo ušetřit spoustu času, který poté můžeme věnovat na tvorbu projektu samotného. Přechod vývojářů mezi projekty je výrazně jednodušší a díky striktním pravidlům se nám podařilo předejít mnoho bugům v aplikacích.