{"id":11609,"date":"2025-06-02T09:00:00","date_gmt":"2025-06-02T07:00:00","guid":{"rendered":"https:\/\/wata.es\/?p=11609"},"modified":"2026-02-05T10:27:15","modified_gmt":"2026-02-05T09:27:15","slug":"llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend","status":"publish","type":"post","link":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/","title":{"rendered":"Llevando la Arquitectura Hexagonal a Angular: Un Enfoque Escalable para el Desarrollo Frontend"},"content":{"rendered":"\n<p>Si est\u00e1s leyendo esto, es probable que ya est\u00e9s familiarizado con la <a href=\"https:\/\/wata.es\/es\/arquitectura-hexagonal-introduccion-y-estructura\/\">arquitectura hexagonal<\/a>, el conocido enfoque de dise\u00f1o que ayuda a desacoplar la l\u00f3gica de negocio central de las dependencias externas. Pero aunque es una metodolog\u00eda muy popular en el desarrollo backend, probablemente no la hayas visto aplicada con tanta frecuencia en el desarrollo frontend. <\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Creo que esto se debe a la naturaleza de frameworks como Angular, donde la l\u00f3gica de negocio tiende a estar estrechamente acoplada con los mecanismos incorporados de la tecnolog\u00eda, como los componentes, servicios, pipes, directivas y validadores. Como resultado, los frameworks frontend suelen alinearse de forma m\u00e1s natural con patrones como MVVM, MVC o MVP.<\/p>\n\n\n\n<p>En los \u00faltimos a\u00f1os, tuve la oportunidad de dise\u00f1ar la arquitectura de un proyecto en Angular. Al provenir de un entorno m\u00e1s orientado al backend, quer\u00eda explorar si la arquitectura hexagonal podr\u00eda encajar en el desarrollo frontend de una forma similar a como ya la hab\u00edamos utilizado con \u00e9xito en muchos proyectos backend en WATA Factory. Inicialmente, me preocupaba que pudiera ser un enfoque excesivo o que pareciera algo forzado. Sin embargo, con el tiempo, descubr\u00ed que ten\u00eda m\u00e1s beneficios que inconvenientes.<\/p>\n\n\n\n<p>Una de las principales ventajas fue la organizaci\u00f3n estructurada de los archivos, que proporcionaba una arquitectura clara y coherente. A pesar del c\u00f3digo adicional y las interfaces necesarias, este enfoque hizo que el proyecto fuera m\u00e1s accesible tanto para desarrolladores frontend como backend. La familiaridad con la estructura facilit\u00f3 la incorporaci\u00f3n de nuevos miembros al equipo y la colaboraci\u00f3n entre ellos. Como resultado, este estilo arquitect\u00f3nico se est\u00e1 adoptando ahora en otros proyectos dentro de WATA Factory, donde ha demostrado mejorar la escalabilidad y la capacidad de prueba.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Project-Structure-Overview\"><strong>Estructura del Proyecto<\/strong><\/h2>\n\n\n\n<p>Nuestro proyecto est\u00e1 organizado siguiendo un enfoque de segmentaci\u00f3n vertical. Esto significa que cada funcionalidad es independiente y contiene todo lo necesario, desde la l\u00f3gica de negocio hasta la presentaci\u00f3n.<\/p>\n\n\n\n<p>Las carpetas principales incluyen:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app\/\n\u2502\u2500\u2500 core\/                  # Cross-cutting concerns (DI, external libs, etc.)\n\u2502\u2500\u2500 shared\/                # Shared logic across features\n\u2502    |\u2500\u2500 domain\/           # Shared business logic, domain models, validation\n\u2502    |\u2500\u2500 application\/      # Shared application use cases\n\u2502    |\u2500\u2500 infrastructure\/   # Shared infrastructure (APIs, repositories, utilities, adapters)\n\u2502    |\u2500\u2500 presentation\/     # Shared presentation logic (UI components, directives, pipes)\n\u2502\u2500\u2500 authentication\/        # Feature: Logic for Authentication (example)\n\u2502    |\u2500\u2500 domain\/           # Feature: Business logic, domain models, validation\n\u2502    |\u2500\u2500 application\/      # Feature: Application use cases\n\u2502    |\u2500\u2500 infrastructure\/   # Feature: External integrations (APIs, DB, services)\n\u2502    |\u2500\u2500 presentation\/     # Feature: UI components, directives, services, styles\n\u2502\u2500\u2500 other-feature\/         # Another feature (follows the same structure)\n     |\u2500\u2500 domain\/\n     |\u2500\u2500 application\/\n     |\u2500\u2500 infrastructure\/\n     |\u2500\u2500 presentation\/<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Core-Folder-(app\/core)\"><strong>Carpeta Core (app\/core)<\/strong><\/h2>\n\n\n\n<p>Esta carpeta contiene preocupaciones transversales como la configuraci\u00f3n de inyecci\u00f3n de dependencias y la configuraci\u00f3n de bibliotecas externas (por ejemplo, JWT, servicios de traducci\u00f3n).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Dependency-Injection-(app\/core\/di)\"><strong>Inyecci\u00f3n de Dependencias (app\/core\/di)<\/strong><\/h3>\n\n\n\n<p>El sistema de inyecci\u00f3n de dependencias de Angular funciona a la perfecci\u00f3n con clases abstractas, pero no con interfaces. Aunque prefiero usar interfaces para reforzar contratos estrictos sin l\u00f3gica compartida, permitiendo as\u00ed un desacoplamiento completo de la implementaci\u00f3n, existe un inconveniente. Usar interfaces requiere m\u00e1s c\u00f3digo adicional, concretamente la necesidad de utilizar InjectionToken para integrarlas en el sistema de inyecci\u00f3n de dependencias de Angular.<\/p>\n\n\n\n<p>Para configurar esto, usaremos un archivo llamado injection.ts, donde estableceremos implementaciones por defecto usando InjectionToken como parte del patr\u00f3n de contenedor de inyecci\u00f3n de dependencias.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export const AUTH_REPOSITORY_TOKEN = new InjectionToken&lt;AuthRepository&gt;(\n\t'AuthRepository',\n);\n\nexport const DI_PROVIDERS = &#91;\n\t{\n\t\tprovide: AUTH_REPOSITORY_TOKEN,\n\t\tuseClass: ApiAuthRepository,\n\t},\n\t\/\/ other providers\n];<\/code><\/pre>\n\n\n\n<p>Estos proveedores se a\u00f1aden despu\u00e9s en app.config.ts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Shared-Folder-(app\/shared)\"><strong>Carpeta Shared (app\/shared)<\/strong><\/h2>\n\n\n\n<p>Esta carpeta tambi\u00e9n se estructura para albergar l\u00f3gica reutilizable entre funcionalidades, manteniendo una separaci\u00f3n clara de responsabilidades. Es importante asegurarse de que todo lo que se incluya en la carpeta shared est\u00e9 alineado con la capa adecuada del dominio, aplicaci\u00f3n, infraestructura o presentaci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Feature-Folders-(app\/authentication)\"><strong>Carpetas de Funcionalidad (app\/authentication)<\/strong><\/h2>\n\n\n\n<p>Cada funcionalidad sigue una segmentaci\u00f3n vertical, lo que significa que contiene su propio conjunto de capas. Hay que tener en cuenta que utilizaremos Authentication solo como un ejemplo de funcionalidad. Seguimos la misma estrategia de segmentaci\u00f3n vertical para otras funcionalidades, garantizando una arquitectura coherente, mantenible y escalable en todo el proyecto.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Domain-Layer-(app\/authentication\/domain)\"><strong>Capa de Dominio (app\/authentication\/domain)<\/strong><\/h2>\n\n\n\n<p>Contiene la l\u00f3gica de negocio principal, los modelos de dominio y las reglas de validaci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Domain-Models-(app\/authentication\/domain\/models)\"><strong>Modelos de Dominio (app\/authentication\/domain\/models)<\/strong><\/h3>\n\n\n\n<p>Los modelos de dominio encapsulan la l\u00f3gica de validaci\u00f3n y el comportamiento espec\u00edfico del dominio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export class UsernameModel {\n readonly value: string;\n\n  constructor(value: string) {\n    if (!value) {\n      throw new EmptyUsernameError();\n    }\n    \n    const usernameRegex = \/^(?=.*&#91;A-Za-z])(?=.*\\\\d)(?=.*&#91;@$!%*?&amp;])&#91;A-Za-z\\\\d@$!%*?&amp;]{8,}$\/; \n    \n    if (!usernameRegex.test(value)) {\n      throw new InvalidUsernameError();\n    }\n\n    this.value = value;\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Domain-Exceptions-(app\/authentication\/domain\/errors)\"><strong>Excepciones de Dominio (app\/authentication\/domain\/errors)<\/strong><\/h3>\n\n\n\n<p>Este directorio contiene excepciones espec\u00edficas del dominio que representan violaciones de reglas de negocio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Domain-Repository-Interfaces-(app\/authentication\/domain\/repositories)\"><strong>Interfaces de Repositorio de Dominio (app\/authentication\/domain\/repositories)<\/strong><\/h3>\n\n\n\n<p>Este directorio contiene abstracciones para los repositorios de datos, definiendo los contratos que las implementaciones de los repositorios deben seguir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export interface AuthRepository {\n\tloginAttempt(loginModel: LoginModel): Observable&lt;AuthTokenModel&gt;;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Application-Layer-(app\/authentication\/application)\"><strong>Capa de Aplicaci\u00f3n (app\/authentication\/application)<\/strong><\/h2>\n\n\n\n<p>Esta capa contiene los servicios de aplicaci\u00f3n que orquestan los casos de uso. Tambi\u00e9n integramos aqu\u00ed las stores de NGRX para la gesti\u00f3n del estado, aunque un an\u00e1lisis m\u00e1s profundo sobre NGRX requerir\u00eda un art\u00edculo aparte.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Casos de Uso (app\/authentication\/application\/use-cases)<\/strong><\/h2>\n\n\n\n<p>Los casos de uso implementan la l\u00f3gica de negocio e interact\u00faan con los repositorios. Siguen una interfaz consistente UseCase&lt;S, T&gt;, donde S es el modelo de entrada y T es el modelo de salida:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export class LoginUseCase implements UseCase&lt;LoginModel, UserStatusModel&gt; {\n  \n\tconstructor(private authRepository: AuthRepository) {\n    }\n\n  \texecute(loginModel: LoginModel): Observable&lt;UserStatusModel&gt; {\n  \t\treturn this.authRepository.loginAttempt(loginModel);\n  \t}\n  \n}<\/code><\/pre>\n\n\n\n<p>La interfaz se define en app\/shared\/application\/use-cases\/base\/use-case.ts.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Observable } from 'rxjs';\n\nexport interface UseCase&lt;S, T&gt; {\n  execute(params: S): Observable&lt;T&gt;;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Infrastructure-Layer-(app\/authentication\/infrastructure)\"><strong>Capa de Infraestructura (app\/authentication\/infrastructure)<\/strong><\/h2>\n\n\n\n<p>Gestiona las implementaciones para integraciones externas como llamadas a API, interacciones con bases de datos y otros servicios externos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Presentation-Layer-(app\/authentication\/presentation)\"><strong>Capa de Presentaci\u00f3n (app\/authentication\/presentation)<\/strong><\/h2>\n\n\n\n<p>Esta capa est\u00e1 estrechamente acoplada a Angular e incluye componentes, directivas, servicios y estilos. Los casos de uso se inyectan en los componentes a trav\u00e9s de interfaces para mantener la separaci\u00f3n con las capas de aplicaci\u00f3n e infraestructura.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Conclusion\"><strong>Conclusi\u00f3n<\/strong><\/h2>\n\n\n\n<p>En WATA Factory, hemos estado utilizando esta arquitectura en nuestros proyectos de Angular, y nos ha aportado una gran cantidad de beneficios. Al estructurar nuestro c\u00f3digo con arquitectura hexagonal y segmentaci\u00f3n vertical, hemos logrado que nuestras aplicaciones sean m\u00e1s mantenibles, escalables y testeables.<\/p>\n\n\n\n<p>Uno de los mayores beneficios es que nuestra l\u00f3gica de negocio permanece independiente de Angular y de otras dependencias externas. Esto hace que nuestro c\u00f3digo sea modular, reutilizable y mucho m\u00e1s f\u00e1cil de adaptar cuando los requisitos cambian.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si est\u00e1s leyendo esto, es probable que ya est\u00e9s familiarizado con la arquitectura hexagonal, el conocido enfoque de dise\u00f1o que ayuda a desacoplar la l\u00f3gica de negocio central de las dependencias externas. Pero aunque es una metodolog\u00eda muy popular en el desarrollo backend, probablemente no la hayas visto aplicada con tanta frecuencia en el desarrollo [&hellip;]<\/p>\n","protected":false},"author":45,"featured_media":11602,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[89,183],"tags":[],"class_list":["post-11609","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-noticias","category-tecnologia"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Llevando la Arquitectura Hexagonal a Angular: Un Enfoque Escalable para el Desarrollo Frontend - WATA Factory<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Llevando la Arquitectura Hexagonal a Angular: Un Enfoque Escalable para el Desarrollo Frontend - WATA Factory\" \/>\n<meta property=\"og:description\" content=\"Si est\u00e1s leyendo esto, es probable que ya est\u00e9s familiarizado con la arquitectura hexagonal, el conocido enfoque de dise\u00f1o que ayuda a desacoplar la l\u00f3gica de negocio central de las dependencias externas. Pero aunque es una metodolog\u00eda muy popular en el desarrollo backend, probablemente no la hayas visto aplicada con tanta frecuencia en el desarrollo [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/\" \/>\n<meta property=\"og:site_name\" content=\"WATA Factory\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/watafactory\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-02T07:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-05T09:27:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Victor Galo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@watafactory\" \/>\n<meta name=\"twitter:site\" content=\"@watafactory\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Victor Galo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wata.es\\\/es\\\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wata.es\\\/es\\\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\\\/\"},\"author\":{\"name\":\"Victor Galo\",\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/person\\\/2fe4cf3f05ff348d077f2b64ea1d4727\"},\"headline\":\"Llevando la Arquitectura Hexagonal a Angular: Un Enfoque Escalable para el Desarrollo Frontend\",\"datePublished\":\"2025-06-02T07:00:00+00:00\",\"dateModified\":\"2026-02-05T09:27:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wata.es\\\/es\\\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\\\/\"},\"wordCount\":986,\"publisher\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wata.es\\\/es\\\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Hexagonal-Architecture-scaled.jpg\",\"articleSection\":[\"Noticias\",\"Tecnolog\u00eda\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wata.es\\\/es\\\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\\\/\",\"url\":\"https:\\\/\\\/wata.es\\\/es\\\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\\\/\",\"name\":\"Llevando la Arquitectura Hexagonal a Angular: Un Enfoque Escalable para el Desarrollo Frontend - WATA Factory\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wata.es\\\/es\\\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wata.es\\\/es\\\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Hexagonal-Architecture-scaled.jpg\",\"datePublished\":\"2025-06-02T07:00:00+00:00\",\"dateModified\":\"2026-02-05T09:27:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wata.es\\\/es\\\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wata.es\\\/es\\\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/wata.es\\\/es\\\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Hexagonal-Architecture-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Hexagonal-Architecture-scaled.jpg\",\"width\":2560,\"height\":1440,\"caption\":\"Estructura c\u00fabica geom\u00e9trica abstracta con l\u00edneas en degradado rojo y azul sobre un fondo hexagonal\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wata.es\\\/es\\\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wata.es\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Llevando la Arquitectura Hexagonal a Angular: Un Enfoque Escalable para el Desarrollo Frontend\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wata.es\\\/#website\",\"url\":\"https:\\\/\\\/wata.es\\\/\",\"name\":\"WATA Factory\",\"description\":\"IT Consulting &amp; Outsourcing for your company\",\"publisher\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wata.es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wata.es\\\/#organization\",\"name\":\"WATA Factory\",\"url\":\"https:\\\/\\\/wata.es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logowata.png\",\"contentUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logowata.png\",\"width\":688,\"height\":176,\"caption\":\"WATA Factory\"},\"image\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/watafactory\\\/\",\"https:\\\/\\\/x.com\\\/watafactory\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/wata\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/person\\\/2fe4cf3f05ff348d077f2b64ea1d4727\",\"name\":\"Victor Galo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5faa9d6a28e2ec94ae73bbd2358ed9b3f4080791f503a4013e3c98390500e70b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5faa9d6a28e2ec94ae73bbd2358ed9b3f4080791f503a4013e3c98390500e70b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5faa9d6a28e2ec94ae73bbd2358ed9b3f4080791f503a4013e3c98390500e70b?s=96&d=mm&r=g\",\"caption\":\"Victor Galo\"},\"url\":\"https:\\\/\\\/wata.es\\\/es\\\/author\\\/v-galowata-es\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Llevando la Arquitectura Hexagonal a Angular: Un Enfoque Escalable para el Desarrollo Frontend - WATA Factory","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:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/","og_locale":"es_ES","og_type":"article","og_title":"Llevando la Arquitectura Hexagonal a Angular: Un Enfoque Escalable para el Desarrollo Frontend - WATA Factory","og_description":"Si est\u00e1s leyendo esto, es probable que ya est\u00e9s familiarizado con la arquitectura hexagonal, el conocido enfoque de dise\u00f1o que ayuda a desacoplar la l\u00f3gica de negocio central de las dependencias externas. Pero aunque es una metodolog\u00eda muy popular en el desarrollo backend, probablemente no la hayas visto aplicada con tanta frecuencia en el desarrollo [&hellip;]","og_url":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/","og_site_name":"WATA Factory","article_publisher":"https:\/\/www.facebook.com\/watafactory\/","article_published_time":"2025-06-02T07:00:00+00:00","article_modified_time":"2026-02-05T09:27:15+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg","type":"image\/jpeg"}],"author":"Victor Galo","twitter_card":"summary_large_image","twitter_creator":"@watafactory","twitter_site":"@watafactory","twitter_misc":{"Escrito por":"Victor Galo","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/#article","isPartOf":{"@id":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/"},"author":{"name":"Victor Galo","@id":"https:\/\/wata.es\/#\/schema\/person\/2fe4cf3f05ff348d077f2b64ea1d4727"},"headline":"Llevando la Arquitectura Hexagonal a Angular: Un Enfoque Escalable para el Desarrollo Frontend","datePublished":"2025-06-02T07:00:00+00:00","dateModified":"2026-02-05T09:27:15+00:00","mainEntityOfPage":{"@id":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/"},"wordCount":986,"publisher":{"@id":"https:\/\/wata.es\/#organization"},"image":{"@id":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg","articleSection":["Noticias","Tecnolog\u00eda"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/","url":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/","name":"Llevando la Arquitectura Hexagonal a Angular: Un Enfoque Escalable para el Desarrollo Frontend - WATA Factory","isPartOf":{"@id":"https:\/\/wata.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/#primaryimage"},"image":{"@id":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg","datePublished":"2025-06-02T07:00:00+00:00","dateModified":"2026-02-05T09:27:15+00:00","breadcrumb":{"@id":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/#primaryimage","url":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg","contentUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg","width":2560,"height":1440,"caption":"Estructura c\u00fabica geom\u00e9trica abstracta con l\u00edneas en degradado rojo y azul sobre un fondo hexagonal"},{"@type":"BreadcrumbList","@id":"https:\/\/wata.es\/es\/llevando-la-arquitectura-hexagonal-a-angular-un-enfoque-escalable-para-el-desarrollo-frontend\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wata.es\/es\/"},{"@type":"ListItem","position":2,"name":"Llevando la Arquitectura Hexagonal a Angular: Un Enfoque Escalable para el Desarrollo Frontend"}]},{"@type":"WebSite","@id":"https:\/\/wata.es\/#website","url":"https:\/\/wata.es\/","name":"WATA Factory","description":"IT Consulting &amp; Outsourcing for your company","publisher":{"@id":"https:\/\/wata.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wata.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/wata.es\/#organization","name":"WATA Factory","url":"https:\/\/wata.es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wata.es\/#\/schema\/logo\/image\/","url":"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png","contentUrl":"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png","width":688,"height":176,"caption":"WATA Factory"},"image":{"@id":"https:\/\/wata.es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/watafactory\/","https:\/\/x.com\/watafactory","https:\/\/www.linkedin.com\/company\/wata\/"]},{"@type":"Person","@id":"https:\/\/wata.es\/#\/schema\/person\/2fe4cf3f05ff348d077f2b64ea1d4727","name":"Victor Galo","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/5faa9d6a28e2ec94ae73bbd2358ed9b3f4080791f503a4013e3c98390500e70b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5faa9d6a28e2ec94ae73bbd2358ed9b3f4080791f503a4013e3c98390500e70b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5faa9d6a28e2ec94ae73bbd2358ed9b3f4080791f503a4013e3c98390500e70b?s=96&d=mm&r=g","caption":"Victor Galo"},"url":"https:\/\/wata.es\/es\/author\/v-galowata-es\/"}]}},"_links":{"self":[{"href":"https:\/\/wata.es\/es\/wp-json\/wp\/v2\/posts\/11609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wata.es\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wata.es\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wata.es\/es\/wp-json\/wp\/v2\/users\/45"}],"replies":[{"embeddable":true,"href":"https:\/\/wata.es\/es\/wp-json\/wp\/v2\/comments?post=11609"}],"version-history":[{"count":5,"href":"https:\/\/wata.es\/es\/wp-json\/wp\/v2\/posts\/11609\/revisions"}],"predecessor-version":[{"id":15926,"href":"https:\/\/wata.es\/es\/wp-json\/wp\/v2\/posts\/11609\/revisions\/15926"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wata.es\/es\/wp-json\/wp\/v2\/media\/11602"}],"wp:attachment":[{"href":"https:\/\/wata.es\/es\/wp-json\/wp\/v2\/media?parent=11609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wata.es\/es\/wp-json\/wp\/v2\/categories?post=11609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wata.es\/es\/wp-json\/wp\/v2\/tags?post=11609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}