Stiamo entrando in un\u2019era in cui i sistemi frontend non sono utilizzati solo da esseri umani: vengono anche interpretati, generati e analizzati da strumenti basati sull\u2019intelligenza artificiale.<\/p>\n\n\n\n
Framework moderni come shadcn\/ui<\/strong>, strumenti design-to-code come V0.dev<\/strong> e agenti IDE come Junie<\/strong> stanno ridefinendo il modo in cui costruiamo interfacce. Ma questa accelerazione richiede maggiore struttura.<\/p>\n\n\n\n Questa guida illustra un\u2019architettura pratica per:<\/p>\n\n\n\n La maggior parte degli strumenti AI non ha intuizione, quindi… forniscigliela. Crea un file Esempio:<\/strong><\/p>\n\n\n\n Architettura:<\/strong><\/p>\n\n\n\n Standard:<\/strong><\/p>\n\n\n\n Agenti IDE come Junie useranno queste indicazioni per seguire le tue convenzioni senza doverle ripetere ogni volta. Con strumenti come V0.dev<\/strong>, puoi passare da un prompt al JSX in pochi secondi:<\/p>\n\n\n\n \u201cCrea un form di iscrizione in dark mode con due campi input e un pulsante CTA\u201d<\/p>\n<\/blockquote>\n\n\n\n V0 risponde con JSX accessibile e gi\u00e0 stilizzato usando shadcn\/ui<\/strong>, pronto da inserire nel tuo repository. Combinato con Storybook<\/strong>, documentazione MDX<\/strong> e linee guida di Junie<\/strong>, ottieni un ciclo di feedback tra AI e il tuo design system.<\/p>\n\n\n\n L\u2019AI genera. Il tuo sistema valida.<\/p>\n<\/blockquote>\n\n\n\n Nel development aumentato dall\u2019AI, generare UI \u00e8 solo una parte. Il vero valore \u00e8 nel separare la logica di business dagli strati di interfaccia, in modo che agenti AI (o umani) possano attivare comportamenti in modo sicuro e prevedibile. Ogni use case incapsula un\u2019operazione di business. Ogni use case \u00e8 isolato, testabile e iniettabile. \u00c8 completamente indipendente dal framework UI o dalla sorgente di eventi, quindi pu\u00f2 essere attivato da:<\/p>\n\n\n\n Offrendo un\u2019interfaccia stabile e nascondendo la logica interna, il pattern permette agli agenti AI di orchestrare comportamenti dell\u2019applicazione senza conoscere i dettagli implementativi.<\/p>\n\n\n\n Previene l\u2019accoppiamento tra logica e componenti, rendendo il codice pi\u00f9 robusto e manutenibile.<\/p>\n\n\n\n Per eseguire gli use case si usa un service layer che astrae la logica di orchestrazione e consente la composizione tramite middleware:<\/p>\n\n\n\n L\u2019AI non vede la logica interna. Sa solo che deve passare un payload e otterr\u00e0 un risultato.<\/p>\n\n\n\n In un\u2019architettura frontend ben strutturata, le concern trasversali<\/strong> (logging, errori, caching) possono complicare la logica di business se non gestite correttamente.<\/p>\n\n\n\n Il middleware offre un approccio modulare e pulito, ispirato al pattern Chain of Responsibility<\/strong>.<\/p>\n\n\n\n Invece di duplicare la logica, la incapsuli in classi middleware che intercettano l\u2019esecuzione:<\/p>\n\n\n\n Ogni middleware gestisce una singola responsabilit\u00e0 e passa il controllo al successivo.<\/p>\n\n\n\n Niente pi\u00f9 Log automatici di ogni use case con parametri e nome. Supporta logger personalizzati per dev e produzione.<\/p>\n\n\n\n Se usi CQRS<\/strong>, puoi usare un middleware che gestisce automaticamente la cache per i use case che forniscono una Per applicare pi\u00f9 middleware, li incapsuli nel service che compone la catena da quello pi\u00f9 esterno a quello pi\u00f9 interno:<\/p>\n\n\n\n Con i middleware in funzione, il tuo sistema ottiene:<\/p>\n\n\n\n Scali la funzionalit\u00e0 senza aumentare la complessit\u00e0 della logica core.<\/p>\n\n\n\n Non stiamo pi\u00f9 costruendo solo per browser\u2014costruiamo sistemi comprensibili sia per esseri umani che per agenti intelligenti.<\/p>\n\n\n\n Il futuro del frontend non \u00e8 automatizzato<\/strong>. \u00c8 aumentato<\/strong>.<\/p>\n\n\n\n Progetta la tua architettura pensando a:<\/p>\n\n\n\n Questo \u00e8 il modo in cui sviluppiamo con<\/em> l\u2019AI, non nonostante<\/em> l\u2019AI.<\/p>\n<\/blockquote>\n\n\n\n Vuoi aiuto per implementare questa architettura nel tuo team?<\/strong> Offro consulenza su architettura frontend e flussi di lavoro potenziati dall\u2019AI. Contattami o scopri di pi\u00f9 su cesalberca.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"\n
\n\n\n\n1. Definisci linee guida AI per il tuo codice<\/h3>\n\n\n\n
guidelines.md<\/code> che descriva le regole, lo stack e i pattern usati nel tuo frontend.<\/p>\n\n\n\n\n
\n
\n
Puoi vedere un esempio reale qui<\/a>.<\/p>\n\n\n\n
\n\n\n\n2. UI guidata dai componenti con supporto AI<\/h3>\n\n\n\n
\n
\n
\n\n\n\n3. Il pattern Use Case per la logica di business<\/h3>\n\n\n\n
Ecco dove il Use Case pattern<\/strong> diventa essenziale.<\/p>\n\n\n\nCos’\u00e8 il Use Case Pattern?<\/h4>\n\n\n\n
Esempi: RegisterUser<\/code>, CreatePost<\/code>, SubmitFeedback<\/code>.<\/p>\n\n\n\ntsCopiaModifica
export interface UseCase<In = unknown, Out = unknown> {\n handle(param?: In, meta?: UseCaseOptions): Promise<Out>\n}\n<\/code><\/pre>\n\n\n\n\n
Perch\u00e9 \u00e8 importante per l\u2019AI?<\/h4>\n\n\n\n
\n\n\n\nEsecuzione centralizzata con
useCaseService<\/code><\/h3>\n\n\n\ntsCopiaModifica
await useCaseService.execute(RegisterUserUseCase, {\n email: \"test@example.com\",\n password: \"secure-password\",\n})\n<\/code><\/pre>\n\n\n\nVantaggi nei sistemi con AI:<\/h4>\n\n\n\n
\n
\n\n\n\n4. Middleware chaining: scalare la logica con composabilit\u00e0<\/h3>\n\n\n\n
tsCopiaModifica
interface Middleware {\n intercept<In, Out>(\n param: In,\n next: UseCase<In, Out>,\n options: UseCaseOptions\n ): Promise<Out>\n}\n<\/code><\/pre>\n\n\n\n
\n\n\n\nMiddleware degli errori<\/h4>\n\n\n\n
try\/catch<\/code> duplicati. Un middleware pu\u00f2 gestire gli errori e notificare l\u2019interfaccia utente (es. toast, log) senza toccare la logica principale.<\/p>\n\n\n\ntsCopiaModifica
export class ErrorMiddleware implements Middleware {\n constructor(private readonly eventEmitter: EventEmitter) {}\n\n async intercept(params: unknown, next: UseCase, options: UseCaseOptions): Promise<unknown> {\n try {\n return await next.handle(params)\n } catch (error) {\n if (!options.silentError) {\n this.eventEmitter.dispatch(EventType.ERROR, error)\n }\n throw error\n }\n }\n}\n<\/code><\/pre>\n\n\n\n
\n\n\n\nMiddleware di logging<\/h4>\n\n\n\n
tsCopiaModifica
export class LogMiddleware implements Middleware {\n constructor(private readonly logger: Logger) {}\n\n intercept(params: unknown, useCase: UseCase): Promise<unknown> {\n this.logger.log(\n `[${DateTime.fromNow().toISO()}] ${this.getName(useCase)} \/ ${this.printResult(params)}`\n )\n return useCase.handle(params)\n }\n\n private getName(useCase: UseCase): string {\n if (useCase instanceof UseCaseHandler) {\n return this.getName(useCase.useCase)\n }\n return useCase.constructor.name\n }\n\n private printResult(result: unknown) {\n return JSON.stringify(result, null, 2)\n }\n}\n<\/code><\/pre>\n\n\n\n
\n\n\n\nMiddleware di caching<\/h4>\n\n\n\n
cacheKey<\/code>.<\/p>\n\n\n\ntsCopiaModifica
export class CacheMiddleware implements Middleware {\n private readonly store = new Map<string, CacheEntry>()\n\n constructor(private readonly ttlInSeconds: number = 60) {}\n\n async intercept<In, Out>(\n params: In,\n next: UseCase<In, Out>,\n options: UseCaseOptions,\n ): Promise<Out> {\n const key = options.cacheKey\n if (!key) return next.handle(params, options)\n\n const now = Date.now()\n const cached = this.store.get(key)\n\n if (cached && now < cached.expiresAt) {\n return cached.value as Out\n }\n\n const result = await next.handle(params, options)\n this.store.set(key, { value: result, expiresAt: now + this.ttlInSeconds * 1000 })\n\n return result\n }\n}\n<\/code><\/pre>\n\n\n\n
\n\n\n\nComposizione dei middleware con UseCaseService<\/h3>\n\n\n\n
tsCopiaModifica
export class UseCaseService {\n constructor(\n private middlewares: Middleware[],\n private readonly container: Container,\n ) {}\n\n async execute<In, Out>(\n useCase: Type<UseCase<In, Out>>,\n param?: In,\n options?: UseCaseOptions,\n ): Promise<Out> {\n const requiredOptions = options ?? { silentError: false }\n\n let next = UseCaseHandler.create({\n next: this.container.create(useCase),\n middleware: this.container.get<EmptyMiddleware>(EmptyMiddleware.name),\n options: requiredOptions,\n })\n\n for (let i = this.middlewares.length - 1; i >= 0; i--) {\n const current = this.middlewares[i]\n next = UseCaseHandler.create({\n next,\n middleware: current,\n options: requiredOptions,\n })\n }\n\n return next.handle(param) as Promise<Out>\n }\n}\n<\/code><\/pre>\n\n\n\n
\n\n\n\nPerch\u00e9 \u00e8 importante<\/h3>\n\n\n\n
\n
\n\n\n\nTabella riepilogativa: architettura aumentata dall\u2019AI<\/h2>\n\n\n\n
Livello<\/th> Strumento \/ Pattern<\/th> Ruolo dell\u2019AI<\/th><\/tr><\/thead> UI Prototyping<\/td> V0.dev + shadcn\/ui<\/td> Generazione di JSX da prompt<\/td><\/tr> Documentazione UI<\/td> MDX + Storybook<\/td> Apprendimento da esempi<\/td><\/tr> Logica<\/td> Pattern Use Case<\/td> Creazione e invocazione di logica<\/td><\/tr> Integrazione<\/td> Catena di Middleware<\/td> Potenzia senza accoppiare<\/td><\/tr> IDE<\/td> .junie\/guidelines.md<\/td> Allinea l\u2019AI alle tue convenzioni<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\nConsiderazioni finali<\/h2>\n\n\n\n
\n
\n
\n\n\n\n