WHILE.CHAT·WORK · Tech & KI·6 MIN·Max Götte
work · Tech & KIJuni 20266 Min. LesezeitMax Götte

Vanilla JS Briefing: Vor dem Vibe Coding lesen

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.

// 01 / 03Was 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.

// 02 / 03Was 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.

// 03 / 03Der 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.

Häufige Fragen

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

Quellen

  • developer.mozilla.org, Web APIs Reference

  • caniuse.com, Browser Compatibility Tables

// micro-journal

Welches Projekt baust du als Erstes ohne Framework?

Ein Satz reicht. Das Journal bleibt lokal in deinem Browser — kein Konto, kein Server.

notierenMG

Max Götte

SEO Strategist · Founder · while.chat

Ich bin Max, SEO Strategist aus Bochum. Von Audit über Content-Strategie bis Local SEO. KMU im DACH-Raum, evidenzbasiert, ohne Hype-Versprechen.

projekt anfragen → WhatsApp mehr Artikel

FAQ

Ist Vanilla JS veraltet?

Nein. Es ist die Zukunft. Jedes Framework baut auf Vanilla JS auf. Frameworks kommen und gehen (jQuery, Angular 1, Backbone), JavaScript bleibt. Die Browser-APIs werden jedes Jahr maächtiger.

Ab wann brauche ich ein Framework?

Wenn deine App komplexen State hat (viele verschachtelte Daten die sich gegenseitig beeinflussen), User Authentication, Echtzeit-Updates oder ein geteiltes Component-System für ein Team. Der Next.js Konzepte-Check hilft bei der Entscheidung.

Kann Claude guten Vanilla JS Code generieren?

Ja, wenn du es explizit sagst. Ohne Constraint generiert Claude React/Next.js weil die Trainingsdaten dominiert sind. Der Prompt-Trick: "Vanilla HTML/CSS/JS, kein Framework, keine Dependencies, eine einzige Datei."

← Zurück zur Übersicht