Programme de Formation Svelte Approfondissement

Aller plus loin avec Svelte Navigator

Créer des routes imbriquées,

La Navigation programmatique,

Utiliser les hooks de navigation,

Créer des routes privées,

Charger les composants en Lazy Loading

Agir sur le cycle de vie des éléments

Agir au rendu et à la destruction du composant avec use,

Comprendre le cycle de vie des composants

Surveiller les mises à jour de composants

Communiquer avec une API

Les outils disponibles : fetch, axios,

Afficher les données asynchrones,

Rafraichir les données,

Gérer les données avec le store

Présentation du design pattern et des stores existants,

Comprendre les principe de la réactivité

Les fonctions du store svelte

Souscrire aux données du store

Animer ses composants

L’attribut #key,

Ajouter des transitions,

Créer des animations

Programme de Formation MEVN Stack : MongoDB, Express.js, Vue.js et Node.js

Découvrir Vue.js

Vue.js : présentation, principes

Comparaison avec d'autres frameworks JS : Angular, React,...

Initialisation d'un projet et interface en lignes de commande

Architecture d'une application Vue.js ; objet Vue

Interface de debug

Remise à niveau : Ecmascript5, NodeJS

Notions de composants, cycle de vie

Atelier : Installation de l'environnement, création d'une applicationCréer des composants

Structure et implémentation d'un composant

Gestion des événements

Imbrication de composants

Slots

Evénements personnalisés

Atelier : Organisation de l'application en composantsPeupler les vues

Méthodes d'écritures des templates : render methods, jsx

Composants fonctionnels

Gestion des animations et des des transitions

Atelier : Utilisation de différentes méthodes pour enrichir les vuesGérer la navigation dans l'application

Configuration des routes

Sécurité de l'application (filtres d'interceptions)

Gestion des transitions

Atelier : Utilisation de Vue router pour naviguer entre les pages.Gérer l'état et stocker des données

Vuex : présentation, concepts de base.

Gestion des plugins

Stockage des données

Atelier : Utilisation de Vuex dans l'applicationInteragir avec une application back-end

Chargement et envoi de données de manière asynchrone

Interrogation d'un service web REST et traitement d'un flux JSON

Gestion des formulaires et validation des saisies

Introduction du data binding

Atelier : Interrogation de services web et exploitation du résultat.Améliorer son code

Mixins et plugins

Utilisation des Single File Components .vue.

Directives personnalisées

Optimisation des performances

Server Side Rendering

Implémenter des tests unitaires

Atelier : optimisation du code applicatif et tests unitaires.Comprendre l'architecture microservices

Architecture en couches : du monolythe au microservices

Contraintes d'architecture des microservices

Gestion de l'authentification centralisée dans une architecture microservices

Intérêt d'une passerelle d'API

Gestion centralisée des traces

Développement d'API REST avec Express.js

Express.js : principe, fonctionnalités, pré-requis

Configuration du projet : packages et modules additionnels : Morgan, Helmet, Cors,...

Configuration de morgan pour la gestion des logs de requêtes HTTP

Organisation des couches du projet : routes, services, repositories

Intérêt d'une couche DTO, utilisation d'un mapper d'objets : automapper ou autre

Implémentation de contrôleurs REST : gestion des routes, traitement asynchrone

Gestion des paramètres de méthodes et du mapping

Gestion du download

Gestion de l'upload, configuration

Gestion des services et des transactions associées

Gestion du cross origin avec Cors et restriction des domaines appelants

Test de l'api REST avec Postman

Ecriture de tâches asynchrones, planification

Cache web

Atelier : Écriture de micro-services avec Express.js - Test des méthodes de services avec Postman ou autreDocumenter une API REST

Open API Specification (Swagger) : présentation, outil

Utilisation de express-openapi

Visualisation avec Swagger Editor

Documentation du code Java, génération de javadoc

Atelier : Documentation de l'apiIntercepter des requêtes et gérer les erreurs

Gestion globale des exceptions

Capture d'exceptions personnalisées

Intercepteurs de requêtes/réponses

Atelier : Gestion des exceptions et implémentation d'intercepteursAppeler d'autres API REST (écriture de clients)

http_request : méthodes et paramètres

Ecriture de requêtes GET, POST, PUT, DELETE

Gestion des paramètres et du corps de la requête

Gestion des headers

Gestion des réponses et utilisation de mappers

Atelier : Implémentation de clients pour un service RESTSécuriser l'API REST

Configuration de Helmet

Gestion des données d’entête

Gestion des utilisateurs et des rôles : mise en place de JWT (passport-jwt)

Hachage des mots de passe avec bcryptjs

Atelier : Intégration de Helmet, jsonwebtoken, dotenv et bcryptjsTester une application Express.js avec Jest et SuperTest

Stratégies de tests, types supportés

Installation de jest, supertest et cross-env, configuration de l'application

Mocking des couches de l'application

Tests auto-configurés

Exécution et reporting

Atelier : implémentation et exécution de tests avec Jest et supertest

Configurer un projet Mongoose

Mongoose : Présentation, fonctionnalités

MongoDB : Installation, structure d'un schéma (collections, documents)

Configuration d'un projet Node.js utilisant Mongoose : pool de connexion, contraintes

Propriétés par défaut et paramétrage

Gestion des options de logging

Atelier : Intégration de Mongoose dans un projet Node.js, configuration de la Bdd NoSQL MongoDB et des tracesConstruire un modèle et écrire des requêtes

Modèle de base

Documents et sous-dodcuments

Gestion des types

Requêter des documents

Mise à jour et suppression de documents

Gestion des validations

Mongoose migrations (ts-migrate-mongoose)

Atelier : Réalisation d'un schéma global de BDD MongoDB, gestion des migrations et écriture de requêtesMaîtriser des concepts avancées

Cache : fonctionnement, mise en cache de requêtes (mongoose-cache)

Hooks

Mise en place d'une solution d'audit de tables (historique de modifications)

Atelier : Implémentation d'une couche complète de persistance - mise en place d'un cache

Programme de Formation Nuxt.Js Initiation

Introduction

Présentation et comparaison des différents framework Javascript : Angular, React, Next, Vue, Nuxt...

Présentation de Node.JS et npm

Historique des versions de Vue et Nuxt

Présentation de la notion de Single Page Application et de Composant

Présentation de Vite et Webpack

Créer une application avec npm et la CLI

Découvrir ECMAScript

Spécification ECMAScript

Fonctions fléchées,

Design patterns

Définition de modules

Système natif de gestion des modules, chargement

Gestion des dépendances

La communication asynchrone ( Promesses, async await )

Créer une application Nuxt JS

Les différentes manières de créer une application

Choisir son template

Comprendre l’architecture d’un projet

Concevoir des Single Files Components

Présentation des composants monofichier

Comprendre la syntaxe de template : interpolation et data binding

Afficher du rendu conditionnel

Afficher des listes

Comprendre la Composition API de Vue 3

Composition vs Option API

La fonction setup

Surveiller l’état des données

Gérer les événements

Créer des méthodes

Utiliser les propriétés calculées

Surveiller ses données avec les watchers

Communiquer entre les composants

Créer une architecture de composants parents / enfants

Passer des informations entre les composants : les props et les slots

Créer des événements personnalisés

Concevoir ses pages

Présentation de Vue Router

Créer ses pages et configurer ses routes

Créer des pages imbriquées

Passer des informations avec les paramètres

Protéger ses routes avec des middlewares

Programme de Formation Nuxt.Js Approfondissement

Gérer les formulaires :

Récupérer les données d’un formulaires

Accéder aux éléments du DOM avec Template Ref

Découvrir les outils de validation externes : Vee-validate, Vuelidate

Atelier: Créer un formulaire avec validationCommuniquer avec une API

Le helper $fetch,

useFetch, useLazyFetch,

useAsyncData, useLazyAsyncData,

Rafraichir les données

Atelier: Afficher des données depuis une API externeGérer les données avec les stores

Présentation du concept de store, et des différents outils existants

Mise en place de store : Vuex, Pinia

Gérer les données dans le store : état, modifications, actions asynchrones

Atelier: Mettre en place un système de panier avec le storeMettre en place le Server Side Rendering et améliorer le SEO

Qu’est-ce que le SRR,

Configurer son application,

Gérer les entêtes et les méta informations

Programme de Formation MERN Stack : MongoDB, Express.js, React et Node.js

Introduction

Panorama des librairies disponibles

Rappels HTML5 et JavaScript

React.js : présentation, historique des versions

Installer l'environnement de développement (NodeJS/npm/yarn)

Présentation de la commande create-react-app

Atelier : Créer et démarrer un projet ReactJSDécouvrir ECMAScript

Spécification ECMAScript et implémentations

La Syntaxe Objet :

Evolution de la programmation orientée prototype

Syntaxe de classes : membres d'instances et membres de classe

Agrégation d'objets (mixins)

Héritage

Les fonctions fléchées

Design patterns

Définition de modules

Système natif de gestion des modules, chargement

Gestion des dépendances

Créer un projet React

Organisation d'un projet React

Architecture du projet

Personnaliser la configuration du projet

Comprendre le rendu d'un projet

Le Mode Strict

Concevoir des Composants

Définir un composant

Les composants fonction et classe

Utiliser les propriétés

Etats des composants

Le style (CSS/SASS) et les assets

Gestion des évènements

Relation entre composants

Utiliser la composition

Atelier : Créer plusieurs composantsMettre en forme du contenu avec JSX

Présentation de JSX

Les éléments React avec et sans JSX

Le DOM virtuel

Les expressions et les attributs

Se protéger des attaques par injection (XSS)

Les conditions et les boucles

Les fragments

Atelier : Afficher, boucler et conditionner des jeux de donnéesComprendre le cycle de vie d’un composant

Comprendre les cycles

Monter un composant

Ajouter des méthodes à un composant et des propriétés par défaut

Fixer des types de propriété

Atelier : Charger des données depuis une APIUtiliser le cycle de vie dans un composant fonctionnel: Les Hooks

Présentation des Hooks

Liste des hooks disponibles

Les hooks d'états et d'effet

Les bonnes pratiques et pièges à éviter

Les hooks personnalisés

Atelier : Créer et manipuler une todolistNaviguer dans un projet React

Mise en place du Routing (React-router)

Rendu d’une route

Liens via les Router

Organiser les routes

Passage de paramètres liens, redirections

Atelier : Mettre en place la navigationCommuniquer depuis une application: Les Formulaires

Rappel des comportements en HTML et JavaScript

Les formulaires avec React

Les composants contrôlés et non contrôlés

Récupérer et mettre à jour des données

Valider et filtrer les données

Présentation des frameworks disponibles (React Hook Form, Formik)

Atelier : Créer un formulaire d'inscriptionUtiliser Redux dans un projet

Présentation de redux

Les avantages apportés par les Store

Créer et configurer un Store

Les Actions et Les Reducers

Utiliser les Action Creators

La fonction connect()

Les Hooks Redux (useStore, useSelector, useDispatch)

Atelier : Mettre en place une authentificationComprendre l'architecture

Architecture en couches : du monolythe au microservices

Contraintes d'architecture des microservices

Gestion de l'authentification centralisée dans une architecture microservices

Intérêt d'une passerelle d'API

Gestion centralisée des traces

Développement d'API REST avec Express.js

Express.js : principe, fonctionnalités, pré-requis

Configuration du projet : packages et modules additionnels : Morgan, Helmet, Cors,...

Configuration de morgan pour la gestion des logs de requêtes HTTP

Organisation des couches du projet : routes, services, repositories

Intérêt d'une couche DTO, utilisation d'un mapper d'objets : automapper ou autre

Implémentation de contrôleurs REST : gestion des routes, traitement asynchrone

Gestion des paramètres de méthodes et du mapping

Gestion du download

Gestion de l'upload, configuration

Gestion des services et des transactions associées

Gestion du cross origin avec Cors et restriction des domaines appelants

Test de l'api REST avec Postman

Ecriture de tâches asynchrones, planification

Cache web

Atelier : Écriture de micro-services avec Express.js - Test des méthodes de services avec Postman ou autreDocumenter une API REST

Open API Specification (Swagger) : présentation, outil

Utilisation de express-openapi

Visualisation avec Swagger Editor

Documentation du code Java, génération de javadoc

Atelier : Documentation de l'apiIntercepter des requêtes et gérer les erreurs

Gestion globale des exceptions

Capture d'exceptions personnalisées

Intercepteurs de requêtes/réponses

Atelier : Gestion des exceptions et implémentation d'intercepteursAppeler d'autres API REST (écriture de clients)

http_request : méthodes et paramètres

Ecriture de requêtes GET, POST, PUT, DELETE

Gestion des paramètres et du corps de la requête

Gestion des headers

Gestion des réponses et utilisation de mappers

Atelier : Implémentation de clients pour un service RESTSécuriser l'API REST

Configuration de Helmet

Gestion des données d’entête

Gestion des utilisateurs et des rôles : mise en place de JWT (passport-jwt)

Hachage des mots de passe avec bcryptjs

Atelier : Intégration de Helmet, jsonwebtoken, dotenv et bcryptjsTester une application Express.js avec Jest et SuperTest

Stratégies de tests, types supportés

Installation de jest, supertest et cross-env, configuration de l'application

Mocking des couches de l'application

Tests auto-configurés

Exécution et reporting

Atelier : implémentation et exécution de tests avec Jest et supertest

Configurer un projet Mongoose

Mongoose : Présentation, fonctionnalités

MongoDB : Installation, structure d'un schéma (collections, documents)

Configuration d'un projet Node.js utilisant Mongoose : pool de connexion, contraintes

Propriétés par défaut et paramétrage

Gestion des options de logging

Atelier : Intégration de Mongoose dans un projet Node.js, configuration de la Bdd NoSQL MongoDB et des tracesConstruire un modèle et écrire des requêtes

Modèle de base

Documents et sous-dodcuments

Gestion des types

Requêter des documents

Mise à jour et suppression de documents

Gestion des validations

Mongoose migrations (ts-migrate-mongoose)

Atelier : Réalisation d'un schéma global de BDD MongoDB, gestion des migrations et écriture de requêtesMaîtriser des concepts avancées

Cache : fonctionnement, mise en cache de requêtes (mongoose-cache)

Hooks

Mise en place d'une solution d'audit de tables (historique de modifications)

Atelier : Implémentation d'une couche complète de persistance - mise en place d'un cache

Programme de Formation MEAN Stack : MongoDB, Express.js, Angular et Node.js

Découvrir Angular

Présentation de l'environnement de développement NodeJS

Présenation de la CLI Angular

Rappel des normes EcmaScript

Créer un projet Angular à l'aide d'angular CLI

Atelier : Configurer un projet AngularTypeScript

Présentation de TypeScript

Les types de variables de TS

Le typage fort

Les interfaces de classe

Présentation des décorateurs

Présentation

La Syntaxe de base d'Angular

L'organisation en Module et Composant

Les décorateurs Angular

Le MVVM / MVW

Le One Way et Two Way Data Binding

L'opérateur "moustache"

La gestion des Events et l'objet $event

Les NgModel

Les variables de template

Atelier : Réaliser une TodoListGérer les routes

Le Module de Routage

Déclarer les routes d'un projet

Gérer les redirections

La route par défaut

Récupérer les paramètres d'url, les query-strings, etc

Limiter l'accès au route: Les guards

Routes imbriquées

Atelier : Mettre en place une application multi-vuesUtiliser les pipes

Présentation des pipes «|»

Utiliser le safeOperator «?.»

Importer des locales dans notre projet

Définir une locales par default

Utiliser les locales avec les filtres

Créer des pipes personnalisés

Les pipes pures et impures

Atelier: Créer un pipe personnaliséLes Directives

Différence entre directives d'attributs et structurelles

Les directives ngFor, ngIf, ngSwitch, ngClass, ngStyle

Utiliser les attributs ARIA (directive attr.*)

Créer une directive personnalisée

Transmettre des valeurs à une directive (@input)

Gérer les événements dans une directive

Atelier: Créer une directive personnaliséConstruire des Formulaires

Présentation des formulaires

Les Templates Driven Form et Reactive Form

Gérer la validations des champs et du formulaire

Présentation des états d'un formulaire (ngControl)

Valider les formulaires (ngSubmit)

Créer des validateurs personnalisés

Atelier : Gestion des entrées utilisateursGérer l'injection de dépendances

Principes de DI

Configurer l'injecteur

Enregistrer des services dans un composant

Création de l'injecteur

Différents types de service: classe, valeur, fabrique...

Atelier : Architecturer notre application sous forme d'une organisation de servicesUtiliser le client HTTP

Principe de communication asynchrone

Fonctionnement des promesses et async/await

Présentation des Observables RxJS

Le Module HttpClientModule

Communiquer avec une API REST (http.get, http.post, etc)

Appliquer des fonctions de callback

Gestion des erreurs

Typage les données retournées

Atelier : Mettre en place un client d'API RESTDéployer une application Angular

Les commandes de compilation

Les modes de compilation

Les compilations AOT et JIT

Gestion du base href

Les règles de réécriture

Atelier : Compiler un projet pour la publication

Comprendre l'architecture microservices

Architecture en couches : du monolythe au microservices

Contraintes d'architecture des microservices

Gestion de l'authentification centralisée dans une architecture microservices

Intérêt d'une passerelle d'API

Gestion centralisée des traces

Développement d'API REST avec Express.js

Express.js : principe, fonctionnalités, pré-requis

Configuration du projet : packages et modules additionnels : Morgan, Helmet, Cors,...

Configuration de morgan pour la gestion des logs de requêtes HTTP

Organisation des couches du projet : routes, services, repositories

Intérêt d'une couche DTO, utilisation d'un mapper d'objets : automapper ou autre

Implémentation de contrôleurs REST : gestion des routes, traitement asynchrone

Gestion des paramètres de méthodes et du mapping

Gestion du download

Gestion de l'upload, configuration

Gestion des services et des transactions associées

Gestion du cross origin avec Cors et restriction des domaines appelants

Test de l'api REST avec Postman

Ecriture de tâches asynchrones, planification

Cache web

Atelier : Écriture de micro-services avec Express.js - Test des méthodes de services avec Postman ou autreDocumenter une API REST

Open API Specification (Swagger) : présentation, outil

Utilisation de express-openapi

Visualisation avec Swagger Editor

Documentation du code Java, génération de javadoc

Atelier : Documentation de l'apiIntercepter des requêtes et gérer les erreurs

Gestion globale des exceptions

Capture d'exceptions personnalisées

Intercepteurs de requêtes/réponses

Atelier : Gestion des exceptions et implémentation d'intercepteursAppeler d'autres API REST (écriture de clients)

http_request : méthodes et paramètres

Ecriture de requêtes GET, POST, PUT, DELETE

Gestion des paramètres et du corps de la requête

Gestion des headers

Gestion des réponses et utilisation de mappers

Atelier : Implémentation de clients pour un service RESTSécuriser l'API REST

Configuration de Helmet

Gestion des données d’entête

Gestion des utilisateurs et des rôles : mise en place de JWT (passport-jwt)

Hachage des mots de passe avec bcryptjs

Atelier : Intégration de Helmet, jsonwebtoken, dotenv et bcryptjsTester une application Express.js avec Jest et SuperTest

Stratégies de tests, types supportés

Installation de jest, supertest et cross-env, configuration de l'application

Mocking des couches de l'application

Tests auto-configurés

Exécution et reporting

Atelier : implémentation et exécution de tests avec Jest et supertest

Configurer un projet Mongoose

Mongoose : Présentation, fonctionnalités

MongoDB : Installation, structure d'un schéma (collections, documents)

Configuration d'un projet Node.js utilisant Mongoose : pool de connexion, contraintes

Propriétés par défaut et paramétrage

Gestion des options de logging

Atelier : Intégration de Mongoose dans un projet Node.js, configuration de la Bdd NoSQL MongoDB et des tracesConstruire un modèle et écrire des requêtes

Modèle de base

Documents et sous-dodcuments

Gestion des types

Requêter des documents

Mise à jour et suppression de documents

Gestion des validations

Mongoose migrations (ts-migrate-mongoose)

Atelier : Réalisation d'un schéma global de BDD MongoDB, gestion des migrations et écriture de requêtesMaîtriser des concepts avancées

Cache : fonctionnement, mise en cache de requêtes (mongoose-cache)

Hooks

Mise en place d'une solution d'audit de tables (historique de modifications)

Atelier : Implémentation d'une couche complète de persistance - mise en place d'un cache