Rédiger des cours de JS moderne (ES 2015) de façon colaborative

Salut à tous !

J'ai la volonté d'écrire un cours sur JS pour zds car il me semble que ça serait utile. De plus la plupart des cours en français sur le sujet sont assez datés, peu complets voir carrément pleins de bêtises.

Voici ce que j'ai retenu pour l'instant : - Utiliser ES2015 (ES6) afin de proposer du js moderne - Ne par parler du js dans le navigateur ni de node, du moins dans les premiers tutos - Découper le tuto en deux tutoriels : un tuto "introduction" qui présente les rudiments du langage et un tuto"intermédiaire" qui présente plus en détail les principes de bases (fonctions comme objet de premier ordre, prototypes, nouvelles structures de données etc.).

Je pensais commencer par rédiger en premier le cours intermédiaire car cela permet aux gens de compléter le cours de deux façons : - Soit en écrivant le tuto débutant en sachant précisément ce qu'il faudra mettre dedans. Ce qui devrait rendre le travail plus facile. - Soit en se basant sur le tuto intermédiaire pour écrire des tutos avancés qui viendraient le compléter (js dans le navigateur, node js, angular 2.0, react, programmation fonctionnelle…).

Mon but serait de parvenir à finir ce tuto pour la rentrée scolaire. Au moins dans les grandes lignes concernant la rédaction. Je penses que c'est possible.

Je précise que je ne suis absolument pas un spécialiste de js : je suis étudiant en économie (et je compte le rester) donc je ne pratique le JS qu'en amateur et en apprenant par moi même. C'est justement en étant frustré de ne pas trouver de ressources en français de qualité que j'ai envie d'essayer de partager ce que j'apprends sur le sujet. Même si j'apprends en même temps que j'écris. Il n'est donc pas impossible que je raconte quelques bêtises de temps en temps (surtout sur ES6 que je commence à explorer).

Voici une ébauche du plan du cours débutant qui me semble suffisant pour donner les bases du langage (version ES 2015) et permettre d'aborder le cours intermédiaire :

Introduction au JS moderne

Introduction

• Pourquoi programmer ?
• Présentation de JS
• Avoir les bons outils : le logiciel Brackets

Variables, types et expressions

• Stocker une valeur dans une variable (let/const)
• communiquer avec l'utilisateur (alert,print,console.log)
• les types de variables (primaires sauf symboles)
• les expressions

Les boucles

• boucle for
• boucle while
• switch

Réutiliser son code avec les fonctions

• Ecrire ses premiéres fonctions
• La portée des variables (ES6)
• gestion des paramétres
• Les fonctions expressions et anonymes

Les Objets et la POO

• Ecrire des objets : syntaxe litérale, propriétés et méthodes
• Les Classes
• Les méthodes statics
• Ettendre une classe avec extands et super

Stocker ses données grace aux tableaux

• Ecrire un tableau
• Les tableaux sont des objets
• Méthodes à connaitre : map,reject, filter etc.

Annexes

• Aller plus loin : sites à connaitre, bonnes pratiques etc
• Rendre son code compatible avec les anciens navigateurs
• Déboguer son code
• Le mode strict (op on met ça là car on ne sait pas où le mettre ailleurs )

Le but est de proposer un cours pas trop gros, qui donne le minimum pour se débrouiller correctement : variables, fonctions et objets (avec les classes uniquement, vive ES2015). Ensuite on peut attaquer le cours intermédiaire :

Voici le plan que j'ai retenu pour le cours intermédiaire :

JS moderne intérmédiaire

Retour aux bases (vraiment nécessaire ?)

• Retour sur les types
• La portée des variables
• Le Hoisting

Aller plus loin avec les fonctions

• qu'est ce qu'une fonction ? (objet de premier ordre)
• invocation (on parle du this ici)
• closure
• les fonctions fléchées (ou les fonctions "normales" ?)

Les objets au cœur de javascript

• rappel sur les objets et classes
• le constructeur et le mot clef new
• la chaine de prototypes
• la véritable nature des classes
• tous est un objet… ou presque : les wrappers objets

Les structures de données

• rappels sur les structures de données
• la méthode reduce
• stockez vos données avec les collections
• stockez vos données avec les dictionnaires

Organisez votre code en modules

• pourquoi découper son code en modules ?
• export et import
• chargement dynamique
• isolation

J'essaye de présenter dans ce cours ce qui me semble fondamental pour avoir des bonnes bases en js moderne. Comme j’apprends moi-même en réfléchissant sur le sujet, il est possible que mon plan soit un peu bancal. Sentez vous libre de le critiquer et de proposer des améliorations.

La question des fonctions et du mode strict :

Je me pose deux questions importantes concernant la façon d’aborder deux choses :

• La plus simple : quand et comment parler du mode strict ? Faut-il le présenter dés le début et demander au débutant de l'utiliser partout et tout le temps ? Est-ce vraiment une bonne pratique ? Je ne sais pas trop où placer ce truc…
• La plus compliquée : la question des fonctions. Est-ce qu'on doit dans le cours pour débutant parler uniquement des fonctions fléchées ? Après tout elles peuvent remplacer les fonctions classiques dans la majorité des cas si je ne dis pas de bêtises. D'un autre coté ne pas présenter les fonctions classiques serait un peu dérangeant… Du coup je pensais garder ça pour la partie avancée. J'avoue être un peu perdu là dessus. Vous en pensez quoi ?

Il y a plein de trucs de ES6 (et d'ES5 :D) que je n'aborde pas, par ce que je ne les maitrise par forcement et par ce qu'en plus je ne vois pas trop où les placer dans des cours pour débutants : déstructuration, symboles, itérateurs, promises etc.

Voilà, j’attends vos retours pour être sur que mon plan ne soit pas totalement stupide, et essayer qu'on propose à terme du contenu cohérent qui s'articule bien. Je suis ouvert à toute remarque et bien entendu à toute aide : je ne suis qu'un amateur qui essaye d'apprendre et en même temps de contribuer à la communauté !

Merci d'avance pour vos retours !

Je pense que c'est une bonne idée. Surtout le fait de donné quelques sites de doc vers la fin du tuto pour débutant.

Vivement la sortie du cour

PS: pour les listes il faut sauter une ligne

1
2
3

- something

- something else

Pour info: sur les cours il est possible d'insérer des jsfiddle si tu en fais la demande à un valido.

D'ac, merci de l'info je ne savais pas ! C'est vrai que c'est pas bête, je pense en particulier au fait de recommander l'outil au débutant pour tester le code facilement sans se prendre la tête avec l'utilisation d'outil comme Babel.

PS: pour les listes il faut sauter une ligne

Rhaaa je me suis encore fait avoir ! En fait j'ai bien sauté la ligne mais j'avais oublié l'espace après le tiret. Merci de me l'avoir signalé, j'étais complétement passé à coté.

• Ne par parler du js dans le navigateur ni de node, du moins dans les premiers tutos

Pas une bonne idée à mon avis. La première chose à faire si tu veux enseigner un langage à quelqu'un c'est lui montrer comment il peut exécuter son code. Tu pourrais donc commencer, après l'intro, par dire à l'utilisateur de télécharger un navigateur à jour (Chrome, FF ou Edge) et lui montrer comment utiliser le REPL JS de son navigateur. Comme ça il pourra utiliser tout ES2015 (ou presque, mais y'a quasiment 0 chance que ton tuto nécessite une feature d'ES2015 pas dispo dans un de ces 3 navigateur) directement.

Je me suis peut être mal exprimé : je voulais dire par là que je ne vais parler des liens entre js et html (manipulation du dom, css, ajax, formulaires etc) car sinon ça ferait un truc juste énorme. Mais oui je compte dire à l'utilisateur d'exécuter son code dans un navigateur ! Je pensais à Edge à priori qui me semble plus complet. Mais edge à le gros défaut ne n'être dispo que sous windows10 ce qui risque d'être un peu embêtant.

Enfin ça reste un détail pas trop important le choix du navigateur. Qui devra être tranché dans le cours débutant, donc pour l'instant je vais faire comme si tout marchait partout. Je testerai sur chrome et edge je penses.

mais y'a quasiment 0 chance que ton tuto nécessite une feature d'ES2015 pas dispo dans un de ces 3 navigateurs

Détrompe toi : ni ff ni chrome ne donnent de propriété .name aux fonctions anonymes, ce qui du coup est un peu embêtant. Enfin faut vraiment que je creuse la problématique des fonctions par ce que là je suis un peu perdu.

J'ai l'impression que le but d'ES2015 c'est de faire utiliser les arrow functions partout et d'utiliser les class pour faire de l'objet en cachant complétement le mécanisme d'héritage prototypale. Et du coup de n'utiliser les fonctions avec le mot clef functionque pour bidouiller les prototypes (ce qui est un truc avancé) ou si on est dans le scope global (ce qu'on devrait éviter de faire). On ne devait aborder que les fonctions flechés dans un premier temps et introduire par la suite le mot clef function et les fonctions classiques.

Si t'as des idées sur comment et dans quel ordre expliquer les fonctions au débutant ça me semble une bonne idée. Y a aussi du coup le problème du this qui "disparait" et devient compliqué a expliquer avec les fonctions fléchés…

On peut apprendre dans le cours basique sur ES 6 les variables, les boucles, les fonctions fléchées et les classes. Mais du coup on passe à coté du "coeur" du langage et faut expliquer tout ça à un mec qui n'a jamais vu un function ou un prototype de sa vie. Sans compter que 90% des trucs qu'il va trouver sur le net ou les forum vont lui parler de var,prototype,function. Le débutant va se demander si il pratique vraiment le même langage.

Mais oui je compte dire à l'utilisateur d'exécuter son code dans un navigateur ! Je pensais à Edge à priori qui me semble plus complet. Mais edge à le gros défaut ne n'être dispo que sous windows10 ce qui risque d'être un peu embêtant.

Pourquoi Edge en particulier ? Quand je propose de conseiller Edge, Chrome ou Firefox, je te recommande de conseiller Edge, Chrome ou Firefox. N'importe lequel.

Enfin ça reste un détail pas trop important le choix du navigateur. Qui devra être tranché dans le cours débutant

Non. Il ne faut pas "trancher". Encore moins si c'est pour partir avec un truc spécifique à windows, alors que le navigateur le plus compatible ES2015 est cross-platform.

mais y'a quasiment 0 chance que ton tuto nécessite une feature d'ES2015 pas dispo dans un de ces 3 navigateurs

Détrompe toi : ni ff ni chrome ne donnent de propriété .name aux fonctions anonymes, ce qui du coup est un peu embêtant.

Ah bon ? Deux screenshots pris à l'instant depuis mon chrome habituel : http://imgur.com/YZjoTsQ http://imgur.com/XUWohnT

J'ai l'impression que le but d'ES2015 c'est de faire utiliser les arrow functions partout et d'utiliser les class pour faire de l'objet en cachant complétement le mécanisme d'héritage prototypale.

Partout ? C'est pas possible. Y'a quand même une différence fondamentale entre les deux, tu peux pas faire comme si c'était pareil… Et les classes ne cachent pas grand chose hein. Il suffit d'expliquer d'abord la notion de prototype et expliquer les différences en class-based OO et prototype-based OO, puis tu peux à la fin montrer le sucre syntaxique introduit en ES2015 avec le mot clé class et le sucre pour définir des méthodes.

Et du coup de n'utiliser les fonctions avec le mot clef functionque pour bidouiller les prototypes (ce qui est un truc avancé) ou si on est dans le scope global (ce qu'on devrait éviter de faire).

Quel est le rapport entre scope global et déclaration de fonction ?

Si t'as des idées sur comment et dans quel ordre expliquer les fonctions au débutant ça me semble une bonne idée.

Ouais. D'abord t'expliques les déclarations de fonction, puis les function expressions, puis les arrow functions.

Y a aussi du coup le problème du this qui "disparait" et devient compliqué a expliquer avec les fonctions fléchés…

Pas d'accord. Déjà le this ne "disparait" pas. Je connais aucun moteur JS dans lequel tu peux faire une arrow function dans laquelle il n'y aurait pas de this. Tiens, copie-colle : (() => console.log(this))().

Ce que représente this est compliqué à expliquer. Le fait qu'une arrow function ne bind pas this rend les arrow functions nettement plus simples à expliquer que les autres fonctions puisque t'as pas besoin d'expliquer cette notion. Le this est celui du scope parent, point barre.

+1, le cours risque d'être rapidement inbuvable et/ou ennuyeux si on ne peut pas essayer soi-même son code dès le début. Perso ça me paraît être essentiel. J'ai beau déjà connaître 6 ou 7 langages, je serais terriblement frustré s'il fallait que je lise la totalité des bases sans pouvoir essayer avant (surtout qu'en étant forcé de les lire d'une traite, on en a déjà oublié la moitié).

J'ai envie de proposer Node comme environnement pour commencer, parce qu'on a un REPL directement, et par conformisme vis-à-vis des tutoriels sur les autres langages qui ont aussi un REPL similaire (p.ex. python, ruby, lua). Par simplicité aussi, car qui dit JavaScript dans le navigateur dit forcément au moins un minimum de web, de HTML et de CSS pour piger un peu et pour poser le cadre. Et mélanger les langages ne va pas faciliter l'apprentissage.

Mais en même temps 99% du code JavaScript est destiné à s'exécuter dans le navigateur et j'ai (encore?) l'impression que Node véhicule des valeurs d'initiés, de passionnés, d'élitisme ou de professionalisme (appelez ça comme vous voulez, je ne sais pas trop comment le définir). Donc la volonté probable de la majorité des lecteurs qui se disent qu'ils veulent apprendre JS, c'est de faire des trucs dans le navigateur. ET dans tout ça on fait quoi des autres implémentations de JS ? Par exemple Nashhorn intégré à Java; pour faire du REPL ça marche aussi.

En fait d'après moi il faudrait avoir un cours qui propose deux portes d'entrée: le navigateur, pour celui qui connaît déjà raisonnablement HTML/CSS et/ou qui veut faire des trucs cool sur sa page web; et Node, pour le débutant complet en programmation (comme ça on évite de le parasiter avec HTML/CSS dès le début). Le tour de force va bien sûr être de faire en sorte que ces deux troncs de départ se rejoignent et qu'ils restent ensembles tant qu'on parlera des bases communes du langage (conditions, boucles, fonctions, objets, closures, Set/Map, itération, générateurs). Puis ensuite qu'ils se séparent à nouveau pour les concepts spécifiques ou avancés (NPM, Accès fichiers, flux, réseau et serveur web d'un côté, DOM et API HTML5 de l'autre)

En ce moment je suis assez à fond sur JS autant Node que navigateur, je peux peut-être donner un coup de main, peut-être pas pour rédiger (car je ne pense pas être très bon pour cela), mais pour donner des avis ou idées globales.

Après, un chapitre « c'est quoi programmer ? », et un chapitre sur un IDE, ça ne me paraît pas très utile. Le premier parce que c'est bateau et parce qu'on peut quasiment copier/coller ce même chapitre d'un autre cours Java/python/ruby/C++/whatever sans rien changer, et le second parce que c'est très subjectif et personnel; que tu cites divers IDE et éventuellement que tu les présentes succintement d'accord, mais pas dédier un chapitre entier à ton IDE favori. Je suis déjà tombé sur des tutoriaux qui m'ont rapidement saoulé parce qu'ils partaient du principe que tu utilises forcément leur IDE pour programmer, voire que tu es obligé d'utiliser cet IDE précisément (Coucou les tutoriels exclusivement centrés sur Visual Studio ou Eclipse). Ca donne une idée fausse des choses. Si pour Java ou C++ c'est quand même bien utile à cause de la complexité et la richesse du langage, des éditeurs plus généraux comme Notepad++ suffisent largement pendant un bon bout de temps pour faire du JS je pense.

Sur la question du mode strict, je pense qu'il vaut mieux l'imposer partout tout de suite. Le mode strict remonte des erreurs gênantes qui passent autrement inaperçues, empêche les globales inattendues, et incite à ne pas utiliser des vieilleries/bizarreries à la con genre caller/callee/eval/etc. que tu seras en bonus quitte d'expliquer. Je ne vois pas de contrindication à passer systématiquement en mode strict. Les détails sur la MDN

Ah bon ? Deux screenshots pris à l'instant depuis mon chrome habituel

Hum peut-être que ça vient de moi alors. Parfait du coup !

Y'a quand même une différence fondamentale entre les deux, tu peux pas faire comme si c'était pareil…

On est bien d'accord, mais on lui explique comment au débutant ? Si on lui présente toutes les façons d'écrire une fonction (arrow, déclaration, FE annonyme ou non) il va être complétement perdu. Et on ne peut pas lui expliquer la différence sans avoir parler d'un certain nombre de trucs avant. Je penses que le plus simple serait d'introduire le mot clef function uniquement dans le cours avancé et là d'expliquer la différence.

Ouais. D'abord t'expliques les déclarations de fonction, puis les function expressions, puis les arrow functions.

Sauf que comment on explique au début qui sait à peine afficher une variable la différence entre les 3 ?

Pas d'accord. Déjà le this ne "disparait" pas.

Je me suis mal exprimé. Je veux dire par là que :

• on sait toujours à quoi il fait référence donc plus de risque de le perdre avec les arrows.
• on n'utilise plus les fonctions comme constructeur car on a les classes. Dans la plupart des tutos ou livres c'est là que le débutant découvre le mot clef this : avec le constructeur d'un objet. En ES2015 ce mécanisme du constructeur est caché, on voit moins le lien entre this et une fonction je trouve. Surtout que la syntaxe pour déclarer le constructeur et les méthodes d'une classe est différente de celle utilisée pour décrire une fonction. Le débutant va peut être avoir du mal à comprendre que c'est bien des fonctions non ?

Ce que représente this est compliqué à expliquer.

Sinon on fait que de la programme fonctionnelle et on oublie le this et les classes… ok je sors.

Je pensais dire dans le cours débutant que le this dans une classe va se référer à l'instance de l'objet. Ca fait une 1ére introduction au this et ça me semble suffisant pour un cours d'introduction. Puis le cours avancé reprendra le this sur le chapitre sur les fonctions en présentation les fonctions comme objet de premier ordre. Et là on introduire le mot clef function et les autres façons de déclarer une fonction. Comme ça le lecteur à ce qu'il faut pour comprendre la partie suivante sur les prototypes et constructeurs. Vous en dites quoi ?

En fait d'après moi il faudrait avoir un cours qui propose deux portes d'entrée: le navigateur et node.js

Le but c'est de faire plusieurs tutos qui se complètent : Un tuto d'introduction à JS qui présente les bases du langage moderne : variables, boucles; objet, classes, fonctions. Puis un tuto qui présente ce qu'il y a sous le capot et permet de comprendre les "vraies" bases du langage : fonctions, héritage prototype, nouvelles structures de données, modules etc. A partir de là, on pourra créer des tutos soit sur node.js soit sur l'utilisateur de js dans le navigateur soit sur d'autre trucs type React, Angular, la prog fonctionnelle en js etc. Ca permet de rendre le travail de rédaction plus facile en découpant et ça rend la lecture plus simple pour le débutant.

Sur la question du mode strict, je pense qu'il vaut mieux l'imposer partout tout de suite.

Oui c'est ce que je me disais aussi à priori. Je sais que certains recommandent de l'utiliser qu'en tête de module et non de façon générale pour éviter de péter une lib ou un script extérieur, mais pour le débutant on lui dire de coller un strict partout et voilà. Faudra juste pas oublier de le prévenir de ce petit détail au dernier chapitre sur les modules.

Oui c'est ce que je me disais aussi à priori. Je sais que certains recommandent de l'utiliser qu'en tête de module et non de façon générale pour éviter de péter une lib ou un script extérieur, mais pour le débutant on lui dire de coller un strict partout et voilà. Faudra juste pas oublier de le prévenir de ce petit détail au dernier chapitre sur les modules.

Oui, au début un "use strict" global, et ensuite quand on en arrive aux modules de toute façon il faudra expliquer la pratique qui consiste à faire une fonction qui s'exécute immédiatement pour éviter de polluer n'importe quoi n'importe comment.

Ce chapitre risque d'être chaud. Perso côté navigateur, je ne regrette pas d'avoir adopté le mode AMD dans les projets où je peux.

Pour les explications sur les fonctions, je ne pense pas qu'on puisse et doive passer à côté de la version déclaration, i.e. function X () {}. Pour les fonctions anonymes et le fait que ce sont des objets de premier ordre on a tout le temps d'introduire ça plus tard.

Pour les Arrow functions, je pense qu'il vaut mieux attendre que le lecteur ait atteint un niveau suffisant pour comprendre les différences vis-à-vis du this. ON peut faire sans pendant un moment.

Ce chapitre risque d'être chaud Normalement ES2015 régle le problème avec les modules natifs, plus besoin de bidouiller ou d'utiliser une lib tierce. J'ai pas encore regardé ce que ça donne mais je penses pas que ça pose trop de problèmes.

Pour les explications sur les fonctions, je ne pense pas qu'on puisse et doive passer à côté de la version déclaration

Je me dis qu'un bon compris serait d'introduire les fonctions fléchés et la déclaration classique dans le cour pour débutant. Quitte à dire que c'est pareil et qu'on lui expliquera les différences après.

Je me dis qu'un bon compris serait d'introduire les fonctions fléchés et la déclaration classique dans le cour pour débutant. Quitte à dire que c'est pareil et qu'on lui expliquera les différences après.

Dire des bêtises à un débutant en espérant que plus tard il lira un autre truc contredisant ce qu'il a appris est une erreur grossière si tu veux mon avis.

Introduire le mot-clé function uniquement dans le cours "avancé" est également une erreur. Il est indispensable dès le début, on ne peut pas fonctionner sans.

Tu sembles avoir un bloquage sur le this et je ne comprends pas bien pourquoi. Au risque de me répéter, introduit d'abord les déclarations de fonction. Puis les function expressions. Puis les arrow functions.

1. Tu expliques les déclarations de fonction.
2. Tu expliques this.
3. Tu expliques que class est du sucre syntaxique.
4. Tu expliques qu'en JS les fonctions sont des first class citizen.
5. Tu montres les arrow functions.
6. Tu expliques que c'est pareil SAUF que this n'est pas bindé.

Dire des bêtises à un débutant en espérant que plus tard il lira un autre truc contredisant ce qu'il a appris est une erreur grossière

Je n'ai jamais parler de mentir au débutant. Simplement dire un truc du genre "voici deux façons d'écrire des fonctions, la déclaration de fonction et les fonctions fléchées. Les deux façons te semblent identiques pour le moment et c'est normal ! Nous étudierons en détail les différences entre les deux façons de faire dans le cours intermédiaire. Pour l'instant tu peux retenir ces deux façons d'écrire des fonctions, mais nous allons surtout utiliser les fonctions fléchées pour la suite de ce cours d'introduction."

Ce n'est pas mentir au débutant, c'est juste préparer le terrain pour après.

Il est indispensable dès le début, on ne peut pas fonctionner sans.

Je ne vois pas pourquoi c'est indispensable. Tu peux faire quasi tout ce que tu veux en js sans utiliser le mot function, pour peu que tu ne touches pas aux prototypes. Avec les classes tu n'as pas besoin de le faire normalement. Donc ça ne me semble pas indispensable pour écrire ses premiers programmes. En quoi c'est indispensable ?

Au risque de me répéter, introduit d'abord les déclarations de fonction. Puis les function expressions. Puis les arrow functions.

Le problème avec ton approche c'est qu'on se retrouve avec un seul énorme tuto qui apprend tout en même temps. Ca risque d'être très lourd. Je trouve l'approche choisie par OC plus pertinente : découper le cours le cours en plus petits cours pour permettre à l'élève de progresser à son rythme. Cela permet aussi de lire uniquement le cours qui est adapté à notre besoin en fonction de notre niveau. Et de rendre l'écriture de tutos plus simple car chaque tuto est moins complexe.

Si on indique clairement au lecteur le parcours à suivre (lire le premier tuto basique puis le suivant), il n'y pas de souçis. Le lecteur pourra toujours abandonner en cours de route. Comme sur le sdz la motié des gens abandonnent le tuto sur le C après le TD du jeu "plus ou moins".

Je penses au contraire que découper en plusieurs tuto rend le contenu plus agréable, plus modulable et plus facile à terminer.

Il y a même un tutoriel complet qui a été écrit

Merci ! Je savais que y avais des trucs du genre ici mais je n'avais pas trop pris le temps d'y cherché. Le plan pour l'instant est surtout pour fixer la progression et répartir correctement le travail entre le tuto d'introduction et le tuto intermédiaire !

Je comprends mieux ton approche, merci pour l'explication. Je ne suis pas d'accord avec mais je comprends ton choix.

Je pense que présenter le mot-clé class sans présenter les prototypes est une très mauvaise idée. Et il semble qu'on soit d'accord, on peut pas correctement présenter les prototypes sans évoquer le mot-clé function, donc ça me pose un problème.

Tu peux faire quasi tout ce que tu veux en js sans utiliser le mot function, pour peu que tu ne touches pas aux prototypes.

Oui enfin, c'est pas un argument que je trouve très pertinent. Tu peux faire quasi tout ce que tu veux avec une voiture sans utiliser les pédales, pour peu que tu ne veuilles pas que le moteur de la voiture la fasse avancer.

Les prototypes sont la base et la particularité de JS. Faire un court de JS, débutant ou pas, en faisant le choix de ne pas toucher aux prototypes, c'est pas top. Déclarer une classe, c'est déclarer un prototype. Instancier une classe, c'est clôner un prototype. Modifier une instance d'une classe, c'est en modifier le prototype.

Ce qui me gène dans l'approche "on passe les notions fondamentales parce que c'est pour débutant et on les aborde dans un tuto ultérieur", c'est que certains vont s'arrêter après ce tuto et prendre ce qu'ils ont appris pour vérité. Je crois sincèrement qu'on peut faire un long tuto pour débutant sur presque n'importe quel sujet dans lequel on prend le lecteur par la main et on lui explique les choses graduellement sans sauter les notions fondamentales. C'est un travail pédagogique plus difficile, mais c'est important à mes yeux. Ainsi le lecteur qui décide de ne pas terminer la lecture saura qu'il lui manque des notions importantes. Il pourra pas se dire "j'ai lu le court tuto pour débutant, je connais la base" alors qu'il lui manque justement la base, base qui ne serait abordée que dans un tuto ultérieur.

Oui enfin, c'est pas un argument que je trouve très pertinent. Tu peux faire quasi tout ce que tu veux avec une voiture sans utiliser les pédales, pour peu que tu ne veuilles pas que le moteur de la voiture la fasse avancer.

Tu exagères un peu ! Si tu sais utiliser des fonctions arrow, faire des boucles et que tu connais les classes tu peux faire pas mal de choses quand même. Ca ne fait pas de toi un conducteur expérimenté, mais t'es capable de rouler en ville et de faire ta petite vie. D'ailleurs avec juste les class, les fonctions et la programmation fonctionnelle tu peux faire tout un tas de trucs sympa sans jamais croiser un this ou un prototype de ta vie.

Ce qui me gène dans l'approche "on passe les notions fondamentales parce que c'est pour débutant et on les aborde dans un tuto ultérieur", c'est que certains vont s'arrêter après ce tuto et prendre ce qu'ils ont appris pour vérité.

Je comprends, et c'est vrai que c'est une possibilité. D'un autre coté on aura jamais menti au lecteur : ce qu'on lui aura dit sera vrai. Simplement ça ne sera que la surface du langage et il n'en comprendra pas les mécanismes sous-jacents. Mais il risque aussi de vite se rendre compte que sa connaissance est limitée et à ce moment là il pourra aller plus loin.

Ainsi le lecteur qui décide de ne pas terminer la lecture saura qu'il lui manque des notions importantes. Il pourra pas se dire "j'ai lu le court tuto pour débutant, je connais la base" alors qu'il lui manque justement la base.

Je penses qu'on peut éviter le problème en étant clair là dessus dés le début du cours d'introduction et surtout à la fin. En indiquant bien qu'il s'agissait une présentation rapide et basique du langage et qu'il est conseillé de suivre le cours intermédiaire pour avoir une vraie base solide. De toute façon le lecteur vas vite se rendre compte que beaucoup de monde lui parle encore de var, de function et prototype. Il devrait vite revenir en se disant "hum je crois que je ferais bien de lire le tuto intermédiaire car on ne m'a jamais parlé de tout ça".

C'est un travail pédagogique plus difficile, mais c'est important à mes yeux.

Je penses que les deux points de vues se valent, chacun à les avantages de ses inconvénients. Mais je commence à rédiger des cours d'économie dans le même but et je crois vraiment que le format court est plus adapté au web. Pour moi le format long (gros cours complet) est plus adapté au format papier (un livre quoi^^). Pour un cours en ligne je trouve que c'est plus agréable pour l'élève de découper en modules et petits cours qui s'enchaine.

• Ca permet au lecteur de lire plus facile le cours qui l'intéresse e plutôt que chercher dans le gros cours la partie qui l'intéresse. Et on construit une sorte de parcours en liant les cours les uns aux autres. C'est ce qu'essaye de faire OC et ce que font pas mal d'acteurs et je trouve cette approche flexible et pertinente.
• Cela rend le travail de rédaction plus facile car chaque cours est plus petit. Faire un gros cours qui prendrait tout en temps est un énorme travail qui devient vite décourageant.

Autre raison plus personnelle : j'ai trop de projets en cours pour pouvoir tous les mener à bien et même si j'adore apprendre la programmation web et que j'adorerai écrire plein de choses dessus il faut bien être réaliste. Il est plus productif et efficace pour moi de produire du contenu et des cours sur l'économie que sur js. Je tennais absolument à profiter de l'été pour consolider mes connaissances et essayer de les partager. Mais me lancer dans un seul énorme cours pour débutant serait une tache trop importante, c'est pour ça que je préfère découper en deux tutos. Si j'arrive à en finir un et que le plan de l'autre est fait, ça donnera probablement envie à d'autre de continuer le travail et on peut imaginer lancer une dynamique positive autour de js sur zds (ce qui me ferais super plaisir). Donc y aussi un facteur assez personnel dans mon choix d'organisation en deux tutos !

Perso je serais plus pour présenter class et ensuite seulement le fonctionnement sous-jaçant avec les prototypes.

On peut vivre très longtemps avec class sans savoir ce qui se cache réellement derrière. En ES5 on n'avait pas le choix; quitte à partir sur ES6, autant le faire dès le début avec les simplifications apportées.

Oui enfin, c'est pas un argument que je trouve très pertinent. Tu peux faire quasi tout ce que tu veux avec une voiture sans utiliser les pédales, pour peu que tu ne veuilles pas que le moteur de la voiture la fasse avancer.

Tu exagères un peu ! Si tu sais utiliser des fonctions arrow, faire des boucles et que tu connais les classes tu peux faire pas mal de choses quand même. Ca ne fait pas de toi un conducteur expérimenté, mais t'es capable de rouler en ville et de faire ta petite vie. D'ailleurs avec juste les class, les fonctions et la programmation fonctionnelle tu peux faire tout un tas de trucs sympa sans jamais croiser un this ou un prototype de ta vie.

Et donc tu vas parler de class sans parler de prototype ?