Une formation Angular avancé et personnalisée pour les développeurs expérimentés.
Pourquoi une formation Angular avancé ?
Vous travaillez déjà avec Angular et vous ressentez les limites de l’auto-formation ? Rassurez-vous, vous n’êtes pas seul·e. Se contenter de la documentation officielle montre vite ses limites. Les bonnes pratiques (architecture, optimisation, etc.) nécessitent l’aide d’un expert.
Pourquoi cette formation Angular avancé ?
- C’est une des ressources officielles d’Angular !
- Je suis contributeur Angular.
Angular avancé : pour qui ?
Cette formation s’adresse à des développeurs qui travaillent déjà avec Angular et dont les projets ont déjà démarré.
Si vous ne connaissez pas encore Angular et que vous allez démarrer un projet, direction notre formation formation Angular.
Objectifs de la formation Angular avancé
- Approfondir la maîtrise d’Angular
- Améliorer la productivité
- Mettre à jour son application depuis les versions précédentes
- Mettre en place une architecture robuste
- Optimiser vos applications
- Ajouter des tests pour améliorer la fiabilité
- Savoir réutiliser des fonctionnalités en créant une librairie pour Angular
Programme de la formation Angular avancé
Ce programme, et donc sa durée et son tarif, ont vocation à être personnalisés, notamment en fonction des sujets qui sont pertinents ou non pour votre projet (il est rarement question de voir l’intégralité des éléments ci-dessous).
Les classiques d’Angular
Pour éviter la répétition, nous n’allons pas recopier ici les détails déjà présents dans le programme de la formation Angular classique, auquel vous pouvez vous référer. Mais il est quasiment sûr que vous aurez besoin des éléments suivants :
- Bonnes pratiques et productivité
- Architecture : pour remettre votre projet d’équerre
- RxJS : la plus grosse difficulté dans Angular
Nouveautés Angular
Une formation Angular avancé est l’occasion de voir les nouveautés apportées par les nouvelles versions d’Angular, et de vous aider à migrer si nécessaire.
- Angular 4 : HttpClient
- Angular 5 : pipeable operators
- Angular 6 : tree-shakable services
- Angular 7 : TypeScript 3
- Angular 8 : chargement différentiel
- Angular 9 : Ivy, le nouveau moteur de rendu
- Angular 10 : mode strict
- Angular 11
- Angular 12 : Alternative à Protractor
- Angular 13 : TSLint > ESLint
- Angular 14 : Typed reactive forms
- Angular 15 : standalone components
Optimisation avancée
En comprenant les mécanismes d’Angular, votre projet peut grossir indéfiniment et malgré tout votre application restera rapide à charger et fluide à l’usage.
- Lazy-loading
- Change detection : Default vs OnPush
- zone.js
- trackBy
State / store
La gestion du state dans une application est souvent considérée comme un sujet difficile. On choisit donc souvent une librairie, comme ngrx ou ngxs, mais ce sont des usines à gaz, qui aggravent la complexité du code.
Angular a déjà prévu une librairie pour cela : RxJS. Il faut d’abord la maîtriser (et la formation est faite pour cela), mais une fois que c’est le cas, elle suffit à mettre en place un store simple et efficace.
- Création d’un store
- Gestion du state (ReplaySubject)
- Modification du state (dispatch)
- Récupération du state (select)
Multilingue / internationalisation : @angular/localize
Un système de gestion des traductions est inclus nativement dans Angular.
- Gestion des textes statiques
- Gestion des textes dynamiques
- Gestion du pluriel
- Builds localisés
Reactive Forms : @angular/forms
Il existe des options avancées pour gérer des formulaires lourds et/ou dynamiques.
FormControletFormGroup- Validateurs personnalisés
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 : playwright ou cypress
Mobile : Ionic / Capacitor / Cordova
Vous ciblez les mobiles et tablettes ? Capacitor d’Ionic, qui remplace Cordova, est là pour vous aider. Il pourra aussi se charger de déployer en mode logiciel de bureau.
- APIs mobiles
- Build Android
- Build iOS
Bureau : Electron
Il est aussi possible de déployer en mode logiciel via Electron.
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.
