Développement Moderne Javascript et ES6,ES7

Important

Ce cours fait partie de la Formation Complète Javascript

Découvrir la Formation

Dans ce cours on va parler de Développement Moderne en Javascript.

Pourquoi Développement Moderne ?

Pour 2 raisons:

La première c’est au niveau du code !

Nouveautés ES6 – ES7

Des nouveautés, il y en a pas mal, on peut dire qu’ES6 nous a particulièrement gâté.

Les variables, qu’on peut maintenant déclarer avec let et const, qui nous permettent d’utiliser les scopes de bloc.

Les fonctions flêchées, on va voir que nos fonctions peuvent aussi utiliser les paramètres par défaut ou les paramètres REST.

Il y aussi le nouvel opérateur SPREAD, la boucle for of, les Templates Strings et même ce qu’on appelle le Destructuring.
Bref ! On en a des nouvelles choses à apprendre.

Classes ES6

Alors il y a certaines nouveautés plus impactantes que d’autres et qui méritent qu’on s’y attarde plus.
Par exemple les Classes ES6: on verra comment une classe peut hériter d’une autre classe, on pourra même créer des classes qui héritent directement des éléments intégrés à Javascript.

On verra ce qu’est une méthode statique et comment contrôler l’accès au propriétés de nos objets avec get et set.

Modules ES6

Une autre nouveauté majeure d’ES6, ce sont les Modules.

Avec les import et les export, on va pouvoir utiliser des éléments déclarés dans d’autres fichiers: c’est le principe du module et c’est obligatoire si vous travaillez sur des gros projets.

Terminal

La deuxième raison pour laquelle j’ai appelé ce cours Développement Moderne , c’est qu’on va découvrir les outils modernes du développeur !

On va apprendre à maitriser le terminal pour exécuter des commandes.

Npm

Avec Npm, vous allez installer des packets Javascipt en quelques secondes et tout sera configuré automatiquement dans un fichier package.json

Webpack

On va découvrir un autre outil fantastique: Webpack !

Il va empaqueter tous nos fichiers en un seul ! Mais ce n’est pas tout ! On va l’utiliser pour créer un serveur local qui détecte les modifications de notre code et les charge directement dans le navigateur. Plus pratique pour coder !

C’est aussi important d’être bien organisé ! On va apprendre à structurer notre projet: un dossier pour les fichiers source et un pour ceux de production.

D’ailleurs le code de production se doit d’être rapide et je vais vous apprendre à le minifier comme ça il se chargera beaucoup plus vite.

Babel

Et le dernier outil dont on va parler c’est Babel !

Car ES6, ES7 c’est bien mais si les navigateurs d’aujourd’hui ne le supportent pas encore à 100%, on a rien gagné.
Donc je vais vous montrer comment utiliser le transpiler Babel ainsi que les polyfills pour rendre votre code compatible avec tous les navigateurs d’aujourd’hui.

Projet du Snake

Alors je ne l’ai pas precisé mais toutes ces choses qu’on va apprendre, on va aussi les mettre en pratique directement dans un vrai projet !
On va donner un petit lifting à notre projet fil rouge: le jeu du Serpent ! Le Snake.

Bon vous l’avez compris, on a pas mal de boulot !

Allez c’est parti !