Meteor - die Webentwicklung der Zukunft?

Wenn sich einige der profiliertesten und (finanziell) erfolgreichsten Köpfe der Internetbranche zusammentun, um in ein neues Projekt zu investieren, so drängt sich automatisch die Vermutung auf, dass es sich um ein Projekt von besonderer Bedeutung handeln muss. In das Meteor-Projekt investieren neben Netscape-Gründer Marc Andreessen auch Facebook- und Asana-Mitgründer Dustin Moskovitz, Reddit-Gründer Alexis Ohanian und Gmail-Entwickler Paul Buchheit.

Was steckt nun hinter diesem Projekt? Was unterscheidet es von anderen Entwicklungen im Bereich Web Developement? Und warum zieht es prominente Köpfe wie kaum ein anderes Projekt so an? Die Versprechungen der Meteor-Entwicklungen klingen sehr vollmundig: Danach ist Meteor eine besonders einfach zu bedienende Umgebung für die Entwicklung von modernen Websites. Wofür man früher Wochen benötigte, soll mit Meteor in wenigen Stunden erledigt sein.

Meteor im Überblick

Die meisten Webapplikationen, die man heute im Internet zu sehen bekommt, basieren auf dem klassische Client-Server-Modell: Ein Client fordert von einem Webserver bestimmte Informationen, die dann statisch oder dynamisch vom Server an den Client übermittelt werden.

Aktuell scheint es, als würden wir einen Paradigmenwechsel erleben. Immer häufiger werden Anwendungen entwickelt, bei denen vollständig in Javascript entwickelte Anwendungen auf Seiten des Clients ausgeführt werden. Sie verfügen meist über ausgezeichnete Schnittstellen mit einer hohen Funktionalität, erfordern keinen Daten-Reload und setzen Änderungen des Benutzers unmittelbar im Browser um, ohne den Webserver erneut kontaktieren zu müssen.

Ratgeber: Die besten Lösungen für sichere Webentwicklung

Auch Meteor folgt diesem Ansatz. Bei der Entwicklung von Webapplikationen muss man sich nicht mit verfügbaren Serverressourcen, Datenbankzugriffen, Web-APIs und der Verarbeitung von Daten aus verschiedenen Quellen befassen. So versprechen es die Meteor-Entwickler. Meteor macht sich sieben Prinzipien zunutze:

1. Die Daten werden an den Client übermittelt, und der entscheidet, wie die Darstellung aussehen soll. Dabei werden keine HTML-Dateien mehr übermittelt.
2. Die Funktionen werden auf Client- und Serverseite vollständig in Javascript entwickelt.
3. Verwendung einer transparenten API für den Datenbankzugriff vom Client und Server.
4. Verwendung eines Prefetch-Mechanismus', der für einen Datenbankzugriff ohne Latenz sorgt.
5. Alle Ebenen einer Anwendung vom Template bis zur Datenbank erlauben die Entwicklung einer ereignisorientierten Schnittstelle.
6. Meteor integriert bestehende Open-Source-Werkzeuge und -Frameworks statt sie zu ersetzen.
7. Eine hohe Produktivität wird durch "einfache" APIs realisiert.

Struktur einer Meteor-App

Bei einer Meteor-Applikation handelt es sich um einen Mix aus Javascripts, die im Browserfenster ausgeführt werden. Auf Seiten des Servers kommt das Framework node.js zum Einsatz. Der Javascript-Code einer Meteor-Anwendung wird dort mit den verschiedenen Elementen wie HTML-Fragmenten, CSS-Regeln und weiteren statischen Komponenten ausgeführt.

Meteor kümmert sich um das Packaging und die Übermittlung der benötigten Elemente an den Browser. Die Anwendung ist dabei sehr frei konfigurierbar, weil Sie weitere Elemente einfach in den Dateibaum integrieren können.

Auf Seiten des Servers gibt es lediglich die Javascript-Komponenten. Meteor sammelt die Javascript-Dateien ein, schließt alle Inhalte der Unterverzeichnisse client und public aus und lädt den Rest in die node.js-Server-Instanz. Dabei wird der Servercode als einzelner Thread pro Client Request ausgeführt.

Ratgeber: So schützen Sie Ihre Webseiten vor Hackerangriffen

Auf der Client-Seite passiert etwas anderes. Meteor sammelt alle Javascript-Dateien des Anwendungsbaums ein, schließt aber die Unterverzeichnisse server und public aus. Die verbleibenden Dateien werden zu einem Bündel komprimiert und an die Clients übermittelt.

Die Dateien außerhalb der Unterverzeichnisse client und server werden sowohl auf dem Client als auch auf dem Server geladen. Über die beiden Variablen is_client und is_server können Sie festlegen, ob der Code sein Verhalten ändert, abhängig davon, ob er auf dem Client oder Server ausgeführt wird.

Alle sensitiven Code-Elemente, die beispielsweise Passwörter oder Authentifizierungsmechanismen beinhalten, sollten im Verzeichnis server hinterlegt werden. Die CSS-Dateien werden als ein Bündel an den Client übermittelt. Die Verarbeitung der in einem Meteor-Projekt enthaltenen HTML-Dateien sieht ein wenig anders aus.

Meteor scannt die HTML-Dateien nach den drei Top-Level-Elementen <head>, <body> und <template>. Die head- und body-Abschnitte werden zu einer einzigen head- und body-Datei zusammengefasst und werden beim ersten Client Request an den Browser übermittelt. Etwas anderes passiert mit Templates. Die werden in Javascript-Funktionen umgewandelt.

Schließlich ist anzumerken, dass der Meteor-Server alle Dateien für den Client-Zugriff bereitstellt, die sich im Verzeichnis public befinden. Hier können beispielsweise Bilder, Favicons und Informationen für Suchmaschinen platziert werden.

Meteor in der Praxis

Um Meteor ausführen zu können, benötigen Sie ein Entwicklungssystem, das eine CURL-Installation zur Verfügung stellt. Ist das der Fall, installiert man Meteor mit folgendem Befehl:

# curl https://install.meteor.com | /bin/sh

Um ein erstes Projekt anzulegen, führen Sie folgenden Befehl aus:

$ meteor create erste_meteor_app

Um diese App lokal auszuführen, führen Sie die folgenden Kommandos aus:

$ cd erste_meteor_app $ meteor Running on: https://localhost:3000/

Und so führen Sie Ihre erste Meteor-Anwendung über einen von dem Meteor-Team zur Verfügung gestellten Server aus:

$ meteor deploy erste_meteor_app. meteor.com

Meteor erzeugt einen neuen Projektordner, in dem sich eine Javascript-, eine HTML- und eine CSS-Datei befinden. Editieren Sie die Javascript-Datei, um sich an die Entwicklung zu machen.

Öffnen Sie parallel dazu die Darstellung im Browserfenster unter der URL https://localhost:3000 , die die Entwicklung darstellt - und zwar in Echtzeit. Jede Code-Änderung, die Sie im Code-Editor ausführen, wird ohne Reload in der Vorschau automatisch aktualisiert.

In der Browserdarstellung können Sie den bereits geschriebenen Code um weitere Code-Elemente ergänzen. Auch diese Änderungen werden ebenfalls in der Vorschau in Echtzeit umgesetzt.

Das Besondere an Meteor ist, dass Sie damit sehr einfach Datenbankanwendungen realisieren können, wobei die Zugriffsmechanismen gegenüber dem klassischen Client-Server-Zugriff deutlich vereinfacht wurden. Jeder Meteor-Client beinhaltet einen Datenbank-Cache, in dem einige der Datenbankinhalte des Servers enthalten sind.

Ratgeber: Die besten Browser-Plugins

Ändern sich nun Daten in der Master-Datenbank, so werden diese Informationen bei allen angeschlossenen Clients automatisch synchronisiert. Meteor macht sich die bekannte Mongo-DB-API zunutze. Sollte Ihnen der Funktionsumfang dieser Datenbank nicht genügen, können auch alternative Datenbanksysteme eingebunden werden.

Fazit

Meteor verfolgt einen interessanten Ansatz, der die Entwicklung von Websites tatsächlich beschleunigen könnte, da die Entwicklung gerade von interaktiven Funktionen einfach ist. Ob und wie die Integration von bestehenden Sites in der Praxis funktioniert, wird sich zeigen.

Meteor liegt aktuell in Version 0.3.9 vor. Noch ist es zu früh, um eine abschließende Bewertung zu treffen. In spätestens einem Jahr soll Version 1.0 fertig sein.

Erweiterungen fu?r Meteor

Meteor ist von Haus aus ein sehr leistungsfähiges System mit einem innovativen Ansatz. Doch damit nicht genug: Es verfügt über ein ungewöhnlich leistungsfähiges Paketsystem. Sie können die Standardausstattung nahezu beliebig erweitern.

Bei den potenziellen Erweiterungen handelt es sich um Javascript-Komponenten, die sich einfach in Meteor integrieren lassen. Sie sind dabei bezüglich der Position sehr flexibel, an der die Basisfunktionen ergänzt werden: Erweitern können Sie sowohl Client-, als auch Serverkomponenten.

Meteor lässt sich beispielsweise um folgende Komponenten erweitern:

• Coffeescript Package: Dieses Paket kompiliert beliebige coffee-Dateien in den Meteor-Anwendungsbaum. Nachdem Sie Meteor damit erweitert haben, können Sie Ihre Anwendung auch mit Coffeescript schreiben.
• jQuery und Backbone Packages: Meteor kam mit diesen Modulen funktional erweitert werden.
• Underscore Package: Diese Komponente erweitert die Client- und Serverumgebung beispielsweise um select- und invoke-Funktionen.

Eine der interessantesten Erweiterungen ist Amplify. Dabei handelt es sich um eine einfache Cross-Browser-API für die Entwicklung von HTML5-Anwendungen. Sie erlaubt beispielsweise lokales Speichern.

Quick Reference Guide: HTML5

Auch das Bootstrap Package von Twitter kann integriert und für die Entwicklung von anspruchsvollen Frontend-Elementen verwendet werden. Dazu gehören beispielsweise typografische Elemente, Schaltflächen, Formulare und so weiter.

Ratgeber: Bootstrap

Mit dem Befehl meteor list erfahren Sie, welche Packages aktuell installiert sind. Um der Meteor-Umgebung weitere Module hinzuzufügen, führen Sie folgenden Befehl aus: meteor add. Das Entfernen nicht mehr benötigter Module erfolgt mit meteor remove.