Discussion :

[NoSmoking]

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

[ABCIWEB]

@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� ?

[autran]

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

[ABCIWEB]

@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 ?

[autran]

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.

[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 ?

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)

[ABCIWEB]

@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.

[autran]

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

[Gnuum]

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!

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.

[autran]

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.

[ABCIWEB]

Salut,

Oui c'est une bonne synth�se.

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

[SylvainPV]

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.

[Gnuum]

Je continue en solo mon premier exercice �ligible � un article.

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

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

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!

[NoSmoking]

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

je dois admettre que lorsque je tombe sur des

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 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.

[Gnuum]

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

La moindre contribution sera tr�s utile au projet!

[SylvainPV]

@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" �a viendra avec le temps comme tu dis, mais pour �a il faut pratiquer.

[danielhagnoul]

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 ).

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.

[NoSmoking]

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

c'est quoi l'euro (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.

[SylvainPV]

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 ?

[Gnuum]

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.

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

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.

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 ?