dozent.net
Projekt anfragen
Info

JavaScript Advanced (Moderne Architektur & ES6+)

Dieses Seminar vertieft in drei Tagen deine 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, Sicherheit im Frontend, Memory Management, einem TypeScript-Einstieg sowie dem Einsatz moderner Build-Tools und Test-Frameworks.

Für wen ist dieses Seminar

Erfahrene Webentwickler, Frontend-Engineers und Full-Stack-Entwickler.

Das Angebot richtet sich an Unternehmen, Behörden und Selbstständige.

Was du mitbringen solltest

Solide JavaScript-Grundlagen (ES5/ES6), Verständnis des DOM und asynchroner Basis-Konzepte, etwa aus JavaScript Grundlagen.

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
  • Iterables und eigene Iteratoren (Symbol.iterator)
  • Generator-Funktionen (function*, yield)
  • Meta-Programmierung mit Proxy und Reflect

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 (Entwurfsmuster)

  • 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

TypeScript – Einstieg

  • Statische Typisierung vs. dynamisches JavaScript
  • Grundlegende Typen, Interfaces und Type Aliases
  • Einbindung in bestehende Tooling-Pipelines und erste Schritte einer Migration von JavaScript nach TypeScript

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

Sicherheit im Frontend

  • Cross-Site-Scripting (XSS) verstehen und vermeiden
  • Sichere DOM-APIs bevorzugen (textContent statt innerHTML, Sanitizing von Nutzereingaben)
  • Content Security Policy (CSP) als browserseitige Absicherung gegen eingeschleusten Code

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

Was du danach kannst

  • Fortgeschrittene JavaScript-Konzepte wie Closures, Prototypenketten und Design Patterns anwenden
  • Komplexe asynchrone Abläufe mit Promises, async/await und Web APIs steuern
  • Mit Iteratoren, Generatoren, Proxy und Reflect arbeiten
  • Frontend-Anwendungen gegen XSS absichern und CSP einsetzen
  • Moderne Tooling-Pipelines (Bundler, Transpiling, Tree Shaking) konfigurieren
  • Erste Schritte mit TypeScript gehen und Unit-Tests mit Jest/Vitest schreiben

Verwandte Seminare

Dein Dozent

Frank Glück schult seit mehr als 30 Jahren und programmiert seit fast 40 Jahren. Seit 1999 ist er auch als Dozent für die GFU tätig. Er zeigt erfahrenen Entwicklern, wie hochskalierbare Frontend- und Fullstack-Architekturen sauber aufgesetzt werden.

Häufige Fragen (FAQ)

Was unterscheidet den Kurs JavaScript Advanced von einem Einsteigerkurs?

Der Fortgeschrittenenkurs fokussiert auf Softwarearchitektur, Closures, Prototyping-Ketten, funktionale Entwurfsmuster, moderne ES6+-Features, Sicherheit im Frontend, TypeScript-Grundlagen, State Management und automatisierte Unit-Tests mit Jest oder Vitest.

Wann sollte man TypeScript statt reinem JavaScript einsetzen?

TypeScript empfiehlt sich für wachsende Teams und geschäftskritische Codebasen. Durch statische Typisierung, Interfaces und Generics werden Typfehler bereits zur Compilezeit aufgedeckt, was Refactorings massiv absichert.

Werden Build-Tools wie Vite und Webpack behandelt?

Ja, im Kurs lernst du moderne Tooling-Pipelines kennen, inklusive Modulbündelung (ESM), Tree-Shaking, Transpilation und Optimierung von Assets für minimale Ladezeiten in Produktion.

Individuell anfragen

Individuell anfragen