Share
Was Sie erstellen werdenMeteor bietet Ihnen einen schnellen Entwicklungsworkflow, mit dem Sie isomorphe Web-Apps erstellen können, die einfach funktionieren. Die Meteor-Architektur ist wirklich wunderschön, da sie alle Clients, die mit Ihrer App verbunden sind, gleichzeitig direkt aus der Box heraus aktualisiert. Dies hat enorme Auswirkungen auf die Erstellung reaktiver Web-Apps.
Meteor ist einfach zu bedienen und dankenswerterweise wird diese Philosophie von Anfang an durchgesetzt.
Die Installation ist so einfach wie das Ausführen des folgenden Befehls auf Linux / Mac OS X-Systemen:
curl https://install.meteor.com/ | Sch
Windows-Benutzer können das offizielle Installationsprogramm herunterladen.
Dies erfolgt in der Kommandozeile über die Meteor Werkzeug. So erstellen Sie eine neue App mit dem Namen my_meteor_app Führen Sie in Ihrem Heimatverzeichnis Folgendes aus:
$ meteor create ~ / my_meteor_app $ cd ~ / my_meteor_app $ meteor
Sie können jetzt über http: // localhost: 3000-port 3000 auf Ihre Meteor-App zugreifen.
Standardmäßig werden folgende Dateien erstellt:
~ / my_meteor_app: ├── my_meteor_app.css my_meteor_app.html my_meteor_app.js
Das my_meteor_app.html Die Datei enthält das Markup, das zur Anzeige der Seite erforderlich ist. Meteor verwendet eine Stilsyntax für die geschwungenen Klammern des Lenkers. Der gesamte Code in Ihren HTML-Dateien wird mit Meteors Spacebars-Compiler kompiliert. Die Leertaste verwendet Anweisungen, die von doppelten geschweiften Klammern umgeben sind, z #jeder und #ob damit Sie Ihren Ansichten Logik und Daten hinzufügen können.
Sie können Daten aus Ihrem JavaScript-Code in Vorlagen übergeben, indem Sie Helfer definieren und Arrays iterieren, die wir verwenden können #undeinzelteile.
Das my_meteor_app.js Die Datei enthält sowohl das zum Starten des Clients erforderliche JavaScript als auch den Server. Alle Ereignisse für den Client oder die Direktiven können in dieser Datei angegeben werden.
Das css Die Datei dient zum Gestalten Ihrer App und ist standardmäßig leer.
Meteor analysiert alle HTML-Dateien in Ihrem App-Ordner und identifiziert drei Tags der obersten Ebene: , , und .
Alles in einem Tags werden in den Kopfbereich des an den Client gesendeten HTML-Codes eingefügt und alles darin Tags werden wie in einer normalen HTML-Datei zum body-Abschnitt hinzugefügt.
Alles drin Tags werden in Meteor-Templates kompiliert, die in HTML eingebunden werden können > templateName oder in Ihrem JavaScript mit verwiesen Template.templateName.
Ersetzen Sie den Standard-HTML-Code durch Folgendes:
Meine ToDo-Liste Meine ToDo-Liste
Mit Meteor Framework erstellt!
#und Aufgaben > Aufgabe / each
Text
Hier geben wir ein Vorlage und #jeder Schleife, um eine Aufzählungsliste zu erstellen. Beenden Sie das Beispiel, indem Sie dem hinzufügen my_meteor_app.js:
if (Meteor.isClient) // Code hier läuft nur auf dem Client // Zuweisen von Aufgaben zum Auffüllen Ihrer Daten Template.body.helpers (Aufgaben: [Text: "Gurken in frischem Dünger", Text: "Avocados in größere Töpfe verschieben", text: "Mit Ben Angeln gehen", text: "Bringt die Frau zum Yoga", text: "TV-Abo kündigen"]);
Schauen Sie sich in Ihrem Browser das fertige Ergebnis an. Wir können jetzt weiter vorgehen, indem Sie permanente Daten mit einer MongoDB-Sammlung implementieren.
Meteor macht das Arbeiten mit Daten einfach. Bei Sammlungen sind die Daten in jedem Teil Ihres Codes verfügbar, da sowohl der Client als auch der Server darauf zugreifen können. Dies macht es sehr einfach, eine Ansichtslogik zu schreiben und die Seite automatisch selbst aktualisieren zu lassen.
In Meteor zeigen alle Ansichtskomponenten, die mit einer Datenerfassung verknüpft sind, automatisch die neuesten Änderungen an den Daten an, sodass sie in Echtzeit reagieren.
Ändere dein my_meteor_app.js Datei zur Verwendung von MongoDB mit folgendem Inhalt:
Accentsconagua
Aufgaben = neue Mongo.Collection ("Aufgaben"); if (Meteor.isClient) // Dieser Code wird nur auf dem Client ausgeführt. Template.body.helpers (task: function () return Tasks.find ();; Die Linie Aufgaben = neue Mongo.Collection ("Aufgaben"); weist Meteor an, eine MongoDB-Sammlung mit dem Namen einzurichten Aufgaben. Die Folge davon in Meteor ist, dass auf dem Client eine zwischengespeicherte Verbindung zur Serversammlung erstellt wird.
Um Daten einzufügen, können wir die Serverkonsole verwenden. Um es von einem neuen Terminalfenster aus zu starten, CD in das Verzeichnis Ihrer App und ausführen (dies muss geschehen, während Meteor in einem separaten Tab ausgeführt wird):
$ meteor mongo
Fügen Sie nun in der Konsole für Mongo DB Ihrer App einen Datensatz hinzu mit:
db.tasks.insert (text: "Neue Aufgabe aus dem mongo!") createdAt: new Date ());
Werfen Sie jetzt einen Blick in den Browser, um die Updates zu sehen. Öffnen Sie die Entwicklertools und führen Sie in der Konsole Folgendes aus:
Tasks.insert (text: "Von der Konsole direkt zum Mongo"), erstelltAt: Neues Datum ());
Ihre Liste wird jetzt dynamisch auf dem Bildschirm aktualisiert. Öffnen Sie ein separates Browserfenster in einer neuen Instanz auf Ihrem Desktop. Führen Sie einen weiteren Einsatz in der Konsole aus.
Beide Instanzen werden in Echtzeit aktualisiert, ohne die Seite aktualisieren zu müssen. Stellen Sie sich die Auswirkungen vor, die sich aus der Aktualisierung der Datenbank und der Aktualisierung aller Clients durch Meteor ergeben.
Aus diesem Grund ist es Meteor leicht, ein wirklich reaktives App-Erlebnis zu erstellen. Benutzer können die Aktualisierung der Daten in Echtzeit gemeinsam im Browser anzeigen.
Das Meteorprojekt hat einen öffentlichen Paketserver von isobuild Pakete. Auf diese Weise können Sie Ihrer Meteor-App schnell Funktionen hinzufügen, indem Sie einfach ein Paket über die Meteor hinzufügen Syntax.
Meteor kann auch hinzufügen npm Pakete über die Meteor hinzufügen Syntax. Lassen Sie uns in unserem vorherigen Beispiel unser Display ein wenig schöner machen, indem Sie die Momente Paket für einfache Datumsformatierung.
$ meteor add momentjs: moment
Nun, da Sie einen Moment in Ihrer App haben, können Sie ihn einfach nutzen. Sie müssen sich nicht selbst einschließen.
Bearbeiten Sie die HTML-Vorlage wie folgt:
Meine ToDo-Liste Meine ToDo-Liste
> todo#aufträge
- text createdAt
/jeder
Jetzt aktualisieren wir unsere Hilfsfunktionen im my_meteor_app.js Datei:
Aufgaben = neue Mongo.Collection ("Aufgaben"); if (Meteor.isClient) // Dieser Code wird nur auf dem Client ausgeführt. Template.todo.helpers (task: function () return Tasks.find ();, createdAt: function () return moment (this.) .createdAt) .fromNow ();); Wechseln Sie zu Ihrem Browserfenster und solange der Meteor Befehl läuft noch im Terminal. Sie sehen Ihre aktualisierte Liste mit Momenten, die die Zeitmessung ermöglichen. nett!
Das Hinzufügen der OAuth-Authentifizierung zu Ihrer App ist jetzt ganz einfach. Dies kann erreicht werden, indem Sie einfach zwei Pakete über den folgenden Befehl hinzufügen:
$ meteor add accounts-google $ meteor add accounts-ui
Sobald diese Pakete zu Ihrer App hinzugefügt wurden, können Sie einfach das hinzufügen > loginButtons integrierte Vorlage für Ihre my_meteor_app.html Datei. Beim Laden in einem Browser wird eine Schaltfläche zum Konfigurieren der Google-Anmeldefunktion angezeigt. Befolgen Sie die bereitgestellten Schritte und Sie können loslegen. So einfach ist das.
Meteor ist ein fantastisches Framework, das immer beliebter wird. Ich glaube, es ist einfach zu verstehen, warum es so ist, weil Pakete einfach entworfen und implementiert werden. Das Erstellen von Prototypen von Apps in einer Woche ist keine große Sache, wenn Sie Meteor in Ihrer Toolbox haben.
Wenn Sie mehr über Meteor erfahren möchten, lesen Sie die hervorragende Dokumentation online.
