Szkolenie Narzędzia frontendowe

Współczesny frontend to nie tylko kod, ale też narzędzia wokół niego: menedżer pakietów, bundler, linter, formatter i przeglądarka z DevTools. Gdy rozumiesz, co każde z nich robi, przestajesz tracić czas na tajemnicze błędy i konfigurację kopiowaną z internetu.

Na szkoleniu porządkujesz istniejący projekt albo zaczynasz nowy. Każde narzędzie poznajesz w praktyce, także w wersji, którą spotkasz w starszym kodzie, a na koniec łączysz je w CI, które pilnuje jakości kodu.

Program

2 dni

• Menedżery pakietów
  • npm i pnpm: instalacja, skrypty, npx i pnpm dlx
  • Plik package.json: dependencies, devDependencies, engines
  • Semantyczne wersjonowanie i zakresy ^ oraz ~
  • Lockfile i powtarzalne instalacje (npm ci)
• Bezpieczeństwo zależności
  • npm audit i czytanie raportu
  • Ataki na łańcuch dostaw: skrypty instalacyjne i opóźnienie instalacji świeżo wydanych wersji: min-release-age od npm 11.10 i minimumReleaseAge w pnpm, domyślnie 1 dzień od pnpm 11
  • Aktualizacje zależności: npm outdated i Dependabot lub Renovate z grupowaniem aktualizacji i odczekaniem na nowe wersje
• Bundlery
  • Vite z Rolldownem: serwer deweloperski, build produkcyjny, pluginy
  • Webpack: jak czytać konfigurację w starszych projektach
  • Zmienne środowiskowe i tryby budowania
• Jakość kodu
  • ESLint: eslint.config.js i przeniesienie starego .eslintrc, którego ESLint 10 już nie czyta
  • Prettier i podział ról między linter a formatter
  • Biome i Oxlint: szybsze alternatywy i kiedy po nie sięgnąć
  • TypeScript: najważniejsze opcje tsconfig.json, tryb strict i sprawdzanie typów przez tsc --noEmit
• DevTools w przeglądarce
  • Elements: DOM, style i layout
  • Console: logowanie, filtry, console.table
  • Network: zapytania, nagłówki, throttling
  • Sources: breakpointy i debugger krok po kroku
  • Performance: nagranie i znalezienie wolnego fragmentu
  • Application: localStorage, cookies, cache i Service Worker
• Kontrola jakości przed commitem i w CI
  • husky i lint-staged: lint tylko zmienionych plików przed commitem
  • Pipeline w GitHub Actions: instalacja, lint, testy, build
  • Cache zależności i szybsze przebiegi

Pracę z panelem Performance rozwija szkolenie Wydajność aplikacji, a pipeline’y CI szkolenie CI/CD z GitHub Actions.

Dla kogo?

• Dla programistów frontendu, którzy używają tych narzędzi, ale nie wiedzą, jak działają.
• Dla zespołów, które chcą uporządkować konfigurację istniejącego projektu.
• Dla osób, które zakładają nowy projekt i chcą od razu dobrej konfiguracji.

Co musisz umieć?

• Programować w JavaScript i pracować przy projekcie frontendowym.
• Pracować w terminalu: uruchamiać polecenia i skrypty npm.
• Posługiwać się Gitem na poziomie podstawowym (commit, push) i mieć konto na GitHubie.

Czego się nauczysz?

• Zapanujesz nad zależnościami bez niespodzianek po instalacji na innej maszynie.
• Ograniczysz ryzyko instalacji zainfekowanej paczki z rejestru npm.
• Skonfigurujesz projekt na Vite z ESLint, Prettier i TypeScript, starą konfigurację webpacka przeczytasz, a .eslintrc przeniesiesz do eslint.config.js.
• Znajdziesz błąd w kodzie przez debugger w DevTools szybciej niż dopisując kolejne console.log.
• Sprawdzisz w panelu Network, co i dlaczego pobiera Twoja aplikacja.
• Zatrzymasz błędny kod przed commitem i zbudujesz pipeline CI, który pilnuje jakości.

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"