Vorbereitung

2

Zu ...% übersetzt

In diesem Kapitel wirst du:

  • Meteor installieren.
  • Erfahre mehr über die 5 Typen der Meteor-Packages.
  • Die Datei-Struktur einer Meteor App aufbauen.
  • Der erste Eindruck ist entscheidend und Meteors Installationsprozess sollte relativ schmerzfrei sein. Normalerweise solltest du in weniger als 5 Minuten loslegen können.

    Du kannst Meteor installieren, in dem du das Terminal öffnest und Folgendes eingibst:

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

    Dies installiert das ausführbare Programm meteor auf deinem System und erlaubt Dir Meteor zu benutzen.

    Meteor nicht installieren

    Wenn du Meteor nicht lokal installieren kannst (oder willst), empfehlen wir dir Nitrous.io.

    Auf Nitrous.io kannst du deine App laufen lassen und den Code direkt im Browser bearbeiten. Wir haben dazu eine kurze Anleitung geschrieben, um die Installation zu vereinfachen.

    Du kannst einfach dieser Anleitung folgen bis einschließlich dem Abschnitt “Installing Meteor”. Danach folgst du wieder ab dem Abschnitt “Creating a Simple App” in diesem Kapitel.

    Eine einfache App erzeugen

    Nun da wir Meteor installiert haben, erstellen wir eine App. Dazu benutzen wir Meteors Kommandozeilenwerkzeug meteor:

    $ meteor create microscope
    

    Dieser Befehl lädt Meteor herunter und erstellt ein einfaches, lauffähiges Meteor Projekt für dich. Sobald es fertig ist, solltest du ein Verzeichnis microscope/ mit folgendem Inhalt sehen:

    .meteor
    microscope.css  
    microscope.html 
    microscope.js   
    

    Die App die Meteor für dich erstellt hat ist eine einfache Boilerplate-App, die einige einfache Strukturen enthält.

    Obwohl die App noch nicht viel macht, können wir sie trotzdem starten. Um die App zu starten, wechsle zurück in das Terminal und gib Folgendes ein:

    $ cd microscope
    $ meteor
    

    Öffne nun in deinem Browser die URL http://localhost:3000/ (oder auch http://0.0.0.0:3000/). Du soltest nun ungefähr dies sehen:

    Meteors Hello World.
    Meteors Hello World.

    Commit 2-1

    Einfaches Microscope-Projekt erzeugt.

    Gratuliere! Deine erste Meteor App ist nun lauffähig. Um die App wieder zu stoppen, wechsle zurück in das Terminal (in dem die App läuft) und drücke ctrl+c.

    Falls du Git benutzt ist das jetzt ein guter Zeitpunkt um Dein Repo mit ‘git init’ zu initialisieren.

    Auf Wiedersehen Meteorite

    Es gab eine Zeit zu der Meteor einen externen Package Manager mit dem Namen Meteorite genutzt hat. Seit Meteor Version 0.9.0 wird Meteorite nicht mehr gebraucht, da all dessen Funktionen in Meteor integriert worden sind.

    Wenn Du also in diesem Buch oder auch im Netz irgendwelche Code-Schnipsel mit dem 'mrt’ Kommando findest, kannst du diese einfach mit dem 'meteor’-Befehl ersetzen.

    Hinzufügen einer Package

    Nun werden wir Meteors Package System nutzen um das Bootstrap Framework zu unserem Projekt hinzuzufügen.

    Dabei passiert zunächst einmal nichts anderes, als Bootstrap auf die herkömmliche Weise hinzuzufügen, also die entsprechenden CSS und JavaScript Dateien in unser Projekt einzufügen. Der Vorteil liegt darin, dass sich nun Meteor um das Updaten dieser Package kümmert. Vielen Dank an das Mitglied der Meteor-Gemeinschaft Andrew Mao ( “mizzao” in mizzao:bootstrap-3 ist der Username des Authors einer Package)!

    Und wenn wir schon mal dabei sind, fügen wir auch noch die Underscore Package hinzu. Underscore ist eine JavaScript Utility Bibliothek, die sehr nützlich zur Manipulation von JavaScript Datenstrukturen ist.

    Aktuell ist die 'underscore’ Package Teil der “offiziellen” Meteor Packages und hat deshalb keinen Author.

    meteor add mizzao:bootstrap-3
    meteor add underscore
    

    Bitte beachte, dass wir Bootstrap 3 hinzufügen. Einige der Screenshots in diesem Buch wurden mit einer älteren Version von Microscope gemacht, die noch auf Bootstrap 2 basierte, weshalb sie vielleicht ein wenig anders aussehen.

    Commit 2-2

    Bootstrap und underscore Package hinzugefügt.

    Sobald Du die Bootstrap package hinzugefügt hast, sollte sich das Aussehen der Basis-App ändern:

    Mit Bootstrap.
    Mit Bootstrap.

    Anders als beim “traditionellen” Weg externe Assets einzubinden, mussten wir keine CSS oder JavaScript Dateien verlinken, da Meteor sich um alles kümmert! Das ist nur eine der vielen Vorteile der Meteor Packages.

    Eine Anmerkung zu Packages

    Wenn wir von Packages im Kontext von Meteor sprechen müssen wir etwas genauer sein. Meteor nutzt fünf Basis-Typen von Packages:

    • Der Meteor-Core selbst ist in verschiedene Meteor Plattform Packages unterteilt. Sie sind in jeder Meteor-App integriert und du musst dich eigentlich nie um diese kümmern.
    • Reguläre Meteor Packages werden “isopacks”, oder “isomorphic packages” genannt. Das bedeutet, dass sie sowohl auf dem Client als auch auf dem Server funktionieren. First-party packages wie z.B. accounts-ui oder appcache werden vom Meteor Core Team gepflegt und sind in Meteor eingebunden.
    • Third-party Packages sind isopacks die von anderen Benutzern entwickelt und auf Meteors Package Server hochgeladen worden sind. Du kannst sie dir auf Atmosphere oder mit dem meteor search Befehl anschauen. – Lokale Packages sind eigenerstellte Packages, welche du selbst erstellen und im Verzeichnis /packages ablegen kannst.
    • NPM Packages (Node.js Packaged Modules) sind Node.js-Packages. Obwohl diese nicht einfach so mit Meteor funktionieren, können sie von den oben genannten Typen von Packages genutzt werden.

    Die Datei-Struktur einer Meteor-App

    Bevor wir mit dem Programmieren anfangen, müssen wir unser Projekt korrekt aufsetzen. Um einen problemlosen Build-Prozess zu gewährleisten, öffnen wir das Verzeichnis microscope und löschen die Dateien microscope.html, microscope.js und microscope.css.

    Danach erstellen wir vier Verzeichnisse in /microscope: /client, /server, /public und /lib.

    Weiterhin legen wir die leeren Dateien main.html und main.js in /client an. Keine Sorge, wenn du die App dadurch vorübergehend unbrauchbar machst - wir befüllen die Dateien im nächsten Kapitel.

    Erwähnt werden sollte auch, dass einige dieser Verzeichnisse speziell sind. In Bezug auf Dateien hat Meteor folgende Regeln:

    • Code im Verzeichnis /server wird nur auf dem Server ausgeführt.
    • Code im Verzeichnis /client läuft nur auf dem Client.
    • Dateien an anderen Orten werden sowohl auf dem Client als auch auf dem Server ausgeführt.
    • Deine statischen Assets (Schriften, Bilder etc.) gehören in das Verzeichnis /public.

    Es ist auch nützlich zu wissen, in welcher Reihenfolge Meteor die Dateien einer App lädt:

    • Dateien in /lib werden immer zuerst geladen.
    • Alle main.* Dateien werden als Letzes geladen.
    • Alle anderen Dateien werden auf Basis des Dateinamens in alphabetischer Reihenfolge geladen.

    Beachte, dass obwohl Meteor diese Regeln hat, du trotzdem nicht zwingend diese vordefinierte Dateistruktur für deine App verwenden musst. Die Struktur, die wir vorschlagen ist nur ein möglicher Weg und ist nicht in Stein gemeisselt.

    Lies doch auch die offizielle Meteor Dokumentation, wenn du mehr Informationen hierzu benötigst.

    Ist Meteor MVC?

    Wenn du andere Frameworks wie Ruby on Rails benutzt, fragst du dich vielleicht, ob Meteor-Apps das MVC-Pattern (Model View Controller) verwenden.

    Die kurze Antwort ist: Nein. Im Gegensatz zu Rails zwingt dich Meteor nicht eine vorgegeben Struktur für deine App zu nutzen. In diesem Buch strukturieren wir den Code, wie er uns am meisten Sinn macht, ungeachtet etwaiger Akronyme.

    Nicht öffentlich?

    Ok, wir haben etwas gelogen. Wir brauchen das Verzeichnis /public eigentlich nicht. Dies hat den einfachen Grund, dass Microscope keine statischen Assets benutzt. Da aber die meisten anderen Meteor-Apps mindestens einige Bilder einbinden, wollen wir es kurz erwähnen.

    Vielleicht hast du das versteckte Verzeichnis .meteor bemerkt. Dort speichert Meteor seinen eigenen Code. Dort Änderungen vorzunehmen ist normalerweise eine schlechte Idee. Grundsätzlich musst du dieses Verzeichnis nicht kennen. Die einzigen Ausnahmen sind die Dateien .meteor/packages und `.meteor/release’. Diese können genutzt werden, um die verwendeten Smart Packages aufzulisten und die benutzte Version von Meteor zu spezifizieren. Wenn du Packages hinzufügst oder den Meteor-Version änderst, kann es hilfreich sein, die Änderungen in diesen Dateien zu überprüfen.

    Unterstriche oder CamelCase

    Das Einzige, was wir zu der uralten Debatte Unterstriche (my_variable) vs. CamelCase (myVariable) sagen, ist, dass es nicht darauf ankommt welches du wählst, solange du dich für eine Variante entscheidest.

    In diesem Buch verwenden wir CamelCase, da es üblicherweise so in JavaScript gemacht wird. (Schliesslich heisst es JavaScript und nicht java_script!).

    Die einzige Ausnahme zu dieser Regel sind Dateinamen, in welchen Unterstriche (my_file.js) verwendet werden, sowie CSS Klassen die Bindestriche (.my-class) benutzen. Der Grund dafür ist, dass im Dateisystem Unterstriche geläufig sind, während in der CSS Syntax sich Bindestriche durchgesetzt haben (font-family, text-align, etc.).

    Verwendung von CSS

    Dieses Buch behandelt kein CSS. Um dich nicht auch noch mit Styling-Details zu belästigen, haben wir uns entschieden, das gesamte Stylesheet von Anfang vorzugeben. darüber musst du Dir keine Sorgen machen.

    CSS wird automatisch von Meteor geladen und komprimiert. Deshalb muss es im Gegensatz zu den anderen statischen Assets im Verzeichnis /client und nicht im Verzeichnis /public abgelegt werden. Erstelle nun das Verzeichnis client/stylesheets/ und speichere die Datei styles.css mit folgendem Inhalt:

    .grid-block, .main, .post, .comments li, .comment-form {
      background: #fff;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      padding: 10px;
      margin-bottom: 10px;
      -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
    
    body {
      background: #eee;
      color: #666666; }
    
    .navbar {
      margin-bottom: 10px; }
      /* line 32, ../sass/style.scss */
      .navbar .navbar-inner {
        -webkit-border-radius: 0px 0px 3px 3px;
        -moz-border-radius: 0px 0px 3px 3px;
        -ms-border-radius: 0px 0px 3px 3px;
        -o-border-radius: 0px 0px 3px 3px;
        border-radius: 0px 0px 3px 3px; }
    
    #spinner {
      height: 300px; }
    
    .post {
      /* For modern browsers */
      /* For IE 6/7 (trigger hasLayout) */
      *zoom: 1;
      position: relative;
      opacity: 1; }
      .post:before, .post:after {
        content: "";
        display: table; }
      .post:after {
        clear: both; }
      .post.invisible {
        opacity: 0; }
      .post.instant {
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none; }
      .post.animate{
        -webkit-transition: all 300ms 0ms;
        -webkit-transition-delay: ease-in;
        -moz-transition: all 300ms 0ms ease-in;
        -o-transition: all 300ms 0ms ease-in;
        transition: all 300ms 0ms ease-in; }
      .post .upvote {
        display: block;
        margin: 7px 12px 0 0;
        float: left; }
      .post .post-content {
        float: left; }
        .post .post-content h3 {
          margin: 0;
          line-height: 1.4;
          font-size: 18px; }
          .post .post-content h3 a {
            display: inline-block;
            margin-right: 5px; }
          .post .post-content h3 span {
            font-weight: normal;
            font-size: 14px;
            display: inline-block;
            color: #aaaaaa; }
        .post .post-content p {
          margin: 0; }
      .post .discuss {
        display: block;
        float: right;
        margin-top: 7px; }
    
    .comments {
      list-style-type: none;
      margin: 0; }
      .comments li h4 {
        font-size: 16px;
        margin: 0; }
        .comments li h4 .date {
          font-size: 12px;
          font-weight: normal; }
        .comments li h4 a {
          font-size: 12px; }
      .comments li p:last-child {
        margin-bottom: 0; }
    
    .dropdown-menu span {
      display: block;
      padding: 3px 20px;
      clear: both;
      line-height: 20px;
      color: #bbb;
      white-space: nowrap; }
    
    .load-more {
      display: block;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      background: rgba(0, 0, 0, 0.05);
      text-align: center;
      height: 60px;
      line-height: 60px;
      margin-bottom: 10px; }
      .load-more:hover {
        text-decoration: none;
        background: rgba(0, 0, 0, 0.1); }
    
    .posts .spinner-container{
      position: relative;
      height: 100px;
    }
    
    .jumbotron{
      text-align: center;
    }
    .jumbotron h2{
      font-size: 60px;
      font-weight: 100;
    }
    
    @-webkit-keyframes fadeOut {
      0% {opacity: 0;}
      10% {opacity: 1;}
      90% {opacity: 1;}
      100% {opacity: 0;}
    }
    
    @keyframes fadeOut {
      0% {opacity: 0;}
      10% {opacity: 1;}
      90% {opacity: 1;}
      100% {opacity: 0;}
    }
    
    .errors{
      position: fixed;
      z-index: 10000;
      padding: 10px;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      pointer-events: none;
    }
    .alert {
              animation: fadeOut 2700ms ease-in 0s 1 forwards;
      -webkit-animation: fadeOut 2700ms ease-in 0s 1 forwards;
         -moz-animation: fadeOut 2700ms ease-in 0s 1 forwards;
      width: 250px;
      float: right;
      clear: both;
      margin-bottom: 5px;
      pointer-events: auto;
    }
    
    client/stylesheets/style.css

    Commit 2-3

    Modifizierte Datei-Struktur.

    Eine Anmerkung zu CoffeeScript

    In diesem Buch verwenden wir pures JavaScript. Solltest du CoffeeScript bevorzugen, so ist Meteor auch dazu fähig. Füge einfach das Package CoffeeScript hinzu:

    meteor add coffeescript