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

Objectifs pédagogiques :

• Le fonctionnement de JavaScript et son utilité dans le naviGustur
• 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

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

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 naviGusturs 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 naviGusturs, au JavaScript et au DOM Les principes d’utilisation des DOM Les différences principales entre les naviGusturs 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 naviGusturs 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

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.

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.