Front-end

Le front-end est devenu au fil des années un métier nécessitant des compétences et des connaissances de plus en plus pointues, autour de multiples technologies, elles-mêmes en perpétuelle évolution.
Qu'il s'agisse des frameworks (React, VueJS, Angular), de bibliothèques de visualisation (Leaflet, MapLibre, d3, ...), ou même encore des différentes applications web qu'il est aujourd'hui possible de fabriquer à partir de technos web (SPA, PWA, SSR, SSG, Ionic) les possibilités sont immenses.

Et ce n'est pas fini ! Le web ne cesse de progresser et se renouveler au fil du temps.

Makina Corpus a acquis progressivement ces compétences, au fil des projets que nos clients nous ont confié, et dispose aujourd'hui d'une équipe de professionnels utilisant au quotidien ces différentes briques front-end. Nous nous formons également régulièrement sur les évolutions de ces différentes briques, et contribuons également à notre échelle à certaines d'entre elles.
En choisissant Makina Corpus pour votre formation, vous vous assurez de bénéficier de l'expertise de votre formateur qui utilise au quotidien la techno sur laquelle vous souhaitez être formé !

Kiwi standing on oval

Formation Angular avancé

Cette formation vous permettra de compléter vos connaissances d'Angular avec des techniques avancées. Ces techniques vous permettront de développer plus rapidement des applications mieux optimisées et plus facilement maintenables. Nous approfondirons également les concepts de base, pour vous donner une meilleure compréhension du Framework et vous amener à un niveau d'expert. Chaque point abordé sera illustré par des cas concrets.

Objectifs pédagogiques

  • Comprendre le processus de compilation d'Angular
  • Savoir optimiser ses modules
  • Savoir optimiser le routage avec les Resolver, les Guard, les ChildRoutes
  • Maîtriser les animations et le styling
  • Maîtriser les techniques avancées de templating et de composition
  • Savoir accéder à des sous composants avec avec ElementRef et ViewChild
  • Maîtriser les usages avancés de Typescript
  • Savoir utiliser les fonctions moins courantes de RxJs pour résoudre des cas d'utilisation avancés et être capable de créer ses propre observables
  • Maîtriser les bonnes pratiques avancées de RxJS
  • Savoir mettre en place un rendu côté serveur (Server Side Rendering) pour optimiser le référencement (SEO) et les fonctionnalités sociales
  • Savoir mettre en place un Service Worker pour développer une Progressive Web App

Formation Angular avancé en détail

Programme

Jour 1

1. Comprendre la compilation d'Angular

  • Qu'est-ce qu l'AoT, le JiT, les ngFactories.
  • Mode production / mode debug : quelles différences ?
  • Qu'est-ce que Webpack, comment est-il utilisé par Angular ?
  • Le processus de compilation décrit pas à pas.
  • Configuration du compilateur : options avancées de angular.json et tslint.json.

2. Tout savoir sur le module system et l'injection de dépendances

  • Comment fonctionne l'injecteur de dépendances ?
  • Utiliser directement la classe Injector : pourquoi, comment ?
  • Comprendre toutes les options du NgModule (imports, exports, entryComponents, provides...).
  • Bien comprendre comment partager des composants entre modules.
  • Écrire ses propres providers : valeur, classe et fonction (factory).
  • Utiliser les clés d'injection (injection token).
  • Mettre en place du lazy loading de modules pour optimiser les temps de chargement.

Utiliser des fonctions avancées des modules :

  • grâce à l'initialiseur de composants (APP_INITIALIZER), nous attendrons d'avoir reçu la langue de l'utilisateur avant d'afficher l'application,
  • grâce aux intercepteurs HTTP (HTTP_INTERCEPTORS), nous afficherons une barre de loading dès l'instant où une requête ajax est en cours.

3. Routing avancé

Les notions avancées de routing feront gagner votre code en simplicité :

  • les Resolver,
  • les Guard,
  • les Child routes.

Nous aborderons également les cas d'utilisations avancés suivants :

  • rediriger vers la page de login si l'utilisateur n'est pas connecté, puis revenir sur la page demandée initialement.
  • mettre en place une page "404".

Jour 1 et 2

1. RxJS avancé

Dans cette section nous aborderons plusieurs cas d'utilisation courants et présenterons les techniques et outils avancés pour y répondre avec RxJS.

Nous explorerons ainsi une grande partie de la puissance de la bibliothèque RxJS (version 6+).

Exemple de cas d'utilisations :

  • mettre en place un système de récupération récurrent de données (polling), suivant plusieurs stratégies (automatique, semi-automatique...),
  • mettre en place un système de cache côté client,
  • comment travailler avec une bibliothèque qui renvoit des promesses,
  • comment limiter l'exécution d'une action en cas de clic multiple de l'utilisateur,
  • réessayer une requête get si elle a n'a pas abouti à cause d'une coupure de réseau
  • etc...

Exemple d'opérateurs et constructeurs abordés :

  • Observable.create(),
  • throwError, catchError,
  • from, of,
  • concatMap, switchMap, (différences avec mergeMap)
  • debounceTime, throttleTime,
  • takeWhile, delayWhen,
  • publishReplay, refCount, take,
  • AsyncSubject...

Les opérateurs et constructeurs vus en initiation feront l'objet d'un rappel :

  • BehaviorSubject, map, mergeMap, tap, timer,
  • bonnes pratiques avancées (unsubscribe, pipe async...),
  • notions de mutabilité.

Jour 2

1. Animations et style Angular avancés

  • Animations liées au workflow d'un composant.
  • Animations liées au statut d'un attribut.
  • Réutiliser les animations (aimation(), useAnimation()...).
  • Toutes les options des animations.
  • Intégration de Angular Material.
  • Les différentes techniques d'isolation du css (ViewEncapsulation): Shadow DOM, émulée.

2.Les techniques avancées de composants

  • Les directives (@Directive).
  • Les directives structurelles (comment fonctionnent le *ngIf, *ngFor...).
  • Les templates embarquées (ng-template, ngTemplateOutlet, TemplateRef...).
  • La projection de contenu (ng-content).
  • Le Host.
  • Accéder aux sous composants avec ViewChild et ElementRef.
  • Connaître les étapes de cycle avancés : (ngAfterViewInit...).

Cas d'utilisation avancés :

  • mettre en place un système de pagination qui fonctionne de manière générique avec différents types de listes,
  • créer une directive, utilisable avec n'importe quel composant, qui traque les clics sur ce composant.

Jour 3

1. Mise en place d'un server side rendering (SSR)

  • Les enjeux du SSR.
  • Créer avec angular-cli un projet qui peut être rendu côté serveur.
  • Comment fonctionne le SSR avec Angular Universal.
  • Comment renvoyer un code d'erreur correct depuis le serveur SSR (404, 401, 500...).
  • Comment forwarder le Host pour que le serveur Rest génère des urls correctes.

2. Techniques Angular de Progressive Web App

  • Mettre en place un Service Worker avec le client @angular/cli.

3. Tests

  • Ecrire et lancer les tests,
  • Mocker les appels http.

4. Internationalisation

  • Internationalisation avec ngx-translate.

5. Utiliser Angular en dehors du web

  • Initialiser un projet desktop avec Electron.
  • Initialiser un projet mobile hybride avec Ionic.

Public visé et pré-requis

Public

Développeurs.

Pré-requis

Avoir suivi le cours Angular ou avoir les connaissances équivalentes

Personne en situation de handicap

Pour toutes questions relatives à l’accueil d’un participant présentant un handicap, merci de nous contacter préalablement avant toute inscription.

Prochaines sessions & tarifs

Front-end

Angular avancé

A distance (foad) Du 22 au 26 novembre 2021

Durée : 3 jour(s) soit 21 heures
Tarif : 1800 € ht par personne

Front-end

Angular avancé

A distance (foad) Du 23 au 25 mars 2022

Durée : 3 jour(s) soit 21 heures
Tarif : 1800 € ht par personne

Ingénierie pédagogique

Moyens pédagogiques et techniques

  • Les supports de cours (slides) seront disponibles en ligne et distribués en début de formation (à l'aide d'un lien vers notre outil interne ou d'une version numérisée), puis fournis au format électronique à la fin de la formation.
  • Une salle de formation équipée d'une connexion Internet, d'un vidéoprojecteur, paperboard...
  • Un ordinateur par stagiaire avec un système d'exploitation installé et les outils nécessaires.

Modalités de suivi de l'exécution du programme

  • Durant la formation : alternance d'apports théoriques, d’exercices pratiques et de mise en situation sous forme de travaux pratiques corrigés avec l’expert-formateur.
  • En fin de formation : évaluation à chaud sur l'atteinte des objectifs pédagogiques sous forme de tour de table et de test de connaissances, d'exercices, de QCM.

Moyens d'encadrement

Formation assurée par un expert front-end.

Experts Angular avancé

Jérémie Pardou

Jérémie Pardou

Lead-developer-Full-stack


Toulouse

Julien Marzin

Développeur Web


Nantes