Aller au contenu principal
Afficher le fil d'ariane

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

Organisme

PLB CONSULTANT
3-5 RUE MAURICE RAVEL
92300 LEVALLOIS PERRET
Voir toutes ses formationsAutres organismes proposant cette formation

Durée

35 heures

Modalités

Formation

  • Classe virtuelle
  • Présentiel

Évaluation

Travaux pratiques. Étude de cas. Auto-évaluation en début et en fin de formation.

Prix

Inter
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
1650€ HT / personne
Intra
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
6950€ HT / groupe
4 stagiaires minimum

Public

Pour consulter les public visés, merci de vous référer au programme détaillé de chaque stage.

Pré-requis

Connaissances générales en HTML et CSS 

Objectifs pédagogiques

Pour consulter les objectifs pédagogiques, merci de vous référer au programme détaillé de chaque stage.

Programme détaillé

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.

Sessions

Filtrer les résultats

44 résultats

Modalités pédagogiques
Formation synchrone se déroulant avec la présence physique du (des) formateur(s) et du (des) apprenant(s) réunis dans un même lieu de formation.
Formation combinant des séquences en présentiel et des séquences à distance synchrones ou asynchrones.
Formation à distance, asynchrone, s’appuyant sur une plateforme d’apprentissage, pouvant être complétée par d’autres modalités de formation à distance (visio-conférence…)
Formation à distance, synchrone, s’appuyant sur un dispositif de visio-conférence. La classe virtuelle recrée à distance les conditions d’une formation en salle traditionnelle.
Type de formation
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
Options
Ces sessions ne peuvent être ni annulées ni reportées par l’organisme de formation.

0 résultat