JavaScript

JavaScript ist die Sprache des Browsers und mittlerweile auch der Server-Welt. Was vor Jahren ein Wildwuchs aus jQuery-Plugins und globalen Variablen war, ist heute eine ausgereifte Programmiersprache mit modernen Sprachfeatures, klaren Mustern und ausgereiften Werkzeugen.

Im täglichen Web-Bereich kommt JavaScript an drei Stellen vor: als Vanilla JS in Websites und kleinen Tools, im Framework-Kontext (Angular, Astro, React), und im Backend als Node.js. Dieser Pillar konzentriert sich auf Vanilla JS und den browserseitigen Einsatz — für Frameworks gibt es eigene Bereiche.

Für viele Anforderungen reichen die nativen Browser-Möglichkeiten heute vollständig — ohne Framework-Overhead, ohne Build-Schritt, ohne Wartungslast eines fremden Ökosystems:

• Eine einfache Bildergalerie, ein Modal, ein Akkordeon. Moderne CSS- und JS-APIs lösen das in wenigen Zeilen.
• Formular-Validierung. HTML5 plus etwas JavaScript reicht für die meisten Anwendungsfälle.
• AJAX-Anfragen an APIs. fetch ist nativ verfügbar — keine zusätzliche Bibliothek nötig.
• Animationen. CSS-Animationen für die meisten Effekte, Web Animations API für komplexere Sequenzen.
• Kleinere Datenvisualisierungen. Canvas und SVG nativ, ohne Chart-Bibliotheken mit 200 kB JavaScript.
• Einfache Suchfunktionen, Filter, Sortierungen. DOM-Manipulation und Array-Methoden reichen meist.

Vanilla JS ist dort besonders überlegen, wo eine kleine Funktionalität nicht den Einbau eines kompletten Frameworks rechtfertigt.

Frameworks lohnen sich, sobald die Komplexität wächst:

Die Antwort ist nicht „immer Vanilla" oder „immer Framework", sondern: was passt zur Aufgabe? Wer ein Modal braucht, lädt kein React. Wer eine SaaS-Plattform baut, schreibt nicht alles in Vanilla.

Aktuelle JavaScript-Entwicklung zeichnet sich durch ein paar konkrete Eigenschaften aus:

• ES-Modul-System. Saubere Imports/Exports statt globaler Variablen.
• Async/Await. Asynchrone Logik lesbar wie synchroner Code.
• Native APIs statt jQuery. querySelector, fetch, IntersectionObserver, classList, dataset — alles nativ verfügbar.
• Performance-Bewusstsein. Lazy-Loading, requestIdleCallback, sinnvolle Event-Listener.
• Saubere Modul-Struktur. Eine Funktion, eine Datei — wartbar und nachvollziehbar.
• Kein globaler State-Wildwuchs. Daten klar gekapselt, Side-Effects minimiert.

• Interaktive Komponenten für Websites und Onlineshops
• Konfigurations-Tools mit Preisberechnung und Vorschau
• Echtzeit-Updates über AJAX, SSE oder WebSockets
• Datenvisualisierungen mit Canvas oder SVG
• Spezielle Effekte und Animationen für Marketing-Auftritte
• Browser-basierte Werkzeuge ohne Backend-Anbindung

1. L01

   Interaktive Elemente

   Widgets, dynamische Bereiche, Tabs, Modals, Tooltips — pragmatisch in Vanilla JS oder als kleines wiederverwendbares Modul.

2. L02

   AJAX und Echtzeit-Updates

   Asynchrone Kommunikation mit Backend-APIs ohne Seitenneuladen — sauber implementiert, mit Fehlerbehandlung und sinnvollen Lade-Zuständen.

3. L03

   Canvas und SVG-Visualisierungen

   Interaktive Grafiken, Diagramme, kleine Spiele oder Datenvisualisierungen — performant umgesetzt, ohne überdimensionierte Bibliotheken.

4. L04

   Animationen

   Dezente UI-Animationen oder ausdrucksstarke Übergänge — gezielt eingesetzt, mit Blick auf Performance und Barrierefreiheit.

5. L05

   Modernisierung bestehender Scripts

   Aufräumarbeit in gewachsenen JavaScript-Dateien — von ES5-Altbeständen zu modernem, lesbarem Code.