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


  • ANGULAR ET REACT
REFERENCE
 
 
IJSO1
DUREE
 
 
5 jours
TARIFS
 
 
2590 € HT
Niveau : Intermédiaire
Cours à distance: Possible
Eligible CPF: oui
OBJECTIFS :
 

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 Framework et librairies essentielles du développeur JS comme React, Vue ou encore Angular. Enfin, nous nous attarderons sur le Framework de Facebook : React.

A 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 Framework incontournables
  • Développer une application web basée sur ReactJS
  • Intégrer les nouveautés du langage dans vos programmes avec EcmaScript 6/7
     
PRÉ-REQUIS :
 

Le participant devra avoir les bases en HTML et CSS et une bonne compréhension des navigateurs Internet et du fonctionnement d’Internet (HTTP) même si un bref rappel sera fait sur ces technologies.

PUBLIC :
 

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

PROGRAMME :
 

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.

S'INSCRIRE À CETTE
FORMATION DÉVELOPPEUR FRONT END JAVASCRIPT
Cliquez sur une date pour vous inscrire
Information pratiques sur
LA FORMATION
Lieu de la formation Paris - LA DEFENSE
Nous contacter 01 43 34 90 94
CETTE FORMATION SUR-MESURE Ce cours est réalisable en intra-entreprise, dans vos locaux ou nos salles de cours CONTACTER NOTRE SERVICE INTRA
D'autres formations
SUR LE MÊME THÈME

3 j

 
Node.js est une approche performante et non-sequentielle, permettant de développer très facilement des applications écrites en Javascript, mais côté...

3 j

 

Web - Digital

Node.js avancé
Node.js est un projet open-source reposant sur le moteur V8 de Chrome. Il permet d'exécuter du code JavaScript côté serveur, contrairement à ce que l'on a...

3 j

 
Si vous êtes perdu face aux nombreux frameworks JavaScript modernes, Vue.js est la réponse à la complexité grandissante des solutions existantes. Puissant, rapide et...

3 j

 

Web - Digital

ExtJS 4
Cette formation ExtJS 4 vous permettra de développer des applications Web riches (RIA) et interactives pour mobiles ou Desktop. Ce standard du développement d'application Web...
Plus de formations sur le même thème

Des questions ?

ON VOUS RAPPELLE

Tampon du Fafiec indiquant que PLB Consultant est partenaire de ses actions collectives

Votre formation Open Source prise en charge à 100% ! *

Depuis mai 2018, le Fafiec a sélectionné PLB Consultant pour vous proposer les meilleures formations autour de l'Open Source.

Sessions inter-entreprise sur Paris, Lyon et Lille.
Sessions intra-entreprise sur toute la France.

* 100% des coûts pédagogiques, offre valable dans la limite des fonds mutualisés dédiés aux actions collectives, en application des critères de prise en charge en vigueur (voir conditions détaillées sur le site du Fafiec)

 

0

Formations
Informatique
et Management
en ligne à ce jour

+ 0

Stagiaires dans nos
salles de cours sur
l'année

0%

De participants
satisfaits ou très
satisfaits de nos
formations

0

Formateurs experts
validés PLB