Nous avons vu dans un article précédent comment créer un projet Meteor ainsi que son architecture. Aujourd’hui nous allons enfin avoir l’occasion de toucher à du code ! Plus précisément étudier le code du projet par défaut, sans pour autant, pour le moment, écrire le nôtre. C’est parti !

Le client

Bon, nous allons tout d’abord analyser le code du projet par défaut de Meteor, sans le modifier pour le moment. Pour tout savoir sur l’architecture d’un projet je vous invite à vous référer à cet article, qui traite du sujet ainsi qu’à l’installation et à l’utilisation de cette technologie. Bien, je vais commencer par les fichiers contenus dans le dossier client (hors main.css qui comme vous vous en doutez permet d’y mettre votre code CSS pour la mise en page de votre application, rien d’extraordinaire à ce niveau-là, car celui-ci est vide par défaut).

Le code HTML

Le HTML est la base de tout site internet, il permet de définir sa structure que ce soit pour l’utilisateur ou les robots des moteurs de recherche. Meteor ne fait donc pas exception à la règle, cependant il existe une petite différence qui ne dépaysera pas énormément les connaisseurs de ASP.NET.

Blaze est à Meteor ce que Razor est à ASP.NET. Si vous n’êtes pas familier avec cette technologie ne paniquez pas, je vais vous expliquer ça ! Donc, je vais parler de Blaze car c’est ici celui qui nous concerne pour Meteor, comment le qualifié ? Et bien voilà la réponse officielle : Meteor’s frontend rendering system, to build usable and maintainable user interfaces.

C’est en anglais et ce n’est peut-être pas très parlant ? Et bien pour faire simple, Blaze est un moteur de rendu qui va générer du HTML pour nous. Il va nous simplifier grandement la vie en évitant de faire de la duplication de code (copier-coller un peu partout) pour certains éléments, de mettre en place des conditions, que ce soit des if, each par exemple. Le tout de façon quasiment transparent et très simplement. Voilà donc le code que vous devez avoir dans votre fichier main.html et si vous êtes familier à la syntaxe du HTML, vous devez vous dire que quelque chose cloche !

Welcome to Meteor!

Mais c’est quoi cette balise template ? Et c’est quoi c’est {{ }} ? Mais ou va le monde ?

Tel pourrait être votre réaction, mais ne vous inquiétez pas il n’y a absolument rien de compliquer ici !

Template

La balise <template> est propre à Blaze et donc Meteor, celle-ci possède un nom qui lui sert d’identifiant pour le code JavaScript ou pour être affiché par la suite. Cette balise ne s’affichera pas d’elle-même dans le HTML, cela signifie que son utilisation doit se faire en dehors du et du et que son contenu, le code sera gardé par Meteor dans un coin et non présent dans le HTML envoyer au client tant qu’on ne l’appellera pas via les Handlebars (que nous allons voir juste après).

Je précise que peu importe où se trouve votre balise <template>, il pourra être appelé de n’importe où par la suite. L’ordre n’a donc absolument pas d’importance (avant le , après, etc…).

Handlebars

Autre élément très important, car sans lui le système de template ne fonctionnerait pas, les Handlebars. Son utilisation se caractérise par les caractères suivants {{ }}. Cela fonctionne comme un <?php ?> en PHP ou encore un @{ } en ASP. C’est entre ses caractères que nous pourrons définir nos différentes instructions. Il en existe une multitude, mais voilà les plus importants :

• {{> nomDeVotreTemplate}} : Voilà donc comment afficher le code présent entre nos balises HTML Template, cette instruction, en remplaçant le nom qu’il convient par le nom d’un template permet de l’afficher. De plus, vous pouvez très bien mettre plusieurs fois une même instruction et donc inclure votre même code à différents endroits de votre site, que ce soit une autre ou une même page.
• {{#if valeur}} {{/if}} : Une condition sur une variable directement dans notre code HTML. Pour l’affichage par exemple d’un bouton “Administration” si une personne a les droits nécessaires.
• {{#if valeur}} si oui {{else}} sinon {{/if}} : dans la même veine que précédemment, sauf que cette fois nous avons ajouté un else. Le cas d’utilisation courant peut être par exemple pour afficher Connexion si l’utilisateur n’est pas connecté ou à l’inverse Déconnexion dans le cas contraire.
• {{#unless valeur}} {{/unless}} : l’inverse d’un if, fonctionne de la même manière mais, dans l’autre sens.
• {{ valeur }} : permets d’afficher le contenu d’une variable, rien de plus rien de moins.

Conclusion

Vous pouvez donc voir dans le code d’exemple par défaut d’un projet Meteor que Blaze est un élément important, qui est très amplement utilisé : par exemple {{counter}} affiche la valeur du compteur dans la phrase et {{> hello}} lui affiche cette phrase qui se trouve dans un template. Le reste est géré automatiquement, nous n’avons rien de plus à faire.

Le JavaScript

Cette fois au tour du JavaScript, c’est lui qui va nous permettre de gérer la logique de notre code ainsi que de faire l’intermédiaire avec notre serveur par la suite. Dans cet exemple, le code est contenu dans le fichier main.js. Je ne vais pas m’étendre sur les include en haut du fichier, nous verrons par la suite que nous n’en aurons pas réellement besoin. Intéressons-nous plus particulièrement au code qui suit.

Template.hello.onCreated(function helloOnCreated() { // counter starts at 0 this.counter = newReactiveVar(0); });

Commençons par le commencement, regarder bien le code suivant, avec ce que nous avons vu précédemment et le fonctionnement de Blaze vous devriez pouvoir voir le lien entre les deux.

Oui vous avez bien vu (ou pas, mais ce n’est pas grave je vous rassure), le code appelle la variable Template puis nous cherchons le template avec le nom hello. Jeter un petit coup d’œil au code HTML que nous avons vu précédemment et vous remarquerez que hello correspond bien au nom d’un de nos templates. Puis, suivi par la méthode onCreated qui sera appelé lors de la création du template par l’instruction Blaze {{> hello}} présente dans le HTML. Et c’est ici que nous créons et initialisation la variable counter qui sera agrémentée par la suite, lors d’un clic sur le bouton. Le type newReactiveVar permet simplement de la rendre accessible (la variable) via un get et set dans toutes les autres instances JavaScript de Template.hello qui suivront par la suite. Comme une variable dans une classe, en programmation orientée objet pour ceux qui sont habitués à ce concept.

Template.hello.helpers({ counter() { return Template.instance().counter.get(); } });

Dans le même genre voilà le helpers, le fonctionnement est identique que précédemment, la seule différence réside dans la méthode et son utilisation. Précédemment le onCreated était appelé lors de la création, ici le helpers lui permet de créer la variable counter pour pouvoir l’utiliser entre nos Handlebars dans <template name="hello"> {{counter}} </template> par exemple. En indiquant que cette variable a pour valeur la variable JavaScript créer dans onCreated. J’espère que cela est assez clair pour vous, si nous n’avions pas ce code, {{counter}} n’existerait pas dans Blaze et il n’afficherait rien. Et bonne nouvelle, quand notre variable JavaScript changera de valeur, le helpers s’occupera automatiquement de mettre à jour la variable Blaze et donc le rendu HTML.

Et enfin pour finir notre analyse au niveau du code JavaScript, il nous reste à voir comment détecter l’événement d’un clic sur le bouton et agrémenter la valeur de notre variable counter. Et c’est cette portion de code qui s’en occupe.

Template.hello.events({ ‘click button’(event, instance) { // increment the counter when button is clicked instance.counter.set(instance.counter.get() + 1); }
});

Cela ne devrait plus vous surprendre maintenant, comme précédemment Template.hello indique que nous travaillons encore sur ce template et events que c’est ici que nous devons définir les différents événements, qui se produiront dans le template, à écouter. Le code parle un peu de lui-même, click button indique que lors de la détection d’un clic sur un élément HTML <button> il faut exécuter le code ici présent, c’est-à-dire faire +1 sur notre variable counter. Le helpers mettra automatiquement à jour notre page web avec la nouvelle valeur.

Le serveur

Pour cette application d’exemple de Meteor, vous avez dû remarquer qu’il n’y a qu’un seul fichier, du nom de main.js dans le serveur et que celui-ci est un peu vide … Cela s’explique simplement par le fait qu’actuellement le projet fonctionne en ”instance”, le compteur dépend d’une instance, en local, chaque page à ça propre durée de vie et n’envoie aucune information particulière à notre serveur (comme du stockage de données par exemple). Le serveur possède donc une simple fonction Startup, qui permet de démarrer le nécessaire au niveau du serveur uniquement. Comme des codes d’API, la mise à jour d’une donnée, etc … Ici il n’est pas utilisé.

J’en profite pour rappeler encore une fois que le dossier serveur de notre projet Meteor ne peut contenir que, et seulement, du code JavaScript pour la logique et le fonctionnement de votre application. Pas de HTML ni de CSS.

Conclusion

Voilà donc votre premier fait d’armes sur Meteor, même si nous n’avons pour le moment pas encore modifié de code vous connaissez maintenant les grandes lignes de son fonctionnement. Autant de code pour si peu ? Oui peut être, il est possible de faire beaucoup plus court avec du JavaScript standard pour un rendu similaire. Mais vous découvrirez la vraie puissance de Meteor quand nous monterons en gamme.

Je ne peux que vous inviter à bidouiller par vous-même le projet par défaut, par exemple ajouter un autre bouton pour diminuer d’un la valeur du compteur ? Pour vous aider dans cette démarche sachez que le events permet de faire une sélection plus affinée par exemple 'click button#idDuBouton' ou même simplement 'click a.classeDunLien' pour un lien.