Documentación / El IDE
Mapa fullstack
Une cada llamada HTTP del front-end con el endpoint del back-end que la atiende, navega entre los dos y avisa cuando un cambio rompe el contrato.
El mapa fullstack relaciona las llamadas HTTP de tu front-end con los endpoints de tu back-end. Así ves qué llamadas no tienen endpoint, qué endpoints nadie usa y qué se rompería con un cambio.
Abrirlo
Herramientas › Mapa fullstack. No tiene atajo por defecto; también lo encuentras con Ctrl+Shift+A.
El mapa necesita los dos lados. Sirve cualquiera de estas formas:
- dos carpetas raíz en el mismo espacio de trabajo;
- los dos proyectos abiertos en la vista dividida;
- un solo proyecto que tenga front-end y back-end.
Si solo hay un lado, Yuli te pide que añadas el otro proyecto al espacio de trabajo o lo abras en la vista dividida.
Filtros
| Filtro | Muestra |
|---|---|
| Todos | Todo el mapa. |
| Con llamadas | Endpoints que el front-end usa. |
| Llamadas sin endpoint | Llamadas del front-end sin endpoint en el back-end: probables errores. |
| Endpoints sin uso | Endpoints que ninguna llamada del front-end usa. |
| Contrato | El contrato entre los dos lados. |
| Tareas fullstack | Tareas que tocan front-end y back-end a la vez. |
Cada relación tiene una confianza. Puedes quedarte solo con las de ≥ 70 % o ≥ 90 %.
Navegar entre front-end y back-end
| Desde | Haz | Llegas a |
|---|---|---|
| Una llamada HTTP del front-end | Ctrl+Clic o F12 |
El método del back-end que la atiende |
| Un endpoint del back-end | Ctrl+Clic |
Usos desde el frontend |
Encima de cada endpoint, una línea (CodeLens) dice «n usos desde el frontend». Encima de una llamada sin endpoint verás «⚠ sin endpoint en el backend».
El contrato
Al guardar, Yuli comprueba si el cambio rompe alguna llamada del otro lado. Si es así, lo verás en el panel Problemas y en un aviso.
En Cambios IA, los cambios del agente muestran una tarjeta «Contrato fullstack: n llamadas del frontend se romperían» antes de que los apliques.
Qué detecta
Back-end
Spring MVC y WebFlux, JAX-RS y Struts.
Express, Fastify, Koa, Hono, NestJS, Polka y las rutas de API de Next.js.
FastAPI, Flask y Django / Django REST Framework.
net/http, gorilla, gin, echo, chi y fiber.
Controladores de ASP.NET Core y minimal APIs.
Contratos OpenAPI 3 y Swagger 2.
Front-end
| Tipo | Clientes |
|---|---|
| Nativos | fetch y XMLHttpRequest |
| Bibliotecas | axios, ky, ofetch, jQuery |
| Frameworks | HttpClient de Angular, SWR, React Query |
| Generados | Clientes OpenAPI generados (TypeScript, JavaScript, Vue, Svelte) |
Ver también REST Client y diagramas y Navegación.