Créez une single-page app avec Node.js et Meteor

Meteor est un module de Node.js, permettant de mettre rapidement sur pied une application de type "single-page app". Découvrez comment utiliser ce framework et créer un mini-réseau social !

a marqué ce sujet comme résolu.
Auteur du sujet

Bonjour à tous,

J'ai commencé (il y a 2 heures) la rédaction d'un tutoriel dont l'intitulé est Créez une single-page app avec Node.js et Meteor.

J'aimerais obtenir un maximum de retour sur celui-ci, sur le fond ainsi que sur la forme, afin de proposer en validation un texte de qualité.

Si vous êtes intéressé, cliquez ci-dessous

Merci d'avance pour votre aide


Hello, si jamais il s'agit là du tutoriel que j'avais déjà rédigé en partie pour OC. Toutefois, j'ai effectué quelques modifications depuis, il n'est donc pas impossible que des coquilles se soient glissées dans ce cours.

Édité par anonyme

+2 -0

Cette réponse a aidé l’auteur du sujet

Juste une remarque pour l'intro :

s'accordent à dire que Node.js est pour le moins… rapide. Je ne vais pas vous inonder de chiffres ici, vous pouvez les trouver aisément sur Google.

Soit tu ne le dis pas, soit tu appuies tes dires. Mais clairement, dans les benchmarks que j'ai consultés nodejs traîne la patte.

Je le choisirais pour plein de raisons suivant le projet, mais si je veux vraiment de la performance, dans tous les benchmarks que j'ai vus nodejs est derrière. (cf. les benchmarks de techempower).

EDIT : Pour être plus constructif, voilà comment j'aurais tourné la chose :

NodeJS offre des performances tout à fait satisfaisantes tout en fournissant un écosystème très riche (ce qui est à la fois un avantage et un inconvénient, on en discutait dans un autre topic) à travers un nombre de modules impressionnant et un système de gestion de dépendances qui faisait cruellement défaut au monde du Javascript. De plus en plus de grands acteurs du web se tournent vers nodejs : Facebook (React), Dailymotion, AirBnB, … ce qui pousse d'autant plus d'utilisateurs à adopter de cette technologie.

Édité par Javier

Happiness is a warm puppy

+1 -0
Auteur du sujet

Salut! Déjà merci pour le retour. Effectivement, j'ai peut être pris un raccourci un peu violent. Il existe énormément de langages, si bien que évidemment, il en aura toujours de "meilleur" (même si, tu l'as dit, cela dépend du projet). Malgré tout, j'ai pu noter, également sur techempower, une bonne performance dans la catégorie "multiple queries" (Ce qui, je pense, est le plus important lorsqu'on parle de serveur Web), au niveau des réponses par secondes et de la latence. Bien sûr, ce n'est pas le plus efficace, mais il s'en sort franchement honorablement. La recherche que j'ai faite est ici. Peut être que je me suis trompé, auquel cas je m'en excuse sincérement, mais il me semble que Node.js n'est pas non plus "à la rame". Dans tous les cas, je dois effectivement modifier cette partie de l'intro, je pense que je l'enlèverai.

EDIT: J'avais laissé mon PC avant de finir la réponse, ce qui fait qu'elle est venue après la tienne, merci pour ta réponse ! Ta version sonne effectivement beaucoup mieux :)

Édité par anonyme

+0 -0
Auteur du sujet

Salut ! Comme promis sur OC, je suis en train de lire ton tutoriel et de noter mes remarques. Ce sont des remarques plutôt terre-à-terre parce que je ne connais pratiquement rien au développement web. J'avais été intrigué par Meteor à sa sortie, pour son côté "réactif", donc ça m'intéresse un peu ; cependant ça fait facilement 10 ans que je n'ai écrit une page web. Mais bon, comme ça tu as aussi le retour d'un néophyte.

Je n'ai pas encore tout lu. Dans l'ensemble c'est clair, concis et intéressant, parfois juste un peu léger. Est-ce que ça manque d'une application fil rouge ? D'un exemple plus conséquent/réaliste ? Je ne sais pas encore, je verrai ça dans la suite.

Chapitre 1

Vous devez avoir des doutes sur la sécurité de cette pratique, mais vous verrez dans le chapitre traitant de ce sujet que ce système est autant sûr que les autres.

Autant donner une intuition de pourquoi c'est sûr dès ce paragraphe.

Peut-être devrais-tu introduire un exemple d'application typique, ce qui te permettrait aussi d'expliquer certains des points que tu mentionnes.

Chapitre 2

C'est un peu insuffisant comme méthode d'installation. Comment faire pour désinstaller après ?

Chapitre 3

Je ne sais pas s'il est habituel de se servir de la ligne de commande pour les développeurs Node. Tu devrais peut-être rappeler que l'on peut tuer le processus avec ctrl-C.

Il y a quelques élements dont il faut tenir compte pour créer la structure d'une application Meteor.

Pas clair : où est cette "structure" ? Ton texte laisse croire qu'elle a étécréée par meteor create, mais ça n'est pas le cas. Si c'est si important, pourquoi Meteor ne crée-t-il pas ces répertoires automatiquement ?

Chapitre 4

Tu demandes de créer lib/Router.js sans rien mettre dedans, et immédiatement après tu nous fais créer une vue à un autre endroit. Peux-être peux-tu intervertir les deux instructions ?

Cette syntaxe bizarroïde ({{> yield}}) est une fonction utilisée uniquement par Iron-router; yield renvoie en réalité le contenu spécifique de la page appelée. Je reconnais que ceci peut paraître un peu étrange, mais cette notation est très utile, notamment pour ajouter du contenu dynamique, comme des informations issues d'une base de données. Je reviendrai sur cette notation dans le chapitre traitant des vues.

Ce passage n'est pas très bon. "Contenu spécifique de la page appelée", je ne sais pas ce que ça veut dire ici. La suite, "Je reconnais que ceci…" ne fait qu'embrouiller le lecteur.

Il s'agit ici en réalité d'un module : Blaze

Le "Il" n'est pas très clair non plus. Fusionne les deux ? Tu peux peut-être même dire que Blaze fournit un langage dédié (DSL) pour faire… quelque chose, je n'ai pas bien compris quoi.

Concernant la calculatrice : je pense que tu peux donner un petit peu plus d'explications. Déjà on ne comprend pas trop ce que tu demandes (et ce n'est peut-être pas la peine d'en faire un exercice), mais en plus on n'a pas encore vu les paramètres, il me semble. Tu peux reformuler les choses pour qu'on étudie un exemple, plutôt qu'un exercice, pour introduire le concept de paramètre.

Aussi, tu peux factoriser ton code. Pas avec un chemin style /:op/etc. mais au moins en ne définissant la grosse fonction interne qu'une seule fois et en lui rajoutant comme argument l'opérateur à utiliser. Je ne connais pas la syntaxe JavaScript pour faire ça.

Parce que cette route correspondra à n'importe quelle autre route contenant trois slashs

C'est une remarque intéressante, mais il m'a fallu un peu de temps pour comprendre ce que tu voulais dire. Un petit exemple ?

Chapitre 5

Pas de remarque particulière à part que la partie sur les évènements est un peu courte : de ce que je connais du développement web, c'est plutôt gros comme contrainte, non ?

+0 -0
Auteur du sujet

Cette réponse a aidé l’auteur du sujet

Bon, je n'ai pas de nouvelle de ta part, mais voici la suite. J'ai plusieurs questions dans les commentaires, les réponses m'intéressent et elles appellent peut-être une reformulation de ta part.

Dans l'ensemble, je trouve que c'est un bon cours : encore une fois je ne suis pas très intéressé par le domaine et pourtant j'arrive à suivre, et les idées mises en avant par Meteor me semblent bonnes. Tu as l'air d'hésiter entre deux façons de construire ton cours : d'un côté un aspect assez pratique (on développe une application et on introduit les notions au fur et à mesure, sans chercher à être exhaustif), de l'autre une approche plus "encyclopédique" (où tu te sens plutôt obligé de traiter certains aspects avant de passer à la suite). Je pense que la première approche est plus naturelle. Encore une fois, je t'encourage à insister sur un exemple fil rouge (comme un blog, avec des utilisateurs qui peuvent se connecter pour commenter), auquel cas tu peux changer le titre de la première partie "La théorie" (par exemple en "Un blog" ou en ce que tu veux) ; de toute façon il ne s'agit pas vraiment de "théorie" ici, plutôt d'une découverte découpée en différents thèmes.

Le cours est certainement validable en l'état actuel des choses (encore que ça n'est pas à moi de le dire), encore une fois c'est clair, pratique et intéressant. Je pense juste que tu peux rajouter/reformuler des choses par-ci par-là. J'espère que tu restes motivé, bonne continuation ! :)

Chapitre 6

Quand tu présentes (rapidement) MongoDB, je pense que tu devrais ajouter que c'est une base de données non-relationnelle. C'est plus important que de savoir si elle utilise SQL ou pas.

Si vous ne connaissez pas encore ce système, vous vous rendrez vite compte qu'il permet de faire des choses très intéressantes dans le traitement des données.

Cette phrase est un peu creuse, du coup. C'est peut-être le moment de parler du NoSQL ?

Attention toutefois : en l'état, notre application n'adopte pas encore ce fonctionnement. La preuve, tapez ce qui suit dans la console de votre navigateur :

Ces deux phrases devraient être à l'extérieur de la liste (elles font suite aux trois points évoqués, pas seulement au dernier).

La partie sur autopublish et insecure est très intéressante. Globalement, est-ce qu'il y a beaucoup de modules actifs par défaut qu'il faut absolument connaître quand tu développes ? Ça sera bien d'expliquer aux lecteurs comment tu contrôles cette liste, par la suite.

Dans la suite, tu vas vraisemblablement beaucoup utiliser MongoDB, et tu renvoies plusieurs fois tes lecteurs à la documentation. Le problème, c'est que je doute que beaucoup d'entre eux soient habitués à cette base de données. À mon avis tu risques de les perdre si tu n'en dis pas assez.

D'une manière générale, essayez de ne prendre que le strict minimum de la collection, quitte à faire plusieurs publications pour une seule collection !

Un peu vague. Est-ce une bonne pratique ? Une question de performances ?

Dans ce cas, la fonction anonyme qui se trouve dans la publication récupère ces arguments ! :)

Je pense que ça mérite un exemple, sauf si tu en donnes un plus loin.

L'option waitOn permet de dire à Meteor ce qu'on veut qu'il fasse avant d'exécuter la popriété data. Hé oui, car il faut bien être sûr que la souscription soit faite avant la requête dans la collection Posts. En effet, la souscription se faisant de manière asynchrone, il y aurait des chances pour que la requête se fasse avant la souscription. Si tel est le cas, la collection locale serait encore vide au moment de la requête ! ;)

Là je m'interroge personnellement : pourquoi Node ne propose-t-il pas une primitive qui permettrait de faire ça dans la fonction anonyme passée à ̀data directement ? D'ailleurs, Posts.find devine tout seul que c'est le résultat de ̀Meteor.subscribe qu'il doit récupérer ? Comment ça marche si tu fais plusieurs ̀subscribe ? Et si tu as déclaré plusieurs publications sur la même chaîne ?

C'est un bon chapitre, sinon.

Chapitre 7

Hé oui, le serveur permet de lever des exceptions, ce qui se révèle très pratique en termes de sécurité, mais cela permet également de rendre facilement notre application plus user-friendly ! 11

Il faut enlever le "11" à la fin.

Je suis un peu perdu par l'ordre des arguments des différentes fonctions. Quand tu throw une exception, le code est en premier et la raison ensuite, mais dans le callback fourni à insert c'est l'inverse ?

Chapitre "Les utilisateurs"

Hé bien en l'état, il s'agit bien d'une faille

Je ne suis pas vraiment d'accord. Il n'y a rien de surprenant à ce que le package ne devine pas "magiquement" ce que l'ona en tête. Le comportement est déjà assez pratique et intéressant comme ça. En revanche, quand tu dis

et uniques pour les champs username et email

Qu'est-ce qui exprime cette contrainte ?

Je ne comprends pas vraiment la sémantique de la méthode "loginWithPassword". Elle prend un nombre variable d'arguments, dont le dernier est une fonction, et elle réussit si les arguments fournis correspondent tous à au moins une ligne dans la base de données ? Qu'est-ce qui se passe s'il y a plusieurs lignes ?

Chapitre "Formulaires et validation"

Lorsque je vous ai dit que MongoDB permettait de s'affranchir de SQL

Il serait préférable de dire "permettait de s'affranchir du modèle relationnel". SQL n'est pas l'unique représentant du modèle relationnel.

Dans la suite, tu utilises plusieurs fois le mot "champ" au pluriel par erreur (par exemple "Sinon on ne touche pas au champs").

Pour information, un upsert est une opération un peu particulière: si le document existe, il sera mis à jour, sinon il sera créé. Jusqu'à maintenant, je n'ai personnellement pas encore eu à l'utiliser, mais il vaut mieux sécuriser cette opération directement, pour éviter d'avoir des mauvaises surprises.

J'ai peut-être raté quelque chose, mais ça a l'air vachement pratique pour un blog pourtant ?.. Je ne comprends pas trop le bloc de code

if(this.isInsert){ // Uniquement sur les "inserts"… return new Date; } else if(this.isUpsert){ // … ou sur les "upserts" return {$setOnInsert: new Date};

J'ai l'impression que c'est redondant : est-ce que le second test ne sert justement pas à factoriser le cas de l'insertion ET de l'update, auquel cas ton premier test est inutile, et je ne comprends pas le "setOnInsert" ?

Avec ce package, Meteor n'a pas à rougir devant Symfony :)

Manque un point.

Pour commencer ajouter simplement ceci dans un template:

Manque une espace avant les ":" (ça n'est pas la seule occurrence de l'erreur).

Vous pouvez sans autre placer ces hooks du côté client

?

Rien à signaler sur le dernier chapitre. Cependant, si tu reformules la partie "Théorie" en un exemple de développement d'un blog, il faudra sans doute intégrer le contenu de ce chapitre au reste. C'est toi qui vois.

+0 -0
Auteur du sujet

Salut !

Encore une fois merci ! J'ai pas eu trop le temps de plancher dessus (le travail à côté, toussa toussa…), mais je compte bien corriger les erreurs/suggestions qui ont été reportés. :)

Édité par anonyme

+0 -0

Oui c'est juste.

C'est d'autant plus vrai avec tout le scaffolding etc.

Le framework est implémenté en se servant de nodejs, tout comme flask est codé en python ou Vert.x repose sur Netty, ou Grails repose sur SpringMVC mais c'est un framework à part entière ouais. Tout à fait d'accord.

Happiness is a warm puppy

+0 -0
Auteur du sujet

Bonjour à tous !

La beta du tutoriel a été mise à jour.

Merci pour vos relectures


Voici la nouvelle version après une longue pause ^^ Tout n'est pas corrigé, mais celà me semble suffisant pour être validé. Dans tous les cas merci pour vos retours. :)

Édité par anonyme

+0 -0
Auteur du sujet

Je viens de survoler rapidement ton tutoriel, sur la forme ça a l'air d'être vraiment intéressant. J'essayerais d'effectuer une relecture complète d'ici quelques jours (j'ai un petit peu utilisé Meteor).

Bonne continuation ! :)

+0 -0
Auteur du sujet

Je viens de finir la première partie de ton cours. Voici quelques remarques/suggestions :

Le titre de ton tutoriel est :

Créez une single-page app avec Node.js et Meteor

Finalement, tu sembles parti pour rédiger un tutoriel plus complet (et tant mieux !). Du coup, il faudrait le changer. Enfin, ce n'est pas très important pour le moment. Toujours dans les détails, ton sous-titre :

Meteor est un framework de Node.js, permettant de mettre rapidement sur pied une application de type "single-page app". Découvrez comment utiliser ce framework et créer un mini-réseau social !

Il est plutôt long… Actuellement, il ne pourrait pas être affiché en intégralité dans les cases présentation des tutoriels.

Dans le chapitre I,

vous avez déjà roulé votre bosse

C'est plutôt boss, non ?

Sur l'ensemble du tutoriel :

Si vous devenez assez bons, vous pourriez donc vous même créer vos propres plugins.

Si vous êtes toujours motivé à suivre ce cours

Vous voilà prévenus !

Tu t'adresses parfois à un lecteur unique, et d'autres fois, à un groupe de lecteur. Il faudrait peut-être que tu choisisses quelle formule te convient le mieux.

C'est tout ce que j'ai à te dire sur ta première partie. Je te laisse juger de la pertinence de mes remarques. En tout cas, pour le moment, la lecture est fluide et agréable. Bravo ! :)

+0 -0
Auteur du sujet

Bonjour les agrumes !

La bêta tutoriel « Créez une single-page app avec Node.js et Meteor » a été mise à jour et coule sa pulpe à l'adresse suivante :

Merci d'avance pour vos commentaires.

Edit: De retour après une looooongue absence. Il me semble que les remarques ont été plutôt prises en compte. Si vous voyez que ce n'est pas le cas, ou qu'il y auraient encore des choses à corriger/revoir, n'hésitez pas !

Édité par anonyme

+0 -0

Salut !

Je reviens avec d'autres remarques :

Il était une fois Node.js…

moteur V8 de Google Chrome

de Chromium plutôt. Effectivement V8 est dans Chrome, mais c'est avant tout développé par Chromium.

elle divise

Node.js est masculin. C'est pas dans le dico évidemment, mais tout le monde l'utilise au masculin.

… il est aujourd'hui …

Meteor, quant à lui, englobe complétement Node.js, si bien que c'est Meteor qui est exécuté, et non l'exécutable de Node.js

Bof. Oui Meteor exécute node, mais ça ne change rien, Meteor n'est qu'un framework web. Ok Meteor a une CLI qui lance node, mais c'est un peu égal. On peut pas dire que ça "englobe" node. Pas plus qu'ember-cli ou npm. Et ça c'est que pour le développement hein. Si tu déploies une app Meteor, tu vas la lancer avec node, pas avec la CLI de Meteor.

Pourquoi utiliser Meteor ?

Database Everywhere : Vous avez bien lu. Dans Meteor, vous pouvez autant accéder à la base de données depuis le client que depuis le serveur.

  • aussi bien et pas autant (petite faute de français)
  • En fait c'est pas exactement ça que signifie "Database Everywhere". Ca signifie surtout deux choses : 1/ il y a une DB côté client et une DB côté serveur 2/ l'API est quasi identique de ces deux côtés

Meteor est un framework complétement open-source, de même que ses composants et ses nombreux plugins. Si vous devenez assez bons, vous pourriez donc vous même créer vos propres plugins.

Modules ou paquets, pas plugins.

Installation

Prérequis

De plus, Node.js doit être bien sûr installé et fonctionnel

Non. Meteor package sa propre version de node. Pas besoin d'installer node. Suffit d'installer Meteor.

Installation

J'en profite de cette section

Je profite de cette section (petite faute de français)

De l'organisation !

1
2
if(Meteor.isServer){
    console.log("Coucou serveur !");

Je te suggère d'adopter quelques bonnes pratiques utilisées par la majorité de la communauté JS. Par exemple, if ( et non if(. Aussi, indentation à deux espaces (idem pour l'HTML).

Après, si j'étais toi, je passerais aussi tout les codes du tuto en ES2015 vu que Meteor inclut de base un paquet nommé "ecmascript" qui transpile vers ES5 grâce à Babel.

J'ai pas lu plus que ça mais c'est un bon tuto, continue comme ça ! C'est cool de voir des resources Meteor en français !

PS :

Je viens de tomber sur

Le routeur

Jouons avec les routes !

Correction

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
function operation(params, op){
    var num1 = parseInt(params.num1);
    var num2 = parseInt(params.num2);
    if(op === '*'){
        return num1*num2;
    }
    else if(op === '+'){
        return num1+num2;
    }
    else if(op === '-'){
        return num1-num2;
    }
    else if(op === '/'){
        return num1/num2;
    }
}
  • parseInt(lala) n'est pas safe, toujours utiliser la base : parseInt(lala, 10).
  • un switch à la place du if/else if/else if/else if ? Tu pars du principe que le lecteur a les bases en JS, autant utiliser un switch ici. Ou un objet vu que les switch c'est moche.

Édité par cepus

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+0 -0
Auteur du sujet

Salut victor,

merci pour le retour, j'ai corrigé les erreurs que tu m'as signalé. Pour info, j'ai également mis tous les strings entre "" pour ce qui est du JavaScript. Avant certaines chaînes de caractères étaient entre guillemets simple, une mauvaise habitude dont j'essaie de me défaire.

Effectivement, il serait intéressant de passer les parties JavaScript du tutoriel en ES2015, je le ferai prochainement.

Édité par anonyme

+0 -0

Pour info, j'ai également mis tous les strings entre "" pour ce qui est du JavaScript. Avant certaines chaînes de caractères étaient entre guillemets simple, une mauvaise habitude dont j'essaie de me défaire.

Bah. Choisi un styleguide et applique-le, et installe un linter qui va vérifier que tu t'y tiens. Perso j'utilise le styleguide airbnb avec eslint et donc je n'ai que des simple quotes. Aussi, sur mon clavier, ' est accessible en une touche alors que "" demande maj+touche. Le choix est vite fait.

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte