Des tutoriels et ressources pour enfin se mettre à ES6

 

Aujourd'hui le BlogDuWebdesign a décidé de vous proposer un pack complet de ressources et tutoriels pour vous simplifier le passage à ES6. Vous n'aurez plus d'excuses pour vous mettre à jour !

Javascripts ES6 ?

Le Javascript est un langage calqué sur un standard, l'ECMAScript, et l'ES6 est tout simplement la version 6 de ce standard. Sorti en 2015, soit près de 6 ans après l'ES5, cette version fournit des outils tout simplement indispensables pour pouvoir considérer le Javascript comme un langage moderne.

Problème, une aussi longue période de stagnation entre les deux versions, couplé a une adaptation anarchique du standard par les développeurs de navigateurs fait qu'il existe de très nombreux développeurs web n'ayant pas sauté le pas, voire même qui ne sait pas comment faire tourner du Javascript ES6 sur tous les navigateurs.

Si c'est votre cas et que vous ne savez pas par où commencer, je vous propose de découvrir cette liste de ressources et tutoriels fait pour vous simplifier l'approche de l'ES6 !

Babel

Sans surprise, le premier outil présenté ici se devait d'être Babel.

Babel est un outil permettant de compiler du Javascript ES6 ou ES7 en Javascript ES5, dont le support navigateur est assuré. Grâce à lui, vous pouvez utiliser absolument toutes les fonctionnalités Javascript existant sans se soucier du support navigateur.

Son fonctionnement est très proche de ce que vous pourrez retrouver avec les préprocesseurs CSS par exemple.

Glitch

L'utilisation de Babel vous demandera l'installation de Node js et l'utilisation de npm, des étapes qui peuvent faire peur si vous n'êtes pas habitués à ces techniques.

Si vous n'avez pas envie ou pas la possibilité d'installer quoi que ce soit sur votre machine, je vous propose d'essayer ES6 à travels Glitch, qui vous propose gratuitement des environnements de travail avec un support de nodejs ainsi que de npm. Petit plus, vous pouvez rechercher des templates possédants des configurations Babel pre-existant pour vous lancer !

ECMAScript 6 Tutorial

Je pense que le nom de cette ressource est assez parlant, je ne m'étendrais pas en explications.

ES6-features

ES6-features recense tous les changements effectués entre ES6 et ES5, avec des comparaisons entre les deux versions ainsi que des exemples. Un excellent outil que je vous recommande chaudement.

Modern JavaScript Cheatsheet

Enfin, je vous propose cette petite cheatsheet qui recense toutes les structures et syntaxes que vous risquez de rencontrer fréquemment dans des projets utilisant du JS moderne, et qui pourraient bien vous déstabiliser au premier abord.