Introduction à Meteor

Posted on:11 avril 2017 at 02:00

Meteor est framework Open Source basé sur NodeJS qui permet la création d’application web ou encore de site internet. Pourquoi donc je vous parle de lui aujourd’hui ? Car Meteor propose une nouvelle façon de gérer la communication entre le client et le serveur. De plus, chose assez rare, il permet de gérer autant le frontend (la partie visible du site) que le backend (les mécaniques de celui-ci) avec un seul code Javascript.

Car oui, étant basé sur NodeJS, le Javascript est de vigueur ! Nous n’allons pas voir énormément de code dans cet article, mais surtout quels sont les atouts de Meteor face à une architecture et framework plus standard comme ASP.NET Core, Ruby ou encore PHP.

La philosophie de Meteor

Avant d’étudier le code de démarrage proposé par Meteor dans un prochain article, pourquoi donc autant de mouvement et d’excitation au tour de cette technologie ? Au début j’étais un peu réservé je vous avoue. Un ami m’en avait parlé mais je ne m’étais pas interessé plus que cela. Puis, après quelques semaines / mois j’en ai de nouveau entendu parler. Je me suis donc dit, pourquoi pas après tout ?

Ce que j’ai vu m’a agréablement surpris. Meteor change considérablement la façon de voir les choses, en général nous avons tendance à bien distinguer le backend et le frontend de notre site internet, l’un en ASP.NET Core ou PHP par exemple et l’autre en HTML/CSS/Javascript et Ajax. Cela demande donc de faire le lien entre ses deux aspects de notre site internet. Avec Meteor c’est très différent, les deux sont comme confondu, pas entièrement, mais beaucoup plus que la plupart des autres technologies. NodeJS avait déjà entamé cette philosophie, avec du Javascript exécutable autant sur le serveur que sur le client, mais Meteor passe à l’étape au-dessus.

Le gros point fort de Meteor est la compensation de la latence, cela permet d’avoir une interface très réactive : aucune action n’est blocante, l’utilisateur ne sera quasiment jamais gelé à attendre qu’une action s’exécute et la partie client prévoit en avance les différents cas de figures afin de répondre le plus rapidement possible à la demande de l’utilisateur.

De plus, il est très, très facile de faire une application collaborative, Meteor utilise MongoDB comme base de données par défaut (nous en reparlerons dans le futur), avec un système de collection, une modification effectuer par un utilisateur, comme l’ajout d’un rendez-vous dans une liste par exemple, sera automatiquement et quasiment instantanément communiqués aux autres utilisateurs présents sur la page, sans avoir besoin de la rechargeret SURTOUT sans que le développeur, c’est-à-dire nous, ayons quelque chose de particulier à faire (Allez, 1-2 lignes de code à tout casser !).

Je comprends que cela peut vous paraître abstrait pour le moment, et c’est normal, mais nous en reparlerons par la suite lorsque nous étudierons le code d’exemple proposé par Meteor, qui nous permettra d’aborder quelques concepts clefs.

La norme Javascript ES6

ES6 ? C’est quoi encore ça ? Très bonne question ! ES6 est une nouvelle norme de Javascript, plus récente. Alors je vous le dis, personnellement j’ai encore du mal à m’habitué, mais je trouve important d’en parler rapidement ici, je ferais peut-être un article entier consacré à cette nouvelle norme dans le futur (maintenant disponible ici !).

Quels sont les atouts du ES6 ? Le plus intéressant, hérité de TypeScript, est je pense le support de la programmation orienté objet ! Et oui vous avez bien entendu, la POO est maintenant gérée nativement par JavaScript. Et je trouve que c’est un grand pas en avant. Bon, ne trainons pas, voilà une petite liste des nouvelles possibilités offertes par ce nouveau standard :

Et encore, ceci n’est qu’une petite liste, qui n’est absolument pas exhaustive. Comme vous pouvez donc le voir, ES6 change la donne et la façon d’utiliser Javascript. Je ne vais pas m’attarder plus que cela dans cet article, je peux vous conseiller celui-ci . Mais une recherche sur Google / Bing et vous trouverez, je n’en doute pas, votre bonheur !

Le seul point que je vais aborder rapidement et le remplacement d’une “expression de fonction” en “fonction fléchée”. Je vous rassure, derrière ce nom barbare rien d’extraordinaire, cela permet de simplement réduire la syntaxe, voilà l’exemple tiré de MND :

var a = [
"We're up all night 'til the sun",
"We're up all night to get some",
"We're up all night for good fun",
"We're up all night to get lucky"
];

// Sans la syntaxe des fonctions fléchées
var a2 = a.map(function(s){ return s.length });
// [31, 30, 31, 31]

// Avec, on a quelque chose de plus concis
var a3 = a.map( s => s.length );
// [31, 30, 31, 31]

Nous reverrons cette syntaxe par la suite dans notre projet Meteor, mais function(s) devient donc maintenant s =>. Ne vous étonnez pas si var devient let dans les prochains exemples de code que nous étudierons en Javascript, let déclare de la même une façon une variable mais elle est détruite quand le bloc en cours (la fonction, boucle, etc…) se termine. Comme une variable d’une fonction dans un language bas niveau, le var pouvant donc maintenant être considéré comme une sorte de variable globale.

Installation de Meteor

C’est un point que j’aime beaucoup par rapport au PHP par exemple, c’est la facilité d’installation de Meteor, NodeJS ou encore ASP.NET Core (NuGet). Avec de simples commandes nous pouvons installer directement les différentes dépendances pour notre projet, et c’est magique ! Bon, ne nous attardons pas trop, l’installation est extrêmement simple.

NodeJS

Si vous n’avez pas déjà NodeJS sur votre machine, je vous invite à vous rendre à cette adresse et de télécharger la version LTS (la plus stable). Si vous avez déjà NodeJS sur votre machine par l’intermédiaire de Visual Studio je vous invite quand même, sauf avec Visual Studioi 2017, d’installer la version disponible sur le site internet. Car encore récemment, avec Visual Studio 2015 et inférieur la version installée de Node était assez ancienne et risque donc ne pas être compatible avec Meteor.

L’installateur va donc faire son travail, une fois fini, je vous invite à ouvrir un invité de commande en administrateur et de rentrée la commande suivante : npm install npm@latest -g. Cela aura pour effet de mettre à niveau le gestionnaire de packet (pour l’installation de module dans le futur) de NodeJS.

Meteor

Bonne nouvelle ! Vous avez fait le plus dur, l’installation de meteor est très, très simple que ça soit sur Windows ou Linux. Sur le site officiel, plus précisément la page de téléchargement, accessible ici, il ne vous reste plus qu’à :

Vous rencontrerez, sur Windows, une étape qui vous demande la création d’un compte si vous le souhaitez. Ceci n’est absolument pas obligatoire. Si vous en faites un, vous pourrez mettre en ligne votre application gratuitement, avec une simple commande sur les serveurs de Meteor, son adresse se terminera par .meteor.com. Ceci peut être très pratique pour partager rapidement et facilement votre projet avec des tiers. C’est à vous de voir !

C’est tout pour cet article ! Oui je sais, vous attendez avec impatience la suite et surtout du code, dans cette prochaine partie nous allons étudier l’architecture de Meteor ainsi que son code d’exemple afin d’abordée différente particularité du framework. Je vous invite donc à lire la suite via cet article ! (Pas encore disponible).