PLB CONSULTANT : 4.1. Solutions Open Source - Développement Front End - Angular, ReactJs

Objectifs pédagogiques :

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 de la formation met en avant les différents frameworks et librairies essentielles du développeur JS comme React, Vue ou encore Angular. Enfin, nous nous attarderons sur le framework de Facebook : React.

À la fin de cette formation, vous aurez appris :

• 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 librairies et frameworks incontournables
• 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.

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 2015/2016 (présentation)

JavaScript et EcmaScript (vocabulaire : ECMA, EcmaScript, ES6, ES7, ES2015, ES2017, etc.)

Les nouveautés apportées par ES6 et ES7

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, Meteor, 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

Travaux pratiques

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

Étude de cas

Création d’un Email Builder intégré dans WordPress à base de React.Un outil qui permet de créer un e-mail structuré avec sections / colonnes / blocs via glisser-déposer, un panneau latéral de personnalisation des éléments (couleurs, tailles, textes) et une génération à la volée du code en HTML responsive et compatible avec tous les logiciels d’e-mail.