Meteor JS Einführung

Meteor JS: Was ist das und wie kann ich es nutzen?

Meteor JS gibt es zwar bereits seit dem Jahr 2012, erlebt ab derzeit einen Hype in der Welt der Entwickler. Wir haben uns mit dem JavaScript-Framework näher beschäftigt und möchten mit diesem Artikel eine kleine Einführung in das Thema geben. Du lernst, wie Du Meteor installierst und die ersten Demo-Projekte erstellen kannst. Meteor JS hat durch die Echtzeit-Daten-Bereitstellung das Zeug die Web-Entwicklung auf ein ganz neues Level zu bringen.

“Build apps that are a delight to use, faster than you ever thought possible”

Mit diesem simplen Leitbild begann das ambitionierte Projekt Meteor, welches damals noch Skybreak hieß, im Jahr 2012. Damals bestand das Team aus den drei Gründern Matt DeBergalis, Geoff Schmidt und Nick Martin, die für Kenner der IT-Branche alles andere als unbeschriebene Blätter sind, und machte ziemliche Schlagzeilen, als die Risikoinvestmentfirma Andreessen Horowitz über 11 Millionen Dollar in das Projekt investierte. Heute zählt es 19 Entwickler – Tendenz steigend – und hat im April seinen stable Release gefeiert. Alles gute Gründe, sich Meteor einmal genauer anzuschauen.

Logo Meteor JS

Abbildung 1: Logo Meteor JS

Was genau ist Meteor JS?

Meteor ist ein in JavaScript geschriebenes Framework, das Entwicklern die Programmierung von Web- und mobilen Apps deutlich vereinfachen soll. Es produziert plattformübergreifenden Code und ist darüberhinaus vollkommen Open Source.

Es hält auf jeden Fall, was es verspricht: Im Gegensatz zu anderen gängigen Frameworks wie Angular, Backbone oder Node ist es erstaunlich leicht zu erlernen – die Einarbeitung ist kurz, innerhalb des vorgegebenen Gerüsts kann schnell mit der eigentlichen Entwicklung begonnen werden. Es wird signifikant weniger Code benötigt – die Datenbank übernimmt zahlreiche Implementierungen auf einen kurzen Befehl hin – das gibt einen bemerkenswerten Schub an Inspiration und Motivation, nicht nur für unerfahrene oder nicht professionelle Entwickler.

Meteor zeichnet sich außerdem dadurch aus, dass es einzig und allein eine Programmiersprache benötigt, nämlich JavaScript – und das Frontend, Backend und Datenbank-seitig. Fehlen etwaige Funktionen, werden schlicht andere Open-Source-Frameworks integriert, die die Lücke füllen. Darüberhinaus legt Meteor den technischen Fokus auf Reaktivität: Sowohl Server als auch Client haben Zugriff auf die Datenbank und koordinieren sie mit derselben API. Die Datenbankverbindung ist frei von Verzögerung (zumindest simuliert), über das Netzwerk werden nur Daten und kein HTML gesendet und im Frontend wird mit Live-Daten und reaktiver Programmierung gearbeitet (das bedeutet jedoch für Entwickler, die ausdrücklich keine App in Echtzeit programmieren wollen, dass Meteor dafür ungeeignet ist). Zusammenfassend stellt sich Meteor also durch folgende Merkmale heraus:

  • Einfache Programmierung auch für Einsteiger
  • Programmierung nur in JavaScript
  • Datenbank auf Server und Client und somit direkt miteinander verbunden
  • Echtzeit-Programmierung

Die ersten Schritte mit Meteor JS

In Meteor mit dem Programmieren zu beginnen, heißt tatsächlich, mit dem Programmieren zu beginnen, was für Benutzer zahlreicher anderer Frameworks durchaus eine Überraschung sein könnte. Zuerst muss Meteor selbstverständlich installiert werden.

Installation

Um der Installationsanleitung folgen zu können, musst Du ein Terminal bzw. die Konsole öffnen. Wenn Du noch nie mit der Konsole gearbeitet hast: Es ist alles halb so wild! Beachte bitte, dass Du das Dollar-Zeichen ($) nicht eingeben musst. Um Meteor nun erstmal auf Deinem Rechner zu installieren, gebe folgendes ein:

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

Das Schlüsselwort für Befehle innerhalb von Meteor ist – das dagegen ist keine Überraschung – meteor. Die erste Anweisung ist die Erstellung eines neuen Projekts:

Die erste App mit Meteor JS

$ meteor create helloWorld

Unter dem App-Namen (hier: “helloWorld”) wird nun ein Unterverzeichnis erstellt, in dem sich eine HTML-, eine CSS- und eine JavaScript-Datei befinden. Letztere enthält bereits zwei Funktionen, je eine für den Client und den Server. In diesen findet die eigentliche Programmierung statt.

Meteor JS erstellt automatisch ein kleines Testprojekt und zwar jedes Mal, wenn Du ein neues Projekt erstellst. Um dieses Projekt nun zu starten und im Browser ansehen zu können, gebe bitte folgendes im Terminal ein:

$ cd helloWorld
$ meteor

Mit der ersten Zeile wechselst Du mit dem Terminal in das Projektverzeichnis. Mit der zweiten Eingabe, startest Du Meteor. Hast Du alles richtig gemacht, erscheint jetzt folgende Meldung: Die App ist nun erreichbar.

=> Meteor server running on: http://localhost:3000/

Im Browser ist sie unter obigem Link bereits zu finden – alles, was in der JavaScript-Datei programmiert wird, wird hier in Echtzeit angezeigt. Dies ist eine geeignete Stelle, um zu verdeutlichen, wie die reaktive Programmierung unter Meteor funktioniert. HTML-Fragmente sind im Web allgegenwärtig. Meteor ist nun fähig, sie zu “Live-HTML”-Fragmenten zu machen – sie verändern sich also ganz nach dem Prinzip der Reaktivität in Echtzeit, sobald sich die Daten, von denen die Fragmente abhängen, aktualisieren.

Du kannst also live in einem Fenster “programmieren” oder am Template arbeiten und alle Änderungen sind einen Moment später im anderen Fenster im Browser sichtbar.

Erweiterungen für Meteor

Angenommen, die richtige Idee für eine Meteor-App wurde gefunden und die Anwendung programmiert. Entwickler, die Browser- oder Plattformübergreifend releasen wollen, sehen sich nun dem Problem ausgesetzt, dass ihre Anwendung auf unterschiedlichen Browsern oder unterschiedlich großen Bildschirmen teilweise verzerrt dargestellt wird. Die Darstellung muss also optimiert werden.

Meteor JS liefert von Haus aus kein responsives CSS-Framework mit. Allerdings können wir als Bootstrapaholics das Twitter Framework ganz einfach mit folgendem Befehl installieren und somit automatisch unserem Projekt hinzufügen.

$ meteor add bootstrap

Nun kann im Rahmen des Frameworks die Darstellung der App umprogrammiert werden. Dementsprechend bedeutet das, dass der Entwickler sich mit dem potenziellen Eigenheiten des jeweiligen Frameworks vertraut machen muss – Meteor kann und wird nicht jeden Task für den Programmierer entscheidend vereinfachen können. Es vereinfacht jedoch die Implementierungen und den Umgang mit den zuständigen Schnittstellen signifikant. Grundsätzlich gilt, dass alle Open-Source-Frameworks als Erweiterungen unkompliziert zu Meteor JS hinzugefügt werden können. Zu den beliebtesten Erweiterungen zählen abgesehen von Bootstrap beispielsweise die folgenden:

  • coffeescript
    Eine Javascript-Programmiersprache mit vereinfachter Syntax
  • accounts-ui
    Ein Login-Service, der Passwörter einführt
  • aldeed:autoform
    Ein Modul, das das Design der App vereinfacht.
  • reactive-var
    Eine reaktive Variable, die für Programmierung nützlich ist.
  • mike:mocha
    Ein Test-Modul zum einfachen und sicheren Überprüfen der Anwendung.
  • fezvrasta:bootstrap-material-design
    Google Material Design als Bootstrap Theme

Auf https://atmospherejs.com/ wird das passende Modul gefunden und mit dem Befehl

$ meteor add jeweiliger-modul-name

schnell und einfach implementiert. Hier punktet Meteor JS mit Entwicklerfreundlichkeit. Trotz des relativ frühen Stadiums des Projekts sind die Auswahlmöglichkeiten groß und in jeder Hinsicht zufriedenstellend.

Ist die App fertig, trennen den Programmierer nur einige Befehle von der Veröffentlichung: Standardmäßig besitzt jeder neue Meteor-Projekt das “insecure”-Paket, welches es erlaubt, die Datenbank vom Client aus zu bearbeiten. Offensichtlich sollte dieses außer Kraft gesetzt werden, wenn User auf die App zugreifen sollen.

$ meteor remove insecure

App auf Meteor.com veröffentlichen

Meteor vereinfacht das Deployment einer App, indem es eine Subdomain von meteor.com zur Verfügung stellt. Nach Ausführung des folgenden Befehls ist die Apps also unter der dort angegebene Adresse zu erreichen:

$ meteor deploy helloWorld.meteor.com

Native Smartphone Apps

Speziell für Entwickler, die sich auf iOS- oder Android-Apps konzentrieren wollen, gibt es PhoneGap, das seit Meteor-Version 0.9.2 Teil des Projekts ist. Das Adobe-Modul bietet eine Vielzahl von Paketen, die es erlauben, auf die Funktionen der jeweiligen unterschiedlichen Smartphones zuzugreifen – beispielsweise die Kamera, das GPS, das Mikrofon und die Kontakte – alles in JavaScript umgewandelt. Es müssen also keine komplizierten Umwege gegangen werden, um für ein bestimmtes Gerät zu programmieren.

Meteor ist ein Zug, auf den man aufspringen sollte

Das Projekt, das klein angefangen hat, hat einen ernstzunehmenden Zulauf vorzuweisen. Neben Unternehmen, die Meteor bereits vor der 1.0-Version nutzten, findet es auch unter freien Entwicklern immer größere Beachtung. Das liegt sicherlich in erster Linie an der radikalen Vereinfachung der Entwicklung und des Betriebs von Apps. Meteor legt den Fokus auf Echtzeit und Reaktivität – und liegt damit im Trend. Durch seine Flexibilität hinsichtlich der Implementierung anderer Open-Source-Frameworks ist Meteor beinahe universell einsetzbar.

Beinahe. Entwicklern, denen Echtzeit-Programmierung so gar nichts nützt, nützt auch Meteor wenig. Muss die App das letzte Quäntchen Performance aus dem Gerät herausholen, ist das Webframework wohl ebenfalls nicht optimal geeignet. Außerdem wird die Tatsache kritisch gesehen, dass Meteor mit MongoDB nur eine Datenbank wirklich tatkräftig unterstützt – weitere sollen jedoch folgen. Apps, die bereits anderweitig programmiert worden sind, sind nur schwer zu migrieren.

Wer sich durch diese negativen Punkte nicht benachteiligt sieht, findet in Meteor jedoch ein großer Potenzial vor. So ist der Aspekt der einfachen Anwendung nicht zu unterschätzen: Die Einfachheit von Meteor JS ist nicht umsonst eins der Grundprinzipien des Entwickler-Teams – sie führt während der Programmierung von Apps immer wieder zu Motivationsschüben, die man von anderen modernen Frameworks so nicht gewohnt ist.

Auch aus technischer Sicht hat Meteor einiges zu bieten: Mit reaktiver Programmierung und beidseitigen Datenbanken geht es Hand und Hand mit den Konsumentenbedürfnissen der heutigen Zeit. Die Einarbeitung in Meteor ist auch für Laien derzeit unschlagbar schnell, die Plattform hält Server- und Clientseitig alles bereit, das für die Entwicklung einer App benötigt wird – auch dank einer großen und schnellen Community. Wenn es um Echtzeitanwendungen geht, ist Meteor JS deshalb das innovativste und vielversprechendste Webframework der letzten Jahre und wird sich mit Sicherheit auf dem Markt etablieren. JavaScript-Entwickler sollten auf jeden Fall einen Blick auf das Projekt werfen, das Entwicklerfreundlichkeit auf ein neues Niveau führt.

Du möchtest regelmäßig mit interessanten Neuigkeiten zum Thema "Twitter Bootstrap" versorgt werden? Trag Dich in den Bootstrapaholic Newsletter ein. Wir versenden keinen Spam! Du kannst Dich jederzeit austragen.

Dieser Beitrag wurde unter Bootstrap Tutorials abgelegt am von .

Ein Gedanke zu „Meteor JS: Was ist das und wie kann ich es nutzen?

  1. Rolf

    Wow. Einer der wenigen guten und konstruktiven Beiträge zu Meteor im deutschsprachigen Raum :) Daumen hoch.
    Ich nutze Meteor in letzter Zeit vermehrt für die hybride Entwicklung und kann das im Beitrag Gesagte nur bestätigen. Besonders spannend ist aus meiner Sicht die nahtlose Synchronisation der MongoDB aus Client- und Serverseite. Auch das Hot Code Push Feature bringt mich immer wieder zum Lächeln. Javascript-Entwicklung macht mit Meteor einfach Spaß. Die Tatsache, dass sich durch Cordova auch im Handumdrehen hybride Apps entwickeln lassen, macht Meteor zum meinem persönlichen Favourite Full Stack Framework.
    Meine Erfahrung ist jedoch, dass man stets den Nutzen abwägen muss. Spezielle Projekte erfordern häufig ein massives Eingreifen und Customizing in die Natur und Anatomie von Meteor…da kann es häufgi sinnvoll sein darüber nachzudenken einen MEAN-Architektur “from Scratch” zu entwickeln. Trifft dann aber in der Regel eher auf größere Projekte zu.

    Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>