Anzeige
Anzeige
UX & Design
Artikel merken

Meteor: Einblick in die Full-Stack-JavaScript-Plattform für das Echtzeit-Web

Die Anforderungen an Usability, Stabilität, Modularität und Skalierbarkeit nehmen rapide zu – vom kleinen Community-Projekt bis zur Enterprise-Anwendung. Das JavaScript-Framework Meteor liefert einen vielversprechenden Ansatz für die agile Entwicklung der nächsten Generation von Web-Anwendungen.

8 Min. Lesezeit
Anzeige
Anzeige

JavaScript prägt die Web-Entwicklung anno 2013 mehr denn je. Doch man muss schon reichlich Zeit und Geduld mitbringen, um auch nur einen annähernd umfassenden Überblick über die Stärken und Schwächen der zahlreichen JavaScript-Bibliotheken und -Frameworks zu bekommen. Dies ist kaum verwunderlich, denn JavaScript ist zum Stammspieler im Umfeld von HTML5 avanciert. So schauen Entwickler und Projektleiter nicht zuletzt deswegen so angestrengt auf das Anforderungspapier eines neuen Web-Projekts, weil sie auf der einen Seite zwar eine zeitgemäße Usability und professionelle Abbildung in mobilen Browsern bewerkstelligen möchten – aber auf der anderen Seite den Aufwand möglichst klein und die Entwicklungsstrategie agil halten wollen. Da klingt es zunächst vor allem nach Ballast, ein weiteres JavaScript-Framework einbinden zu wollen.
Dieser Artikel stammt aus dem brandneuen t3n Magazin Nr. 33.

Dieser Artikel stammt aus dem brandneuen t3n Magazin Nr. 33.

Frisches Konzept aus dem Valley

[metabox keyword=“javascript“]Doch zu der JavaScript-Renaissance im Frontend-Bereich gesellt sich seit einigen Jahren der zunehmende JavaScript-Einsatz in serverseitigen Laufzeitumgebungen – insbesondere im Zusammenspiel mit NoSQL-Datenbanken und skalierbaren Cloud-Infrastrukturen. Vor allem Node.js hat sich hier einen festen Platz beim Aufbau zahlreicher Server-Stacks gesichert. Wer sich also die Einsatzbereiche von JavaScript vor Augen führt und über die Vorteile einer Hochzeit von Browser- und Server-Welt nachdenkt, sollte unbedingt einen Blick auf die Plattform Meteor werfen. Ein kleines Team aus San Francisco entwickelt die auf JavaScript basierende Full-Stack-Webentwicklungs-Plattform Meteor seit 2011. Seit 2012 hat es dafür 11,2 Millionen US-Dollar Venture Capital bekommen. Das Ziel: die Entwicklung komplexer Web-Applikationen radikal vereinfachen. Der Meteor-Programmcode selbst ist Open Source und steht unter MIT-Lizenz. Meteor ist vielmehr eine Plattform als nur ein Framework. Das Rad wird nicht neu erfunden, aber es werden eine Reihe etablierter Technologien und Konzepte geschickt zusammengeführt. Dadurch entsteht ein komplexes Standardverhalten out of the box. Die wichtigsten Meteor-Komponenten im Überblick:

  • Webserver / Laufzeitumgebung auf Basis von Node.js
  • NoSQL Datenbank bzw. „Document Store“ mit MongoDB
  • WebSocket-Support / Observer für Echtzeitanwendungen
  • Erweiterungen und Paket-Management mit „Smart Packages“
  • Tools und Infrastruktur für das Building und Deployment
Anzeige
Anzeige

Doch was steckt hinter den Versprechungen? Lohnt es sich, Meteor trotz seines frühen Entwicklungsstadiums (aktueller Stand: v. 0.6.4) zu evaluieren? Nun, mit den folgenden vier Zeilen in der Shell läuft die Beispiel-Applikation und liefert einen ersten Einblick:

Installation der Beispiel-Applikation

$ (sudo) curl https://install.meteor.com | sh
$ meteor create --example leaderboard
$ cd leaderboard
$ meteor

Listing 1

Mit Meteor über die Architekturgrenze hinaus

Um die besonderen Möglichkeiten von Meteor besser zu verstehen, soll vorweg nochmal der Blick auf die Eigenschaften von JavaScript-Frameworks der MVC-Klasse gelenkt werden: Ember.js, Angular.js, Backbone.js, ExtJS/Sencha – all diese Frameworks verfolgen im Detail recht unterschiedliche Ansätze und doch vereint sie der Status als reine Client-Frameworks, gemacht für den Einsatz im Webbrowser. Zwar lassen sich mit ihnen auch komplexe Datenmodelle bis hin zu DataStore-Definitionen abbilden, doch endet eine direkte Kontrolle über den Verbleib und Zustand der Daten spätestens beim nächsten Server-Roundtrip – typischerweise durch XHR-Requests an eine serverseitige REST-Schnittstelle. Dies versteckt die Architekturgrenze, anstatt sie vollständig und transparent zu überbrücken. Entwickler müssen deshalb sowohl auf Client- als auch auf Server-Seite unabhängig voneinander eine vergleichbare Geschäftslogik implementieren und testen. Auch wenn es gute Gründe für die architektonische Grenze geben mag – für agile Entwicklungsvorhaben ist das ein oft lästiger und redundanter Implementierungsaufwand und damit einen klarer Verstoß gegen das Don’t-Repeat-Yourself-Prinzip (DRY). Um dem Problem zu entgehen, bietet das Meteor-Team einen radikal neuen Weg: Von Beginn an hat es die Plattform konsequent für den client- und serverseitigen Einsatz des JavaScript-Codes konzipiert. Das heißt, Entwickler müssen mit Meteor nur ein Modell, eine Validierung oder sonstige Geschäftslogik implementieren, und die XHR-Aufrufe des Browsers verstecken sich gänzlich – so als existierte eine direkte Datenbank-Verbindung. Die Beschleunigung im Bootstrapping moderner Web-Applikationen beginnt also mit einer zwischen Server und Browser geteilten Code-Basis. Und das ist nur der erste Baustein des Gesamtkonzepts.

Anzeige
Anzeige

Full Stack Reactivity

Meteor geht in der engen Verzahnung der Kommunikation zwischen Server und Client noch einen deutlichen Schritt weiter und bietet Kontrollmechanismen nach dem Publish/Subscribe(Pub/Sub)-Prinzip. Zudem hält der Browser durch den Einsatz von WebSockets eine bidirektionale Verbindungen zum Server aufrecht: Der Server informiert Meteor über Ereignisse, etwa Änderungen in der Datenbasis, sodass die Plattform Views neu rendern, also live aktualisieren kann. Pub/Sub-Deklarationen ermöglichen zudem Ereignis-getriebene und flexible Kopplungen aller beteiligten Komponenten nach dem Observer-Muster. Vereinfacht gesagt bedeutet dies, dass jede Ebene der Anwendung – von der Datenbank bis hin zum HTML-Template – ad-hoc auf Veränderungen reagieren kann. Übrigens: So ganz nebenbei lernt der Entwickler dabei das Konzept der reaktiven Programmierung im deklarativen Stil. Das Meteor-Team nennt dieses Zusammenspiel „Full Stack Reactivity“ und trifft damit die zentrale technische Besonderheit der Plattform als wichtigen Kandidaten für die Entwicklung von Echtzeitanwendungen. Die Anwendungsszenarien hierfür sind vielfältig, wenn auch bislang im Wesentlichen assoziiert mit Chat-Systemen, Admin-Dashboards oder Börsenkurs-Monitoren. Facebook oder Twitter zeigen jedoch deutlich, an wie vielen Stellen Echtzeit-Updates bereits eine Selbstverständlichkeit sind und vom User erwartet werden.

Anzeige
Anzeige

Meteor-Anwendungen: Wenig Code, komplexes Verhalten

Eine Meteor-Anwendung kommt zunächst mit erstaunlich wenig Code aus. Einige API-Objekte und deren Verwendungsweise veranschaulichen dies: Die Collections definieren etwa die Datenmodelle und Strukturen (documents) und kapseln gleichzeitig die Zugriffsfunktionen auf die Daten, wie Speichern, Modifizieren, Suchen oder Aggregieren. Das Meteor-Kommandozeilen-Tool erstellt Projekte, die standardmäßig mit einem Autopublishing-Verhalten für anwendungsrelevante Datenobjekte daherkommen. Das heißt, Collections sind an einen reaktiven Kontext gebunden und lassen sich so ohne weiteres Zutun auf allen verbundenen Browser-Clients publizieren. Wer dieses Standardverhalten ausschalten möchte, entfernt einfach das Smart-Package „autopublish“ und kümmert sich fortan selbst mit Meteor.publish oder Meteor.subscribe um die Definition des Pub/Sub-Verhaltens. Tatsächlich hält der Cache des Browser-Clients eine lokale Kopie der Collection-Daten, die sich nur dann mit dem Server synchronisiert, wenn Ereignisse über zu lesende oder zu schreibende Änderungen eintreten. Die Definition einer Collection ist denkbar einfach:

Die Definition einer Collection

var Players = new Meteor.Collection(„players“);

Listing 2

Nun stehen Modell und Daten auf der Browser-Seite bereit und es fehlen nur noch Mechanismen, die diese mit Views und UI-Elementen verbinden (data binding). Hier kommen nun einerseits Handlebars-Templates mit den flexiblen Kontrollstrukturen zur Ausgabe von Variablen ins Spiel, andererseits das Meteor-Objekt „Template”. Vereinfacht gesagt bindet das „Template”-Objekt Funktionen an Variablen und DOM-Events der Handlebars-Templates beziehungsweise des HTML. Die Funktionen liefern nun die Daten – etwa einer Collection – oder veranlassen deren Aktualisierung mit Daten aus einer Benutzereingabe. Dabei lassen sich mehrere Template-Instanzen in der UI erzeugen, die die gebundenen Daten unterschiedlich repräsentieren – ohne Einschränkung im reaktiven Verhalten. Das Verfahren zur Definition der Daten- und Ereignis-Bindungen bei loser Kopplung zum eigentlichen View-Markup zeigt übrigens klare Parallelen zum View-Model und View des MVVM-Patterns auf.

Anzeige
Anzeige

Definition der Daten- und Ereignis-Bindungen: Zur Laufzeit werden Template-Variablen an Funktionen gebunden, welche ihrerseits zum Beispiel Daten aus Collections abrufen.

Template.leaderboard.players = function () {
  return Players.find({}, {sort: {score: -1, name: 1}});
};

Template.leaderboard.selected_name = function () {
  var player = Players.findOne(Session.get("selected_player"));
  return player && player.name;
};

Template.player.selected = function () {
  return Session.equals("selected_player", this._id) ? "selected" : '';
};

Template.leaderboard.events({
  'click input.inc': function () {
    Players.update(Session.get("selected_player"), {$inc: {score: 5}});
  }
});

Template.player.events({
  'click': function () {
    Session.set("selected_player", this._id);
  }
});

Listing 3

Weitere wichtige Objekte der Meteor-API sind zum Beispiel:

  • das Meteor-Core-Objekt, welches unter anderem Kontrollmechanismen für die Ausführung im Server- oder Browser-Kontext bereitstellt
  • das Session-Objekt als globaler Key-Value-Store für den Client zur Registrierung beliebiger Daten und Zustände
  • das Accounts-Paket, ein vollständiges Subsystem für die Verwaltung von Benutzeraccounts oder Kennwörtern

Meteor selbst besitzt eine eigene Paketverwaltung, um Projekte komfortabel um so genannte „Smart Packages“ zu erweitern. So gibt es zum Beispiel Module zur Authentifizierung mit diversen OAuth-Providern oder auch zur einfachen Integration von Twitter Bootstrap bis hin zu jQuery- und Backbone-Paketen, die sich in Koexistenz installieren und betreiben lassen. Mit Meteorite existiert außerdem schon ein Community-getriebenes Ökosystem für Meteor-Pakete. Zusammenfassend die wichtigsten Technologien und Komponenten von Meteor in der Übersicht:

Prinzip/Paradigma Komponenten/Technologien
Data on the Wire Client Side Templating, Handlebars, Jade…
One Language JavaScript: Node.js, Browser-Runtimes
Database Everywhere Meteor Core, Meteor Collections
Latency Compensation Meteor Local Storage, Cache, HTML5
Full Stack Reactivity PubSub (Observer), WebSockets
Embrace the Ecosystem MIT-Lizenz, Integration von OS-Projekten
Simplicity Equals Productivity Klassische einfache APIs

Deployment in der Cloud

Zu einer Plattform mit dem Anspruch von Meteor gehört natürlich auch ein Build- und Deployment-System, das eine bequeme Fertigstellung und Auslieferung der Anwendung erlaubt. So ist es nicht weiter verwunderlich, dass der hierfür vorgesehene Kommandozeilen-Aufruf schlicht wie folgt ausfällt: „meteor deploy myapp.meteor.com“ (dabei steht „myapp“ natürlich für den eindeutigen Namen der eigenen Anwendung). Diese wird daraufhin optimiert, komprimiert und in die Infrastruktur der Meteor-Cloud injiziert. Dort skaliert sie automatisch inklusive MongoDB-Instanzen und aller weiteren benötigten Ressourcen. So einfach? Nun, zumindest in der Theorie. Denn noch handelt es sich um eine Preview-Umgebung. Meteor ist als Gesamtplattform noch ein ganzes Stück von der Produktionsreife entfernt. Man darf aber davon auszugehen, dass der Betrieb einer Cloud-Infrastruktur für Meteor-Apps ein wichtiger Baustein des Geschäftsmodells sein wird. Mit Blick auf Datenkontrolle und -sicherheit lässt sich trefflich darüber streiten, ob und in welcher Form ein Deployment in fremde Infrastrukturen überhaupt erwünscht ist. Aus technisch-organisatorischer Sicht wäre ein solches „Rundum-Sorglos-Deployment“ natürlich sehr komfortabel. Meteor-Apps lassen sich aber auch für die eigene Infrastruktur bauen und dort betreiben. Bis jetzt deutet noch nichts darauf hin, dass man als Meteor-Nutzer Opfer eines unerwünschten Lock-in-Effekts werden könnte.

Anzeige
Anzeige

Fazit

Meteor geht einen bedeutenden und teilweise unkonventionellen Schritt zur radikalen Vereinfachung von Entwicklung und Betrieb moderner skalierbarer Web-Anwendungen. Die Plattform zielt dabei ganz bewusst auf die kommende Generation Daten- und Ereignis-getriebener Echtzeitanwendungen. Da Meteor noch ein junges Produkt ist, gibt es aber auch noch offene Fragen: So unterstützt die Plattform bis jetzt nur MongoDB als Datenbank-Backend. Die Entwickler kündigen zwar die Unterstützung weiterer Datenbanken an, doch ist noch unklar, welche Art von Datenbanken das sein werden und ob sie sich später den gleichen API-Layer teilen. Offen bleibt bislang auch, wie es um das Thema automatisiertes Testen mit Unit-Tests oder testgetriebener Entwicklung steht. Meteor wird bis zur ersten offiziellen Version sicherlich noch einige API-Änderungen erfahren. So ist zum jetzigen Zeitpunkt vom produktiven Einsatz abzuraten. Außerdem sollten interessierte Entwickler auch Projekte mit zum Teil vergleichbaren Ansätzen verfolgen, wie zum Beispiel derby.js. Dennoch ist Meteor vom Bootstrapping bis zum Deployment der bislang vielversprechendste Kandidat für die agile Entwicklung von Echtzeitanwendungen für die App-Cloud der Zukunft.

Dieser Artikel stammt aus dem brandneuen t3n Magazin Nr. 33.

Dieser Artikel stammt aus dem brandneuen t3n Magazin Nr. 33.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
3 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

P

hab heute noch gegoogelt obs zu dem Projekt was neues gibt. Danke für die (deutsche) anschauliche Zusammenfassung und weiter so!

Folgender Link fehlt mir aber: http://yauh.de/articles/376/best-learning-resources-for-meteorjs

Antworten
Thomas

Hört sich ja sehr interessant an!

Antworten
Marc Wensauer

Hier sind noch 2 hilfreiche Informationsquellen:

http://www.discovermeteor.com
https://www.eventedmind.com

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige