meteorjs

Le futur du web passe par Javascript

Twitter: @Rebolon

GitHub: http://github.com/Rebolon

Pourquoi Meteor ?

MA PROBLÉMATIQUE

Je cherche une maison
Je suis exigeant (ou pénible)
Leboncoin ne propose pas d'alerte
Chercher sur leboncoin prend du temps

Donc J'ai cherché

Qt, ruby, python

...

Mais c'est quoi meteor ?

LES origineS Du Web

(enfin, pas tout à fait quand même)

TECHNOS

Server-side : CGI, ASP, PHP, JEE, ...
Client-side : HTML, Javascript, CSS, ...

Principe

HTTP Request
Process server-side
HTTP Response
Process client-side (dom rendering, js processing)

AvantageS

Ca marche, et plutôt bien
Traitement côté serveur = charge client légère

Inconvénients

La génération de l'affichage se fait côté serveur
1 requête = 1 réponse avec tout dedans (enfin presque)
La réponse est difficilement adaptée à chaque type de client (poste fixe / smartphone / tablette / ...)

Et ça fait 15 ans qu'on fonctionne comme ça

(enfin presque)

Légère évolution

(avec le fameux web 2.0)

XML Http Request

Wouahou, j'ai trouvé un truc dans le navigateur, on va l'appeler WEB 2.0 !

Le client embarque une couche JS pour communiquer avec le serveur (parce qu'en natif, l'AJAX, c'est pénible)
On transfère moins de données sur le réseau
On fait beaucoup plus de requêtes
On fait de plus en plus de JS

Problèmes

Certains renvoie du HTML [no comment]
Pas de standard sur la façon de structurer son appli JS

Résultats

Problème de maintenances
Pas de test (n'oubliez pas CasperJs quand même)
Code difficilement réutilisable

Et,

Ca donne pas envie

Bienvenue en 2013

Javascript Frameworks

Client-side

Angular
Ember
...

Server-side

Derby
SocketStream
TowerJS
Meteor
...

Et il est où JQuery ?

chut, Jquery c'est pas du Js !

voyez le comme un PHP Pear ou un ZF1

Principes

Le server envoie le framework au client
Le client exécute l'application
L'application démarre les listeners et construit l'affichage
L'application va faire des appels serveur
Le serveur ne renvoi que des données (JSON)
L'application reconstruit les templates requis

Avantages

L'application est plus structurée (arbo de fichier, gestion des événements...)
L'application est capable de s'adapter au client simplement (pc / smartphone / tablette / ...)
Bande passante requise très légère
L'application Js peut être cachée par le navigateur (le serveur indique au démarrage si une nouvelle version est disponible via un manifest)
Potentiellement les données peuvent être cachées
Réduit les problèmes de latence et de ré-exécution du JS sur le mobile

Inconvénients

Applications événementielles qui change donc la façon de travailler d'une équipe de développeur
Le poste client travaille beaucoup (processeur et mémoire)

Et Puis

Faire faire du JS à un dèv ça donne ça :

Mais alors, Pourquoi MeteorJS ?

Meteor

Framework client et serveur
API cohérente entre client et serveur
Basé sur NodeJS
Linux, Mac et Windows (enfin presque)
IE7+, FF, Chrome, Opera (mobile), mais mieux vaut utiliser les dernières versions
Fournit de nombreux packages (jquery, bootstrap, accounts, backbone, amplify...)
Industrialisé (déploiement, packaging, package repository...)
Et SIMPLE

Meteor

Mais

Toujours en beta (0.6.4)
Très jeune (moins de 18 mois d'existence)
Uniquement MongoDb en natif (Meteor-Streams résoud ce point)

Meteor

Mais

C'est vraiment cool
Ça fonctionne
Développement très rapide (5 heures pour mon appli)
Code est très structuré
Communauté très active :

De plus en plus de conférence autour de MeteorJs (Berlin, Hambourg, Amsterdam, London, USA ...)
Nombreux projets : MySql, PostgreSql, AngularJs, LoadBalancer, Clustering, DataCache, Audit de code
Très bonne littérature sur le sujet

Meteor

Mais

Derrière Meteor se trouve une petite équipe américaine
Ils viennent presque tous du MIT
Certains sont enseignants au MIT ou dans d'autres campus
Levé de fonds en juillet 2012

Au final, c'est un peu comme Sensio avec Symfony, mais avec plus d'argent et une vrai Révolution en ligne de mire

Meteor

Ils ont un look vraiment à part ;-)

...

Concrètement

Je veux créer mon appli :

 meteor create myChatApp

Mais encore

je veux ajouter bootstrap :

 meteor add bootstrap

Et alors ?

Bon et bien allons-y !

Organisation du code

Au choix :

Tout dans un fichier js + méthode Meteor.isClient / isServer
Des répertoires séparés : client / server / public / autres

TempLATE Handlebar

<body>
  {{> error}}
  {{> list}}
</body>
<template name="error">
  {{getError}}
</template>
<template name="list">
  <h1>Votez pour un sujet</h1> {{loginButtons}}
  <ol id="listSubjects"> {{#each subjects}}
    <li>{{> subject}}</li>
  {{/each}}</ol>
  {{#unless subjects}} Aucun sujet en cours.{{/unless}}
</template>

HeLpers

 if (Meteor.isClient) {
  Template.error.helpers({
    getError: function () {
	return Session.get('error');
    }
  });
}

Réactivité

 
Session.set('error','Arrgh erreur interne inconnue');

test sur http://lft.meteor.com

Evenements

 Template.newSubject.events({
    'focus #fldNewSubject' : function funcCleanEror() {
	Session.set('error', '');
    },);

Evénements: focus, click ... + selector

Methods

 Meteor.methods({
	  rmSubject: function funcRmSubject(id) {
	    var user = Meteor.user(),
	        subject = Subjects.findOne({_id: id}),
		    ;

	    if (!isAdmin())
                return new Meteor.error(403, 'Suppression de sujet réservé aux admins.');
	    if (!subject)
                return new Meteor.error(403, 'Sujet non trouvé, suppression impossible');

	    return Subjects.remove(id);
	  },
}

Et ce code peut être commun au client et serveur : gain de temps pour le controle de vos formulaires

Latency Compensation

Bon c'est simple alors écoutez : ...

Test fonctionnel

Projet Laika

// installationsudo npm install -g laika
// nouvelle instance de MongoDb
mongod --smallfiles --noprealloc --nojournal
// installer phantomJssudo npm install -g phantomjs

Observatoire de log

Projet Observatory

 mrt add observatory

authentification

meteor add accounts-basemeteor add accounts-uimeteor add accounts-password

// et oumeteor add accounts-facebookmeteor add accounts-twitter
meteor add accounts-github
meteor add accounts-google
meteor add accounts-meetup
meteor add accounts-weibo