Frank Glück | IT-Consultant
Projekt anfragen

JavaScript Advanced (Moderne Architektur & ES6+)

Einleitung

Dieses Seminar vertieft die Kenntnisse in modernem JavaScript für die Entwicklung komplexer, skalierbarer und performanter Webanwendungen. Schwerpunkte liegen auf fortgeschrittenen Konzepten wie asynchroner Programmierung im Detail, prototypischer Vererbung, Design Patterns, Memory Management sowie dem Einsatz moderner Build-Tools und Test-Frameworks.

Zielgruppe / Voraussetzung

  • Zielgruppe: Erfahrene Webentwickler, Frontend-Engineers und Full-Stack-Entwickler.
  • Voraussetzung: Solide JavaScript-Grundlagen (ES5/ES6), Verständnis des DOM und asynchroner Basis-Konzepte.

Detaillierte Inhalte

Deep Dive: Sprachkonzepte und Scope

  • Die JavaScript Engine (V8) und der Execution Context
  • Lexical Scope, Hoisting und die Temporal Dead Zone (TDZ)
  • Fortgeschrittene Closures und deren praktische Anwendung (z. B. Currying, Memoization)
  • Destructuring, Spread- und Rest-Operatoren für komplexe Datenstrukturen
  • Performante Datenstrukturen: Map, Set, WeakMap und WeakSet

Erweiterte Objektorientierung und Prototypen

  • Die Prototypenkette (Prototype Chain) im Detail
  • Konstruktor-Funktionen vs. ES6-Klassen (class, extends, super)
  • Verständnis und Manipulation des this-Kontexts (bind, call, apply)
  • Kapselung: Private Klassen-Felder (Private Fields) und Getter/Setter
  • Objekt-Komposition vs. Vererbung (Mixins)

Asynchrone Architektur und Event Loop

  • Funktionsweise der Event Loop: Call Stack, Web APIs, Callback Queue
  • Microtasks vs. Macrotasks (Promises vs. setTimeout)
  • Komplexe Promise-Ketten und Fehlerbehandlung (Promise.all, Promise.race, Promise.allSettled)
  • Fortgeschrittene async/await Patterns (parallele vs. sequenzielle Ausführung)
  • Echtzeit-Kommunikation: WebSockets und Server-Sent Events (SSE)

Architektur und Design Patterns

  • Erzeugungsmuster: Factory, Singleton, Builder
  • Strukturmuster: Module Pattern (Revealing Module), Facade, Decorator
  • Verhaltensmuster: Observer / Pub-Sub (Event Emitter), Strategy, Command
  • State Management Grundlagen (Konzepte hinter Redux/Vuex/Zustand)

Modulare Entwicklung und Tooling

  • Modulsysteme im Vergleich: CommonJS vs. ES Modules (ESM)
  • Funktion und Konfiguration moderner Bundler (Vite, Webpack, Rollup)
  • Transpiling mit Babel und Polyfills
  • Code Splitting, Lazy Loading und Tree Shaking zur Bundle-Optimierung

Web APIs und Browser-Features

  • Speicherkonzepte: localStorage, sessionStorage und IndexedDB
  • Web Worker für Multithreading im Browser
  • Service Worker und Grundlagen von Progressive Web Apps (PWAs)
  • Moderne APIs: Intersection Observer, Mutation Observer, Fetch API Deep Dive (Streaming, AbortController)
  • Web Components: Custom Elements, Shadow DOM und HTML Templates

Performance und Memory Management

  • Garbage Collection Mechanismen (Mark-and-Sweep)
  • Identifikation und Vermeidung von Memory Leaks im Browser
  • DOM-Performance: Reflows (Layout) und Repaints minimieren, DocumentFragment
  • Event-Optimierung: Debouncing und Throttling
  • Analyse mit Chrome DevTools (Performance, Memory Allocation Timelines)

Code-Qualität, Testing und Automatisierung

  • Static Code Analysis mit ESLint und Prettier
  • Unit-Testing Grundlagen mit Jest oder Vitest
  • Test-Driven Development (TDD) Konzepte in JavaScript
  • Mocking von Modulen und asynchronen APIs
  • End-to-End (E2E) Testing Übersicht (z. B. Cypress, Playwright)

Dauer: 3 Tage