Documentation / L’IDE

Carte fullstack

Relie chaque appel HTTP du front-end à l’endpoint du back-end qui le traite, permet de naviguer entre les deux et vous avertit quand une modification casse le contrat.

La carte fullstack met en relation les appels HTTP de votre front-end et les endpoints de votre back-end. Vous voyez ainsi quels appels n’ont pas d’endpoint, quels endpoints ne sont utilisés par personne et ce qu’une modification casserait.

L’ouvrir

Outils › Carte fullstack. Elle n’a pas de raccourci par défaut ; vous la trouvez aussi avec Ctrl+Shift+A.

La carte a besoin des deux côtés. N’importe laquelle de ces configurations convient :

  • deux dossiers racines dans le même espace de travail ;
  • les deux projets ouverts dans la vue fractionnée ;
  • un seul projet qui contient le front-end et le back-end.

S’il n’y a qu’un seul côté, Yuli vous demande d’ajouter l’autre projet à l’espace de travail ou de l’ouvrir dans la vue fractionnée.

Filtres

Filtre Affiche
Tous Toute la carte.
Avec appels Les endpoints utilisés par le front-end.
Appels sans endpoint Les appels du front-end sans endpoint dans le back-end : des erreurs probables.
Endpoints inutilisés Les endpoints qu’aucun appel du front-end n’utilise.
Contrat Le contrat entre les deux côtés.
Tâches fullstack Les tâches qui touchent à la fois le front-end et le back-end.

Chaque relation a un niveau de confiance. Vous pouvez ne garder que celles à ≥ 70 % ou ≥ 90 %.

Depuis Faites Vous arrivez à
Un appel HTTP du front-end Ctrl+Clic ou F12 La méthode du back-end qui le traite
Un endpoint du back-end Ctrl+Clic Utilisations depuis le frontend

Au-dessus de chaque endpoint, une ligne (CodeLens) indique « n utilisations depuis le frontend ». Au-dessus d’un appel sans endpoint, vous verrez « ⚠ aucun endpoint dans le backend ».

Le contrat

À l’enregistrement, Yuli vérifie si la modification casse un appel de l’autre côté. Si c’est le cas, vous le verrez dans le panneau Problèmes et dans un avertissement.

Dans Modifications IA, les modifications de l’agent affichent une carte « Contrat fullstack : n appels du frontend seraient cassés » avant que vous les appliquiez.

Ce qu’elle détecte

Back-end

Spring MVC et WebFlux, JAX-RS et Struts.

Front-end

Type Clients
Natifs fetch et XMLHttpRequest
Bibliothèques axios, ky, ofetch, jQuery
Frameworks HttpClient d’Angular, SWR, React Query
Générés Clients OpenAPI générés (TypeScript, JavaScript, Vue, Svelte)

Voir aussi REST Client et diagrammes et Navigation.