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


    1. HTTP Request
    2. Process server-side
    3. HTTP Response
    4. 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


    Et
    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

    Déploiement


    Pour déployer son application sur http://lft.meteor.com

     meteor deploy lft


    Si vous avez plus simple avec PHP ;-)
    je suis preneur

    Plus d'info ici



    Et maintenant la demo

    http://q42.com/ (site web classique)
    http://www.gander.io/ (client mail mobile)
    http://www.pat.io/  (sondage)
    http://weshoulddo.it/ (friend event)
    http://weekdayfiller.com/ (weblog: metafilter + reddit)
    http://cool-counter.meteor.com/ (compteur de presence)

    http://pegleg.it (recherche de film)

    http://anonkun.com/  (livre interactif)

    http://subtitles.fiddleware.com/ (creation de sous-titre pour video)
    http://synct.meteor.com/ (control du navigateur des clients)
    http://my.sket.sh (dessin)
    http://demo.telesc.pe (reddit-like board)
    https://pushpinplanner.com/ (plannification)
    http://aufond.me/  (une timeline)
    http://eraze.meteor.com/ (chatroom privé et temporaire)
    http://assistant.io/ (plannification de réunion)
    http://qmental.org/ (learning activities)
    ...

    Bonne découverte


    meteorjs

    By Retour d'expérience MeteorJS

    meteorjs

    Introduction to MeteorJS, the future of the web application development

    • 2,408
    Loading comments...

    More from Retour d'expérience MeteorJS