Développement Moderne Javascript et ES6,ES7

Maitrisez les nouveautés Javascript ES6, ES7 et les outils modernes du développeur: Npm, Webpack, Babel...

4.55 (718 reviews)

Udemy

platform

Français

language

Web Development

What you will learn

Maîtriser les nouveautés Javascript ES6, ES7

Utiliser les outils modernes du développeur: Npm, Webpack, etc..

Why take this course?

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.

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 !

Screenshots

Développement Moderne Javascript et ES6,ES7 - Screenshot_01

Développement Moderne Javascript et ES6,ES7 - Screenshot_02

Développement Moderne Javascript et ES6,ES7 - Screenshot_03

Développement Moderne Javascript et ES6,ES7 - Screenshot_04

Reviews

Emmanuel

September 29, 2023

Formation non terminée. Il prend des morceaux d'autres cours, du coup je ne comprend pas ce qu'il veut faire et d'où il sort ses scripts. La façon de parler est pénible, on dirait qu'il explique un truc à son pote. Et ce besoin de tout traduire à peu près, ça ne sert à rien

Samuel35

February 28, 2023

Le cours est vraiment très clair. On apprend progressivemment. Les notions compliquées sont toujours très bien expliquées. Je recommande vivement !

Loghan

February 18, 2023

Super cours, merci John pour toutes ces connaissances ! L'animation des vidéos est toujours au top avec une bonne humeur et une pointe d'humour qui font plaisir. Seul petit bémol, les parties sur webpack et babel ne sont pas traitées avec les toutes dernières versions ce qui nous oblige à chercher par nous même les bonnes configurations (mais c'est peut-être un bon exercice finalement ;)) Hâte de passer à la suite !

GUIOT

February 3, 2023

Merci, John ce fut un réel plaisir que te progresser chaque jour en ta compagnie. J'ai vraiment consolidé des notions qui avaient été trop vite abordées lors de précédentes formations et j'ai le sentiment des les avoir vraiment acquises et ce, de façon ludique ! Ne change rien, continue à transmettre ton enthousiasme, c'est tout bon !

François

May 25, 2022

Excellent cours, juste ce qu'il faut pour bien partir avec npm, webpack et babel. Pour moi, le rythme d'avancement était vraiment lent. Ce n'est cependant pas un reproche puisque je sais que le cours s'adresse à un large public. Par contre, je me serais bien passé de la section 12 sur les terminaux et les commandes de base. À titre de Québecois, je me suis un peu amusé de l'accent français et des difficultés que représente la langue anglaise pour un Français. Soit rassuré, il n'y avait pas matière à être gêné.

Thomas

June 22, 2021

Les explications sont clairs et les mettre en pratique sur un projet "fil-rouge" est très intéressant car on passe d'un projet vraiment basique à quelques chose de structuré. J'ai appris pleins de choses que je vais pouvoir mettre en pratique sur mes projets, merci John.

Marc

April 25, 2021

Ce cours est bien fait et complet. Il permet d'apprendre le javascript moderne, grâce aux explications claires!

Alice

February 15, 2021

Alors un grand merci à toi John pour la qualité du contenu pédagogique, la planification du cours et ta manière d'expliquer clairement et simplement de concepts qui peuvent paraître (ou être vraiment) complexe ; Franchement, je suis hyper gavé contente d'avoir suivi tes cours ; et le fait d'avoir pu être active de mon complément d'apprentissage en JS, vraiment au top ; Je m'explique : j'ai été amenée à faire des recherches perso pour résoudre certaines situations avec webpack, etc. ; grâce aux autres apprenants sur le forum interne, aux différentes doc' de Webpack, Babel et MDN, j'ai pu apporter aussi des refactoring sur le jeu du snake comme les mots-clé pour gérer les eventKey avec les strings event.code ; Ainsi, je ne suis pas passive en suivant les cours et je prends mieux en main ce que j'apprends et ré-apprends car c'est le métier de dév' qui veut ça ; On apprend continuellement et ça rend tout ça passionnant ; A noter que j'ai perçu ça direct de ta part dès les 1ères minutes de cette session et cela ajoute de ouf à ma motivation

Gab

February 5, 2021

Le cours est clair et excellent mais il manquerait une partie sur l'asynchrone, les promises et async - await

Enguerrand

December 17, 2020

Troisième formation avec John qui se termine en beauté. Par rapport à la "Formation développeur web complète", et "Vraiment bien comprendre JS", celle-ci est top et très complète jusqu'à la section 14. Dès lors que l'on rentre dans les sujets Webpack et Babel, on se retrouve vite dépassés par l'obsolescence des versions utilisées : ce serait top de remettre ces vidéos à jour ! Autrement, si vous savez vous servir de Google, cela devrait suffire pour comprendre ! Merci John pour l'énergie que tu as fournis dans toutes tes formations qui restent TOP !

Yaya

December 4, 2020

Bonjour, merci et bravo pour ce cours. Ce que j'ai bien aimé, ce sont les outils annexes au développement tel que npm, webpack et babel. Et aussi ton dynamisme. Très bon cours qui se met en pratique sur une application snake.

Tommy

October 15, 2020

Excellent cours! On apprend les nouveautés es6 et es7 et on les applique dans un projet concret. Aussi, on découvre plusieurs outils importants pour devenir un bon développeur efficace. Très pédagogique, très concret. On apprend pas à pas, c'est génial, clair, limpide! Merci pour cette formation! Comme toutes les autres du même auteur, cette formation est à suivre! :)

Yann

November 5, 2018

De bonne qualité. S'adresse plutôt à des débutants en programmation, on aurait pu passer à la vitesse supérieure. Mais cela dit c'est très bien expliqué, du coup.

Julien

October 30, 2018

Des exemples moins farfelus certes, toutefois j'aurai aimé avoir des exemples pratique pour y mettre du sens sinon comment comprendre et mettre en place tout ce nouveau savoir !?.. Je parle de pratiques professionnelles pour être mis en condition car c'est je pense ce que l'on vise (pour la majorité en tout cas) au final. Un peu fatiguant de toujours remettre sur la table les mêmes exemples ( var a , let name = John ..) Pourquoi pas des exemples qui nous emmènerai vers des exercices ,en vue d'un petit TP.. Le projet du Snake est carrément lassant à force , 3/4 cours je me le coltine, et encore aujourd'hui je ne sais pas vraiment ce que j'ai mis en pratique de tout ce savoir !?? Avec des vidéos de 4/8mn , pourquoi ne pas prendre le double de temps pour expliquer ,selon son expérience, de part un maximum d'exemples en situation propre à la réalité professionnel !? Pourquoi ne pas poser des petits exercices qui entrainent, mettent en oeuvre tel cours ou telle technique? après il nous reste la responsabilité de les pratiquer biensur. Mais là il n'y a quasi aucune pratique ,alors autant prendre les pdf du SDZ et apprendre tout par coeur!.. Dommage ! C'est du travail de monter tout ces cours mais à quoi bon le faire si cela n'a pas d'intérêt réel!? .. Payer plein tarif ce genre de cours c'est une arnaque ,à 90% de réduction cela ne reste pas suffisant ! L'informatique, le Net restera le monde de l'open source ,donc le défi est plus grand que ce que l'on imagine. Encore une fois , je pense qu'il faut rajouter du sens , mettre en situation de travail et proposer plus d'exercices .. Un Quizz toutes les Deux Sessions de vidéos c'est trop peu , pas d'exercices,pas d'exemple concret et toujours le même TP .. L'idée du snake est sympa mais bon voilà quoi ,je copie je colle et ça m'apporte quasiment le même résultat .. Je ne joue même plus aux jeux vidéos :( Mais bon allez voir d'autres tutos, d'autres cours et vous verrez les exercices , les TP !!!! Vous comprendrez que cela ne vous a apporté que dalle ! Désolé John Codeur je me marre bien avec ton "Arrow" , je veux bien que ce soit du Bizness mais alors avec plus de sérieux. Peace

Farid

October 11, 2018

Au top ! Permet d'avoir une vrai compréhension de l'ES6 et ses subtilités avec une transition concrète via le projet du snake.

Charts

Price

Rating

Enrollment distribution

Développement Moderne Javascript et ES6,ES7 - Distribution chart