Formation Angular Avancé
Le premier jour de formation est consacré à la révision des concepts de base d'Angular, ainsi qu'à la découverte de certaines fonctionnalités avancées. Les participants apprendront à utiliser les services et le client HTTP, ainsi que le routeur. Ils découvriront également le fonctionnement interne d'Angular, notamment la zone.js et la compilation JIT et AOT. Ils apprendront également à optimiser les performances de leur application en utilisant la minification et le tree-shaking, ainsi qu'à utiliser la stratégie de détection des changements OnPush. Le deuxième jour de formation est consacré à l'utilisation de techniques avancées d'Angular, comme le rendu côté serveur et la création de bibliothèques. Les participants découvriront également les opérateurs RxJS avancés et apprendront à utiliser des services avancés. Ils étudieront également les différentes options de chargement différé des modules et apprendront à utiliser les événements du routeur. Le troisième jour de formation est consacré aux tests unitaires et end-to-end (E2E) sous Angular. Les participants découvriront les différentes bibliothèques de tests unitaires et E2E disponibles, ainsi que le pattern Page Object pour les tests E2E. Ils apprendront à exécuter leurs tests sur des plates-formes en nuage comme Browserstack ou Sauce Labs. Le dernier jour de formation est dédié au state management sous Angular. Les participants découvriront les concepts de base de Redux et étudieront différentes bibliothèques de state management pour Angular, comme NgRx, NGXS, Akita et Angular Redux. Ils apprendront à utiliser les observables et les action creators, reducers, selectors et effects dans NgRx, ainsi qu'à intégrer le state management au routeur.
Objectifs pédagogiques
- Avoir des notions sur le fonctionnement interne d'Angular
- Connaître les concepts avancés des composants, du routeur, des services
- Optimiser les performances de son application
- Utiliser les techniques avancées comme le rendu côté serveur ou mode hors-ligne
- Automatiser les tests de son code
- Découvrir NgRx pour gérer le state de son application
Pré-requis
- Avoir suivi ou être au niveau de notre formation Angular
Public
- Développeurs
- Chefs de projets
Programme
Jour 1
Rappels sur Angular
- Data Binding, Template et Model
- Modules
- Services
- HttpClient
- Router
Angular sous le capot
- Détection de changement
- Zone.js
- Compilation JIT vs AOT
- Les plates-formes
- Configurer Angular CLI
- Schematics
- Builders
- Modifier la configuration de Webpack
Optimisation des performances
- Minification et Tree-Shaking
- Immuabilité
- ChangeDetectionStrategy Default et OnPush
- Exécuter du code en dehors de Zone.js
- Utiliser du Virtual Scroll
- TrackBy avec ngFor
Composants Avancé
- ViewChild / ContentChild et Lifecycles correspondant
- Composants Dynamiques
- ng-container / ng-template / ngTemplateOutlet
- TemplateRef
Internationalisation (i18n)
- Angular CLI vs ngx-translate
- Utiliser des traductions dans les templates
- Extraire les clés de traductions
- Formater les nombres, dates, monnaies
- Charger les traductions dynamiquement
Jour 2
Techniques Avancées
- Mettre à jour Angular
- Rendu côté serveur
- Mode hors-ligne / ServiceWorker / Applications PWA
- Créer sa bibliothèque
- Transformer un composant en WebComponent
RxJS Avancé
- Les principaux opérateurs : tap, take, filter, map, debounceTime, catchError...
- Les opérateurs de combinaison : combineLatest, switchMap, withLatestFrom...
- Les méthodes de création : of, from, fromEvent, throwError, timer...
- Les subjects : Subject, ReplaySubjet, BehaviorSubject, AsyncSubject
Services Avancé
- Configurer les providers : useClass, useFactory, useValue, useExisting
- Tree Shakable Providers
- Injecter autre chose qu'une classe avec @Inject
- Modules avec méthodes forRoot / forChild
Angular Router Avancé
- Les guards : CanActivate, CanActivateChild, CanDeactivate
- Les resolvers
- Les modules en Lazy Loading et le guard CanLoad
- Les événements du Router
Jour 3
Tests Unitaires
- Les bibliothèques de tests unitaires en JS : Karma, Jasmine, Mocha, Jest...
- Introduction à Karma + Jasmine
- Configurer ses modules de tests
- Tester des composants, directives, pipes, services
- Les zones async et fakeAsync
- Tester les services HTTP avec HttpClientTestingModule et HttpTestingController
- Tester les changements d'URL avec RouterTestingModule
- Utilisation de ng-mocks
Tests End-To-Ends (E2E)
- Les bibliothèques de tests E2E en JS : Selenium WebDriver, WebdriverIO, Protractor, CodeceptJS, Cucumber.js, Cypress...
- Le pattern Page Object
- Utiliser les sélecteurs CSS ou XPath
- Simuler des événements
- Utiliser les environnements pour fournir des données de tests
- Exécuter ses tests sur Browserstack ou Sauce Labs
Jour 4
State Management sous Angular
- Qu'est-ce qu'un State ? Intérêts par rapport aux services "classiques"
- Les concepts de Redux : store, actions, reducers, constants, action creators, selectors, effects
- Les bibliothèques Redux-like sous Angular : NgRx, NGXS, Akita, Angular Redux
- Utilisation de Redux DevTools
NgRx
- Penser et créer son store
- Les observables dans NgRx
- Ecrire ses premiers action creators, reducers, selectors
- Les meta-reducers
- Gérer les side-effects avec @ngrx/effects
- S'intégrer au Routeur avec @ngrx/router-store
- Automatiser ses tests en lien avec NgRx
Méthodes mobilisées
- Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
- Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
- Un support de cours en version numérique sera remis à chaque participant
Modalités d’évaluation
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Auto-positionnement en amont et aval de la formation
Accessibilité aux personnes handicapées
Nous nous engageons à rendre notre formation Angular Avancé accessible aux personnes en situation de handicap. Merci de nous contacter afin que nous puissions réaliser les adaptations nécessaires en amont de la formation.Avis
Jeremie C.
La formation
La partie d'explication sur le fonctionnement et l'implémentation prècis des Observers from scratch était trop brève. On à passsé un long pour conprendre le fonctionnement dles callBacks et promesses (Ce qui fût très bien) mais très peux sur la classe Observer en elle même. On est trop vite allé sur les méthodes
Une explication sur le fonctionnement du cross cocmpilateur ts/js aurait été interessante dans le cadre d'un cour avancé.
Guillaume P.
Sylvain R.
La formation
Je m'attendais à une formation de niveau technique plus élevée. Par contre c'est certain que le niveau des participants était très disparate et que le "cahier des charges" de ce qui était attendu comme formation n'était probablement pas clair, voire même pas défini.
Je pense que pour l'utilisation que l'on fait d'Angular. Il aurait été plus intéressant d'aborder des sujets tels que les best practices ou la gestion du state (par exemple avec NgRx) plutôt que d'aborder le sujet du SSR ou des PWA sachant qu'il est peu probable qu'on utilise ces fonctionnalités dans nos projets.
Le formateur
Romain semble très bon et connais vraiment bien son sujet.
Malheureusement quelques problèmes d'effet démo probablement liés au fait qu'Angular bouge beaucoup trop vite (malheureusement un peu trop la norme dans l'écosystème Node / JS) La plupart des problèmes ont cependant été vite résolus et n'ont jamais été bloquants
Commentaire général
Je recommanderais la formation, mais peut-être pas sous le nom "Angular avancé"
Marin D.
La formation
Le jour 1 correspondait parfaitement à mes attentes, le jour 2 sur RxJs était je pense déjà maîtrisé par l'ensemble des participants
Les +
- Optimisation des performances
- PWA
Thomas S.
La formation
Je ne trouve pas forcément que c'était un cours avancé. J'avais déjà connaissance de beaucoup de choses, alors que je ne suis pas forcément un dev frontend. Je pense qu'il y avait peut-être trop de différence de niveau entre les candidats, et certaines sujets n'auraient pas forcément dû être mis au programme (async/await, ssr, etc...). Il faudrait plus demander ce que les élèves veulent voir 1-2 semaines avant le cours.
Le formateur
J'ai trouvé le formateur très bien, il connait son sujet. Je pense toutefois qu'il faudrait arriver avec des exercices plus préparés, et peut-être faire un peu moins de live coding, mais plus avoir des scénarios préparés.
Xavier G.
Nicolas S.
Enno H.
Les +
rxjs
Baptiste P.
Kevin R.
Les +
J'ai beaucoup apprécier les informations sur les "pièges" dans lesquels on peut tomber sans même le savoir, ainsi que comment les résoudre / éviter
Simon M.
Ecrah E.
Nicolas D.
Thomas L.
Antoine L.
Timofei N.
Guillaume B.
La formation
j'aurais aimé parfois un peu plus de théorie en amont des sujets les plus techniques (par exemple des schémas sur les différents compilateurs, etc.). mais globalement c'était top. j'ai bien aimé le fait que tu reviennes le lendemain sur les sujets abordés la veille.
Le formateur
à mon avis tu gagnerais à introduire une légère couche d'interactivité :
- poser des questions
- demander en amont les sujets sur lesquels les gens sont confortables ou pas
- peut être commencer par un petit questionnaire sur angular pour évaluer le niveau des participants (genre les questions qu'on te pose en entretien d'embauche, etc.) --> ca te permettrait aussi de mettre le curseur sur les parties les moins maitrisées
Sergio B.
Thomas O.
Xavier A.
La formation
Peut-être un problème de rythme (les rappels de la veille, fait le matin, sont peut-être un peu trop long)
Thomas L.
Cyril B.
Jean-Marie O.
La formation
J'aurais préféré moins de temps passé sur la partie compil / esm / webpack.
