1Glink · Deep dive technique

Construire et faire évoluer un frontend Angular métier.

Un aperçu de l’architecture de la plateforme et des contributions que mon historique Git permet de m’attribuer : composants, données, système UI et interactions métier.

Angular 20
TypeScript
Signals
RxJS
NGXS
SCSS

01 · Vue d’ensemble

Une application découpée par domaines métier

L’application repose sur Angular 20, des composants standalone et un chargement paresseux des features. Les états métier sont majoritairement fournis au niveau des routes, au plus près de leur durée de vie.

Application Angular

Shell authentifié

Navigation · contexte · notifications

Features métier

CV · candidats · offres · entretiens

État et flux

NGXS · Signals · RxJS

Services

REST · traitements asynchrones · temps réel

Cette architecture décrit le projet dans lequel mes développements s’inscrivent. Elle ne signifie pas que j’en ai conçu seul l’ensemble.

02 · Angular

Répartir les responsabilités de l’état

NGXS, Signals et RxJS ne couvrent pas la même temporalité. Le projet les combine pour séparer l’état partagé, les dérivations proches de l’interface et les flux asynchrones.

Partagé

NGXS

Actions, selectors et orchestration des données communes à une feature.

Proche de la vue

Signals

État local et valeurs dérivées consommées directement par les composants.

Asynchrone

RxJS

Requêtes HTTP, formulaires, notifications et autres flux qui évoluent dans le temps.

03 · Refactoring

Une page riche ne doit pas devenir un composant monolithique

Les pages CV et entretien rassemblent beaucoup de responsabilités. J’ai contribué à les découper pour que la page principale orchestre le parcours sans porter chaque détail d’affichage.

Avant · responsabilités concentrées

Une page fait presque tout

Préparer les données
Gérer recherche et filtres
Construire les statistiques
Afficher documents, compétences et expériences
Porter les actions utilisateur

Après · responsabilités distribuées

La page devient orchestratrice

Panneau de recherche dédié
Hero et résumé
Cartes de compétences et documents
Timeline professionnelle
Mappers et ViewModels

04 · TypeScript

Transformer les données avant le template

Sur la restitution CV, j’ai travaillé sur des mappers qui regroupent et hiérarchisent les informations avant leur affichage. Les composants reçoivent ainsi un modèle adapté à leur fonction.

01API / StoreDonnées disponibles
02Modèle métierContrats TypeScript
03MapperTri et transformation
04ViewModelBesoin du composant
05InterfaceTemplate plus simple

Les transformations peuvent être relues sans parcourir le DOM.

Les cartes partagent des contrats plus petits et plus explicites.

Les changements de présentation restent localisés.

05 · UI Engineering

Industrialiser l’interface progressivement

J’ai restructuré le SCSS global en couches et contribué aux primitives utilisées par les écrans CV. L’objectif n’était pas de réécrire toute l’application, mais de fournir une base commune aux nouveaux écrans et aux migrations utiles.

FondationsVariables · mixins · tokens
PrimitivesBoutons · cartes · data grid · pagination
LayoutsPages · grilles · navigation
MétierCV · candidats · entretiens

Du fonctionnel provisoire à une interface aboutie

Certains écrans sont d’abord assemblés avec des composants standards afin de rendre la fonctionnalité utilisable. Mon intervention consiste ensuite à reprendre leur structure, leurs états et leur présentation pour les intégrer au langage visuel du produit, sans dégrader leur comportement métier.

Le CDK reste pertinent lorsqu’il apporte une mécanique utile sans imposer de style. Le système visuel progresse ainsi écran par écran, en fonction des besoins réels du produit.

07 · Dans le code

Deux décisions visibles dans l’implémentation

Ces extraits réels sont volontairement courts : le contexte et l’effet comptent davantage que la quantité de code affichée.

ResizeObserver

Éviter les recalculs de grille concurrents

Décision — regrouper les changements de taille dans la prochaine frame. Effet — la grille se recalcule après le rendu sans empiler les mises à jour.

this.resizeObserver = new ResizeObserver(() => {
  this.scheduleLayout();
});

private scheduleLayout(): void {
  if (this.layoutFrame !== null) {
    cancelAnimationFrame(this.layoutFrame);
  }

  this.layoutFrame = requestAnimationFrame(() => {
    this.layoutFrame = null;
    this.layout();
  });
}

Mapper TypeScript

Préparer la timeline avant le template

Décision — convertir les dates en positions bornées dans un ViewModel. Effet — le composant reçoit des valeurs directement exploitables pour l’affichage.

const items = parsedExperiences.map((parsed, index) => {
  const startTime = parsed.startDate?.getTime() ?? minTime;
  const endTime = parsed.endDate?.getTime() ?? maxTime;

  const rawStart = ((startTime - minTime) / timelineDuration) * 100;
  const rawEnd = ((endTime - minTime) / timelineDuration) * 100;

  const startPercent = clamp(rawStart, 0, 96);
  const endPercent = clamp(rawEnd, startPercent, 100);

  return {
    ...parsed.item,
    id: parsed.item.id || `career-timeline-${index}`,
    positionPercent: startPercent,
    startPercent,
    endPercent,
  };
});

08 · Formulaire métier

Planifier un entretien relie plusieurs domaines

J’ai contribué au formulaire de planification, à son calendrier et à l’état associé. Le problème dépasse la saisie de champs : il faut rapprocher participants, candidat, offre, date, horaires et contraintes de planning.

ParticipantsCandidatOffreDate & horaires

Reactive FormSaisie et validation
SignalsRègles et valeurs dérivées
FullCalendarContexte de planning
NGXSDonnées partagées et création

09 · Contributions

Ce que je peux m’attribuer

Cette sélection est limitée aux changements confirmés par mon historique Git. Elle ne m’attribue ni l’architecture complète du produit ni les briques temps réel développées par d’autres membres de l’équipe.

01Restructuration du SCSS global en couches identifiables.
02Refactoring du détail CV et extraction de composants spécialisés.
03Extraction du panneau de recherche des CV.
04Construction des tableaux, du tri, de la pagination et de primitives de data grid.
05Finalisation de la restitution CV, de ses cartes et de ses mappers TypeScript.
06Découpage du détail d’entretien autonome en blocs spécialisés.
07Contribution au formulaire de planification et à l’état des entretiens.
08Création d’une directive masonry fondée sur ResizeObserver.

Revenir à l’étude LYA Voir mon expertise Angular