Apprendre le Javascript et Node.js from scratch

Je viens de lire la discussion et je suis un peu d'accord avec SylvainPV sur le fait que cela me paraît ambitieux mais comme vous avez l'air bien pêchus alors...attention toutefois de ne pas perdre de vu le but fixer et ne pas aller jusqu'à une partie sur la mise en ligne du site comme Gnuum pensait l'avoir oublié.

Le plan m'apparait comme étant assez complet même si comme le pense ABCIWEB une petite partie d'interface avec le DOM sera surement nécessaire.
Il y aurait tellement à dire que cela pourrait faire l’objet d'<aside>, comme on dit en HTML5, voire des renvois sur des sources fiables, lorsque immanquablement il y en aura besoin.

ES5/ES6 je comprend que l'on cherche à privilégier ES6, c'est le futur, mais le passé n'est pas encore mort, et à mon avis loin s'en faut, les habitudes ont la vie dure même pour un débutant qui se sera repus de documentation "ES5'ienne", d'autant que dans les débutants il n'y a pas forcément que des jeunes en devenir et dans ce cas la synthétisation de l'écriture peut être un obstacle à la compréhension. Donc je la proposition de Gnuum de mettre les 2 versions, même si elle sera forcément couteuse, me paraît une bonne idée, l'ES6 devant quand même resté néanmoins prioritaire. (c'est presque un discours politique à le relecture)

Le code couleur, en gras, me parait également une bonne idée pour un repérage rapide et visuel.

Que dire de plus si ce n'est chapeau messieurs car il me semble que la tâche est importante :applo:

@SylvainPV
Je parlais d'un point de vue pratique :
Faudrait quand même faire en sorte que le lecteur puisse comprendre quelque chose quand il consultera d'autres exemples sur le web, sinon cela risque d'être déroutant et va aussi à l'encontre du principe de pouvoir se débrouiller par ses propres moyens... car j'ai un peu des doutes sur le fait qu'on trouvera de nombreux exemples ES6 même en 2017, sauf à chercher dans le coin des spécialistes mais les résultats seront plus restreints.

Je veux dire simplement qu'avant de tirer des enseignements pour les années avenir, il faudrait avant tout pouvoir progresser assez facilement dans la situation actuelle. Si cela n'est pas incompatible sans faire de distinctions ES5/ES6 tant mieux, sinon cela ne va-t-il pas amener à des exercices trop élitistes au regard du public visé ?

Je suis d'accord avec Sylvain.
J'irai même plus loin, c'est la dimension ES6 qui légitime que l'on choisisse JS plutôt que PHP JEE ...
Car on a besoin de créer des objets métier et de les mettre en persistance quand on travaille en back et pour faire ça, moi j'utilise des "class".
Sinon autant apprendre PHP Symphony et faire un peu d'Ajax en JavaScript 1995

@autran

Personne ne remet en cause l'intérêt d' ES6. La question que je me pose (et semble-t-il également NoSmoking) est simple : y-a-t'il suffisamment de ressources actuelles en ES6 (ou dans un proche futur) pour l'utiliser sans explications ?

J'ai peut-être un peu de mal à comprendre ton raisonnement, mais je ne crois pas qu'il réponde à cette question qui me semble importante d'un point de vue pratique ? Ou peut-être cette question n'est pas importante ?

Bonjour Alain,

Je ne me pose pas la question en termes de ressources mais d’objectifs.

Je pense que si on ne fait pas d’ES 6, on ne fera pas grand-chose avec node.js hors mis ce qui existe déjà sur DVP (sockets pur un chat, site pour un blog minimaliste ...). Ce qui est une bonne intro mais n’a pas vocation à amener l’apprenant vers un niveau professionnel.

Quant à l’apprenant, car je pense qu’il est au cœur de nos préoccupations, je le définirai comme la génération future. Et cette génération ne connaitra que ES6, même si elle saura (on leur aura raconté) qu’après le Cobol il y eu une forme embryonnaire d’ES que les anciens appelaient JavaScript.

Donc pour moi c’est stratégique, il faut faire de l’ES6. J’irai même plus loin, si on n’a pas les ressources pour faire de l’ES6 il faut reconsidérer le projet que l’on mène.

Si en revanche, tu souhaites juste que l’on rajoute une intro sur l’histoire de JS et ES pour être plus « académique ». Pourquoi-pas !
Dis-nous ce que tu vois par explications nécessaires.

@ABCIWEB: je ne comprends pas ta question "Y-a-t-il suffisamment de ressources pour utiliser ES6 sans explications" ; quand tu parles de ressources, tu parles de documentation, donc d'explications non ? Et est-ce que ce n'est pas le but de ces tutos/exercices de justement donner les explications requises à la compréhension ?

Du reste, le Mozilla Developer Network donne toute la doc nécessaire en français pour tout comprendre sur la norme ES6. Si le besoin s'en fait sentir, on peut glisser des liens vers le MDN pour certains bouts de code.

@NoSmoking: en quoi une écriture plus synthétique serait un obstacle à la compréhension ? On ne cherche pas à faire du golfing, seulement à se débarrasser d'horreurs en ES5 comme Array.prototype.slice.call(arguments)

Citation:

---

Envoyé par SylvainPV

@ABCIWEB: je ne comprends pas ta question "Y-a-t-il suffisamment de ressources pour utiliser ES6 sans explications" ; quand tu parles de ressources, tu parles de documentation, donc d'explications non ? Et est-ce que ce n'est pas le but de ces tutos/exercices de justement donner les explications requises à la compréhension ?

---

Je parlais de doc mais aussi d'exemples. Quand on cherche des infos, en complément de la doc on regarde souvent ce qu'ont fait les autres sur le web. Si donc on ne comprend pas les ressources actuellement disponibles parce que la plupart sont en ES5 ça limite fortement les ressources disponibles. Dans mon idée, il faudrait donc donner des explications quand la syntaxe ES6 est significativement différente de la ES5 pour permettre de faire le lien.

Cela dit, vous pourrez ajuster à l'usage en fonction des retours, peut-être je surévalue ce problème.

Je suis persuadé que plusieurs d'entre nous proposeront des exercices pour chaque thème.
Mais pour faire un article, il faudra regrouper quelques thèmes autour d'un exercice fédérateur.

J'ai donc lancé ici sur mon blog une initiative d'un exercice fédérateur qui pourrait donner naissance à un ou plusieurs articles.
Je lance ce chantier très en avance car je sais combien la rédaction d'un article peut être long.

La base des contributions sera toujours le volontariat. En l'absence de volontaire je mènerai seul ce chantier jusqu'à son terme sur mon blog. Néanmoins si la communauté jugeait que l’initiative méritait un article, je ne le rédigerais pas sous mon nom pour éviter le mélange des genres.

Je prends cette initiative dans la mesure ou Gnuum est déjà bien occupé à rédiger le plan et les cours. Ce qui lui revient au motif de sa compétence sur le langage ;)

En synthèse des commentaires ES5/ES6 (contrairement à ce que vous semblez penser vous êtes plutôt assez d'accord en fait), je propose d'écrire principalement en ES6 tout en donnant une version ES5 comparative quand on le juge nécessaire tant pour des raisons de compréhension de l'existant que du fonctionnement du langage (par exemple on peut imaginer un exercice sur les classes (je ne sais pas comment tu appelles ça Sylvain ;)) en mode "indispensable" et l'équivalent en mode ES5 pour mieux comprendre le fonctionnement sous-jacent du prototype en mode "recommandé"). Je propose également, dans un premier temps (ce qui n'empêche pas de le faire dans un second vu l'organisation choisie), de ne pas trop s'attarder sur des notions pas vraiment nécessaires (pour citer un exemple purement arbitraire: les proxys). Après, n'oublions pas que ES6 ne vient pas pour remplacer ES5 mais pour rajouter des fonctionnalités afin de simplifier l'utilisation qui est faite du langage notamment, par exemple, au niveau de l'asynchronicité. Ce qui veut dire que ce sont les pratiques qui sont en cours d'évolution et non des parties de langages qui deviennent obsolètes (du moins pas encore) et que donc la plupart du temps les 2 apparaîtront plus ou moins automatiquement.


Après réflexion et synthèse de vos commentaires sur le système de hiérarchisation des exercices, on ne voit pas bien l'italique donc je change en gras pour "recommandé" et gras souligné pour "indispensable".

Difficulté:
Facile:
ex-0
Intermédiaire:
ex-0
Difficile:
ex-0

Nécessité:
Indispensable:
ex-0
Récommandé:
ex-0
Optionnel:
ex-0

Exemples:
Exercice indispensable de difficulté intermédiaire:
ex-0
Exercice recommandé de difficulté facile:
ex-0
Exemple des exercices d'un thème:
L'asynchronicité ex-0 ex-1 ex-2 ex-3


En ce qui concerne la validation des exercices pour le moment, je propose de mettre les exercices en préparation dans une section spéciale sur le blog de Marc et donc de lui envoyer les exercices. Quand un article est envoyé en validation, on met un message sur cette discussion. Quand l'exercice est validé par tout le monde, on le met disponible.


Les priorités du moment pour ceux qui veulent participer:
- Faire un exercice intermédiaire juste avec des if/else (en parlant de l'algèbre de boole car ça a semblé manquer à TheSuperGeek).
- Faire un exercice intermédiaire juste avec du switch.
- Commencer des exercices pour les thèmes suivants.
- Faire une nouvelle version du plan à valider pour qu'on puisse la mettre sur une discussion spécifique qui servira d'endroit d'annonce pour la mise à disposition d'un nouvel exercice (pourquoi pas une discussion importante sur le forum JavaScript si vermine est d'accord).

Je m'occupe du plan à moins que quelqu'un veuille le faire!

Citation:

---

Mais pour faire un article, il faudra regrouper quelques thèmes autour d'un exercice fédérateur.

---

Ca peut être une super idée de faire un gros exercice synthèse de la section effectivement! Et ce n'est pas une mauvaise idée de le commencer rapidement même s'il faut rester cohérent avec les exercices qui seront fait dans la section. En revanche, je pense que la priorité reste d'alimenter TheSuperGeek en exercices le plus régulièrement possible. Cet exercice est plus une tâche de fond en parallèle.


Laissez vos avis sur ce qui vous dérange encore vraiment que l'on converge le plus rapidement possible.
En tout cas ça fait plaisir de voir que ça débat déjà rien que sur l'organisation et l'objectif. Je pense qu'on a moyen de s'apprendre pas mal de chose les uns les autres et de réfléchir sur les nouveaux usages du JavaScript via ce projet.

Thomas,

J'adopte toutes tes propositions.

Je continue en solo mon premier exercice éligible à un article.

J'ai créé ici le spot de validation des exos.

Salut,

Oui c'est une bonne synthèse.

J'ai posté un exercice, vous me direz si c'est le bon format/méthode.

Ok sur le principe. Evidemment quand je parle de coder en ES6, je ne demande pas d'expliquer tous les concepts avancés comme les Proxies, générateurs. Pour l'opérateur "class", je pense qu'il sera probablement trop utilisé pour qu'on puisse se permettre de l'omettre. Mais comme vous connaissez mes réticences, j'aimerais bien proposer une version alternative de l'exercice correspondant qui utilise les prototypes ;)

Retour au plan, je propose de remplacer la section "Le JavaScript ES6" par "Support des vieux navigateurs: transpilateur et polyfills" ; section qui pourrait avoir sa place en chapitre "Industrialisation des développements". C'est un domaine que je connais bien, pour l'avoir largement abordé dans mon bouquin, donc je peux m'en charger avec votre accord.

Citation:

---

Je continue en solo mon premier exercice éligible à un article.

J'ai créé ici le spot de validation des exos.

---

Citation:

---

J'ai posté un exercice, vous me direz si c'est le bon format/méthode.

---

Citation:

---

Retour au plan, je propose de remplacer la section "Le JavaScript ES6" par "Support des vieux navigateurs: transpilateur et polyfills" ; section qui pourrait avoir sa place en chapitre "Industrialisation des développements". C'est un domaine que je connais bien, pour l'avoir largement abordé dans mon bouquin, donc je peux m'en charger avec votre accord.

---

Merci à tous pour votre motivation! :)
Avec plaisir Sylvain pour les exos sur prototype et transpilateur et polyfills! Je vais ajouter ça au plan!

Citation:

---

Envoyé par SylvainPV

@NoSmoking: en quoi une écriture plus synthétique serait un obstacle à la compréhension ?

---

je dois admettre que lorsque je tombe sur des

Code:

---

1 2 3

var somme = (x,y) => x + y; var tab = [1,2,3,4,5].map((x) => x * x); var tabCaract = [...chaine];

---

mon esprit met un petit moment avant de lire

Code:

---

1 2 3 4 5 6 7

var somme = function (x,y){ return( x + y) } var tab = [1,2,3,4,5].map(function (x) { return x * x; }); var tabCaract = chaine.split('');

---

mais je te l'accorde cela passera avec l'age :mouarf: d'autant que les apport de l'ES6 sont quand même loin d'être négligeable.
En résumé pas de soucis en ce qui me concerne.

Concernant le projet, j'essaierais dans la mesure de la disponibilité de participer.

Citation:

---

Concernant le projet, j'essaierais dans la mesure de la disponibilité de participer.

---

:ccool:

La moindre contribution sera très utile au projet!

@NoSmoking: c'est parce que tu cherches à transposer le code en équivalent ES5 au lieu de l'assimiler tel quel. Un peu comme à la transition franc/euro où tout le monde convertissait en francs avant de dire "ah oui c'est cher" :mrgreen: Ça viendra avec le temps comme tu dis, mais pour ça il faut pratiquer.

C'est une tâche sur le long terme qui demandera beaucoup de temps, d'organisation et d'implication. Vu mon âge et ma santé (malade chronique), ce n'est pas pour moi. Je vous donne mes idées, faites en ce qu'il vous plaira.

Je trouve qu'il y a une grande différence entre faire des exercices pour node.js ou pour les navigateurs, en ES3-ES5 ou en ES2015. De plus, il existe déjà pléthore de bonnes sources : livres payants ou livres gratuits sur le web.

Lorsque je travaille en ES2015 : je pense en termes de block-scope, const, let, template, array, map, set, promesse, class. Avec les 5 premiers, on peut déjà imaginer beaucoup d'exercices.

Règles et programme (il n'est pas exclu que j'aie oublié une chose ou l'autre :aie:).

Premier niveau (facile) :

1) On travaille uniquement en ES2015 natif (navigateurs compatibles le 2016-02-14 : Chrome 49b+ et Firefox 46.0a+).
2) L'utilisation de 'use strict' est obligatoire.
3) Le code de chaque problème doit être isolé dans un bloc (block-scope) : { ... }
4) L'usage de 'use-strict' implique de déclarer toutes les fonctions en-tête du code. Dans nos blocs de code, toutes les fonctions seront donc déclarées sous forme d'expression : const nomFunc = function( ){ ... }.
5) On pensera const avant let. On aura généralement : 80 % de const et 20 % de let.
6) Avec const, on se souviendra que si la déclaration est constante, le contenu peut-être variable lorsqu'il s'agit d'un objet.

Deuxième niveau (moyen) :

6) Quatre choses qu'il est essentiel de comprendre et de maîtriser. L'écriture d'un template pour l'envoi des résultats vers la console. La déstructuration (destructuring, ex : let [i, item ]). Les opérateurs de structuration (rest operator, ex : ...args pour la construction d'un array) et de dispersion (spread operator, ex : ...[ 5, 8, 10 ] pour l'éclatement d'un array).
7) Les objets JSON
8) Map et Set.

Troisième niveau (difficile) :

9) Les promesses.
10) Fetch.

Quatrième niveau (expert) :

11) Les classes.
12) Les classes sont du sucre syntaxique, comprendre les prototypes.

Citation:

---

Envoyé par SylvainPV

Un peu comme à la transition franc/euro...

---

c'est quoi l'euro :mrgreen: (ah oui du fouat !).

Pendant que j'y pense il ne faudra ne pas oublier de parler de l'importance de l'indentation dans le code, un peu comme l'a rappelé Gnuum pour le nommage des variables dans l'excellente correction de l’exercice 0.

Dès le premier exercice sort déjà le débat des points-virgule, tu veux ajouter celui des tabulations ou espaces pour l'indentation ? :aie:

Merci Daniel pour ton petit plan et tes remarques.
On a choisi de faire un plan plutôt par thème que par difficulté car l'objectif est de voir un peu tout pour commencer à être autonome mais tu rappelles pas mal de notions que l'on pourra intégrer dans les exercices de nos thèmes.

Citation:

---

L'usage de use-strict implique de déclarer toutes les fonctions en-tête du code.

---

En es-tu vraiment sûr?
Je suis quasiment certains que si la fonction est définit en mode:

Code:

---

1 2 3

function doSomething() { // ... }

---

la déclaration et la définition sont "hoisted" et donc pas besoin de le définir au début.
En revanche, dans le cas d'une définition en mode:

Code:

---

1 2 3

var doSomething = function() { // ... }

---

seule la déclaration est "hoisted" (pas la définition).
De plus, je ne pense pas que ce soit le mode strict qui implique ce fonctionnement. J'ai peut-être mal compris ce que tu voulais dire ou je me trompe peut-être, c'est pour cela que je te demande confirmation.

Citation:

---

Pendant que j'y pense il ne faudra ne pas oublier de parler de l'importance de l'indentation dans le code

---

Tout à fait! Comme on apprend à un débutant potentiellement, il faudra aborder toutes ces notions de rigueur de code.

Citation:

---

Dès le premier exercice sort déjà le débat des points-virgule, tu veux ajouter celui des tabulations ou espaces pour l'indentation ?

---

:D