Vite et sûr : l'IA dans votre code Angular
Livrez une fonctionnalité IA, laissez des agents écrire de l'Angular sous règles, et gardez les deux sécurisés, en trois jours, sur un code à l'échelle d'une entreprise.
Adil Ben Moussa
Architecte frontend · Angular, React, Swift · Tétouan, Maroc
- Vingt ans de logiciel aux Pays-Bas comme programmeur, team lead et architecte logiciel, aujourd'hui à Tétouan. Angular depuis AngularJS, dans des produits de santé, d'éducation, de médias numériques et de banque utilisés chaque jour par des milliers de professionnels.
- Livre la même architecture dans trois stacks, Angular d'entreprise pour des clients, React Native pour une plateforme scolaire, SwiftUI pour une app sur l'App Store sortie en 2010, avec des agents de code IA dans chacune.
Ce que vous emportez
Vous repartez avec deux choses : une fonctionnalité Angular propulsée par un LLM que vous avez construite vous-même, avec streaming, appels d'outils, gestion des erreurs et des coûts ; et un flux de travail assisté par l'IA qui fonctionne sur votre code existant : configuration de l'agent, règles, contrôles d'architecture que l'agent doit passer, et une discipline de revue que votre équipe peut adopter dès lundi.
Une seule application d'entreprise réaliste suivie sur les trois jours : une application Angular multi-modules avec des parties legacy, de vrais formulaires et un vrai backend, pour que chaque exercice atterrisse dans du code qui ressemble au vôtre.
Essayez le code de démonstration
Chaque exercice se fait sur Atlas Bank, une banque marocaine imaginaire construite avec Angular et Nx. Parcourez l'application en ligne, puis lisez le code et le fichier de règles que suivent les agents.
À qui s'adresse ce workshop
- Développeurs Angular avec au moins un an d'expérience en production
- Tech leads et architectes qui doivent décider de ce que leur équipe peut et ne peut pas faire avec l'IA
- Équipes de centres nearshore et d'éditeurs de produits qui travaillent sur de grandes applications Angular à longue durée de vie
Prérequis
- À l'aise avec les composants, les services, les signals ou RxJS, et le CLI Angular
- Un ordinateur portable avec Node (LTS courante), le CLI Angular, Git et un IDE
- Un agent de code IA installé (GitHub Copilot, ChatGPT et Codex, Claude Code ou Cursor) ; les clés API pour les exercices sont fournies
Programme
- 01
Flux de travail assisté par l'IA dans un code Angular d'entreprise
Piste 1 · les agents dans votre code- Un guidage en couches pour l'agent : les skills officiels et , plus le diff de 40 lignes où votre dépôt diverge volontairement, et pourquoi les fichiers d'instructions génériques de 400 lignes échouent
- L'architecture comme contrat exécutable, en deux variantes : les Nx (tags + matrice de dépendances) et pour les projets Angular CLI classiques ; imports par l'API publique uniquement
- Un dépôt, plusieurs agents : garder , et , , et sur les mêmes règles avec un partagé, le format ouvert (les skills officiels d'Angular l'utilisent), des serveurs et un lint que chaque outil doit passer ; des fichiers propres à chaque outil réduits au minimum, une seule source de vérité
- Là où les agents échouent dans le code Angular : les quinze règles de jugement (code défensif, computed vs effect, services qui s'abonnent à eux-mêmes, service qui importe un composant, littéraux magiques, l'analogue d'abord…) passées en revue sur un vrai diff d'agent, puis lesquelles deviennent des interdictions ESLint
- 02
Moderniser de l'Angular legacy avec des agents
Piste 1 · les agents dans votre code- Migrer vers les , les composants et le nouveau : l'agent propose le plan, la salle le passe en revue selon demote-don't-delete, l'état à trois niveaux et un par comportement qui change une décision
- Générer des tests, puis les durcir : tests sociables, des fakes uniquement aux frontières du système, des harnesses interrogés par libellé, et la question « que pourrais-je supprimer en restant au vert ? »
- Discipline de revue : taille du diff, un commit par tâche de bas en haut, le corps de la PR explique chaque première utilisation, quand arrêter l'agent
- 03
Construire une fonctionnalité IA en Angular
Piste 2 · l'IA dans votre produit- Diffuser en les réponses du dans l'UI avec des signals
- L' depuis le front : laisser le modèle agir sur votre application
- États d'erreur, latence, maîtrise des coûts et limites de débit : la partie production que personne ne montre en démo
- 04
UI agentique
Piste 2 · l'IA dans votre produit- Des composants qu'un agent peut piloter : la famille / / et ce qui est stable aujourd'hui
- L'UI dynamique générée à l'exécution : là où ça vaut le coup et là où ça ne le vaut pas
- 05
Sécurité : l'IA comme attaquant, l'IA comme relecteur
Les deux pistes- Où vit le standard : le Top 10 pour les applications web et le Top 10 OWASP pour les applications LLM, rapportés à ce qu'une équipe frontend contrôle vraiment, pour que l'équipe sache où regarder quand la liste change, et non ce qu'elle disait l'année du workshop
- L' par votre propre UI : un modèle qui lit du contenu utilisateur, un appel d'outil qu'il ne devrait pas faire, et la frontière des données dans le navigateur
- Les failles que les agents écrivent à grande échelle : , contrôles d'autorisation qui n'existent que côté client, secrets dans le bundle, dépendances que personne n'a demandées, trouvées en direct dans un diff d'agent sur Atlas Bank
- L'IA comme relecteur : les modèles de pointe trouvent désormais de vraies vulnérabilités dans le code frontend ; un scan de sécurité sur chaque diff d'agent avant qu'un humain le lise, ce qu'il attrape, ce qu'il ne peut pas voir, et sa place dans le pipeline
- Ce qui ne quitte jamais le client, l'auditabilité, et comment expliquer tout cela à votre équipe sécurité
- 06
Adoption par l'équipe
Les deux pistes- La politique IA en huit parties que votre équipe écrit dans la salle : skills installés, documents de règles du dépôt, interdictions , outil de frontières, forme des PR, bot de revue + skill d'auto-revue, hooks d'édition, liste de commandes interdites
- Ce que ça coûte et ce que chaque palier apporte : offres gratuites, plans d'entrée par poste, plans premium par poste, sièges équipe et entreprise, modèles locaux pour les équipes aux données sensibles, prix actuels vérifiés la semaine du workshop, jamais de mémoire, et comment un document de règles de 40 lignes et une limite de diff de 300 lignes réduisent la facture de
- Mesurer si l'IA a vraiment aidé : lead time, défauts trouvés en revue, charge de revue par PR
Dates et formats
Pas encore de dates publiques. Les premières éditions ont lieu en intra-entreprise avec des équipes à Tanger et Casablanca. Demandez-en une pour votre équipe, ou abonnez-vous ci-dessous pour être informé de la première date publique.
Demander un workshop intra-entrepriseFAQ
Est-ce une introduction à Angular ?+
Non. Le workshop suppose que vous construisez déjà des applications Angular au quotidien. Si votre équipe a d'abord besoin des fondations, demandez une journée intra-entreprise « Angular moderne » avant ce workshop.
Quels outils IA utilisez-vous ?+
Le workshop est indépendant de l'outil : les patterns fonctionnent avec Copilot, ChatGPT et Codex, Claude Code et Cursor. Les exercices se font avec l'agent que votre équipe utilise déjà.
À distance ou sur site ?+
Les deux. Les workshops intra-entreprise se font sur site dans vos locaux, au Maroc ou dans le Golfe quand une équipe nous invite (Riyad, Doha, Dubaï). Les dates publiques sont à distance ou à Casablanca / Tanger. Des demi-journées à distance dans votre fuseau horaire sont possibles pour les équipes qui le préfèrent, six demi-journées au total.
Dans quelle langue ?+
La langue parlée est votre choix : arabe ou anglais. Les slides, le code et tous les supports sont en anglais pour rester utiles après le workshop.
Notre entreprise ne paiera pas les plans IA coûteux. Le workshop reste-t-il utile ?+
Oui, et ce cas est couvert volontairement. Chaque exercice tourne sur un plan d'entrée par poste ou une offre gratuite, et un segment porte sur ce que les paliers premium apportent vraiment, quand une équipe en a besoin, et comment les règles et les limites de diff maintiennent la facture de tokens basse. Les modèles locaux sont montrés pour les équipes qui ne peuvent pas envoyer de code dans un cloud.
Nous utilisons différents outils IA dans la même équipe. Lequel supposez-vous ?+
Aucun. La configuration est conçue pour que Copilot, ChatGPT et Codex, Claude Code, Cursor et Gemini CLI lisent les mêmes règles et passent les mêmes contrôles. Chacun vient avec l'agent qu'il a déjà et la salle compare les diffs.
Recevons-nous le matériel ?+
Oui : le dépôt complet, les slides et les solutions des exercices, plus les fichiers de règles et d'instructions que vous pouvez déposer dans vos propres dépôts.