Ein praktischer Leitfaden zur Planung einer mittleren Stapelanwendung

Dieser Artikel ist aus Manning Press '"Mastering Mean: Verwenden von Mongo, Express, Angular und Knoten, zweite Ausgabe" ausgehalten. Die zweite Ausgabe wurde vollständig überarbeitet und aktualisiert, um Angular 2, Node 6 und die neueste Mainstream -JavaScript -Version ES2015 (ES6) abzudecken. Diese Ausgabe führt Sie durch das Lernen, wie Sie Webanwendungen mit dem aktualisierten Mittelwert entwickeln.

Schlüsselpunkte

• Wenn Sie eine mittlere Stapelanwendung planen, müssen Sie zunächst den gewünschten Bildschirm vorstellen, ohne tief in das auf jeder Seite eintauchen zu müssen. Skizzen in dieser Phase helfen dabei, die gesamte Anwendung zu visualisieren und den Bildschirm in Sammlungen und Prozesse zu organisieren.
• Teilen Sie den Bildschirm in einen logischen Satz. Beispielsweise können Bildschirme an allen Verarbeitungsorten miteinander kombiniert werden, während unabhängige Seiten wie "Über uns" in einer verschiedenen Sammlung kombiniert werden können.
• Betrachten Sie die Architektur der Anwendung und beginnen Sie mit der API. Das Aufbau von APIs, die mit Daten interagieren, ist die Grundlage der Architektur. Bestimmen Sie, ob HTML direkt über den Server bereitgestellt werden soll, oder wählen Sie eine einzelne Seitenanwendung (SPA) basierend auf den spezifischen Anforderungen der Anwendung.
• Architektur kann in einem Express -Projekt verkapselt werden, was das Verwalten und Bereitstellen erleichtert. Es ist jedoch entscheidend, Ihren Code ordnungsgemäß zu organisieren, um verschiedene Teile Ihrer Anwendung voneinander getrennt zu halten, damit es einfacher ist, ihn in Zukunft in separate Projekte aufzuteilen.

Praktische Anwendungsplanung: loc8r

Nehmen wir zur Erleichterung der Illustration an, dass wir eine Arbeitsanwendung namens Loc8R auf dem mittleren Stapel erstellen. LOC8R wird in der Nähe von Orten mit WLAN aufgelistet, an denen Menschen arbeiten können. Es wird auch eine Karte mit Einrichtungen, Öffnungszeiten, Bewertungen und Standorten für jeden Veranstaltungsort angezeigt.

Fortgeschrittene Mittelstapelantragsplanung

Der erste Schritt besteht darin, zu berücksichtigen, welche Bildschirme in der Anwendung benötigt werden. Wir konzentrieren uns auf separate Seitenansichten und Benutzerreisen. Wir können dies auf einem hohen Niveau tun, ohne auf die Details auf jeder Seite achten zu müssen. Es ist am besten, zu diesem Zeitpunkt auf Papier oder auf einem Whiteboard zu skizzieren, da es hilft, die gesamte Anwendung zu visualisieren. Es hilft auch dabei, Bildschirme in Sammlungen und Prozesse zu organisieren, als einen guten Bezugspunkt beim Aufbau. Da hinter der Seite oder der Anwendungslogik keine Daten angehängt sind, können Sie Teile hinzufügen und löschen, den angezeigten Inhalt und den angezeigten Ort ändern und sogar die Anzahl der erforderlichen Seiten ändern. Es ist sehr wahrscheinlich, dass wir es zum ersten Mal nicht richtig machen.

Bildschirmplanung

Lesen Sie moderne JavaScript Folgen Sie der sich ständig weiterentwickelnden JavaScript-Welt! Lesen Sie dieses Buch Lesen Sie dieses Buch

Betrachten wir loc8r. Unsere Ziele sind wie folgt:

loc8r wird in der Nähe von Orten mit WLAN aufgelistet, an denen Menschen arbeiten können. Es zeigt die Einrichtungen, Öffnungszeiten, Bewertungen und Standortkarten jedes Veranstaltungsortes. Besucher können Bewertungen und Kommentare einreichen.

Daraus können wir einige der Bildschirme lernen, die wir brauchen:

1. Bildschirmliste in der Nähe von Orten
2. Bildschirm mit Details eines einzelnen Ortes
3. Bildschirm zum Hinzufügen von Kommentaren zu Orten

Möglicherweise möchten wir den Besuchern auch sagen, wofür Loc8r ist und warum wir der Liste einen weiteren Bildschirm hinzufügen sollten:

1. Bildschirm für "Über uns" Informationen

Teilen Sie den Bildschirm in eine Sammlung

auf

Als nächstes möchten wir die Bildschirmliste erhalten und sie dort organisieren, wo sie logisch zusammengehören. Beispielsweise beziehen sich die ersten drei in der Liste mit der Position. Die About Page gehört nirgendwo hin, sondern kann in die verschiedene "andere" Sammlung platziert werden. Das Zeichnen einer Skizze ergibt sich ähnlich wie Abbildung 1.

Abbildung 1: Organisieren Sie den separaten Bildschirm der Anwendung in einer logischen Sammlung.

Eine solche kurze Skizze ist die erste Planungsphase, und wir müssen diese Phase abschließen, bevor wir über die Architektur nachdenken. Diese Phase bietet uns die Möglichkeit, die grundlegende Seite anzusehen und den Prozess zu berücksichtigen. Beispielsweise zeigt Abbildung 1 die grundlegende Benutzerreise in der Standortsammlung, von der Liste der Details und dann zu dem Formular, in dem Sie einen Kommentar hinzufügen.

Architekturdesign

loc8r sieht einfach aus, mit nur wenigen Bildschirmen. Wir müssen jedoch noch darüber nachdenken, wie die Architektur erstellt werden kann, da wir Daten aus der Datenbank in den Browser übertragen werden, sodass der Benutzer mit den Daten interagieren und die Daten an die Datenbank zurückgesendet werden können.

Beginnen Sie mit der API

Da die Anwendung die Datenbank verwendet und die Daten übergeben wird, werden wir die Architektur aus den Teilen erstellen, die wir sicherlich benötigen. Abbildung 2 zeigt den Startpunkt, eine REST -API, die mit Express und Node.js erstellt wurde, um die Interaktion mit MongoDB -Datenbanken zu ermöglichen.

Abbildung 2 Beginn mit der Standard -Mittelwert -REST -API, verwenden Sie MongoDB, Express und Node.js.

APIs aufbauen, die mit unseren Daten interagieren, ist die Grundlage für die Architektur. Die interessantere und schwierigere Frage ist: Wie bauen wir die Architektur unserer Anwendung auf?

Anwendungsarchitekturoptionen

Zu diesem Zeitpunkt müssen wir uns die spezifischen Anforderungen der Anwendung ansehen und wie die Teile des mittleren Stapels miteinander kombiniert werden, um die beste Lösung zu erstellen. Benötigen wir einige besondere Merkmale von MongoDB, Express, Angular oder Node.js, um Entscheidungen zu ändern? Wollen wir HTML direkt vom Server servieren oder ist Spa eine bessere Option?

Für LOC8R gibt es keine speziellen oder spezifischen Anforderungen, und ob es leicht von Suchmaschinen gekrabbt werden sollte, hängt vom Geschäftswachstumsplan ab. Wenn das Ziel darin besteht, den organischen Verkehr aus Suchmaschinen zu bringen, muss es krabbelbar sein. Wenn das Ziel darin besteht, die Anwendung als Anwendung zu fördern und auf diese Weise zu fördern, scheint die Sichtbarkeit von Suchmaschinen weniger wichtig zu sein.

wir können uns sofort drei mögliche Anwendungsarchitekturen vorstellen, wie in Abbildung 3 gezeigt:

1. node.js und expressanwendungen
2. node.js und exprimieren Anwendungen mit Winkelwechselwirkung
3. Winkelspa

Welches ist mit diesen drei Optionen für LOC8R am besten geeignet?

Abbildung 3 Drei Optionen zum Erstellen von LOC8R-Anwendungen, von serverseitigen Express- und Node.js-Anwendungen bis hin zu vollem Client-Angular-Spa.

Wählen Sie Anwendungsarchitektur

Es gibt keine spezifische Geschäftsanforderung, die uns dazu veranlasst, eine Architektur gegenüber einer anderen vorzuziehen. Durch den Aufbau aller drei Architekturen können wir untersuchen, wie jeder Ansatz funktioniert, und es uns ermöglichen, jede Technologie nacheinander zu betrachten, wodurch die Anwendungsebene für Schicht erstellt wird.

Wir werden das Schema in der in Abbildung 3 gezeigten Reihenfolge erstellen, beginnend mit dem Knoten.js und Expressanwendungen, dann weiterhin Winkel hinzufügen und es zum Angular Spa übertragen. Dies ist zwar nicht die Art und Weise, wie Sie normalerweise eine Website erstellen, aber Sie bieten Ihnen eine großartige Gelegenheit, alle Aspekte des Mittelstapels zu lernen.

In einem Express -Projekt

entbPAPTULE ALLES.

Das Architekturdiagramm, das wir uns angesehen haben, deutet darauf hin, dass wir separate Expressanwendungen für die API- und Anwendungslogik haben. Dies ist durchaus möglich und auch eine gute Wahl für große Projekte. Wenn wir viel Verkehr erwarten, möchten wir vielleicht sogar, dass unsere Hauptanwendung und unsere API auf verschiedenen Servern stehen. Der zusätzliche Vorteil davon ist, dass wir spezifischere Einstellungen für jeden Server und jede Anwendung festlegen können, die ihren jeweiligen Anforderungen am besten entsprechen.

Eine andere Möglichkeit besteht darin, es einfach und präzise zu halten und alles in ein einzelnes Expressprojekt zu stecken. Mit diesem Ansatz müssen wir uns nur Sorgen um das Hosting und die Bereitstellung einer Anwendung sowie über die Verwaltung einer Reihe von Quellcode machen. Dies ist, was wir mit LOC8R machen werden, was uns ein Expressprojekt mit einigen Sub-Apps gibt. Abbildung 4 zeigt diesen Ansatz.

Abbildung 4 Anwendungsarchitektur, die die API und die Anwendungslogik im selben Expressprojekt zusammenfasst.

organisieren Sie beim Kombinieren von Anwendungen den Code ordnungsgemäß, damit verschiedene Teile der Anwendung getrennt werden können. Zusätzlich zu unserer Code erleichtert es uns auch, ihn später in separaten Projekten aufzuteilen, wenn wir uns für die richtige Route entscheiden. Dies ist ein Schlüsselthema, das wir in diesem Buch weiterhin diskutieren werden.

Endprodukt

Wie Sie sehen, werden wir alle Schichten des Mittelstapels verwenden, um loc8r zu erstellen. Wir werden auch Twitter Bootstrap einbeziehen, um ein reaktionsschnelles Layout zu erstellen. Abbildung 5 zeigt Screenshots einiger Inhalte, die erstellt werden können.

Abbildung 5 LOC8R ist eine Probenanwendung. Es wird auf verschiedenen Geräten unterschiedlich angezeigt, die Liste der Orte und Details jedes Ortes angezeigt und ermöglicht es den Besuchern, sich anzumelden und Kommentare zu hinterlassen.

Schlussfolgerung

In diesem Artikel geht es um diesen Artikel. Wenn Sie diese Schritte in die Praxis umsetzen möchten, besuchen Sie die Website von Manning, auf der Sie das kostenlose erste Kapitel des Mastering -Mittelwerts herunterladen können: Verwenden von Mongo, Express, Angular und Knoten, zweite Ausgabe oder Kauf des Buches. Andernfalls posten Sie ihn in den Kommentaren unten, wenn Sie Fragen zu dem haben, was ich in diesem Artikel behandelt habe.

FAQs über Planung mittlerer Stapelanwendungen (FAQ)

Was ist der gemeine Stapel und warum ist er für die Anwendungsentwicklung wichtig?

Mean Stack ist eine Sammlung von JavaScript-basierten Technologien, die zur Entwicklung von Webanwendungen verwendet werden. Mittelwert ist das Akronym für MongoDB, ExpressJs, AngularJs und Node.js. MongoDB ist eine NoSQL -Datenbank, ExpressJS ist ein Webanwendungs ​​-Framework, AngularJS ist ein JavaScript -Framework und Node.js ist eine Serverplattform. Die Bedeutung des mittleren Stapels in der Anwendungsentwicklung liegt in seiner Effizienz und Flexibilität. Es ermöglicht Entwicklern, Code sowohl für Server als auch für den Client mit JavaScript zu schreiben, um eine nahtlose Integration und eine effiziente Datenverarbeitung zu ermöglichen.

Wie funktioniert die Architektur der Mittelstapelanwendung?

Die Architektur der mittleren Stapelanwendungen ist flexibel und effizient. MongoDB (a NoSQL -Datenbank) speichert Anwendungsdaten. ExpressJs, die auf node.js Server ausgeführt werden, übernimmt die serverseitige Funktionalität. AngularJS verwaltet die Client-Funktionalität (benutzerorientiert). Die gesamte Anwendung ist in JavaScript geschrieben, sodass Daten nahtlos von der Benutzerinteraktion zum Server und der Datenbank fließen können.

Was sind die Vorteile der Verwendung von Mean Stack für die Anwendungsentwicklung?

Mean Stack bietet viele Vorteile für die Anwendungsentwicklung. Dank node.js ermöglicht es Code -Wiederverwendung und hohe Geschwindigkeit. MongoDB bietet Flexibilität, um komplexe Daten zu speichern, während AngularJS eine saubere Möglichkeit bietet, interaktive Funktionen hinzuzufügen. ExpressJS vereinfacht den Prozess des Erstellens und Verwaltens von Serverrouting. Da alles in JavaScript geschrieben ist, vereinfacht und beschleunigt es den Entwicklungsprozess.

Wie verbessert MongoDB die Effizienz von mittleren Stapelanwendungen?

mongoDB ist eine NoSQL -Datenbank, die eine hohe Leistung, hohe Verfügbarkeit und einfache Skalierbarkeit bietet. Es basiert eher auf dem Konzept von Sammlungen und Dokumenten als auf einer herkömmlichen relationalen Datenbank mit Tabellen und Zeilen. Dies macht MongoDB besonders gut, um große Mengen an Daten und komplexe hierarchische Datenstrukturen zu bewältigen, was die Effizienz der mittleren Stapelanwendungen verbessert.

Welche Rolle spielt AngularJs in einer mittleren Stapelanwendung?

AngularJS ist ein leistungsstarkes JavaScript -Framework zum Aufbau von Anwendungen im mittleren Stapel. Es ermöglicht Entwicklern, das HTML -Vokabular zu erweitern, um ausdrucksfähigere, schnellere Entwicklungsumgebungen zu schaffen. AngularJS bietet auch Datenbindungsfunktionen für HTML und ermöglicht die automatische Synchronisation von Daten zwischen Modell- und Ansichtskomponenten.

expressJS Wie vereinfacht man serverseitige Vorgänge in mittleren Stapelanwendungen?

expressJS ist ein minimaler und flexibler Node.JS -Webanwendungs ​​-Framework, der sowohl für Web- als auch für mobile Anwendungen eine leistungsstarke Funktionen für Funktionen bietet. Es vereinfacht die serverseitigen Vorgänge, indem eine einfache Schnittstelle zum Erstellen von einseitigen, mehrseitigen und hybriden Webanwendungen erstellt wird. Es hilft auch, Routing, Anfragen und Ansichten zu verwalten und Middleware -Vorgänge auszuführen.

Wie verbessert Node.js die Leistung von mittleren Stapelanwendungen?

node.js ist eine Plattform, die auf der Chrome-basierten JavaScript-Laufzeit basiert, um schnelle und skalierbare Webanwendungen zu erstellen. Es verwendet ereignisgesteuerte, nicht blockierende E/A-Modelle, wodurch es leicht und effizient ist, was es ideal für datenintensive Echtzeitanwendungen, die auf verteilten Geräten ausgeführt werden. Dies verbessert die Leistung der mittleren Stapelanwendung, indem es ermöglicht, mehrere Client -Anfragen gleichzeitig ohne Verzögerung zu bearbeiten.

Was sind die Voraussetzungen für die Entwicklung einer mittleren Stapelanwendung?

Um eine mittlere Stapelanwendung zu entwickeln, benötigen Sie ein grundlegendes Verständnis von JavaScript und HTML. Sie müssen auch über NoSQL-Datenbanken (insbesondere MongoDB) sowie über die Skripte von Client und serverseitig informiert werden. Es ist entscheidend, mit AngularJs, ExpressJs und Node.js. Darüber hinaus wird das Verständnis von JSON- und AJAX -Technologien von großem Nutzen sein.

Wie bedeutet Stack im Vergleich zu anderen vollständigen Stapeloptionen?

Der mittlere Stapel basiert ausschließlich auf JavaScript und bietet einen nahtlosen Entwicklungsprozess, da dieselbe Sprache auf der Client- und Serverseite verwendet werden kann. Dies ist der Hauptvorteil anderer Full-Stack-Optionen, die in mehreren Sprachen Kenntnisse erfordern. Darüber hinaus macht die nicht blockierende Architektur von Node.js die Mittelstapelanwendungen schnell und skalierbar, was sie zur ersten Wahl für Echtzeitanwendungen macht.

Kann ich eine andere Datenbank im Mittelwert verwenden?

Während MongoDB die Standarddatenbank im Mittelwert ist, da sie mit JavaScript kompatibel ist, sind andere Datenbanken verfügbar. Dies erfordert jedoch möglicherweise zusätzliche Konfigurations- und Code -Optimierungen, und nahtlose Datenflüsse, die dem mittleren Stapel bekannt sind, können beeinträchtigt werden. Sofern keine spezifische Notwendigkeit einer anderen Datenbank erforderlich ist, wird daher empfohlen, MongoDB zu verwenden.

Das obige ist der detaillierte Inhalt vonEin praktischer Leitfaden zur Planung einer mittleren Stapelanwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!