MeteorJS – one above all JS?

meteorjs

Frameworks wie AngularJS spriessen aus dem Boden. Ein solches ist MeteorJS. In den nächsten paar Minuten möchte ich euch dieses – meiner Meinung nach – wunderbare Framework etwas näher bringen und meine eigenen „Pitfalls“ aufzeigen.

Was ist MeteorJS?

Meteor is a complete open source platform
for building web and mobile apps
in pure JavaScript.

Meteor ist ein Framework, mit welchem – vor allem real-time – Applikationen geschrieben werden können. Es dient als Basis für Client – Server Kommunikation, hat direkt eine MongoDB dabei und kann Templates auf dem Client und dem Server rendern. Interessant an Meteor ist auch das Plugin-System, mit welchem verschiedene Funktionen hinzugezogen werden, doch dazu später mehr. Das Tutorial von Meteor ist sehr zu empfehlen!

Setup

Um Meteor zu installieren, kann man den gelieferten Windows-Installer oder das Shell-Script ausführen und man ist bereit. Anschliessend wird mittels

meteor create myProject

(in der Bash oder CMD) ein neues Projekt angelegt. Um den Democode zu starten wird einfach das Kommando „meteor“ im Projektverzeichnis ausgeführt.

Meteor hat eine LiveReload Implementierung enthalten, welche bei Änderungen am JavaScript, CSS oder HTML die Seite aller verbundenen Browser neu lädt.

Hello World


if(Meteor.isClient){
  Session.setDefault('counter', 0);
 
  Template.body.helpers({
    counter: function(){
      return Session.get('counter');
    }
  });
 
  Template.body.events({
    'click #click': function(){
      Session.set('counter', Session.get('counter') + 1);
    }
  });
}

See the Pen MeteorJS Hello World by Christoph Bühler (@buehler) on CodePen.

Filestruktur

Damit nicht gnadenlos alle Dateien dem Client geliefert werden, gibt es einige Schlagworte, mit denen das Verhalten von Meteor gesteuert werden kann. Hinweise darauf finden sich im Internet oder aber in der Dokumentation von Meteor. Wichtig dabei sind folgende Ordner:

./
|– *.html
|– *.js
|– *.css
|
|– client
|          |
|          +– compatibility
|– server
|– public
|– private
+– tests

Alle Dateien, welche im Root der Applikation liegen, werden zusammengezogen, geparsed (html) und ausgeliefert. Nun stellt sich die Frage: „Was mache ich mit mySuperSecretMasterPassword.js?“ Allfällige Keys, wie sie beispielsweise bei OAuth verwendet werden, sollen dem Client ja nicht einfach ausgeliefert werden. Dazu die nachstehende Erklärung:

  • „client“: Die Files werden nur dem Client übergeben und vom Server-Part ignoriert
  • „client/compatibility“: Platz für Kompatibilitätslibraries (IE9.js etc…)
  • „server“: Die Files werden vom Client-Part nicht geladen (hier wäre der richtige Ort für die genannte mySuperSecret…js)
  • „public“: Client-Assets. robots.txt, favicon.ico und andere übliche Verdächtige.
  • „private“: Die Files in diesem Ordner sind nur dem Server-Code zugänglich und werden mittels der „AssetsAPI“ geladen.
  • „tests“: Werden gänzlich ignoriert. Hier sollen die unit tests eingepflegt werden 😉

Single Page Applications

Nun kann man Hello World oder aber simple Widgets schreiben. Will ich nun eine SPA daraus entwickeln, so fehlt etwas ganz essentielles: Routing. Routing ist kein OOB Feature von Meteor. Die Plugin – Community ist jedoch sehr fleissig. Es gibt Plugins für alles und jeden. Wenn nun das Plugin „iron:router“ eingebunden wird 

meteor add iron:router

 steht der Single Page App nichts mehr im Wege. Ein solches Routing kann folgendermassen aussehen:


Router.route('/', function(){
  this.render('home');
});

Router.route('login');

Router.route('/messages', function(){
  if(!Meteor.userId()){
    Router.go('/');
  }
 
  this.render('messages');
});

See the Pen MeteorJS Routing by Christoph Bühler (@buehler) on CodePen.

 

Usermanagement

Da viele Applikationen mit einem Userkontext erst ihren ganzen Nutzen entfalten, muss eine Möglichkeit gegeben sein, eine Nutzersteuerung zu haben. Ich habe in einer kleinen Demo mit einem Befehle in der Bash und einem kleinen Template den Google OAuth Service implementiert.

meteor add accounts-ui accounts-google

und im html:

{{> loginButtons}}

Mobile

An dieser Stelle verweise ich gerne auf das Tutorial von Meteor, in welchem die einzelnen Schritte genau erklärt sind: Run Mobile Apps

Eins sei gesagt: Man „zieht“ per Plugin die gewünschten Plattformen (Android, iOS) in das Projekt und kompiliert dann so eine Applikation. Soweit ich das nun verstanden habe, funktioniert diese Mobilevariante mit Cordova. Somit hat man auf allen Plattformen dieselbe Umgebung.

Testdeployment

meteor deploy mytest.meteor.com

So einfach :-)

Ein Deployment kann gratis zu Testzwecken auf meteor.com gehostet werden.

Plugins

Nachstehend noch eine kleine Liste von Plugins, welche meiner Meinung nach einen hohen Stellenwert besitzen:

  • iron:router – Routing für SPA
  • Bootstrap
  • jQuery
  • Sämtliche oauth Plugins (accounts-google, accounts-facebook, …)
  • … weitere werden folgen 😉

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=""> <s> <strike> <strong>