Formateur Ziggourat

S'initier aux frameworks Javascript : Backbone.js/Angular/ReactJS/Vue.js

56 heures sur 8 jours

à Paris & à distance
(Zoom, Google Meet, etc.)

Devis sur demande

Etudions ensemble vos options de financement
Contactez-nous pour monter votre dossier !

QUALIOPI

8 stagiaires maximum par session.
Découvrez les autres engagements qualité qui font la marque de Ziggourat Formation

Objectifs de la formation

S'initier aux frameworks Javascript : Backbone.js/Angular/ReactJS/Vue.js

Cette formation vous permet d'optimiser des développements en s'appuyant sur des frameworks et librairies actuels : Backbone.js, AngulatJS, ReactJS et Vue.js.

Pré-requis

Une bonne maîtrise de la programmation orientée objets en JavaScript est indispensable.

Pour qui ?

Développeurs front et back-end.

Au programme

Rappels

  • Le couple HTML/CSS pour créer un document Web
  • Le javascript pour ajouter des fonctionnalités
  • Le javascript côté client et côté serveur
  • Le navigateur et sa console
  • Le DOM (Document Object Modèle) et les APIs
  • Les IDE et éditeurs
  • Les design patterns (singleton, observer, factory, MVC, …)

Les frameworks et les librairies

  • Différence entre librairie et framework
  • Les différents frameworks Javascript
  • Pourquoi utiliser un framework ?
  • Quand choisir d’utiliser un framework ?
  • Quand choisir d’utiliser une librairie ?
  • Compatibilité et frameworks multiples

BackboneJS

Backbone et le MVC

  • Architecture d'une Single Page Application (SPA)
  • Server-side vs Client-side
  • MVC, MVP et MVVM
  • Concurrents : Angular, Ember et Vue
  • Backbone, Underscore et jQuery

Conception côté client

  • Gestion du contexte
  • Routage et navigation
  • Authentification et autorisation

Modèle et collection

  • Constructeurs et valeurs par défaut
  • Structure interne des objets du modèle
  • Getter et Setter tout en un
  • Notification des changements

Vues et templates

  • Propriétés des vues
  • Evènements et réaffichage
  • Templates underscore
  • Mustache ou HandleBars

Router

  • Définition des routes
  • Gestion des URL et paramètres
  • Evènements de navigation
  • Bénéfices du routeur
  • Instanciation et gestion des vues

Synchronisation des données

  • Appels Ajax / JSON
  • Backbone Sync
  • Liens avec une API REST
  • Stockage local

Extensions

  • Intégration d'autres frameworks
  • Backbone et jQuery
  • Générateurs type Thorax
  • Découverte de Marionnette

AngularJS

Présentation du framework

  • La nouvelle version d'Angular
  • Les nouveautés de TypeScript 4.0
  • Le nouveau moteur d'Angular : Ivy
  • Compilation AOT vs JIT

Architecture d'une application Angular

  • Organiser son code avec les modules
  • Les components et les templates
  • Connecter components et templates avec le Data Binding
  • Le rôle des directives
  • Les services
  • Notion d'injection de dépendance

Une première application Angular

  • La structure d'un projet Angular
  • Les modules et composants
  • Démarrer "from scratch" avec Angular CLI
  • Utilisation d'Angular CLI
  • Création de projet
  • Création de modules, components et services

Les templates

  • Utiliser l'interpolation
  • Property et event bindings
  • Utiliser des variables locales
  • Utilisation des pipes

Les formulaires

  • Création de formulaires avec :
    • Le FormsModule
    • Le FormBuilder
  • Validation et gestion des erreurs

La bibliothèque RxJS (Reactive extensions for JavaScript)

  • La programmation réactive
  • Observable et Observer
  • Utilisation des opérateurs
  • Communication entre components et les Subjects

Travail avec HTTP

  • Le service HTTP
  • Utilisation de RxJS
  • Récupérer des données
  • Rappel sur les Promises
  • Utiliser les Observables

Le routage

  • Les différentes versions du module de routage
  • Fonctionnement du routage
  • Configurer des routes et utiliser les directives

ReactJS

Présentation de ReactJS

  • Positionnement de ReactJS
  • Virtual DOM avec ReactJS
  • Mise en place des outils de développement
  • Tour d'horizon des outils de développement et d'intégration actuelle
  • Création d'une application React avec le script "create-react-app"

Composants ReactJS

  • Création d'un composant ReactJS
  • Amélioration des fonctionnalités du composant développé
  • Etats d'un composant et cycle de vie
  • Gestion de l'état d'un composant
  • Propriétés d'un composant
  • Présentation de JSX et ES2015, que choisir ?
  • Présentation approfondie du Virtual DOM

Communication inter-composants avec ReactJS

  • Communication inter-composants
  • Gestion des évènements
  • Autobinding
  • Composants de formulaire
  • Manipulation du DOM
  • Présentation de la propagation des données
  • Flux des données
  • Présentation des vues et contrôleurs dans ReactJS
  • Création d'une application Single Page Application (SPA) avec ReactJS

Echanges avec le serveur

  • Présentation de l'architecture REST
  • Echanges entre l'application React et un serveur via REST

Les Hooks

  • Présentation des Hooks
  • Utiliser la state dans une fonction
  • Les fonctions useState et useEffect

Améliorer une application ReactJS

  • Gestion des erreurs avec les "Error Boundaries"
  • Préserver la structure de l'arbre DOM avec les fragments
  • Utiliser le contexte pour s'affranchir de la structure de l'arbre DOM
  • Développer une application React avec TypeScript

Quelques patterns ReactJS

  • Faire remonter l'état : Lifting State Up
  • Le pattern Décorateur de ReactJS : Higher-Order Components

Redux

  • Présentation du workflow
  • Présentation de flux
  • Eléments composants Redux
  • Intégration de Redux dans React
  • Les Hooks de Redux

Vue.js

Présentation de Vue.js

  • Migration vers Vue.js
  • MVVM selon Vue.js
  • Les outils nécessaires liés à l'utilisation de Vue.js
  • La gestion des interfaces graphiques par les données
  • La liaison de données
  • Les structures de contrôle
    • Répétitives
    • Alternatives
  • Notion d'event
  • Notion de component

Les essentiels de Vue.js

  • Cycle de vie d'une requête dans Vue.js et son rôle
  • Les modèles
  • Notion d'interpolation
  • Attributs, filtres et directives
  • Les propriétés calculées
  • Différence entre v-model et v-bind
  • Le v-model
  • Gérer des listes
  • L'affichage conditionnel
  • Event management
  • Les composants dynamiques
  • Echange de données entre composants

Aspects avancés de Vue.js

  • Transitions et transitions CSS
  • Transitions dynamiques
  • Diverses animations
  • Les fonctions "render"
  • Les divers types de composants
    • Les composants fonctionnels
    • Les Single File Components
  • Les différents types de directives
  • Créer une directive adaptée

Les extensions

  • Type mixin
  • Type plug-in
  • Les extensions (composants) monofichier

Le routing dans Vue.js

  • Présentation des routes
  • Les modes
  • Les liens
  • Vue initiale et liens

Méthode pédagogique

8 participants maximum, un poste par stagiaire et un support de cours est envoyé en fin de stage (vidéos tutorielles et/ou support spécifique). La formation est constituée d'apports théoriques, de démonstrations et de mises en pratique basées sur des exercices applicatifs et/ou ateliers.

Modalité de validation des acquis

Évaluation continue via des exercices applicatifs et/ou des ateliers de mise en pratique. Évaluation en fin de stage par la complétion d'un questionnaire et/ou d'une certification officielle issue du Répertoire Spécifique. Émargement quotidien d'une feuille de présence (en présentiel ou en ligne). Complétion par le formateur/la formatrice d'un suivi d'acquisition des objectifs pédagogiques. Remise d'une attestation individuelle de réalisation.

Obtenir des informations

sur une prochaine session
Aucune session n'est programmée.
Contactez-nous pour définir librement vos propres dates

Demander le programme
S'inscrire directement

Responsable de formation

Participants

Participant
retirer ce participant
Ajouter un participant

Financement

Comment souhaitez-vous financer cette formation ?


Modalités

Souhaitez-vous du distanciel ou du présentiel ?



Envoyer l'inscription
Merci, un conseiller vous contacte rapidement !
deco validation Ziggourat
J’accepte que Ziggourat collecte et utilise les données personnelles renseignées dans ce formulaire dans le but de recevoir une offre commerciale en accord avec notre politique de données personnelles.