Premiers pas

2

Traduction complétée à

Au programme de ce chapitre :

  • Installer Meteor.
  • Découvrir les 5 types de paquets Meteor.
  • Créer la structure de fichiers de votre application Meteor.
  • La première impression est importante, l'installation de Meteor devrait se faire sans difficulté. Vous serez en selle en moins de cinq minutes dans la plupart des cas.

    Pour commencer, si vous êtes sur Mac OS ou Linux vous pouvez installer Meteor en ouvrant un terminal et en saisissant :

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

    Si vous êtes sur Windows, référez-vous aux instructions d'installation du site de Meteor.

    Cette commande installera l'exécutable meteor sur votre système, et vous permettra de l'utiliser immédiatement.

    Ne pas installer Meteor

    Si vous ne pouvez pas — ou ne souhaitez pas — installer Meteor localement sur votre système, nous vous invitons à examiner Nitrous.io en guise d'alternative.

    Nitrous.io est un service qui vous permet d'exécuter vos applications, et d'éditer leur code, directement dans votre navigateur. Nous avons rédigé un petit guide pour vous aider à le mettre en œuvre.

    Suivez simplement ce guide jusqu'à la section “Installing Meteor” comprise, puis revenez dans ce chapitre, à la section « Créer une application basique ».

    Créer une application basique

    Maintenant que Meteor est installé, créons une application. Pour ce faire, on utilise l'outil en ligne de commande meteor :

    meteor create microscope
    

    Cette commande téléchargera Meteor, puis établira un projet Meteor élémentaire, prêt à l'emploi. Lorsqu'elle aura abouti, vous devriez trouver un dossier microscope/ avec le contenu suivant :

    .meteor
    microscope.css
    microscope.html
    microscope.js
    

    L'application que Meteor a créée pour vous est une simple ébauche (boilerplate), qui met cependant déjà en œuvre quelques patterns courants.

    Même si notre application ne fait pas grand chose, nous pouvons déjà la démarrer. Pour lancer l'application, retournez à la ligne de commande et saisissez :

    cd microscope
    meteor
    

    Ouvrez une fenêtre de navigateur à l'adresse http://localhost:3000/ (ou à l'adresse http://0.0.0.0:3000/, ce qui est équivalent) et vous devriez voir quelque chose qui ressemble à :

    Le ‹ Hello World › de Meteor.
    Le ‹ Hello World › de Meteor.

    Commit 2-1

    Crée un projet Microscope élémentaire.

    Félicitations ! Vous avez mis en service votre première application Meteor. Au passage, pour arrêter l'application, il vous suffit de ramener au premier plan la fenêtre de terminal dans laquelle tourne l'application, et de presser la combinaison de touches ctrl+c.

    N'oubliez pas que si vous utilisez Git, c'est le bon moment pour initialiser votre repo avec git init.

    Bye Bye Meteorite

    Il fut un temps où Meteor était relié à un gestionnaire de paquet nommé Meteorite. Depuis la version 0.9.0 de Meteor, Meteorite n'est plus nécessaire puisqu'il a été intégré directement dans Meteor.

    Donc si vous voyez une référence à la ligne de commande mrt de Meteorite au travers de ce livre ou sur Internet, vous pouvez simplement la remplacer par meteor.

    Ajouter un paquet

    Nous allons maintenant utiliser le système de paquet de Meteor pour ajouter Bootstrap à notre projet.

    Il n'y a aucune différence par rapport à la méthode usuelle c'est-à-dire l'inclusion manuelle des fichiers CSS et JavaScript de Bootstrap à part le fait que nous laissons le soin au mainteneur du paquet de le garder à jour.

    Pendant qu'on y est, nous allons aussi installer Underscore. Underscore est une bibliothèque utilitaire pour JavaScript vraiment très pratique pour manipuler des données.

    Le paquet bootstrap est maintenu par l'utilisateur twbs, ce qui nous donne son nom complet, twbs:bootstrap.

    En revanche, le paquet underscore fait partie des paquets «officiel» de Meteor qui sont fournis par le framework, c'est pourquoi il ne possède pas d'auteur :

    meteor add twbs:bootstrap
    meteor add underscore
    

    Notez que nous ajoutons Bootstrap 3. Certaines captures d'écran de ce livre ont été prises avec une ancienne version de Microscope utilisant Bootstrap 2, ce qui signifie qu'elles seront légèrement différentes de votre version.

    Commit 2-2

    Avec les paquets Bootstrap et Underscore.

    Vous devriez voir dès maintenant quelques changements dans votre application suite à l'ajout de Bootstrap :

    Avec Bootstrap.
    Avec Bootstrap.

    Contrairement à la “traditionnelle” manière d'inclure des ressources externes, nous n'avons à lier aucun fichier CSS ou JavaScript car Meteor s'en occupe pour nous ! Mais ce n'est qu'un avantage des paquets Meteor parmi tant d'autres.

    À propos des paquets

    Lorsque nous parlons de paquets (packages) dans le contexte de Meteor, il est bon d'être précis. Meteor distingue cinq types de paquets :

    • Le cœur de Meteor comprend lui-même différents paquets essentiels (core packages). Ils font partie de chaque application Meteor, et vous n'aurez pratiquement jamais besoin de vous en soucier.
    • Les paquets classique de Meteor se nomment “isopacks”, ou paquets isomorphes (ce qui signifie qu'ils peuvent fonctionner sur le client et sur le serveur). First-party packages comme accounts-ui ou appcache sont maintenus par la team Meteor et sont directement [intégrés à Meteor]http://docs.meteor.com/#packages).
    • Les paquets tiers (Third-party packages) sont simplement des isopacks développés par d'autres utilisateurs qui les ont envoyés sur le serveur de paquet de Meteor. Vous pouvez les trouver sur Atmosphere ou avec la commande meteor search.
    • Les paquets locaux (local packages) sont des paquets spécifiques que vous pouvez créer et placer dans le sous-dossier /packages.
    • Les paquets NPM (NPM packages, Node.js Packaged Modules) sont des paquets Node.js. Bien qu'ils ne fonctionneront pas tels quels avec Meteor, ils peuvent être exploités par les précédents types de paquets.

    La structure de fichiers d'une application Meteor

    Avant de plonger dans le code, il convient de configurer notre projet correctement. Afin que l'assemblage (build) ne contienne que l'essentiel, ouvrez le dossier microscope et supprimez-en les fichiers microscope.html, microscope.js et microscope.css.

    Puis créez quatre dossiers dans /microscope : /client, /server, /public, et /lib.

    Enfin, créez main.html et main.js dans /client. Ne vous inquiétez pas si votre application ne fonctionne plus pour le moment, nous allons remplir ces fichiers dans les chapitres suivants.

    Certains de ces sous-dossiers sont particuliers. Meteor traite les fichiers des dossiers selon les conventions suivantes :

    • Le code dans le dossier /server n'est exécuté que par le serveur.
    • Le code dans le dossier /client n'est exécuté que par le client.
    • Tout le reste est exécuté à la fois par le client et le serveur.
    • Vos ressources statiques (polices, images, etc) vont dans le dossier /public.

    Il est également très utile de connaître dans quel ordre Meteor charge vos fichiers :

    • Les fichiers dans /lib sont chargés avant tous les autres.
    • Tous fichiers main.* sont chargés après les autres.
    • Tout le reste est chargé dans l'ordre alphabétique.

    Au reste, Meteor ne vous contraint pas à utiliser de structure prédéfinie, si vous ne le souhaitez pas. La structure suggérée et décrite ci-dessus correspond à notre façon de procéder, elle n'est en aucun cas inamovible.

    Nous vous encourageons à consulter la documentation officielle de Meteor si vous souhaitez davantage de détails à ce sujet.

    Meteor est-il MVC ?

    Si vous avez utilisé d'autres frameworks, tels que Ruby on Rails, vous pourriez vous demander si Meteor suit le pattern MVC (Model View Controller).

    Pour faire court, non. À la différence de Rails, Meteor n'impose aucune structure de fichiers prédéfinie à votre application. Dans ce livre, nous disposerons notre code de la façon qui fait sens pour nous, sans trop nous soucier des acronymes.

    Public ou pas ?

    Pardonnez notre excès de zèle. En pratique, nous n'aurons pas besoin du dossier /public, car Microscope n'utilisera pas de ressources statiques ! Néanmoins, nous avons voulu vous signaler l'utilité de ce dossier, car la plupart des applications Meteor comprendront tout au moins quelques images.

    À ce propos, vous avez peut-être observé la présence d'un dossier caché nommé .meteor. C'est l'emplacement où Meteor enregistre son propre code, et y apporter des modifications peut conduire à un effet potentiellement désastreux. Vous n'aurez généralement pas besoin de prêter attention à son contenu — sinon, à de rares exceptions, aux fichiers .meteor/packages et .meteor/release, qui contiennent respectivement la liste de vos paquets intelligents (smart packages) et la version de Meteor en usage dans votre projet. Lorsque vous ajoutez des paquets et changez de version de Meteor, vous pouvez vérifier ces changements en examinant ces deux fichiers.

    Tirets_bas vs CasseAlternée

    À l'antique débat concernant l'usage, dans les noms d'identifiants, de tirets bas (caractère underscore, comme dans ma_variable), ou de la casse alternée (CamelCase, comme dans maVariable), nous n'ajouterons rien, sinon qu'importe la convention que vous adopterez, pourvu que vous l'appliquiez systématiquement.

    Dans cet ouvrage, nous utilisons la casse alternée camelCase, parce que c'est l'usage avec JavaScript — après tout, on écrit JavaScript, et non java_script !

    Les noms de fichiers font exception à cette règle, qui utilisent des tirets bas (mon_fichier.js), et les classes CSS, qui utilisent des tirets (.ma-classe). La raison en est que les tirets bas sont habituels dans les systèmes de fichiers, et que le tiret est utilisé dans la syntaxe CSS elle-même (font-family, text-align, etc.)

    CSS sans coquetterie

    Ce livre ne traite pas de CSS. Ainsi, pour ne pas vous ralentir avec des considérations de style, nous avons préféré vous mettre à disposition la feuille de style complète dès le départ. Vous n'aurez, dès lors, plus à vous en préoccuper.

    Les feuilles de style CSS sont automatiquement chargées et comprimées à la volée par Meteor, de sorte qu'elles doivent être placées dans le dossier /client, plutôt que /public comme le seraient les autres ressources statiques. Allez-y, créez-y maintenant un sous-dossier /client/stylesheets/, puis placez-y un fichier style.css avec le contenu suivant :

    .grid-block, .main, .post, .comments li, .comment-form {
      background: #fff;
      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; }
    
    #main {
      position: relative;
    }
    .page {
      position: absolute;
      top: 0px;
      width: 100%;
    }
    
    .navbar {
      margin-bottom: 10px; }
      /* line 32, ../sass/style.scss */
      .navbar .navbar-inner {
        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;
        -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;
      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

    Structure de fichiers réorganisée.

    Au sujet de CoffeeScript

    Dans ce livre, nous écrirons les scripts en JavaScript pur. Si vous préférez néanmoins utiliser CoffeeScript, Meteor n'est pas en reste. Ajoutez simplement le paquet CoffeeScript et vous êtes paré :

    meteor add coffeescript