11 min de lecture - Comment SoarUI accélère le développement Angular en entreprise

Les équipes Angular en entreprise sont confrontées à un problème récurrent : elles passent des semaines — parfois des mois — à reconstruire les mêmes composants d'interface pour chaque nouveau projet. Tableaux de données avec tri, filtrage et pagination. Assistants de formulaire multi-étapes avec validation. Mises en page de tableaux de bord avec grilles responsives. Ces composants sont un standard incontournable pour tout outil interne ou application destinée aux clients, et pourtant les équipes continuent de les écrire à partir de zéro, car les bibliothèques existantes ne correspondent pas à leur design system ou manquent de la flexibilité qu'exigent les projets d'entreprise.

SoarUI a été conçu pour résoudre ce problème. C'est notre système de design Angular interne — en cours de développement par nos équipes de Casablanca et de Paris depuis septembre 2025 — qui s'appuie sur Angular Material et le CDK, et qui fournit des composants d'entreprise prêts pour la production, que les équipes produit peuvent adopter progressivement sans réécrire leur code existant.

Ce que vous allez apprendre

• Pourquoi les équipes Angular en entreprise perdent du temps sur les composants d'interface de base, et comment le récupérer
• Ce que propose SoarUI : composants prêts à l'emploi, jetons de design, accessibilité par défaut et prise en charge des Signals
• Comment SoarUI se positionne face à PrimeNG, Nebular et aux autres bibliothèques de composants Angular
• Comment nous intégrons SoarUI dans des produits Angular comme FormAI
• Des exemples concrets de gains de temps de développement sur des cas d'usage réels en entreprise

L'essentiel

SoarUI est notre système de design Angular interne, construit sur Angular Material et le CDK, qui fournit des composants de niveau entreprise — tableaux de données, générateurs de formulaires, mises en page de tableaux de bord, et bien plus — avec un thème basé sur des jetons de design, une accessibilité conforme au WCAG 2.1 AA par défaut, et une intégration avec Angular Signals. Le développement a démarré en septembre 2025 ; il propulse déjà les sondages, quiz et sessions en direct de FormAI. Les équipes qui s'appuient sur un design system partagé réduisent généralement leur temps de développement d'interface de 40-60 % sur les projets d'entreprise, en éliminant le besoin de construire et de maintenir des composants d'interface sur mesure.

Le problème : les équipes d'entreprise reconstruisent sans cesse les mêmes composants

Entrez dans n'importe quel projet Angular d'entreprise, vous retrouverez le même schéma. L'équipe a besoin d'un tableau de données capable de gérer la pagination côté serveur, le redimensionnement des colonnes, la sélection de lignes, l'édition en ligne et l'export. Le mat-table d'Angular Material offre une base solide, mais il reste volontairement bas niveau. Il faut encore câbler la pagination, écrire la logique de tri, gérer les états de chargement, implémenter la configuration des colonnes et construire la barre d'outils.

Cela représente deux à trois semaines de travail pour un développeur senior. Multipliez ce chiffre par l'ensemble des projets de l'organisation, et le coût devient vertigineux.

Le constat est le même pour les formulaires. Les applications d'entreprise reposent largement sur des formulaires. Un parcours d'onboarding classique peut comporter 40+ champs répartis sur 5 étapes, avec des règles de visibilité conditionnelle, une validation croisée entre champs et une sauvegarde de brouillon. Construire cela directement avec les primitives brutes de ReactiveFormsModule est fastidieux et propice aux erreurs.

S'ajoutent ensuite les préoccupations transverses : cohérence du thème entre les applications, conformité en matière d'accessibilité, comportement responsive, internationalisation. Chacune de ces exigences ajoute une couche de travail supplémentaire qui n'a rien à voir avec la logique métier pour laquelle l'équipe a été mobilisée.

Ce qu'est SoarUI

SoarUI est notre système de design Angular interne, conçu spécifiquement pour les cas d'usage en entreprise et toujours en cours de développement. Il s'appuie sur Angular Material et le CDK Angular plutôt que de les remplacer, ce qui permet aux équipes déjà sous Material d'adopter des composants partagés progressivement.

La bibliothèque apporte de la valeur sur trois plans :

Des composants d'entreprise de haut niveau. Ce sont les widgets complexes dont toute application d'entreprise a besoin, mais dont la construction prend des semaines : tableaux de données avancés, générateurs de formulaires, grilles de tableaux de bord, parcours par étapes (stepper), téléversement de fichiers avec aperçu, et systèmes de notification.

Un système de jetons de design. SoarUI utilise des propriétés CSS personnalisées organisées selon une hiérarchie de jetons structurée. Les équipes définissent leurs jetons de marque (couleurs, typographie, espacements) une seule fois, et chaque composant les hérite automatiquement. Changer de thème — y compris pour le mode sombre — revient à modifier des valeurs de jetons, pas à réécrire les styles des composants.

Une intégration au niveau du framework. SoarUI est construit avec Angular Signals dès sa conception. Les composants exposent leur état réactif via des signals plutôt que de reposer uniquement sur les observables RxJS, ce qui simplifie la détection des changements et améliore les performances dans les applications de grande taille.

Fonctionnalités clés en détail

Composants d'entreprise prêts à l'emploi

Tableau de données avancé. Le composant soar-data-table couvre l'ensemble des besoins d'un tableau de données en entreprise :

<soar-data-table
  [dataSource]="employeeDataSource"
  [columns]="columnConfig"
  [pagination]="{ pageSize: 25, pageSizeOptions: [10, 25, 50, 100] }"
  [sortable]="true"
  [filterable]="true"
  [selectable]="true"
  [exportFormats]="['csv', 'xlsx']"
  (rowAction)="onRowAction($event)">
</soar-data-table>

La configuration des colonnes est déclarative. Vous définissez les colonnes sous forme de données, et non de templates, ce qui permet facilement de laisser les utilisateurs personnaliser leurs propres vues :

columnConfig: SoarColumnDef[] = [
  { key: 'name', label: 'Employee Name', sortable: true, filterable: true },
  { key: 'department', label: 'Department', filterType: 'select', filterOptions: departments },
  { key: 'startDate', label: 'Start Date', type: 'date', sortable: true },
  { key: 'salary', label: 'Salary', type: 'currency', align: 'right' },
  { key: 'actions', label: '', type: 'actions', actions: ['edit', 'archive'] },
];

Cela remplace ce qui représente habituellement 800-1200 lignes de code de template et de logique personnalisés par un simple objet de configuration et une balise de composant unique.

Générateur de formulaires. Le composant soar-form-builder génère des formulaires complexes à partir d'un schéma JSON, en prenant en charge la mise en page, la validation, la logique conditionnelle et la navigation multi-étapes :

formSchema: SoarFormSchema = {
  steps: [
    {
      title: 'Personal Information',
      fields: [
        { key: 'firstName', type: 'text', label: 'First Name', required: true },
        { key: 'lastName', type: 'text', label: 'Last Name', required: true },
        { key: 'email', type: 'email', label: 'Email', validators: ['email'] },
        { key: 'role', type: 'select', label: 'Role', options: roleOptions },
      ],
    },
    {
      title: 'Access & Permissions',
      fields: [
        { key: 'accessLevel', type: 'radio', label: 'Access Level', options: accessLevels },
        {
          key: 'modules',
          type: 'checkbox-group',
          label: 'Modules',
          visibleWhen: { field: 'accessLevel', value: 'custom' },
        },
      ],
    },
  ],
}

Mises en page de tableaux de bord. Le composant soar-dashboard fournit un système de grille responsive avec placement des widgets par glisser-déposer, points de rupture configurables et préférences de mise en page persistantes. Les équipes y déposent des composants de graphiques, des cartes de statistiques et des widgets de données sans avoir à écrire la moindre logique CSS grid ou flexbox.

Jetons de design

Le système de thème de SoarUI repose sur une architecture de jetons à trois niveaux :

/* Tier 1: Global tokens (brand values) */
--soar-color-primary: #1a56db;
--soar-color-neutral-100: #f3f4f6;
--soar-font-family-base: 'Inter', sans-serif;
--soar-spacing-unit: 4px;

/* Tier 2: Semantic tokens (intent-based) */
--soar-color-action: var(--soar-color-primary);
--soar-color-surface: var(--soar-color-neutral-100);
--soar-color-text-primary: var(--soar-color-neutral-900);

/* Tier 3: Component tokens (scoped) */
--soar-button-bg: var(--soar-color-action);
--soar-table-header-bg: var(--soar-color-surface);

Cela signifie qu'un seul changement sur --soar-color-primary se propage à travers tous les composants de l'application. Les équipes d'entreprise gérant plusieurs applications Angular peuvent partager un fichier de jetons unique pour maintenir une cohérence visuelle sur l'ensemble de leur portefeuille.

Accessibilité par défaut

Chaque composant SoarUI intègre nativement la conformité WCAG 2.1 AA :

• Attributs et rôles ARIA appropriés appliqués automatiquement
• Navigation au clavier pour tous les composants interactifs (tableaux, menus, boîtes de dialogue, champs de formulaire)
• Gestion du focus dans les modales et les parcours par étapes
• Ratios de contraste des couleurs garantis via le système de jetons
• Annonces pour lecteurs d'écran lors des mises à jour de contenu dynamique

Les équipes n'ont pas besoin de rajouter l'accessibilité après coup : elle fait partie intégrante de l'API des composants. Ce seul point peut épargner aux équipes d'entreprise le coût d'un audit d'accessibilité dédié et d'un cycle de remédiation, qui s'étale habituellement sur quatre à six semaines.

Intégration d'Angular Signals

Les composants SoarUI utilisent Angular Signals pour la gestion d'état, en cohérence avec le modèle de réactivité moderne d'Angular :

@Component({
  template: `
    <soar-data-table
      [dataSource]="employees()"
      [loading]="isLoading()"
      (selectionChange)="selectedRows.set($event)"
    >
    </soar-data-table>
    <p>{{ selectedRows().length }} rows selected</p>
  `,
})
export class EmployeeListComponent {
  employees = signal<Employee[]>([])
  isLoading = signal(true)
  selectedRows = signal<Employee[]>([])
}

Cela supprime le besoin de gérer manuellement les abonnements, réduit les fuites mémoire dues à des appels unsubscribe oubliés, et s'intègre parfaitement avec la stratégie de détection des changements OnPush d'Angular.

Comment SoarUI réduit le temps de développement

Voici des comparaisons concrètes basées sur des cas d'usage courants en entreprise :

Sur un projet d'entreprise typique comportant 10-15 vues majeures, ces gains s'accumulent et représentent des mois d'effort économisés. Ce temps est réinvesti dans la logique métier, les intégrations et les workflows qui font réellement la différence pour le produit.

Intégration dans nos produits Angular

SoarUI est conçu pour coexister avec une configuration Angular Material existante. Dans des produits comme FormAI, nous n'avons pas eu besoin d'arracher les composants existants pour commencer à l'utiliser.

Étape 1 : consommer le package partagé depuis notre monorepo interne (et non depuis un registre public). Les applications produit dépendent des packages du design system comme de toute autre bibliothèque interne.

Étape 2 : importer les modules ou composants standalone nécessaires à une fonctionnalité :

import { SoarDataTableModule, SoarFormBuilderModule } from '@soarui/components'

@NgModule({
  imports: [
    MaterialModule, // configuration Material existante
    SoarDataTableModule,
    SoarFormBuilderModule,
  ],
})
export class FeatureModule {}

Ou avec des composants autonomes (standalone) :

@Component({
  standalone: true,
  imports: [SoarDataTable, SoarFormBuilder],
  template: `...`,
})
export class FeatureComponent {}

Étape 3 : appliquer les jetons de design. Ajouter la feuille de styles de jetons SoarUI dans les styles globaux et surcharger les valeurs de marque :

@import '@soarui/tokens/default-theme';

// Override with brand values
:root {
  --soar-color-primary: #your-brand-color;
  --soar-font-family-base: 'Your Brand Font', sans-serif;
}

Les composants Angular Material existants continuent de fonctionner sans modification. Nous migrons progressivement, en remplaçant les composants maison par leurs équivalents SoarUI un par un. Nous partagerons des mises à jour sur les nouveaux composants au fil du développement.

Comparaison avec d'autres bibliothèques de composants Angular

SoarUI vs PrimeNG

PrimeNG propose un catalogue de composants massif (plus de 80 composants) et s'est imposé pendant des années comme le choix par défaut pour les besoins d'interface Angular. Cependant, les composants PrimeNG sont développés indépendamment d'Angular Material, ce qui signifie que les équipes utilisant les deux se retrouvent avec des conflits de style et un comportement incohérent. Le système de thème de PrimeNG, bien que puissant, repose sur une approche propre qui ne s'intègre pas avec le thème d'Angular Material.

SoarUI s'appuie sur Material et le CDK, il n'y a donc aucun conflit. Les équipes déjà sous Angular Material gagnent des composants de plus haut niveau sans abandonner leurs fondations existantes.

SoarUI vs Nebular

Nebular (développé par Akveo) propose un design system intégrant Eva Design System. Il convient bien aux panneaux d'administration et aux tableaux de bord. Cependant, le développement de Nebular a fortement ralenti, et il ne prend pas encore en charge Angular Signals ni les composants autonomes. Son catalogue de composants est plus restreint que ce dont les équipes d'entreprise ont généralement besoin.

SoarUI est activement maintenu, prend en charge les fonctionnalités modernes d'Angular, et se concentre spécifiquement sur les cas d'usage en entreprise que le catalogue de Nebular ne couvre pas entièrement.

SoarUI vs développement interne

Certaines équipes d'entreprise développent leur propre bibliothèque de composants. Cela se justifie lorsque l'organisation a des exigences de design uniques qu'aucune bibliothèque existante ne peut satisfaire. Mais maintenir une bibliothèque de composants coûte cher : cela nécessite des ingénieurs dédiés, de la documentation, une infrastructure de tests, et une maintenance à chaque montée de version majeure d'Angular.

SoarUI fournit les fondations nécessaires pour que les équipes internes puissent se concentrer sur les composants réellement uniques dont leur activité a besoin, plutôt que de reconstruire un tableau de données pour la quatrième fois.

Comment nous déployons les composants partagés

1. Évaluer l'inventaire de composants actuel. Auditer les applications Angular pour identifier les patterns d'interface qui se répètent d'un projet à l'autre. Les tableaux de données, les formulaires et les mises en page de navigation figurent presque toujours sur la liste.

2. Commencer par un seul composant. Choisir le composant qui pose le plus de problèmes — généralement le tableau de données ou le générateur de formulaires — et remplacer la version maison par l'équivalent du design system sur une surface produit.

3. Appliquer les jetons de design. Configurer le système de jetons pour qu'il corresponde à la marque du produit. C'est un investissement ponctuel rentabilisé sur chaque composant partagé.

4. Élargir progressivement. Une fois que le premier composant a fait ses preuves, déployer d'autres composants sur le reste du projet, puis standardiser entre produits comme FormAI.

5. Suivre l'avancement. SoarUI est toujours en cours de développement. Nous partagerons des mises à jour sur son avancement et ses nouveaux composants. Consultez la page du projet SoarUI pour la présentation la plus récente.

Conclusion : mieux vaut livrer que reconstruire

Les équipes Angular en entreprise existent pour livrer de la valeur métier, pas pour reconstruire des tableaux de données. Un design system interne comme SoarUI fournit les composants prêts à l'emploi, accessibles et personnalisables qu'exigent les projets d'entreprise, construits sur les fondations Angular Material et CDK que les équipes connaissent déjà.

Le résultat : moins de temps passé sur la plomberie d'interface, et plus de temps consacré aux fonctionnalités qui comptent pour les utilisateurs. Le développement de SoarUI a démarré en septembre 2025 ; il propulse déjà les sondages, quiz et sessions en direct de FormAI, et nous continuerons à partager l'avancement de la bibliothèque. Si vous avez besoin d'aide pour mettre en place un design system dans votre stack Angular d'entreprise, parlons-en.