Vanilla JS Briefing: Vor dem Vibe Coding lesen

Vanilla JS bedeutet: reines JavaScript ohne Frameworks, ohne Libraries, ohne Build-Tools. Kein React, kein Vue, kein npm install. Nur eine HTML-Datei, ein Style-Tag und ein Script-Tag. Das klingt primitiv, ist aber für statische Websites, Landing Pages und Blogs der performanteste Ansatz den es gibt.

Frequently Asked Prompts Starter

Erstelle eine komplette Landing Page in einer einzigen HTML-Datei. Vanilla HTML5, CSS3 Custom Properties, ES2024 JavaScript. Kein Framework, kein npm, kein Build-Tool. Mobile-first, Lighthouse-optimiert.

Erklärung

Erkläre mir den Unterschied zwischen Vanilla JS und React/Next.js so dass jemand ohne Programmiererfahrung es versteht. Nutze eine Analogie.

Was Vanilla JS ist, und was nicht

JavaScript ist die Programmiersprache, die jeder Browser nativ versteht. Vanilla JS ist JavaScript ohne Zusätze. Kein React (eine Library, die JavaScript erweitert), kein Next.js (ein Framework, das auf React aufbaut), kein Webpack (ein Tool, das Code bündelt). Die Datei, die du schreibst, ist die Datei, die der Browser ausführt.

Die Analogie: React ist ein Fertighaus-Bausatz mit vorgefertigten Wänden. Vanilla JS ist Ziegel, Mörtel und ein Bauplan. Für ein Gartenhaus (Landing Page) ist der Bausatz Overkill. Für ein Mehrfamilienhaus (SaaS-App) ist er sinnvoll.

Was der Browser dir kostenlos gibt

Moderne Browser (Chrome, Firefox, Safari, Edge) bringen 2026 fast alles mit was früher Libraries brauchte. Diese Browser-APIs sind kostenlos, schnell und brauchen keinen Import:

1. DOM-Manipulation, querySelector, createElement, classList: Elemente finden, erstellen, stylen. Ersetzt jQuery komplett.
2. Fetch API, HTTP-Requests an Server schicken. Ersetzt axios und jQuery.ajax.
3. IntersectionObserver, Erkennen ob Elemente sichtbar sind. Ersetzt Scroll-Event-Listener und Libraries wie ScrollReveal.
4. CSS Custom Properties, Variablen direkt in CSS: var(--accent-color). Ersetzt SASS-Variablen für die meisten Fälle.
5. ES Modules, Code aufteilen mit import/export, direkt im Browser. Ersetzt Webpack und Bundler für kleine Projekte.
6. Web Animations API, Animationen per JavaScript steuern, performant wie CSS-Animationen. Ersetzt GSAP für einfache Fälle.
7. Dialog-Element, Native Modals ohne JavaScript: <dialog>. Ersetzt Bootstrap-Modals komplett.

Der Workflow ohne npm

Kein Terminal nötig. Kein node_modules. Kein package.json. So sieht der Vanilla-Workflow aus:

1. Datei erstellen, Eine index.html mit eingebettetem CSS und JS. Oder drei Dateien: index.html, style.css, script.js.

2. Lokal öffnen, Doppelklick auf index.html. Der Browser öffnet sie. Fertig. Kein Server, kein localhost:3000.

3. Iterieren, Ändern, speichern, Browser refreshen. Oder: Live Server Extension in VS Code für Auto-Reload.

4. Deployen, git push zu GitHub, Vercel deployt automatisch in unter 60 Sekunden. Framework-Preset auf "Other" setzen.

Für externe Libraries die du trotzdem brauchst (Three.js, GSAP): CDN-Link im HTML. Kein npm install. Eine Zeile: <script src="https://cdn.jsdelivr.net/...">. Fertig. Details im Three.js-Artikel.

Zum Thema: Web Dev for Vibe Coders, Der komplette Guide 2026

Quellen

• developer.mozilla.org, Web APIs Reference

• caniuse.com, Browser Compatibility Tables