Angular, React, Vue und mehr: So ordnest du die Frontend-Begriffe endlich richtig ein

Wenn du aus der Java-Welt kommst, wirken Begriffe wie JavaScript, TypeScript, Angular, React, Vue, Node.js oder npm am Anfang schnell wie ein einziger großer Themenblock. Genau da entsteht oft die eigentliche Verwirrung. Alles klingt ähnlich, vieles taucht im gleichen Projekt auf, aber nicht alles ist dasselbe. Manche Begriffe beschreiben eine Sprache, andere ein Framework, wieder andere eine Laufzeit oder ein Werkzeug.

Gerade wenn du bisher vor allem mit Java, Maven, Git und einer IDE wie IntelliJ gearbeitet hast, hilft ein sauberer Vergleich. Dann wird schnell klar, dass du hier nicht einen Begriff lernen musst, sondern mehrere Ebenen auseinanderhalten solltest. Sobald du diese Ebenen verstanden hast, wird das ganze Thema deutlich greifbarer.

Was JavaScript und TypeScript eigentlich sind

JavaScript ist zuerst einmal eine Programmiersprache. Sie läuft heute vor allem im Browser und ist dort seit Jahren der Standard, wenn Webseiten nicht nur statisch angezeigt werden sollen. Immer dann, wenn eine Oberfläche auf Klicks reagiert, Daten nachlädt, Formulare prüft oder Inhalte dynamisch aktualisiert, ist sehr oft JavaScript im Spiel.

Wenn du aus Java kommst, fällt dir wahrscheinlich schnell auf, dass JavaScript an vielen Stellen freier wirkt. Typen sind flexibler, Funktionen sind sehr zentral und viele Dinge lassen sich mit weniger Boilerplate schreiben. Das kann angenehm sein, sorgt am Anfang aber auch dafür, dass Fehler später sichtbar werden als in Java.

Ein sehr kleines Beispiel sieht so aus:

function greet(name) {
  return `Hallo ${name}`;
}

TypeScript ist keine komplett andere Welt, sondern im Kern JavaScript mit zusätzlichem Typsystem. Du schreibst also weiterhin Code, der am Ende zu JavaScript wird. Der große Vorteil ist, dass du schon beim Schreiben mehr Struktur bekommst. Für Entwickler, die Java gewohnt sind, fühlt sich das oft deutlich vertrauter an.

Dasselbe Beispiel in TypeScript:

function greet(name: string): string {
  return `Hallo ${name}`;
}

Der praktische Unterschied liegt nicht darin, dass TypeScript mehr kann, sondern dass es dir früher Rückmeldung gibt. Deine IDE kann sauberer unterstützen, Refactorings funktionieren zuverlässiger und viele Fehler fallen auf, bevor der Code im Browser läuft.

Wichtig ist dabei diese Trennung: JavaScript ist die Sprache, die tatsächlich ausgeführt wird. TypeScript ist eine Erweiterung darüber, die vorher in JavaScript übersetzt wird. Du kannst dir das grob so vorstellen wie eine zusätzliche Kontrollschicht vor dem eigentlichen Lauf.

Was Angular, React und Vue davon unterscheidet

Angular, React und Vue sind keine Programmiersprachen. Das ist der Punkt, an dem viele Begriffe durcheinandergeraten. Diese Namen stehen für Werkzeuge, mit denen du Benutzeroberflächen baust.

Angular ist ein Frontend-Framework. Es bringt sehr viel Struktur mit und liefert viele Entscheidungen direkt mit. Routing, Formulare, Dependency Injection, Projektstruktur und Build-Prozess sind dort von Anfang an relativ klar vorgegeben. Wenn du aus der JavaEE-Welt kommst, wirkt Angular oft erstaunlich vertraut, weil es stärker auf Architektur, klare Verantwortlichkeiten und feste Muster setzt.

TypeScript ist im Angular-Umfeld praktisch Standard. Das heißt aber nicht, dass Angular und TypeScript dasselbe sind. Angular nutzt TypeScript sehr intensiv, bleibt aber ein Framework für Oberflächen.

Ein minimales Angular-Beispiel sieht so aus:

@Component({
  selector: 'app-user',
  template: `<p>{{ name }}</p>`
})
export class UserComponent {
  name = 'Marcy';
}

React geht einen anderen Weg. Offiziell ist es eher eine Bibliothek für UI-Komponenten als ein komplettes Framework. In der Praxis wird es oft zusammen mit weiteren Paketen zu einer vollständigen Lösung ausgebaut. React ist sehr verbreitet, flexibel und stark komponentenorientiert. Das gibt dir viel Freiheit, verlangt aber auch, dass du mehr Entscheidungen selbst triffst.

Vue liegt für viele irgendwo dazwischen. Es gilt als zugänglich, übersichtlich und angenehm für kleinere bis mittlere Frontends, kann aber auch größere Anwendungen tragen. Viele Entwickler mögen Vue, weil es relativ schnell verständlich ist und trotzdem modern arbeitet.

Der entscheidende Gedanke ist also: JavaScript und TypeScript beantworten die Frage, womit du programmierst. Angular, React und Vue beantworten die Frage, wie du eine moderne Oberfläche organisierst.

Was Node.js, npm und weitere Begriffe in diesem Umfeld machen

Spätestens an diesem Punkt tauchen meist die nächsten Namen auf. Node.js ist keine Sprache und auch kein Frontend-Framework. Node.js ist eine Laufzeitumgebung, mit der JavaScript außerhalb des Browsers ausgeführt werden kann. Dadurch kannst du JavaScript nicht nur im Frontend, sondern auch auf dem Server, in Skripten oder in Build-Prozessen verwenden.

Das ist der Grund, warum du selbst bei einem reinen Frontend-Projekt oft Node.js installiert hast. Nicht weil deine Browser-App auf Node.js läuft, sondern weil Werkzeuge im Hintergrund darauf basieren.

npm ist der Paketmanager, der in diesem Umfeld fast überall auftaucht. Darüber installierst du Bibliotheken, Frameworks und Build-Werkzeuge. Wenn du aus der Java-Welt kommst, kannst du npm grob mit Maven vergleichen, auch wenn die Details natürlich anders sind. Beide kümmern sich um Abhängigkeiten und den Umgang mit Projektpaketen.

Daneben begegnen dir oft noch Begriffe wie Vite, Webpack oder ESLint. Diese Werkzeuge lösen technische Aufgaben rund um Entwicklung und Build. Vite oder Webpack helfen beim Bündeln und Starten der Anwendung, ESLint prüft Code-Regeln, Prettier kümmert sich um einheitliche Formatierung. Das sind also keine Konkurrenten zu Angular oder TypeScript, sondern ergänzende Werkzeuge im Projekt.

Auch der Begriff ECMAScript taucht regelmäßig auf. Das ist im Grunde die offizielle Standardisierung hinter JavaScript. Wenn jemand von modernen ECMAScript-Features spricht, meint er meistens neue Sprachfunktionen, die in JavaScript angekommen sind.

Für deinen Kopf hilft oft diese einfache Einordnung: JavaScript und TypeScript sind Sprachen auf Entwicklerebene. Angular, React und Vue strukturieren die Oberfläche. Node.js führt JavaScript außerhalb des Browsers aus. npm verteilt Pakete und Abhängigkeiten. Vite, Webpack, ESLint und ähnliche Tools unterstützen den Entwicklungsprozess.

Fazit

Der Dschungel der Begriffe wird deutlich kleiner, sobald du die Ebenen sauber trennst. JavaScript ist die Grundlage im Browser. TypeScript ergänzt darauf ein Typsystem und macht größere Projekte meist robuster. Angular, React und Vue helfen dir beim Bau moderner Oberflächen, gehen dabei aber unterschiedlich stark in Richtung Struktur und Vorgaben. Node.js ist die Laufzeit außerhalb des Browsers, npm der Paketmanager und die übrigen Tools lösen eher organisatorische oder technische Aufgaben im Hintergrund.

Wenn du aus Java kommst, ist Angular oft leichter einzuordnen, weil vieles strukturierter wirkt. TypeScript fühlt sich in der Regel ebenfalls schnell vertraut an. Trotzdem lohnt es sich, die Begriffe nicht vorschnell in einen Topf zu werfen. Eine Sprache, ein Framework, eine Laufzeit und ein Build-Tool können im gleichen Projekt vorkommen und trotzdem völlig unterschiedliche Aufgaben haben.

Genau dieses Verständnis ist am Anfang wichtiger als jedes Detailwissen. Wenn du klar unterscheiden kannst, was was ist, wofür es eingesetzt wird und an welcher Stelle es im Projekt eine Rolle spielt, hast du bereits deutlich mehr Orientierung als viele andere am Einstieg in die Webentwicklung.