Formation Développement d’applications web front-end avec JavaScript et les Frameworks Open Source

Cette formation vous propose de vous apprendre le langage JavaScript en profondeur pour la création de vos sites Internet, applications web et mobiles.
Gestion d’événements, manipulation du DOM, programmation orientée objet, nouveautés du langage et histoire du JS sont au programme.
Nous verrons également les outils permettant de maintenir plus facilement son code et les librairies dépendantes afin d’augmenter la productivité et diminuer la dette technique.
La deuxième partie présente les différents Framework et librairies essentielles du développeur JS comme React, Vue ou encore Angular en s’attardant sur le Framework de Facebook : React.

Objectifs pédagogiques :

• Le fonctionnement de JavaScript et son utilité dans le navigateur
• Créer des scripts permettant de rendre interactives vos pages et applications
• Manipuler le contenu et le rendu de la page au travers de gestionnaires d’événements
• Faire de la Programmation Objet en JavaScript
• Coder avec les bonnes pratiques et les bons outils pour un code plus facile à maintenir
• Connaître les principes généraux de VueJS et Angular
• Développer une application web basée sur ReactJS
• Intégrer les nouveautés du langage dans vos programmes avec EcmaScript 6/7

Public :

Cette formation s’adresse aux développeurs et chefs de projets.

Prérequis :

Il est indispensable de connaître les bases du développement (variables, boucles, fonctions, …). Le participant devra également avoir des bases en HTML et CSS et une bonne compréhension des navigateurs Internet ainsi que du fonctionnement d’Internet (HTTP) même si un bref rappel sera fait sur ces technologies.

Architecture et protocoles Web

Le modèle client/serveur dans le contexte du Web
Positionnement et complémentarité des différentes briques (HTML, CSS, JavaScript, Java, PHP, etc.)
Protocoles et formats d’échange entre ces briques (HTTP, XML, JSON, WebServices, Ajax, etc.)
Mode d’appel des scripts depuis les pages HTML
Comment créer une zone de saisie?
Les différents modes de saisie HTML
Introduction aux navigateurs, au JavaScript et au DOM
Les principes d’utilisation des DOM
Les différences principales entre les navigateurs
L’interpréteur JavaScript : entrées/sorties des programmes

Le langage JavaScript

Introduction au langage JavaScript
Présentation d’exemples simples
Les versions de JavaScript
JavaScript embarqué dans les pages HTML
La grammaire du langage
Les variables
Les types de données
Les opérateurs
Les instructions
Les structures de programmation
La définition et l’utilisation de fonctions
Les objets et leurs utilisations en JavaScript (méthodes, propriétés)
Les dialogues avec l’utilisateur
Les tableaux
Les pièges classiques en JavaScript

Nouveautés EcmaScript  (présentation)

JavaScript et EcmaScript (vocabulaire : ECMA, EcmaScript, ES?, ES201?)
Le changement net depuis ES6
Compatibilité avec les navigateurs et les frameworks
Arrow function, promise, etc.
Module import

Gérer les évènements et les données en JavaScript

Les évènements gérés par JavaScript (survol, clic, clavier, etc.)
Propagation des évènements
L’objet Event
Les pop-ups
Le fonctionnement de l’objet document. Interactivité, contrôle et transformation des pages HTML
Manipulation de la page (DOM)
Manipulation des URL et des redirections
Sélection d’éléments
Modification du contenu HTML
Modification du graphisme CSS

Développer au quotidien avec JavaScript

Gestion des chaînes de caractères à travers l’objet String
Les principales fonctions mathématiques dans l’objet Math
Manipulation des dates via l’objet Date
Manipulation des tableaux via l’objet Array
Les expressions régulières dans le JavaScript
Règles de transtypage et comparaisons
Paramètres obligatoires / facultatifs / indéfinis des fonctions
Quelques outils pour tester, debugger et mesurer les performances de vos programmes JavaScript

Gestion des formulaires

Composants d’un formulaire (checkbox, textbox, list, button, etc.)
Manipulation de l’objet form
Contrôle des données saisies dans un formulaire
Le formulaire dynamique
Liens entre évènements et formulaire (chargement, modification, validation, etc.)

AJAX : dialoguer avec le serveur

Pourquoi AJAX (Asynchronous JavaScript And Xml) ?
Mise en œuvre avec l’objet XMLHttpRequest
Méthodes de requête http (GET, POST, etc.)
Récupération de contenus HTML, XML ou JSON

Présentation de JavaScript avec HTML5

Géolocalisation
Glisser / Déposer
Multi upload
Historique (pushstate)
Local Storage
Web GL
Web RTC
Fullscreen
API branchées mobile
Détecteur de proximité
Vibration API
Utilisation du gyroscope du smartphone
Accès à la webcam, au micro
Shadow DOM
Évolutions attendues …

Initiation à jQuery

Qu’est-ce que jQuery ?
Chargement de jQuery dans la page ou via un CDN
Bases syntaxiques de jQuery
Effets
Évènements
Manipulation DOM
AJAX

Vue générale des frameworks JavaScript

Limites du JavaScript natif
Comprendre le rôle des principaux frameworks et les technologies associées : Angular, Vue, React, Node
Exemples de bases avec Angular
React, philosophie et principes de fonctionnement
Les tendances du marché et des projets

Présentation de Angular

Principes généraux d’Angular 2 et 4
Templates, nouvelles syntaxes
Cycle de vie des composants
Principe de l’injection de dépendances
Les formulaires Angular 2 et 4 (template driven, model-driven, etc.)
Le routage
Les tests

Introduction à React

Écosystème des frameworks JavaScript
Différentes approches du data-binding
Philosophie de React
Environnement de développement
Outils de debug

Développer avec React

Création d’un composant
La syntaxe JSX
JSX vs JavaScript
Comprendre JSX en détails
Gestion du « state » du composant
Les méthodes du cycle de vie

Tout au long de la formation des ateliers pratiques seront mis en place, suivant un scénario global permettant la création d’une application web de gestion de tâche (Todo List)
Atelier 1 :
Création de l’interface de l’application en HTML et CSS. Modification des éléments à la volée via JS
Atelier 2 :
Gestion d’événements : création et suppression d’éléments grâce à des boutons ajouter / modifier / supprimer
Atelier 3 :
Réécriture du code en jQuery, simplification
Atelier 4 :
Refactorisation : création de fonctions destinées au traitement des données et au comptage des tâches faites / restantes
Atelier 5 :
Stockage des données grâce au Local Storage HTML5. Géolocalisation des tâches. Enregistrement de préférences en Cookies.
Atelier 6 :
Point sur les éléments bloquants de JS natif et jQuery : répétitions de codes, nécessité de penser à appeler dynamiquement des fonctions
Atelier 7 :
Réécriture de l’application en React
Atelier 8 :
Ajout d’une gestion temps réel de l’application et collaboration à plusieurs.