Présentation du framework Meteor.JS

Mohamed Hedi Khefacha

Plan

Introduction

Meteor, c'est quoi?

Javascript partout: Client - Serveur

API Isomorphique

Full stack

Le web en temps réel

10 raisons pour lesquelles la réponse devrait être Meteor

Compensation de latence

Ecosystème

Installation

Conclusion

Commandes

Qui est derrière Meteor ?

Introduction

Meteor est un Framework JavaScript open source basé sur NodeJS. Il se présente comme un Framework qui gére à la fois le frontend et le backend.

==> Donc il est un framework javascript Full Stack qui permet de construire des applications en temps réel.

Qui est derrière Meteor ?

Groupe Meteor, San Francisco USA

La premier version stable 1.0 : 28 octobre 2014

La deuxième version stable 1.1 : 31 mars 2015

6 Novembre 2014, plus de 4000 développeurs de 130 villes dans 40 pays utilisent Meteor.

Meteor, c'est quoi?

Un framework javascript basé sur NodeJS

Fait pour les SPA (Single Page Application)

API Isomorphique

Javascript partout : client - serveur

Full Stack

Collection des packages et librairies

....

Javascript partout: Client - Serveur

On a toujours tendance à séparer le code côté client du code côté serveur. Cette séparation s'est faite naturellement à cause des différences entre les langages de programmation utilisés. D'un côté on a le frontend sur lequel on va utiliser le langage JavaScript et de l'autre côté le serveur avec différents langages (Ruby, Python, PHP...).

L'arrivée de NodeJS a changé les choses, on est maintenant capable d'utiliser le même langage à la fois pour le frontend et le backend : le JavaScript.

Le but de meteor JS est d'offrir un code qui est à la fois capable de gérer la partie côté serveur et la partie côté client.

API Isomorphique

Client

Serveur

BDD

HTML

CSS

Javascript

Python

PHP

Node JS

SQL

XML

JSON

1 API

Objectif: Ecrire le code qu'une seule fois

Code isomorphe

Navigateurs & Mobile

Meteor permet de créer des applications multiplateformes. Des applications web pour les navigateurs et des applications natives hybrides pour iOS et Android. Donc, il est possible d'utiliser des librairies pour partager des fonctionnalités et l’interface utilisateur reste à optimiser pour chaque plateforme.

Code

Web

Cordova

Phantom

On parle de JavaScript isomorphique, par exemple la méthode Meteor.startup qui permet d’exécuter du code au démarrage du client ou du serveur.

- Du côté serveur la fonction est exécutée dès que le processus Node.js est lancé.

- Du côté client la fonction est exécutée dès que le DOM est prêt à être modifié.

Il s'agit donc d'une méthode disponible sur les deux environnement pour le même usage.

Exécution du code au démarrage et implémentation de manière différente sur le client et sur le serveur.

Code isomorphe

Exemple: Meteor.startup

Full stack

C’est du javascript partout, du client au serveur. Le code peut donc être partagé pour les deux environnements d’exécution.

Le framework intègre aussi une base de données MongoDB (qu’il faudra déployer soi-même en production).

Côté client, nous retrouvons son homologue MiniMongo. C’est ici que seront temporairement stockées les données en attente de synchronisation. Ce dispositif améliore le temps de réaction de l’application.

Le web en temps réel

Les actions d’un utilisateur sont instantanément visibles dans son interface et les actions effectuées par les autres utilisateurs sont visibles le temps de traverser le web jusqu’à lui. Les applications collaboratives ne devraient plus trop vous poser de problème

1 - Action de l’utilisateur modifiant le cache local

2 - Mise à jour de l’interface client

3 - Envoie de la requête vers le serveur

4 - Vérification des données et enregistrement dans la BDD

5 - Renvoie du résultat vers le cache client

6 - Mise à jour de l’interface client

Cache

Base de données

Client

Serveur

Le web en temps réel

Sails.JS , Geddy.JS, Towar.JS, Total.JS , ...

Très petite communauté

Manque de ressources

Express.js

Très lèger

Développeur doit faire beaucoup de travail lui-même

Difficile a maintenir

Les frameworks NodeJS

Meteor.js

Facile à apprendre

Bonne documentation

Grande communauté passionnée

Beaucoup de ressources

Points forts

Du bouton « actualiser » au rafraîchissement automatique

Minification automatique de CSS et JS

C'est fini avec l'include de JS et CSS manuel

Temps réel par defaut

Bien documenté : documentation officielle - chaine youtube officielle - stackoverflow ...

10 raisons pour lesquelles la réponse devrait être

Meteor

1. Template

Meteor propose un système de templates (ou vues), afin de séparer le code JavaScript (la logique applicative), du code HTML (la présentation). Les templates sont en effet compilés vers une structure abstraite basée sur JavaScript et envoyée au client. Cette structure est utilisée pour mettre à jour l'interface utilisateur en temps réel à chaque fois que l'utilisateur modifie les données localement ou que le serveur lui envoie les modifications d'autres utilisateurs. Meteor utilise la syntaxe de Spacebars. C'est du html simple enrichi avec trois choses en plus qui lui sont spécifiques:

Inclusions : {{> templateName}}

Expressions : {{title}}

Block helpers : {{#each}} ... {{/each}}

<div class="player {{selected}}"> <span class="name">{{ name }}</span> <span class="score">{{ score }}</span> </div>

Un template est défini entre les balises <template name="tplName"> et </template>. L'attribut name est obligatoire.

<head>
  <title>Leaderboard</title>
  <meta name="viewport" content="width=device-width, user-scalable=no">
</head>

<body>
  <div id="outer">
    {{> leaderboard}}
  </div>
</body>

<template name="leaderboard">
  <div class="leaderboard">
    {{#each players}}
      {{> player}}
    {{/each}}
  </div>

  {{#if selected_name}}
  <div class="details">
    <div class="name">{{selected_name}}</div>
    <input type="button" class="inc" value="Give 5 points" />
  </div>
  {{else}}
  <div class="none">Click a player to select</div>
  {{/if}}
</template>

<template name="player">
  <div class="player {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
  </div>
</template>

10 raisons pour lesquelles la réponse devrait être

Meteor

10 raisons pour lesquelles la réponse devrait être

Meteor

2. Débogage

La communauté Meteor a créé un outil de débogage.

En outre, Meteor a un support complet de débogage publié pour le populaire IDE webStorm

4. Base de données

Meteor supporte MongoDB nativement et prochainement MYSQL.

3. Routage

Les objectifs étaient les suivants :

Fontionner à la fois sur le serveur et sur le client (API JavaScript isomorphique)
S'intégrer avec le système de templates, par exemple pour rendre automatiquement un template pour une route donnée

==> Une solution puissante, iron:routeur est un package de routage qui a été créé pour les applications Meteor.

7. Sécurité

Meteor a intégré la sécurité contre de nombreuses préoccupations avec l'utilisation de package: Insecure

10 raisons pour lesquelles la réponse devrait être

Meteor

5. Paquets

Toutes les fonctionnalités de Meteor sont implémentés dans des packages. Par exemple l'objetSession est implémenté dans un package session. Les packages peuvent dépendre d'autres packages, exemple le package session dépend du package tracker.

6. Test

Meteor est livré avec built-in unit et integration testing.

En plus des répertoires client, server, public, et private, il existe un cinquième et dernier répertoire au fonctionnement particulier : tests. Comme son nom l'indique ce répertoire contient le code dédié au tests de l'application.

8. Mobile

Meteor est multiplateformes, c’est-à-dire que vous pouvez développer des applications Web, comme des applications mobiles, pour Android ou iOS. C’est le même langage (JavaScript) qui s’adapte à toutes les plateformes. Il suffit pour cela, dans votre terminal de rentrer les commandes suivantes :

Pour voir les plateformes sur lesquelles est disponible votre application : meteor list-platforms

Pour ajouter une plateforme (remplacez <plateforme> par ios ou android): add-platform <plateforme>

Pour lancer votre application sur une plateforme spécifique (remplacez <plateforme> par ios ou android ou browser): meteor run <plateforme>

Pour supprimer une plateforme de votre application (remplacez <plateforme> par ios ou android ou browser) : meteor remove-plateform <plateforme>

10 raisons pour lesquelles la réponse devrait être

Meteor

9. Session

La session est un moyen idéal pour stocker de données réactive.

Elle est disponible partout sur le client en tant que l'objet Session. Pour insérer une valeur de sessions, vous pouvez appeler : Session.set();

10. Déploiement

Déployer sur Meteor est simple. Ouvrez juste votre terminal allez dans le répertoire de votre application Meteor et tapez : meteor deploy myapp.meteor.com.

Si tout va bien après quelques secondes vous serez capable d'accéder à votre application à l'adresse http://myapp.meteor.com

Pour plus d'informations , lien: http://guide.meteor.com/deployment.html

10 raisons pour lesquelles la réponse devrait être

Meteor

6 principes sur lesquels Meteor s'articule

Un seul language

Base de données partout

Simplicité

Productivité

Full Stack

Intégration à

l'écosystème

Compensation de latence

Lorsqu'une donnée est modifiée, le client va simuler instantanément la modification effectuée dans la base de données avant qu'elle soit renvoyé par le serveur.

Considérez la séquence suivante d’événements:

+0ms: L'utilisateur clique sur un bouton et le navigateur renvoie un appel de Méthode.
+200ms: Le serveur fait des changements dans la base de données Mongo
+500ms: Le client reçoit ces changements, met à jour l'interface utilisateur.

==> Si Meteor opérait de cette façon, il y aurait alors un petit décalage entre la réalisation de ces actions et l'affichage des résultats. Nous ne pouvons nous le permettre dans une application web moderne !

Sans compensation de latence

Compensation de latence

Pour éviter ce problème, Meteor introduit un concept appelé Compensation de latence. Quand nous avons définit notre Méthode POST, nous l'avons placée à l'intérieur d'un fichier dans le répertoire COLLECTIONS. Ceci signifie qu'elle est disponible pour le serveur et le client – et elle s'exécutera sur les deux en même temps !

Le client envoie l'appel au serveur, mais simule également simultanément l'action de la méthode sur ses collections côté client. Notre workflow devient :

+0ms: L'utilisateur clique sur un bouton et le navigateur renvoie un appel de Méthode.
+0ms: Le client simule l'action de l'appel de Méthode sur les collections côté client et met à jour l'interface.
+200ms: Le serveur fait les changements dans la base de données Mongo.
+500ms: Le client reçoit ces changements et annule ses changements simulés, en les remplaçant par les changements du serveur (qui sont généralement les mêmes).

==> Le résultat pour l'utilisateur est de voir les changements instantanément.

Compensation de latence

Avec la compensation de latence

Compensation de latence

- Livequery: transforme MongoBD pour la base de données côté serveur en base de données en temps réel puis MiniMongo qui réplique les données côté client.

- CLI: meteor est un Command Line Interface, ce qui vous permet de créer, éditer et déployer vos applications par le biais d’un terminal.

- Atmosphere qui est une liste de packages

- Built system: meteor inclut un Built system qui n’inclut pas seulement le client et le navigateur, mais aussi les mobiles.

- DDP: Distributed Data Protocol, protocole de distribution de données, c’est le protocole qui va lier le client et le serveur. Il va transférer les données en temps réel en allégeant les affichages. Ce protocole, originairement développé pour Meteor, fonctionne avec n’importe quelle base de données, n’importe quel framework, n’importe quel langage, et avec tout serveur, client et support mobile.

Ecosystème

Installation

Meteor est actuellement supporté sur :

- Mac: OS X 10.7 et versions suivantes

- Windows: Windows 7 / Windows 8.1 / Windows 10 / Windows Server 2008 / Windows Server 2012

- Linux

- Pour les utilisateurs de Windows:

==> Téléchargez et exécutez le programme d’installation officiel de Meteor.

- Pour les utilisateurs de Mac OS X ou de Linux, entrez cette commande via votre Terminal :

Pour créer un projet ouvrez votre Terminal, placez-vous dans le dossier où se trouvera votre projet (Documents, Bureau, un sous-dossier,...), et entrez la commande suivante :

Le dossier de votre application est maintenant créé, à l’intérieur duquel 2 dossiers Client et server, dossier client contient: main.html / main.css / main.js

Un autre dossier a aussi été créé. Il s’agit du dossier caché .meteor.

Créer un projet

Travailler sur le projet

Pour démarrer votre application, il vous suffira de vous placer dans le dossier de votre projet (dans le Terminal), et de lancer la commande suivante :

Au bout de quelques secondes, vous obtenez ce résultat :

Vous pouvez maintenant ouvrir votre navigateur à l’adresse http://localhost:3000/

Structure de projet

Client: ce dossier ne sera pas chargé sur le serveur. Tous les fichiers CSS seront compactés en un seul et vous n’aurez pas à déclarer dans chaque fichier HTML quel fichier CSS à importer. Identifiez les classes de vos éléments HTML, créez les classes CSS, et c’est tout. Meteor se chargera de mettre en application le style.

Server: ce dossier ne sera pas chargé sur le client. Vous pourrez mettre ici le code qui ne devra pas être desservi au client, tels que les mots de passe ou le système d’authentification.

Public: vous pouvez mettre ici les ressources (images, favicons, sons …) qui seront utilisées par le client.

Private: les fichiers de ce répertoire seront chargés par le serveur. Vous pourrez y mettre tous les fichiers

« sensibles » de votre application, qui ne seront pas accessibles de l’extérieur.

Client/comptability: mettez ici vos fichiers JS qui comportent vos variables globales, celles qui seront utilisées dans toute votre application. Ces fichiers seront évidemment exécutés côté client.

Tests: ce dossier ne sera pas chargé lors de la mise en production. Il sert pour vos tests en local.

Helpers

Les helpers sont des fonctions appeler dans une vue afin d'effectuer diverses actions. Il y a deux types de helpers:

- Les helpers propres à une vue

Pour définir les helpers attachés à une vue en particulier, la syntaxe est la suivante :

- Les helpers globaux

Leur utilisation à l'intérieur des templates ne change pas et ils peuvent être appelés dans tous les templates. En revanche leur déclaration est un peu différente. Leur emplacement dans l'application n'est pas importante pour Meteor, il est recommandé de les regrouper dans un seul fichier: par exemple /client/config/Helpers.js.

Events

Dans le côté client de l'application, vous ne pouvez pas ajouter du JavaScript donc les événements ajoutés de manière classique ne fonctionneront pas. Mais pas de panique! Meteor vous offre une manière encore plus pratique pour les intégrer:

/client/views/application/post.js

Donc résultat dans le template "post", ajout d'un événement sur tous les objets du DOM ayant "post" comme classe

Commandes

Meteor, c’est 7817 Packages, 446 000 installations, 137 évènements à venir, 28696 Favoris GitHub, 15853 questions sur Stack Overflow (et ces chiffres ont sûrement déjà changé).

Meteor, c’est un développement intuitif, qui vous permet d’apprendre très vite, et avec beaucoup plus de facilités qu’avec le développement « traditionnel ».

Conclusion

Merci

Meteor JS

By Mohamed Hedi KHEFACHA

Meteor JS

Framework javascript basé sur NodeJS pour les sites de type Single Page

1,135

Mohamed Hedi KHEFACHA

Développeur Front End

- Les helpers propres à une vue

- Les helpers globaux

Meteor JS

More from Mohamed Hedi KHEFACHA