Formation Angular avancé

Une formation Angular avancé et personnalisée pour les développeurs expérimentés.

Pourquoi une formation Angular avancé ?

Angular est un framework complexe. Après avoir vu les fonctionnalités essentielles, il est possible d’aller beaucoup plus loin dans l’optimisation d’une application et sa viabilité.

Pourquoi notre formation Angular avancé ?

• Nous sommes une des ressources officielles d’Angular !
• Notre formateur est contributeur Angular.
• Un support PDF de 500 pages.

Angular avancé : pour qui ?

Cette formation s’adresse à des développeurs expérimentés. ayant déjà une bonne expérience en Angular. Un audit technique sera obligatoirement réalisé par le formateur. Pour celles et ceux qui doivent d’abord suivre la formation Angular de niveau 1, une quatrième journée optionnelle y est proposée pour aborder les principaux sujets avancés.

S’agissant d’approfondissement, cette formation est proposée seulement en intra-entreprise, et sa durée a vocation à être adaptée en fonction du programme souhaité.

Pensez à lire les questions fréquentes pour bien choisir votre formation.

Objectifs de la formation Angular avancé

• Approfondir la maîtrise d’Angular
• Mettre à jour son application depuis les versions précédentes
• Optimiser vos applications web
• Mettre en place des tests pour améliorer le développement
• Savoir réutiliser des fonctionnalités en créant une librairie pour Angular

Programme de la formation Angular avancé

La première partie du programme regroupe les sujets avancés essentiels. Ils sont abordés lors d’une formation Angular avancé personnalisée, ainsi que dans la 4e journée facultative de la formation Angular classique.

Optimisation : change detection

Il est possible de prendre la main sur la détection de changement qui se produit automatiquement dans Angular (ce qui vous permet de faire le data-binding), afin d’optimiser les performances.

• OnPush
• Mode manuel : ChangeDetectorRef
• zone.js et NgZone
• trackBy pour *ngFor

Internationalisation : i18n

Un système de gestion des traductions est inclus nativement dans Angular.

• Gestion des textes à traduire
• Gestion du pluriel

Reactive Forms : @angular/forms

Il existe des options avancées pour gérer des formulaires lourds et/ou dynamiques.

• FormControl et FormGroup
• Formulaires décomposés avec FormBuilder
• Validateurs personnalisés
• Validateurs asynchrones

Routing avancé : @angular/router

Le module router met à disposition de nombreux outils pour des cas plus avancés.

• Contrôler la navigation : guards
• Gestion avancée des paramètres (paramMap vs. queryParamMap)
• Lazy-loading

Créer une librairie réutilisable

Vous voulez réutiliser une fonctionnalité dans un autre projet ? Nous apprenons à créer une librairie réutilisable, calquée sur les conventions des modules Angular officiels.

• Configuration spécifique des outils
• Permettre de customiser un composant
• Permettre à un service d’être extensible
• NgModules et providers avancés
• Export de l’API publique
• Packaging et publication

Tests : @angular/*/testing

Eviter les régressions, anticiper les problèmes : Angular fournit plusieurs outils de test et le CLI automatise leur configuration et leur exécution.

• Tests unitaires : jasmine, karma et helpers Angular
• Tests end to end : protractor

Programme de la formation Angular personnalisée

La seconde partie du programme n’est pas abordé lors de la 4e journée facultative de la formation Angular classique, mais seulement lors d’une formation Angular avancé personnalisée. Les sujets abordés ou non seront sélectionnés en fonction des besoins de chaque équipe.

Rappels

Nous pouvons faire des rappels sur le programme Angular niveau 1, en fonction du niveau et des demandes des participants.

Mettre à jour son application

Il est important de mettre à jour son application Angular, nous vous aidons à migrer facilement.

• Nouveautés et dépréciations d’Angular 4
• Nouveautés et dépréciations d’Angular 5
• Nouveautés et dépréciations d’Angular 6
• Nouveautés et dépréciations d’Angular 7
• Nouveautés et dépréciations d’Angular 8
• Nouveautés du CLI
• Nouveautés de TypeScript
• Migrer de Http à HttpClient
• Migrer vers les pipeable operators de RxJS 5.5 et 6
• Transformer son application en Progressive Web App

Material avancé : @angular/material

Outre les thèmes pré-définis, Material de permet de gérer des sujets plus avancés.

• Gestion du tactile avec hammerjs
• Theming avec Sass

RxJS avancé : rxjs

RxJS est souvent le sujet le moins maîtrisé, car il est là pour résoudre la plus grande des difficultés en JavaScript : l’asynchronicité. Bien comprendre RxJS permet de passer à la vitesse supérieure dans ses dévéloppements.

• Observable, Subject, BehaviorSubject ou ReplaySubject ?
• Observer et Subscription
• Créer son propre opérateur

WebSocket

Outre le HTTP, il existe un nouveau protocole, les WebSockets, qui permettent de la communication en temps réel. Cela peut être utile pour des messageries, des jeux, du live, etc.

Sécurité

Angular embarque nativement plusieurs mécanismes de sécurité.

• Cross-Site Scripting (XSS)
• Cross-Site Request Forgeries (CSRF/XSRF)
• SubRessource Integrity (SRI)
• Content Security Policy (CSP)

Angular Universal : @angular/platform-server

Le server-side rendering est une autre nouveauté majeure qui pourrait bien être une révolution : les pages de votre application peuvent être pré-générées par le serveur. Qu’est-ce que cela signifie ? Un chargement instantané de votre application, la possibilité de faire également un site web avec Angular et de faire jouer le référencement naturel. Démarré comme un projet à part, Universal a été intégré nativement dans Angular 4 et peut désormais se mettre en place grâce aux dernières mises à jour d’Angular CLI.

• ServerModule
• Moteur back-end (Node.js et autres) : @nguniversal/express-engine

Angular Elements

Vous voulez réutiliser vos composants Angular dans d’autres projets qui tournent sous d’autres technologies (React, Vue.js, JavaScript natif…) ? C’est désormais possible grâce au nouveau package Angular Elements, qui permet de convertir les composants Angular en Web Components standards et natifs. Une révolution.

Cependant, cette fonctionnalité est encore en cours de développement pour un usage simple et optimal.

Cette formation m'intéresse