MDN — Présentation de la documentation JavaScript

Auto-promo outrancière, syndrome de Narcisse

Comme je l’annonçais précédemment ici, la section de MDN sur JavaScript (>600 pages) est aujourd’hui intégralement disponible en français. Elle est, surtout, à jour par rapport à sa cousine anglaise. Cela en fait une des documentations les plus exhaustives disponible à ce jour en français sur le sujet.
Rappel des faits : MDN est un wiki que tout le monde peut éditer, le contenu n’est pas pro-Mozilla ou pro-Firefox, il a pour seul but de documenter les technologies standard autour du Web pour que chacun puisse les comprendre et les utiliser.

(Autrement dit : MDN c’est comme Wikipédia, ça peut s’utiliser en français ou dans d’autres langues et on a même la chance de parfois croiser du contenu à jour : donnons sa chance au contenu traduit/localisé afin de réduire la barrière du langage et aider les nouveaux arrivants.)

La section JavaScript est la première section de MDN à être dans un tel état. Aussi, il est normal que le lecteur francophone ait encore l’habitude d’aller consulter les pages anglaises : c’est donc le moment idéal pour faire un petit tour de cette documentation, présenter son organisation et surtout les pages importantes à ne pas louper pour se mettre à jour sur ES6.

Note : ES6 ou ES2015, c’est la prochaine édition du standard, ECMAScript, définissant le cœur de JavaScript (la dernière édition de ce standard remontant à quelques années en arrière et JS ayant gagné en popularité, ES6 contient de nombreuses nouveautés).

Disclaimer : ES6 est en cours de finalisation mais certaines fonctionnalités ne sont pas encore implémentées par l’ensemble des navigateurs (kangax liste très bien cela ici). MDN est aussi un wiki en perpétuelle évolution certaines pages ne sont donc pas encore complètes (celle concernant le très controversé class par exemple).

Les grands axes

Guide

Pour commencer, MDN contient un guide JavaScript idéal pour (re)commencer à coder en JS qui se trouve ici. Ce guide explique les bases nécessaires pour développer en JavaScript (syntaxe, concept, exemples, etc.). @fscholz met à jour ce guide afin qu’il soit flambant neuf pour la sortie d’ES6, il peut donc y avoir des mises à jour très prochainement.

Référence

Une fois ce guide (ou la réintroduction pour les développeurs déjà chevronnés sur d’autres langages) lu, on a suffisamment de carte en mains pour démarrer sereinement. Pour avoir plus de détails sur chacune des cartes qu’on peut jouer, la référence fournira des informations exhaustives sur chaque objet natif (propriétés et méthodes), chaque opérateur, chaque instruction afin de pouvoir exploiter chaque fonctionnalité du langage et éviter de réinventer la roue au détour d’une fonctionnalité un peu oubliée.

Historique

Enfin, si vous souhaitez que votre site/application fonctionne sur d’autres environnements potentiellement plus anciens, un peu d’historique ne fera pas de mal (ici la documentation est axée sur Firefox).

Voilà donc pour la structure principale qui regroupe aussi bien les anciens que les nouveaux éléments du langages. Qu’apporte donc ES6/ES2015 ?

ECMAScript, épisode 6

Encore une fois, la prochaine version d’ECMAScript apporte de nombreuses fonctionnalités, la liste qui suit n’est donc pas exhaustive et l’ordre dans lequel elle est présentée est tout à fait subjectif :

• let (les blocs ont enfin une portée) (var ne permettant que de gérer des portées de fonctions, on pouvait avoir de mauvaises habitudes en partant d’autres langages)
• les promesses (cf. aussi HTML5Rocks)
• les fonctions fléchées (du saccharose syntaxique)
• proxy (de la méta programmation en veux-tu en voilà) et son frère reflect
• les gabarits de chaînes (templates) (du stevia syntaxique pour écrire des chaînes plus rapidement et faire pleurer les expressions rationnelles (cf. cette présentation et notamment les diapositives 26 à 30)
• les itérateurs et les générateurs
• les symboles (pour être sincère, je n’ai pas encore saisi l’intérêt)
• les tableaux typés : qui permettent d’interagir avec des données binaires côté serveur ou côté client (par exemple : fichier, données de canvas)
• Object.is() : qui a dit qu’il n’y avait pas suffisamment d’outils pour comparer tout avec n’importe quoi en JS ?
• __proto__ qui est enfin défini de façon standard (auparavant il était déconseillé car hors standard)
• et plein d’autres : import/export, les paramètres par défaut, la décomposition, les noms de propriétés calculés, const, un nouvel arsenal de méthodes pour Array, les objets Map, Set, WeakMap et WeakSet. On notera aussi Number qui voit arriver des méthodes statiques auparavant disponibles uniquement sur l’objet global : JavaScript se « modularise » et range un peu ses affaires

Note : certaines pages sont en cours de rédaction, par exemple la page sur class, d’autres arrivent très prochainement (cf. la page de méta-documentation).

Florilège subjectif

Pour finir, une sélection tout à fait personnelle de pages préférées :

• Proxy : le sujet est complexe mais ouvre des portes et possède une telle variété d’applications qu’il me paraît pertinent de s’y mettre maintenant (on me souffle à l’oreille qu’un certain Brendan E. aurait participé à la rédaction anglaise de cette page sur MDN)
• Array.prototype.includes() et String.prototype.includes() et surtout ce bug (cf. aussi es-discuss) ou pourquoi on n’étend pas les prototypes des objets natifs en mode YOLO
• Une plongée dans l’historique avec les notes de versions Firefox liées au moteur JS
• Intl et le contenu d’ECMA-402 : l’internationalisation c’est bon, mangez-en
• les basiques : l’héritage à base de prototypes
• le fonctionnement de la boucle d’événements, toujours un bon rappel sur le fonctionnement de JavaScript dans un navigateur (voir cette excellente vidéo également (en anglais))

La suite

Pour ma part, je continuerai à maintenir la version française afin que chaque amélioration apportée sur la documentation anglaise bénéficie aux lecteurs francophones de MDN.
La suite du projet : aboutir au même résultat avec la documentation HTML puis avec CSS afin que de la documentation de bonne qualité et sur les éléments de base (références les plus exhaustives possibles) soit disponible de façon libre et collaborative pour :

• Avoir de la documentation Web accessible et riche disponible en français pour toucher un public large
• Permettre à d’autres documentations (tutoriels/guides) sur le Web de s’appuyer sur ce contenu maintenu chaque jour par des contributeurs et employés de Mozilla (coucou OpenClassrooms et les autres ☺)

Enfin, si vous souhaitez poser vos questions ou contribuer à MDN, n’hésitez pas à venir faire un tour sur #mdn ou #frenchmoz ☺ nous serons ravis d’échanger avec vous.

P.S. : Il paraîtrait également que quelques places restent pour le locasprint qui aura lieu à Mozilla Paris fin avril pour celles et ceux qui veulent localiser, traduire les produits, sites et projets gravitant autour de Mozilla ☺