Une formation JavaScript moderne et complète pour les développeurs qui souhaitent acquérir des fondamentaux solides, avant d’aborder des frameworks comme Angular.
Pourquoi une formation JavaScript ?
Interfaces riches, applications mobiles et desktop, même du back-end et jusqu’à la réalité virtuelle, le JavaScript est devenu incontournable. C’est le langage le plus utilisé sur Github. On vous explique toutes les raisons ici.
Et avec sa nouvelle version, l’ES6 / ES2015, JavaScript a enclenché la vitesse supérieure. On vous explique ces nouveaux termes ici si vous êtes perdu/e.
Cette formation permet d’acquérir toutes les clés du JavaScript moderne pour être autonome à long terme avec n’importe quel framework (Angular 2, React…).
JavaScript : pour qui ?
Cette formation s’adresse aux développeurs/ses, connaissant déjà un autre langage de programmation (PHP, Java, C# ou autre). Elle n’est pas adaptée aux intégrateurs/rices et graphistes, qui doivent se tourner vers la formation jQuery. Si vous souhaitez devenir développeur/se, c’est possible, mais il faudra d’abord vous préparer (guide à venir).
Il s’agit d’une formation technique à un langage, pour acquérir des fondamentaux solides. On ne construit pas une application from scratch en JavaScript. Si vous devez donc être opérationnel/le rapidement, et que vous n’avez pas la possibilité de suivre 2 formations, nous vous conseillons plutôt la formation Angular 2, à la condition de vous y préparer sérieusement avant.
Pensez à lire les questions fréquentes pour bien choisir votre formation, notamment si vous vous demandez où sont passés les différents niveaux (débutant, avancé…).
Objectifs de la formation JavaScript
- Maîtriser le JavaScript moderne : l’ES6, le nouveau standard
- Suivre les bonnes pratiques (compatibilité, qualité, performances, sécurité)
- Maîtriser la Programmation Orientée Objet en JavaScript
- Modulariser ses développements
- Être prêt à travailler avec les frameworks comme Angular 2 pour créer une application
Programme de la formation JavaScript
La formation JavaScript est organisée en deux grandes parties : on acquiert d’abord des fondamentaux solides en JavaScript moderne, utiles pour tous les usages (sites web, etc.) ; on se tourne ensuite vers les problématiques propres aux applications.
Bonnes pratiques JavaScript
Après avoir mis en contexte les rôles de JavaScript, nous prenons en main les bons outils pour travailler efficacement, et nous mettons tout de suite en place les bonnes pratiques.
- Compatibilité : le point sur le standard et les navigateurs actuels
- Gestion des packages : npm
- Mode strict, console et debugger
- Conventions de codage (Google guidelines, eslint…)
Nouveautés ECMAScript 6 (ES6 / ES2015)
Nous faisons ensuite le tour des nouveautés du dernier standard JavaScript.
- Portée locale à un bloc et constantes
- Template literals
- Nouvelles syntaxes pour les objets
- Nouvelles collections : Set, Map
- Nouvelles façons d’itérer
- Paramètres : valeurs par défaut, rest, spread
- Arrow functions
- Déstructuration
DOM et événements
On passe ensuite au rôle principal de JavaScript : manipuler et animer la page suite à une action de l’utilisateur. Vous serez surpris/e de découvrir qu’aujourd’hui jQuery n’est plus nécessaire, le JavaScript natif s’est amélioré et simplifié.
- Manipulation de la page : querySelectorAll, classList…
- Gestion des interactions : addEventListener…
- Animations : transitions et nouvelle API Web Animations
- Nouveautés DOM4
Nouvel AJAX et asynchronicité
Gérer les traitements asynchrones, notamment l’AJAX, est une des grandes difficultés de JavaScript, qui le rende plus compliqué qu’un langage comme PHP. De nouvelles APIs sont disponibles pour simplifier cela.
- Promise
- API fetch & JSON
- Fonctions asynchrones
TypeScript
Dans une application, la moindre erreur signifie un plantage de l’app. Le JavaScript étant trop permissif par défaut, il faut se diriger vers un typage statique. On vous explique pourquoi TypeScript dans un article dédié, et on vous garantit que non seulement vous allez adorer, mais aussi que vous ne pourrez plus vous en passer.
- JSDoc : documentation normalisée
- Typage statique avec TypeScript
- Typings et autocomplétion
Programmation Orientée Objet en ES6
Il faut évidemment aussi passer à une programmation orientée objet, et l’ES6 permet de s’y mettre facilement, comme dans les autres langages que vous connaissez (PHP, Java, C#…).
- Classes et héritage
- Gestion du contexte
- Getters / setters
- Méthodes statiques
- Visibilité, classes abstraites et interfaces ?
- Modules ES6 et systemjs
Mise en prod : performances et sécurité
Il y a aujourd’hui beaucoup de choses à gérer lors de la mise en production, pour que vos scripts se chargent rapidement. Heureusement, les outils se sont simplifiés et unifiés.
- Options de chargement avancées (async)
- Compatibilité : polyfills
- Compileurs ES6 : babel et TypeScript
- Build et minification : jspm/rollup et webpack
- Automatisation : scripts npm
- HTTP/2
- Protection XSS : Content Security Policy
Web Components
C’est le prolongement de la programmation orientée object appliquée à une page web. Vous pouvez maintenant créer de vrais modules web. Tous les frameworks actuels (Angular 2, React…) fonctionnent autour de ce principe de composant, et cela arrive en JavaScript natif.
- Templates
- Shadow DOM v1
- Custom elements v1
APIs pour les applications
Dans une application, JavaScript a de nouveaux rôles, que de nouvelles APIs viennent remplir.
- Historique et navigation
- Stockage local
- Service workers et Progressive Web App
- Manifeste d’application
- Temps réel : Web sockets
Introduction à Node.js
Vous souhaitez unifier vos compétences en travaillant aussi en JavaScript pour votre API back-end ? C’est possible avec Node.js.
