{"id":33407,"date":"2025-06-25T14:40:56","date_gmt":"2025-06-25T12:40:56","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=33407"},"modified":"2025-06-25T14:40:58","modified_gmt":"2025-06-25T12:40:58","slug":"repensando-la-arquitectura-frontend-en-la-era-de-la-ia","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/","title":{"rendered":"Repensando la Arquitectura Frontend en la Era de la IA"},"content":{"rendered":"\n<p>Publicado originalmente en <a href=\"https:\/\/www.cesalberca.com\/es\/blog\/ai-ready-frontend-architecture\">cesalberca.com<\/a><\/p>\n\n\n\n<p>Adaptado para Codemotion Magazine por C\u00e9sar Alberca, Arquitecto Frontend y miembro del Comit\u00e9 de Codemotion.<\/p>\n\n\n\n<p>Estamos entrando en una era en la que los sistemas frontend no solo son utilizados por humanos, sino tambi\u00e9n analizados, generados e interpretados por herramientas de inteligencia artificial.<\/p>\n\n\n\n<p>Frameworks modernos como <a href=\"https:\/\/ui.shadcn.com\/\">shadcn\/ui<\/a>, herramientas de dise\u00f1o a c\u00f3digo como <a href=\"https:\/\/v0.dev\/\">V0.dev<\/a> y agentes en entornos de desarrollo como <a href=\"https:\/\/www.jetbrains.com\/junie\/\">Junie<\/a> est\u00e1n redefiniendo la forma en que construimos. Pero con esta aceleraci\u00f3n, surge una mayor necesidad de estructura.<\/p>\n\n\n\n<p>Esta gu\u00eda presenta una arquitectura pr\u00e1ctica para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Potenciar la creaci\u00f3n de interfaces con herramientas de IA<\/li>\n\n\n\n<li>Dise\u00f1ar protocolos de colaboraci\u00f3n entre desarrolladores y sistemas de IA<\/li>\n\n\n\n<li>Mantener la capacidad de testing y la escalabilidad<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-define-pautas-de-ia-para-tu-base-de-codigo\">Define pautas de IA para tu base de c\u00f3digo<\/h2>\n\n\n\n<p>Las herramientas de IA carecen de contexto, por lo tanto tenemos que hacer un esfuerzo por establecer un contexto para que sean m\u00e1s efectivas. En el caso de Junie (que es el agente de IA que uso en Webstorm) podemos crear un archivo de <code>guidelines.md<\/code> para describir las reglas, el stack y los patrones usados en tu frontend.<\/p>\n\n\n\n<p>Ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Framework: Next.js<br>Styling: Tailwind CSS 4<br>Language: TypeScript<br>Tests: Vitest + Playwright<br><br>Architecture:<br>- Use Case pattern<br>- CQRS<br>- Middleware chaining<br><br>Standards:<br>- Named exports only<br>- No enums, use unions<br>- One component per file<br>- ?? instead of ||<br>- Avoid unnecessary useEffect<br>- FC with PropsWithChildren<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><\/li>\n<\/ul>\n\n\n\n<p>Herramientas de IDE como Junie usar\u00e1n esto para seguir tus convenciones sin que tengas que repetir instrucciones. Puedes <a href=\"https:\/\/github.com\/cesalberca\/blog\/blob\/4fd5e58595126efb1aa71ad5af8d4ee3fd46ae94\/.junie\/guidelines.md\">ver un ejemplo real aqu\u00ed<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>2. Abraza una UI Basada en Componentes con Asistencia de IA<\/strong><br>Con herramientas como V0.dev, puedes pasar de un prompt a JSX en segundos:<\/p>\n\n\n\n<p>\u201cCrea un formulario de registro en modo oscuro con dos campos de entrada y un bot\u00f3n CTA\u201d<\/p>\n\n\n\n<p>V0 responde con JSX accesible y estilizado usando shadcn\/ui, listo para integrar en tu repo. Combinado con <a href=\"https:\/\/storybook.js.org\/\">Storybook<\/a>, documentaci\u00f3n <a href=\"https:\/\/mdxjs.com\/\">MDX<\/a> y las pautas de Junie, tienes un ciclo de feedback entre la IA y tu sistema de dise\u00f1o.<\/p>\n\n\n\n<p>La IA genera. Tu sistema valida.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>3. Patr\u00f3n Use Case para la L\u00f3gica de Negocio<\/strong><br>En el desarrollo potenciado por IA, generar la UI es solo una parte. El verdadero valor est\u00e1 en desacoplar la l\u00f3gica de negocio de las capas de interfaz, para que agentes de IA (o humanos) puedan desarrollar de una forma predecible sin tener que reinventar la rueda con cada nueva iteraci\u00f3n. Por eso, para m\u00ed, el patr\u00f3n Use Case es esencial.<\/p>\n\n\n\n<p><strong>\u00bfQu\u00e9 es el patr\u00f3n Use Case?<\/strong><br>Cada caso de uso encapsula una \u00fanica operaci\u00f3n de negocio, por ejemplo: RegisterUser, CreatePost, SubmitFeedback, etc. Define una interfaz as\u00ed:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">export interface UseCase&lt;In = unknown, Out = unknown&gt; {<br>  handle(param?: In, meta?: UseCaseOptions): Promise&lt;Out&gt;<br>}<\/pre>\n\n\n\n<p>Cada caso de uso es una unidad aislada, testeable e injectable que recibe una entrada y devuelve una salida. Est\u00e1 totalmente desacoplado de frameworks UI (o eso deber\u00eda), por lo que puede ser activado por:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Un bot\u00f3n en la UI<\/li>\n\n\n\n<li>Un trabajo en segundo plano<\/li>\n\n\n\n<li>Un agente de IA<\/li>\n\n\n\n<li>Un webhook<\/li>\n\n\n\n<li>O una combinaci\u00f3n de todos<\/li>\n<\/ul>\n\n\n\n<p><strong>\u00bfPor qu\u00e9 es importante para la IA?<\/strong><br>Al ofrecer una interfaz estable y ocultar la l\u00f3gica interna, el patr\u00f3n Use Case permite a la IA orquestar el comportamiento de la aplicaci\u00f3n sin conocer los detalles de implementaci\u00f3n.<\/p>\n\n\n\n<p>Esto evita que las herramientas de IA (o humanos) acoplen la l\u00f3gica con componentes o vistas, lo que suele generar c\u00f3digo fr\u00e1gil e inmantenible.<\/p>\n\n\n\n<p><strong>Ejecuci\u00f3n centralizada con useCaseService<\/strong><br>Para ejecutar casos de uso, empleamos una capa de servicio que abstrae la l\u00f3gica de orquestaci\u00f3n y permite componer middlewares:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">await<\/span> <span class=\"hljs-selector-tag\">useCaseService<\/span><span class=\"hljs-selector-class\">.execute<\/span>(<span class=\"hljs-selector-tag\">RegisterUserUseCase<\/span>, {\n  <span class=\"hljs-attribute\">email<\/span>: <span class=\"hljs-string\">'test@example.com'<\/span>,\n  password: <span class=\"hljs-string\">'secure-password'<\/span>,\n})<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Esta llamada no expone la l\u00f3gica interna de RegisterUserUseCase: la IA solo sabe que debe enviar un payload y recibir un resultado.<\/p>\n\n\n\n<p><strong>Beneficios en sistemas aumentados por IA<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Testabilidad: cada caso se prueba aisladamente con mocks o stubs.<\/li>\n\n\n\n<li>Seguridad: control de acceso y permisos se a\u00f1ade via middleware.<\/li>\n\n\n\n<li>Extensibilidad: nuevos comportamientos (anal\u00edticas, reporte de errores) se a\u00f1aden sin tocar la l\u00f3gica del caso.<\/li>\n\n\n\n<li>Preparaci\u00f3n para IA: agentes interact\u00faan con tu backend de forma segura mediante una API estable y bien definida.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>4. Cadenas de Middleware: Escalando la L\u00f3gica con Composabilidad<\/strong><br>En una arquitectura frontend bien estructurada, piezas transversales como logging, manejo de errores o caching pueden ensuciar la l\u00f3gica de negocio si no se gestionan bien. Los Middlewares ofrecen un enfoque modular inspirado en el patr\u00f3n Chain of Responsibility.<\/p>\n\n\n\n<p>En lugar de poner esta l\u00f3gica en cada caso de uso, la envuelves con clases middleware que interceptan la ejecuci\u00f3n antes y despu\u00e9s de la l\u00f3gica principal:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript\"><span class=\"hljs-keyword\">interface<\/span> Middleware {\n  intercept&lt;In, Out&gt;(param: In, next: UseCase&lt;In, Out&gt;, options: UseCaseOptions): <span class=\"hljs-built_in\">Promise<\/span>&lt;Out&gt;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Cada middleware se ocupa de una \u00fanica responsabilidad y pasa el control a la siguiente capa.<\/p>\n\n\n\n<p><strong>Middleware de Errores<\/strong><br>En lugar de repetir bloques try\/catch, delegas el manejo de errores a un middleware. Cuando ocurre una excepci\u00f3n, se dispara un evento que la UI puede escuchar \u2014 mostrando un toast o registrando el error \u2014 sin afectar la l\u00f3gica de negocio.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> ErrorMiddleware <span class=\"hljs-keyword\">implements<\/span> Middleware {\n  <span class=\"hljs-keyword\">constructor<\/span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">private<\/span> readonly eventEmitter: EventEmitter<\/span>) {}\n\n  <span class=\"hljs-keyword\">async<\/span> intercept(params: unknown, next: UseCase, options: UseCaseOptions): <span class=\"hljs-built_in\">Promise<\/span>&lt;unknown&gt; {\n    <span class=\"hljs-keyword\">try<\/span> {\n      <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">await<\/span> next.handle(params)\n    } <span class=\"hljs-keyword\">catch<\/span> (error) {\n      <span class=\"hljs-keyword\">if<\/span> (!options.silentError) {\n        <span class=\"hljs-keyword\">this<\/span>.eventEmitter.dispatch(EventType.ERROR, error)\n      }\n      <span class=\"hljs-keyword\">throw<\/span> error\n    }\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Middleware de Logs<\/strong><br>Este middleware registra cada ejecuci\u00f3n del caso de uso, con nombre y par\u00e1metros. Puedes usar diferentes implementaciones de logger \u2014 consola en desarrollo, logging remoto en producci\u00f3n \u2014 sin cambiar nada en los casos de uso.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> LogMiddleware <span class=\"hljs-keyword\">implements<\/span> Middleware {\n  <span class=\"hljs-keyword\">constructor<\/span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">private<\/span> readonly logger: Logger<\/span>) {}\n  intercept(params: unknown, useCase: UseCase): <span class=\"hljs-built_in\">Promise<\/span> {\n    <span class=\"hljs-keyword\">this<\/span>.logger.log(\n      &#91;${DateTime.fromNow().toISO()}] ${<span class=\"hljs-keyword\">this<\/span>.getName(useCase)} \/ ${<span class=\"hljs-keyword\">this<\/span>.printResult(params)}\n  )\n    <span class=\"hljs-keyword\">return<\/span> useCase.handle(params)\n  }\n\n  <span class=\"hljs-keyword\">private<\/span> getName(useCase: UseCase): <span class=\"hljs-built_in\">string<\/span> {\n    <span class=\"hljs-keyword\">if<\/span> (useCase <span class=\"hljs-keyword\">instanceof<\/span> UseCaseHandler) {\n      <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">this<\/span>.getName(useCase.useCase)\n    }\n    <span class=\"hljs-keyword\">return<\/span> useCase.<span class=\"hljs-keyword\">constructor<\/span>.name\n  }\n\n  private printResult(<span class=\"hljs-params\">result: unknown<\/span>) {\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-built_in\">JSON<\/span>.stringify(result, <span class=\"hljs-literal\">null<\/span>, <span class=\"hljs-number\">2<\/span>)\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Middleware de Cach\u00e9<\/strong><br>Si usas CQRS para separar queries y comandos, este middleware puede cachear autom\u00e1ticamente resultados de consultas. Los casos de uso que provean una opci\u00f3n <code>cacheKey<\/code> devolver\u00e1n resultados cacheados por un tiempo definido, reduciendo procesamiento innecesario.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript\"><span class=\"hljs-keyword\">type<\/span> CacheEntry = {\n  value: unknown\n  expiresAt: <span class=\"hljs-built_in\">number<\/span>\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> CacheMiddleware <span class=\"hljs-keyword\">implements<\/span> Middleware {\n  <span class=\"hljs-keyword\">private<\/span> readonly store = <span class=\"hljs-keyword\">new<\/span> Map()<span class=\"hljs-keyword\">constructor<\/span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">private<\/span> readonly ttlInSeconds: <span class=\"hljs-built_in\">number<\/span> = 60<\/span>) {}<span class=\"hljs-keyword\">async<\/span> intercept(\n    params: In,\n    next: UseCase,\n    options: UseCaseOptions,\n  ): <span class=\"hljs-built_in\">Promise<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> key = options.cacheKey\n    <span class=\"hljs-keyword\">if<\/span> (!key) <span class=\"hljs-keyword\">return<\/span> next.handle(params, options)<span class=\"hljs-keyword\">const<\/span> now = <span class=\"hljs-built_in\">Date<\/span>.now()\n    <span class=\"hljs-keyword\">const<\/span> cached = <span class=\"hljs-keyword\">this<\/span>.store.get(key)\n\n    <span class=\"hljs-keyword\">if<\/span> (cached &amp;&amp; now &lt; cached.expiresAt) {\n      <span class=\"hljs-keyword\">return<\/span> cached.value <span class=\"hljs-keyword\">as<\/span> Out\n    }\n\n    <span class=\"hljs-keyword\">const<\/span> result = <span class=\"hljs-keyword\">await<\/span> next.handle(params, options)\n    <span class=\"hljs-keyword\">this<\/span>.store.set(key, { value: result, expiresAt: now + <span class=\"hljs-keyword\">this<\/span>.ttlInSeconds * <span class=\"hljs-number\">1000<\/span> })\n\n    <span class=\"hljs-keyword\">return<\/span> result\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Composici\u00f3n de Middleware con UseCaseService<\/strong><br>Para aplicar varios middlewares, los envuelves alrededor de tus casos de uso usando un servicio que compone la cadena desde la capa m\u00e1s externa a la interna:<\/p>\n\n\n\n<p><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">UseCaseService<\/span> <\/span>{\n  <span class=\"hljs-keyword\">constructor<\/span>(\n    private middlewares: Middleware&#91;],\n    private readonly container: Container,\n  ) {}\n\n  <span class=\"hljs-keyword\">async<\/span> execute(useCase: Type&lt;UseCase&gt;, param?: In, options?: UseCaseOptions): <span class=\"hljs-built_in\">Promise<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> requiredOptions = options ?? { <span class=\"hljs-attr\">silentError<\/span>: <span class=\"hljs-literal\">false<\/span> }\n\n    <span class=\"hljs-keyword\">let<\/span> next = UseCaseHandler.create({\n      <span class=\"hljs-attr\">next<\/span>: <span class=\"hljs-keyword\">this<\/span>.container.create(useCase),\n      <span class=\"hljs-attr\">middleware<\/span>: <span class=\"hljs-keyword\">this<\/span>.container.get&lt;EmptyMiddleware&gt;(EmptyMiddleware.name),\n      <span class=\"hljs-attr\">options<\/span>: requiredOptions,\n    })\n\n    <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> i = <span class=\"hljs-keyword\">this<\/span>.middlewares.length - <span class=\"hljs-number\">1<\/span>; i &gt;= <span class=\"hljs-number\">0<\/span>; i--) {\n      <span class=\"hljs-keyword\">const<\/span> current = <span class=\"hljs-keyword\">this<\/span>.middlewares&#91;i]\n      next = UseCaseHandler.create({\n        next,\n        <span class=\"hljs-attr\">middleware<\/span>: current,\n        <span class=\"hljs-attr\">options<\/span>: requiredOptions,\n      })\n    }\n\n    <span class=\"hljs-keyword\">return<\/span> next.handle(param) <span class=\"hljs-keyword\">as<\/span> <span class=\"hljs-built_in\">Promise<\/span>&lt;Out&gt;\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>\u00bfPor qu\u00e9 es importante esto?<\/strong><br>Con middlewares, tu sistema gana:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Manejo centralizado de errores<\/li>\n\n\n\n<li>Logging consistente<\/li>\n\n\n\n<li>Cach\u00e9 autom\u00e1tica<\/li>\n\n\n\n<li>Casos de uso m\u00e1s limpios, sin duplicaci\u00f3n de c\u00f3digo<\/li>\n<\/ul>\n\n\n\n<p>Escalas funcionalidad sin a\u00f1adir complejidad al n\u00facleo de la l\u00f3gica de negocio.<\/p>\n\n\n\n<p><strong>Tabla resumen: Arquitectura aumentada por IA<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Capa<\/th><th>Herramienta \/ Patr\u00f3n<\/th><th>Rol de la IA<\/th><\/tr><\/thead><tbody><tr><td>Prototipado UI<\/td><td>V0.dev + shadcn\/ui<\/td><td>Generaci\u00f3n de JSX a partir del prompt<\/td><\/tr><tr><td>Documentaci\u00f3n UI<\/td><td>MDX + Storybook<\/td><td>Aprender a partir de ejemplos<\/td><\/tr><tr><td>Capa l\u00f3gica<\/td><td>Patr\u00f3n Use Case<\/td><td>Crear e invocar l\u00f3gica seg\u00fan patrones definidos<\/td><\/tr><tr><td>Capa de uni\u00f3n<\/td><td>Cadena de Middleware<\/td><td>Mejoras sin acoplamiento<\/td><\/tr><tr><td>Colaboraci\u00f3n IDE<\/td><td>.junie\/guidelines.md<\/td><td>Alinear IA a tus convenciones<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Reflexiones finales<\/strong><br>Ya no solo construimos para navegadores: <strong>estamos creando sistemas que humanos y agentes inteligentes pueden entender y ampliar<\/strong>.<\/p>\n\n\n\n<p>El futuro del frontend no es <em>automatizado<\/em>. Es <em>aumentado<\/em>.<\/p>\n\n\n\n<p>Dise\u00f1a tu arquitectura pensando en:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Interpretabilidad (para humanos y m\u00e1quinas)<\/li>\n\n\n\n<li>Estructura (a trav\u00e9s de convenciones y patrones)<\/li>\n\n\n\n<li>Escalabilidad (mediante casos de uso y middleware)<\/li>\n<\/ul>\n\n\n\n<p><strong>As\u00ed es como programamos con IA, no a pesar de ella.<\/strong><\/p>\n\n\n\n<p>\u00bfQuieres ayuda para implementar esta arquitectura en tu equipo? Ofrezco consultor\u00eda en arquitectura frontend y flujos de trabajo potenciados por IA. Cont\u00e1ctame o lee m\u00e1s sobre mi enfoque en <a href=\"https:\/\/cesalberca.com\/\">cesalberca.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Publicado originalmente en cesalberca.com Adaptado para Codemotion Magazine por C\u00e9sar Alberca, Arquitecto Frontend y miembro del Comit\u00e9 de Codemotion. Estamos entrando en una era en la que los sistemas frontend no solo son utilizados por humanos, sino tambi\u00e9n analizados, generados e interpretados por herramientas de inteligencia artificial. Frameworks modernos como shadcn\/ui, herramientas de dise\u00f1o a&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/\">Read more<\/a><\/p>\n","protected":false},"author":295,"featured_media":33372,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10644],"tags":[12951,11419],"collections":[],"class_list":{"0":"post-33407","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-desarrollo-web","8":"tag-frontend-es","9":"tag-web-development-es","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Repensando la Arquitectura Frontend en la Era de la IA<\/title>\n<meta name=\"description\" content=\"Aprende a dise\u00f1ar arquitectura frontend con inteligencia artificial usando patrones, middleware y herramientas que escalan sistemas aumentados por IA.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Repensando la Arquitectura Frontend en la Era de la IA\" \/>\n<meta property=\"og:description\" content=\"Aprende a dise\u00f1ar arquitectura frontend con inteligencia artificial usando patrones, middleware y herramientas que escalan sistemas aumentados por IA.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-25T12:40:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-25T12:40:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"C\u00e9sar Alberca\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cesalberca\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"C\u00e9sar Alberca\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\\\/\"},\"author\":{\"name\":\"C\u00e9sar Alberca\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/afc25884cd97b269955388e3afcf81db\"},\"headline\":\"Repensando la Arquitectura Frontend en la Era de la IA\",\"datePublished\":\"2025-06-25T12:40:56+00:00\",\"dateModified\":\"2025-06-25T12:40:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\\\/\"},\"wordCount\":1146,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/entrepreneurship-and-freelancing-with-ai-scaled.jpg\",\"keywords\":[\"frontend\",\"Web Development\"],\"articleSection\":[\"Desarrollo web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\\\/\",\"name\":\"Repensando la Arquitectura Frontend en la Era de la IA\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/entrepreneurship-and-freelancing-with-ai-scaled.jpg\",\"datePublished\":\"2025-06-25T12:40:56+00:00\",\"dateModified\":\"2025-06-25T12:40:58+00:00\",\"description\":\"Aprende a dise\u00f1ar arquitectura frontend con inteligencia artificial usando patrones, middleware y herramientas que escalan sistemas aumentados por IA.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/entrepreneurship-and-freelancing-with-ai-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/entrepreneurship-and-freelancing-with-ai-scaled.jpg\",\"width\":2560,\"height\":1707,\"caption\":\"frontend ready ai architecture, design patterns\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Desarrollo web\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/desarrollo-web\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Repensando la Arquitectura Frontend en la Era de la IA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/afc25884cd97b269955388e3afcf81db\",\"name\":\"C\u00e9sar Alberca\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/me-squared-100x100.png\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/me-squared-100x100.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/me-squared-100x100.png\",\"caption\":\"C\u00e9sar Alberca\"},\"description\":\"Freelance Frontend Architect &amp; Software Crafter | Building Scalable, AI-Ready Web Experiences. Digital nomad from Spain working globally. As a Freelance Frontend Architect, I design and build robust, maintainable applications using React, Angular, Vue\u2014with a strong focus on architecture, testing, and software craftsmanship. I specialize in DDD, Hexagonal Architecture, and modular design systems. International speaker and Codemotion committee member &amp; ambassador, I\u2019m passionate about empowering teams and sharing knowledge through talks, workshops, and open-source contributions. For me, code is not just a tool\u2014it\u2019s a craft.\",\"sameAs\":[\"https:\\\/\\\/cesalberca.com\",\"https:\\\/\\\/instagram.com\\\/cesalberca\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/cesalberca\",\"https:\\\/\\\/x.com\\\/cesalberca\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/cesalberca\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Repensando la Arquitectura Frontend en la Era de la IA","description":"Aprende a dise\u00f1ar arquitectura frontend con inteligencia artificial usando patrones, middleware y herramientas que escalan sistemas aumentados por IA.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/","og_locale":"en_US","og_type":"article","og_title":"Repensando la Arquitectura Frontend en la Era de la IA","og_description":"Aprende a dise\u00f1ar arquitectura frontend con inteligencia artificial usando patrones, middleware y herramientas que escalan sistemas aumentados por IA.","og_url":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2025-06-25T12:40:56+00:00","article_modified_time":"2025-06-25T12:40:58+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg","type":"image\/jpeg"}],"author":"C\u00e9sar Alberca","twitter_card":"summary_large_image","twitter_creator":"@cesalberca","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"C\u00e9sar Alberca","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/"},"author":{"name":"C\u00e9sar Alberca","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/afc25884cd97b269955388e3afcf81db"},"headline":"Repensando la Arquitectura Frontend en la Era de la IA","datePublished":"2025-06-25T12:40:56+00:00","dateModified":"2025-06-25T12:40:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/"},"wordCount":1146,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg","keywords":["frontend","Web Development"],"articleSection":["Desarrollo web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/","url":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/","name":"Repensando la Arquitectura Frontend en la Era de la IA","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg","datePublished":"2025-06-25T12:40:56+00:00","dateModified":"2025-06-25T12:40:58+00:00","description":"Aprende a dise\u00f1ar arquitectura frontend con inteligencia artificial usando patrones, middleware y herramientas que escalan sistemas aumentados por IA.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg","width":2560,"height":1707,"caption":"frontend ready ai architecture, design patterns"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/repensando-la-arquitectura-frontend-en-la-era-de-la-ia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/"},{"@type":"ListItem","position":3,"name":"Desarrollo web","item":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/desarrollo-web\/"},{"@type":"ListItem","position":4,"name":"Repensando la Arquitectura Frontend en la Era de la IA"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/afc25884cd97b269955388e3afcf81db","name":"C\u00e9sar Alberca","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/09\/me-squared-100x100.png","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/09\/me-squared-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/09\/me-squared-100x100.png","caption":"C\u00e9sar Alberca"},"description":"Freelance Frontend Architect &amp; Software Crafter | Building Scalable, AI-Ready Web Experiences. Digital nomad from Spain working globally. As a Freelance Frontend Architect, I design and build robust, maintainable applications using React, Angular, Vue\u2014with a strong focus on architecture, testing, and software craftsmanship. I specialize in DDD, Hexagonal Architecture, and modular design systems. International speaker and Codemotion committee member &amp; ambassador, I\u2019m passionate about empowering teams and sharing knowledge through talks, workshops, and open-source contributions. For me, code is not just a tool\u2014it\u2019s a craft.","sameAs":["https:\/\/cesalberca.com","https:\/\/instagram.com\/cesalberca","https:\/\/www.linkedin.com\/in\/cesalberca","https:\/\/x.com\/cesalberca"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/cesalberca\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg","author_info":{"display_name":"C\u00e9sar Alberca","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/cesalberca\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg",2560,1707,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-300x200.jpg",300,200,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-768x512.jpg",768,512,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-1024x683.jpg",1024,683,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-1536x1024.jpg",1536,1024,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg",2048,1366,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg",100,67,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg",180,120,false],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg",756,504,false],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg",337,225,false],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg",600,400,false],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/06\/entrepreneurship-and-freelancing-with-ai-scaled.jpg",600,400,false]},"uagb_author_info":{"display_name":"C\u00e9sar Alberca","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/cesalberca\/"},"uagb_comment_info":0,"uagb_excerpt":"Publicado originalmente en cesalberca.com Adaptado para Codemotion Magazine por C\u00e9sar Alberca, Arquitecto Frontend y miembro del Comit\u00e9 de Codemotion. Estamos entrando en una era en la que los sistemas frontend no solo son utilizados por humanos, sino tambi\u00e9n analizados, generados e interpretados por herramientas de inteligencia artificial. Frameworks modernos como shadcn\/ui, herramientas de dise\u00f1o a&#8230;&hellip;","lang":"es","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/33407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/295"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=33407"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/33407\/revisions"}],"predecessor-version":[{"id":33460,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/33407\/revisions\/33460"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/33372"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=33407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=33407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=33407"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=33407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}