Szkolenie Architektura frontendu

Mały projekt da się utrzymać w każdej strukturze. Problem zaczyna się, gdy nad jednym frontendem pracuje kilka zespołów: zmiana w jednym miejscu psuje drugie, build trwa coraz dłużej, a nikt nie wie, kto odpowiada za wspólny komponent.

Na szkoleniu rozłożysz architekturę dużej aplikacji frontendowej na decyzje, które da się uzasadnić: gdzie renderować, jak dzielić kod, kiedy monorepo, kiedy mikrofrontendy, a kiedy żadne z nich. Pracujesz na przykładach z prawdziwych projektów. Przed szkoleniem wysyłasz krótki opis architektury swojego projektu (bez kodu objętego NDA), a trzeci dzień kończysz planem zmian dla swojej aplikacji.

Program

3 dni

• Po co architektura?
  • Objawy: długi build, konflikty, efekt domina po zmianach
  • Architektura a struktura zespołów (prawo Conwaya)
  • Decyzje zapisane w ADR (Architecture Decision Records)
• Gdzie renderować
  • CSR, SSR, SSG i streaming: koszty i zyski każdego podejścia
  • React Server Components (i odpowiedniki w innych frameworkach) oraz granica między serwerem a klientem
  • Architektura wysp (Astro) i częściowa hydratacja
  • BFF (Backend for Frontend) jako warstwa dla interfejsu
  • Ćwiczenie: mapa renderowania dla przykładowej aplikacji
• Podział kodu
  • Podział według funkcji zamiast typów plików
  • Warstwy: interfejs, logika, dostęp do danych
  • Publiczne API modułu i reguły importów
  • Pilnowanie granic w linterze: @nx/enforce-module-boundaries, eslint-plugin-boundaries
  • Graf zależności i cykle w dependency-cruiser
  • Ćwiczenie: reguły granic i wykrycie cyklu w przykładowym repo
• Monorepo
  • Kiedy monorepo, a kiedy osobne repozytoria
  • Nx i Turborepo: zadania, cache, zależności między paczkami
  • Workspaces w pnpm i npm
  • Wspólne biblioteki: komponenty, konfiguracja, typy
  • Ćwiczenie: ocena konfiguracji monorepo na gotowym przykładzie
• Mikrofrontendy
  • Kiedy mają sens, a kiedy tylko komplikują
  • Integracja w czasie budowania i w czasie działania
  • Module Federation 2.0 przez @module-federation/enhanced (webpack i Rspack; Rspack ma wbudowaną wersję 1.5), w Vite przez @module-federation/vite
  • Alternatywy: import maps i Web Components
  • Wspólny routing, stan i design system
• Stan i dane
  • Stan serwera a stan interfejsu
  • Gdzie trzymać stan w dużej aplikacji
  • Kontrakty API i typy generowane ze schematu jako decyzja zespołów
• Design system
  • Biblioteka komponentów i jej wersjonowanie
  • Tokeny projektowe w standardzie DTCG (pierwsza stabilna wersja 2025.10)
  • Kto utrzymuje design system: zespół platformowy czy wspólnota
• Jakość i ewolucja architektury
  • Podział odpowiedzialności za testy między zespoły
  • Budżety wydajności jako kryterium architektury
  • Refaktoryzacja etapami: wzorzec strangler fig i feature flagi
  • Warsztat: plan zmian dla Twojego projektu

Szczegóły techniczne testów, wydajności i pracy ze starym kodem znajdziesz na szkoleniach Strategia testowania, Wydajność aplikacji i Legacy Code.

Dla kogo?

• Dla tech leadów i architektów odpowiedzialnych za frontend.
• Dla zespołów, w których nad jedną aplikacją pracuje kilka grup.
• Dla programistów, którzy planują przebudowę dużego projektu.

Co musisz umieć?

• Pracować z nowoczesnym frameworkiem frontendowym w dużym projekcie.
• Pisać w TypeScript i konfigurować narzędzia do budowania aplikacji.

Czego się nauczysz?

• Wybierzesz sposób renderowania (CSR, SSR, SSG, Server Components, wyspy) dla każdej części aplikacji.
• Podzielisz aplikację na moduły z jasnymi granicami i publicznym API.
• Ustawisz automatyczne pilnowanie granic modułów w linterze.
• Ocenisz, czy Twój projekt potrzebuje monorepo lub mikrofrontendów.
• Przejrzysz konfigurację monorepo z cache zadań i wskażesz, co poprawić.
• Zdecydujesz, gdzie trzymać stan serwera i stan interfejsu w aplikacji kilku zespołów.
• Zaplanujesz design system oparty na tokenach projektowych.
• Zapiszesz decyzje architektoniczne tak, żeby zespół je rozumiał.
• Przygotujesz plan przebudowy istniejącej aplikacji małymi krokami.

Trener

Piotr Kowalski

W branży IT od 2008 roku. Od 2014 jest mentorem dla wielu developerów. Jako trener spędził na sali szkoleniowej kilka tysięcy godzin, a na LinkedIn ma 52 rekomendacje. Każde jego szkolenie to dawka solidnej wiedzy oraz humoru.

Więcej na stronie "O mnie"