Szkolenie JavaScript zaawansowane techniki ES6+
Poziom
ŚredniozaawansowanyCzas
16h / 2 dniTermin
IndywidualnieCena
IndywidualnieSzkolenie z JavaScript zaawansowane techniki ES6+
Szkolenie dla osób, które znają podstawy JavaScriptu i chcą uporządkować współczesne mechanizmy języka oraz narzędzia wykorzystywane w projektach front-endowych. Program obejmuje składnię ES6+, moduły, asynchroniczność, kolekcje, Web Components, wybrane techniki metaprogramowania, CSS, transpilację, TypeScript, konsolę przeglądarki oraz podstawy testowania. Uczestnicy rozwijają praktyczny projekt, konfigurują środowisko pracy i uczą się świadomie dobierać mechanizmy JavaScriptu do konkretnych problemów.
Dla kogo jest to szkolenie?
Front-endowcy znający podstawy HTML, CSS i JavaScriptu, którzy chcą wejść głębiej w mechanizmy ES6+-
Programiści korzystający z JavaScriptu okazjonalnie, którzy chcą uporządkować aktualny standard języka i narzędzia front-endowe
-
Osoby pracujące z frameworkami JS, które chcą lepiej zrozumieć moduły, asynchroniczność, Web Components, TypeScript i testowanie
Czego się nauczysz na szkoleniu?
- Skonfigurujesz środowisko front-endowe z Node.js, npm, ESLint, Prettier i webpackiem
- Zastosujesz mechanizmy ES6+, w tym moduły, destrukturyzację, klasy, operatory null-safety, kolekcje i asynchroniczność
- Przygotujesz komponenty oparte o Web Components, szablony HTML, Shadow DOM i atrybuty
- Wykorzystasz Babel, TypeScript i konsolę przeglądarki do pracy z kodem, diagnostyki i eksperymentów
- Rozwiniesz projekt „portfolio programisty” oraz dodasz podstawowe testy jednostkowe i snapshotowe
Program szkolenia
Dzień 1
Moduł 1: Narzędzia i konfiguracja
- Środowisko uruchomieniowe, menedżer pakietów i skrypty projektowe – Node, npm
- Analiza statyczna kodu, reguły jakości i spójność zespołowa – ESLint
- Formatowanie kodu, automatyzacja stylu i integracja z edytorem – Prettier
- Bundler aplikacji, konfiguracja zasobów i proces budowania – Webpack
Moduł 2: Moduły
- Moduły w środowisku Node i organizacja kodu po stronie narzędziowej
- Moduły ECMAScript – ES6, import, export i struktura zależności
- Dynamiczny import modułów – Dynamic import, lazy loading i podział kodu
Moduł 3: Lepsza składnia
- Deklaracje zmiennych, zakresy blokowe i różnice między var, let, const
- Destrukturyzacja, domyślne wartości i czytelność parametrów funkcji
- Operator spread, kopiowanie struktur danych i niemutowalne aktualizacje
- Klasy, konstruktory, dziedziczenie i prototypowy model obiektowy
- Operatory null-safety: ??, ?., ??= oraz bezpieczny dostęp do danych
Moduł 4: API i asynchroniczność
- Komunikacja HTTP – fetch, odpowiedzi serwera i podstawowa obsługa błędów
- Obietnice, łańcuchy operacji i kontrola przepływu asynchronicznego
- Kolekcje i przetwarzanie danych: Map, Set, filter, map, for in, for of, forEach, flat, flatMap
- Składnia asynchroniczna – async/await, obsługa wyjątków i czytelność kodu
Moduł 5: Generatory
- Reaktywność pull-based i kontrolowane pobieranie kolejnych wartości
- Iteratory, obserwatory, współprogramy i scenariusze przetwarzania sekwencji
Moduł 6: Metaprogramowanie
- Proxy i kontrola dostępu do obiektów, walidacji oraz operacji na właściwościach
- Symbol i unikalne identyfikatory właściwości w strukturach obiektowych
- BigInt i bezpieczna praca z dużymi liczbami całkowitymi
- WeakRef, FinalizationRegistry i ograniczenia zarządzania pamięcią
Dzień 2
Moduł 7: Web Components
- Rejestr komponentów – customElements i definicje własnych elementów HTML
- Szablony HTML, template i separacja struktury od logiki komponentu
- Shadow DOM, izolacja struktury komponentu i enkapsulacja stylów
- Web Components a frameworki, interoperacyjność i ograniczenia podejścia
- Atrybuty, konfiguracja komponentów i przekazywanie danych wejściowych
Moduł 8: CSS
- Układy elastyczne i siatkowe – flex, grid oraz podstawowe wzorce layoutu
- Zmienne CSS, współdzielenie wartości i parametryzacja stylów
- Pseudoselektory, stany elementów i precyzyjne reguły stylowania
- Animacje CSS, przejścia i podstawowa kontrola ruchu w interfejsie
- Atomic CSS, klasy narzędziowe i kompromisy w organizacji stylów
Moduł 9: Transpilacja
- Babel, zgodność składni z przeglądarkami i konfiguracja procesu transpilacji
- TypeScript, statyczne typowanie kodu i integracja z projektem JavaScript
- Przykład – dekoratory, metadane i ograniczenia eksperymentalnej składni
Moduł 10: Konsola przeglądarki
- Logi, trace, table i diagnostyka danych w narzędziach deweloperskich
- Konsola jako środowisko eksperymentów z kodem i szybkiej weryfikacji hipotez
Moduł 11: Testowanie
- Testy jednostkowe – Jest, struktura testu i asercje dla logiki aplikacji
- Testy snapshotowe, kontrola zmian struktury i ograniczenia tej techniki
- Lokalny serwer deweloperski, szybka pętla informacji zwrotnej i weryfikacja projektu
