Dávid Novák
EN
Projekt 05 z 05

Ako posunúť veľký legacy e-shop viacerých tímov k dizajnovému systému.

PRODUKT
E-shop veľkého európskeho predajcu
ROLA
Frontend Engineer; hlavný autor dvoch proof of conceptov
ROKY
2021–2022
STACK
React, TypeScript, Webpack, Storybook, MSW, Jest
TÍM
Zmiešaný: vlastní inžinieri klienta a externý dodávateľský tím
~140komponentov v kóde e-shopu.
~270príbehov v Storybooku s realistickými mockovanými dátami.
2proof of concepty, ktoré som viedol: knižnica vzorov a mikrofrontendová architektúra.
KONTEXT

Veľký európsky e-commerce predajca so serverovo renderovaným PHP e-shopom, na ktorom pracuje viacero tímov.

MOJA ROLA

Frontend Engineer a jeden z najaktívnejších prispievateľov do frontendu e-shopu v zmiešanom tíme. V roku 2022 som bol hlavným autorom dvoch proof of conceptov.

VÝZVA

Zmodernizovať frontend vo veľkom legacy kóde viacerých tímov, bez výmeny backendu pod ním.

Čo som urobilTri úpravy plánu
AModernizácia na mieste
PÔVODNÝ STAV

Prečiarknuté: Serverovo renderované PHP šablóny pre každú interaktívnu časť stránky.

MOJA ÚPRAVA

Vložené: React „ostrovy“: prihlásenie, vyhľadávanie, dostupnosť produktov a stránky účtu sa pripájajú do konkrétnych miest PHP stránok z balíkov, ktoré šablóny načítajú cez manifest.

VÝSLEDOK

Moderné UI, dodávané po častiach, bez výmeny backendu.

BKaždý vzor ako balík
PROBLÉM

Prečiarknuté: Rôzne tímy znovu implementujú tie isté UI vzory.

MÔJ NÁVRH

Vložené: Zdieľaná knižnica vzorov, kde je každý vzor zabalený a zdokumentovaný celok (komponent, testy a štýlová príručka) naviazaný na brand manuál.

VÝSLEDOK

Proof of concept, ktorý som viedol v roku 2022.

CĎalšia architektúra
OTÁZKA

Ako by sa e-shop dal rozdeliť medzi tímy.

ČO SOM VYVINUL

Vložené: Mikrofrontendový proof of concept so samostatnými aplikáciami pre domovskú stránku, navigáciu, vyhľadávanie a pokladňu.

VÝSLEDOK

Proof of concept, ktorý som viedol v roku 2022.

NÁSTROJE
  • Storybook + Mock Service Worker
  • Jest + Testing Library
  • BEM, zaznamenaný ako architektonické rozhodnutie

Napísal som veľkú časť príbehov a testov, aby sa komponenty vykresľovali s realistickými dátami a ostali pokryté testami.

VÝSLEDOK

Moderná vrstva komponentov, ktorá funguje s existujúcim PHP backendom, a jasná cesta k zdieľanému dizajnovému systému, na ktorom môžu stavať rôzne tímy.

„Dávid patrí medzi najsilnejších frontend inžinierov, s ktorými som pracoval, a jeho technické remeslo je bezchybné.“
— Engineering manažér
ĎALŠÍ PROJEKT01 Platforma pre automatizované investovanie