AnkündigungWir stellen MongoDB 8.0 vor, das schnellste MongoDB aller Zeiten! Mehr erfahren >
AnkündigungVoyage AI und MongoDB unterstützen ab sofort gemeinsam genauere und vertrauenswürdigere KI-Anwendungen auf Atlas. Mehr erfahren >

Der MERN Stack erklärt

MERN ist eine von mehreren Varianten des MEAN Stacks (MongoDB, Express, Angular, Node), bei denen das traditionelle Framework mit dem Frontend Angular.js durch React.js ersetzt wird. Andere Varianten sind MEVN (MongoDB, Express, Vue, Node) und eigentlich jedes andere Frontend-JavaScript-Framework.

Sind Sie bereit für den nächsten Schritt? Richten Sie Ihr kostenloses MongoDB Atlas-Konto ein, indem Sie unten klicken, und probieren Sie unser MERN Stack Tutorial aus, um im Handumdrehen eine Full Stack MERN Anwendung zu erstellen.

Kostenlos testen!

Technologie-Stack

Bevor wir uns mit dem MERN-Stack befassen, wollen wir kurz klären, was ein Technologie-Stack ist. Ein Technologie-Stack ist eine Reihe von Technologien, die Sie zum Erstellen einer Webanwendung, einer mobilen Anwendung oder ähnlicher Anwendungen auswählen und verwenden. Ein guter Technologie-Stack muss ein nahtloses Benutzererlebnis bieten und gleichzeitig skalierbar und kostengünstig sein. Ein typischer Tech-Stack enthält ein Frontend, ein Backend und eine Datenbank und wird als vollständiger Technologie-Stack bezeichnet.

Normalerweise bleiben die grundlegenden Front-End- oder Benutzeroberflächentechnologien dieselben, d. h. HTML, CSS und JavaScript. Je nach Projektanforderungen können Sie Bibliotheken und Frameworks wie React oder Angular verwenden, die auf diesen UI-Technologien basieren.

Das Back-End besteht aus einem Server, auf dem Ihre Anwendungslogik gespeichert ist. Sie können die Anwendungslogik in einer oder mehreren Programmiersprachen wie JavaScript, Java, Python schreiben oder Frameworks wie Django, Spring, Express.js verwenden. Um die Programme auszuführen, benötigt Ihre Anwendung eine Laufzeitumgebung wie Node.js, JRE (Java Runtime Environment).

Die Datenbank ist der Speicherhub, in dem alle anwendungsbezogenen Daten gespeichert werden. Sie können wählen, ob Sie Ihre Daten in einer tabellarischen Struktur (mithilfe relationaler Datenbanksysteme) oder in einer nicht-relationalen Struktur (auch NoSQL genannt) speichern möchten, z. B. in einer Dokumentstruktur, einer Graphstruktur usw., und die Datenbank entsprechend auswählen. Einige Beispiele für Datenbanken sind MongoDB, Oracle und MySQL.

Was ist der MERN-Stack?

Ein Technologie-Stack kann benutzerdefiniert sein (Entwickler können die Technologien je nach ihren Projektanforderungen auswählen) oder vorgefertigt sein (wobei die Technologien vorab festgelegt wurden).

MERN ist ein vorgefertigter Technologie-Stack, der auf JavaScript-Technologien basiert. MERN steht für MongoDB , Express, React und Node, nach den vier Schlüsseltechnologien, aus denen der Stack besteht.

  • MongoDB – Dokumentendatenbank
  • Express(.js) — Node.js Webframework
  • React(.js) — ein clientseitiges JavaScript-Framework
  • Node(.js) — der führende JavaScript-Webserver (Laufzeitumgebung)

Express und Node bilden die mittlere (Anwendungs-)Ebene. Express.js ist ein serverseitiges Web-Framework und Node.js ist die beliebte und leistungsstarke JavaScript-Serverplattform. Unabhängig davon, für welche Variante Sie sich entscheiden, bietet ME(RVA)N den optimalen Ansatz für die durchgehende Arbeit mit JavaScript und JSON.

Wie funktioniert der MERN-Stack?

Mit der MERN-Architektur können Sie problemlos eine dreistufige Architektur (Frontend, Backend, Datenbank) vollständig mit JavaScript und JSON erstellen.

React.js-Frontend

Die oberste Ebene des MERN-Stacks ist React.js, das deklarative JavaScript-Framework zum Erstellen dynamischer clientseitiger Anwendungen in HTML. Mit React können Sie komplexe Schnittstellen mithilfe einfacher Komponenten erstellen, diese mit Daten auf Ihrem Back-End-Server verbinden und als HTML rendern.

Die Stärke von React liegt in der Handhabung zustandsbehafteter, datengesteuerter Schnittstellen mit minimalem Code und Aufwand. Außerdem verfügt es über alle Funktionen, die Sie von einem modernen Web-Framework erwarten: hervorragende Unterstützung für Formulare, Fehlerbehandlung, Ereignisse, Listen und mehr.

Serverebene „Express.js“ und „Node.js“

Die nächste Ebene ist das serverseitige Framework Express.js, das auf einem Node.js-Server ausgeführt wird. Express.js bezeichnet sich selbst als „schnelles, unvoreingenommenes, minimalistisches Web-Framework für Node.js“ und genau das ist es auch. Express.js verfügt über leistungsstarke Modelle für das URL-Routing (Abgleichen einer eingehenden URL mit einer Serverfunktion) und die Verarbeitung von HTTP-Anfragen und -Antworten.

Indem Sie XML-HTTP-Anfragen (XHRs), GETs oder POSTs von Ihrem React.js-Frontend aus stellen, können Sie eine Verbindung zu Express.js-Funktionen herstellen, die Ihre Anwendung antreiben. Diese Funktionen verwenden wiederum die Node.js-Treiber von MongoDB, um auf Daten in Ihrer MongoDB-Datenbank zuzugreifen und diese zu aktualisieren.

MongoDB-Datenbankkontingent

Wenn Ihre Anwendung Daten speichert (Benutzerprofile, Inhalte, Kommentare, Uploads, Ereignisse usw.), benötigen Sie eine Datenbank, mit der sich genauso einfach arbeiten lässt wie mit React, Express und Node.js.

Hier kommt MongoDB ins Spiel: In Ihrem React.js-Frontend erstellte JSON-Dokumente können an den Express.js-Server gesendet werden, wo sie verarbeitet und (vorausgesetzt, sie sind gültig) direkt in MongoDB zum späteren Abruf gespeichert werden können. Wenn Sie in der Cloud bauen, sollten Sie sich MongoDB Atlas ansehen. Wenn Sie Ihren eigenen MERN-Stack einrichten möchten, lesen Sie weiter!

Beispiel für eine einfache Anfrage/Antwort mit dem MERN-Stack

Eine typische HTTP-Anfrage (von einem Client) führt eine der vier Operationen – POST, GET, PUT, DELETE – aus, die den vier Datenbankoperationen – Erstellen, Lesen, Aktualisieren und Löschen (CRUD) – entsprechen. Um diese Anfragen zu bearbeiten, stellt Express.js Anforderungs- und Antwortobjekte bereit, die die erforderlichen Parameter speichern. Die HTTP-Anforderung speichert die vom Endbenutzer bereitgestellten Daten und die HTTP-Antwort speichert die aus der Datenbank abgerufenen Daten.

Mit dem MongoDB Node.js-Treiber können Sie Ihre MongoDB-Bereitstellungen in wenigen einfachen Schritten problemlos mit der Anwendung verbinden.

Eines der wichtigsten Merkmale des MERN-Stacks ist, dass alle Technologien Daten im gleichen Format speichern.

Die Front-End-Schicht React speichert Daten als JavaScript-Objekt, die Backend-Schicht (Anwendungsschicht) verwendet JavaScript-Code und die Datenschicht MongoDB speichert Daten im BSON-Format (Binary JavaScript ON). Express konvertiert Daten zwischen JS und JSON mithilfe der .json()- Methode.

Node.js ermöglicht Entwicklern, Backend-Anwendungslogik (serverseitig) in JavaScript zu schreiben. Obwohl Node.js zentrale http-Module bereitstellt, bietet das Schreiben desselben in Express eine sauberere Code-Erfahrung. Express bietet außerdem leistungsstarke Routing-Funktionen, um die erforderlichen Daten vom richtigen Endpunkt abzurufen – ein weiterer Ort, an dem Entwickler keinen expliziten Code für das Routing schreiben müssen.

Da der Code von Ende zu Ende in derselben Sprache (JavaScript) geschrieben ist, wird viel Zeit gespart, die sonst für Konvertierungen beim Übergang von Ebene zu Ebene aufgewendet würde.

Nehmen wir an, ein Kunde möchte seine Mobiltelefonnummer über ein Online-Portal aktualisieren. Das mit React.js erstellte Frontend würde ein Formular haben, in das der Benutzer die Mobiltelefonnummer eingeben kann. Um die vom Kunden eingegebene Handynummer in den Anfrageparameter einzutragen, verwendet React den „useState“-Hook.

Der Express.js-Code übernimmt die Mobiltelefonnummer aus der HTTP-Put-Anfrage, ordnet sie dem Datenmodellschema der Anwendung zu und wendet die entsprechende Methode (z. B. findByIdAndUpdate()) an, um den Aktualisierungsvorgang durchzuführen. Die Antwort wird dann über das HTTP-Antwortobjekt mit einer Erfolgs-/Fehlermeldung gesendet.

Ein vollständiges Beispiel ist auf der Tutorialseite zum MERN-Stack verfügbar.

MERN-Stack vs. Full-Stack-Entwicklung

Der MERN-Stack ist eine Art vollständiger Stack, bei dem die Technologieebenen vordefiniert sind. Ein Full-Stack-Entwickler hat eine steilere Lernkurve, da er sich mit mehreren Technologien auskennen muss, wohingegen ein MERN-Stack-Entwickler nur die entsprechenden Technologien kennen muss. Nachfolgend finden Sie einige wichtige Unterschiede, die Ihnen dabei helfen, je nach Ihren Projektanforderungen zwischen einem benutzerdefinierten Full-Stack und einem MERN-Stack zu wählen:

MERN Stack

  • Vordefinierter Stack mit Technologien, die erwiesenermaßen gut zusammenarbeiten
  • Der Fokus liegt auf JavaScript und JavaScript-basierten Technologien und Frameworks
  • Rationalisierter und einheitlicher Entwicklungsansatz
  • Fördert die Wiederverwendbarkeit des Codes durch einsprachige Komponenten, die übergreifend verwendet werden können

Full Stack

  • App- Entwickler entscheiden sich je nach den Projektanforderungen für unterschiedliche Technologien
  • Verlangt umfangreichere Fähigkeiten, die je nach Projekt erworben werden müssen
  • Mehr Flexibilität bei der Auswahl von Tools und Frameworks für die Entwicklung
  • Bietet Flexibilität und Vielseitigkeit, da Entwickler verschiedene Aspekte der Anwendung bearbeiten können

Warum sollten Sie sich für den MERN Stack entscheiden?

Wenn Ihr Projektzeitplan streng und die Anforderungen klar definiert sind, ist der MERN Stack die ideale Wahl. Er spart Zeit und Kosten und ermöglicht Entwicklern einen schnellen Einstieg, da sie nur eine einzige Technologie erlernen müssen. Auch die langfristige Wartung eines Projekts dürfte mit sich dem MERN Stack aufgrund des strukturierten, bewährten Ansatzes und der umfangreichen Dokumentation als einfacher herausstellen.

Der MERN Stack eignet sich gut für alle möglichen Anwendungsfälle oder Projektanforderungen, da alle Komponenten (MERN) leistungsstarke Funktionen und Features bieten. Der MERN Stack macht nur dann keinen Sinn, wenn mit einer anderen Technologien als JavaScript arbeiten möchten.

Warum sollten Sie sich für den MERN Stack entscheiden?

Sehen wir uns zuerst MongoDB, die Dokumentdatenbank ganz unten im MERN Stacks an. MongoDB wurde für das native Speichern von JSON-Daten entwickelt. (Technisch gesehen verwendet es eine binäre Version von JSON namens BSON.) Alles, von der Befehlszeilenschnittstelle bis zur Abfragesprache, basiert auf JSON und JavaScript.

MongoDB funktioniert hervorragend mit Node.js und macht das Speichern, Bearbeiten und Darstellen von JSON-Daten auf jeder Ebene der Anwendung sehr einfach. Bei cloudnativen Anwendungen macht MongoDB Atlas es Ihnen noch einfacher, indem es Ihnen mit nur wenigen Mausklicks einen automatisch skalierenden MongoDB-Cluster beim Cloud-Anbieter Ihrer Wahl an die Hand gibt.

Express.js (läuft auf Node.js) und React.js machen die JavaScript/JSON-Anwendung MERN zum Full Stack, also zum Vollpaket. Express.js ist ein serverseitiges Anwendungsframework, das HTTP- Anfragen und HTTP-Antworten verpackt und die Zuordnung von URLs zu serverseitigen Funktionen vereinfacht. React.js ist ein Front-End-JavaScript-Framework zum Erstellen interaktiver Benutzeroberflächen in HTML und zur Kommunikation mit einem Remote-Server.

Diese Kombination bedeutet, dass JSON-Daten auf natürliche Weise von vorne nach hinten laufen, was die Entwicklung erleichtert und die Fehlersuche vereinfacht. Außerdem müssen Sie nur eine Programmiersprache und die Dokumentstruktur von JSON kennen, und schon verstehen Sie das gesamte System !

MERN ist der Stack der Wahl für moderne Webentwickler, die schnell Ergebnisse sehen möchten, insbesondere für diejenigen mit Erfahrung mit React.js.

Die Anwendungsfälle von MERN

Wie bei jedem Web Stack können Sie in MERN alles erstellen, was Sie möchten. Es eignet sich jedoch ideal für Fälle, die JSON-lastig und Cloud-nativ sind und über dynamische Weboberflächen verfügen. Beispiele hierfür sind Workflow-Management, Nachrichten-Aggregation, To-Do-Apps und Kalender sowie interaktive Foren oder Produkte in den sozialen Medien – und was immer Sie sich sonst noch ausdenken können!

Fazit

Ein MERN Stack soll den gesamten Tech Stack vereinfachen, indem die Technologien vorab festgelegt werden. Entwickler und Designer müssen sich nicht mit der mühseligen Entscheidung herumschlagen, welche Technologien für welchen Geschäftsfall eingesetzt werden sollen. Außerdem müssen nicht für jede Technologie extra Mitarbeiter ausgebildet oder eingestellt werden, die sich damit auskennen, oder alles von einem vielleicht nicht optimalen Entwickler gemacht werden. Mit einem MERN Stack kann jeder einfache oder komplexe Anwendungen erstellen, indem er lediglich eine Handvoll Technologien kennt. Dies beschleunigt die Erstellung und spart Gesamtkosten, ohne Kompromisse bei Skalierbarkeit, Leistung und Sicherheit einzugehen.

FAQ

Kostenloser Start mit MongoDB Atlas

Führen Sie MongoDB mit MongoDB Atlas kostenlos in der Cloud aus. Sie benötigen dafür keine Kreditkarte.
Kostenlos testen!