iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
El portafolio descrito por David Henry Bernardo Cardenas reúne cuatro implementaciones de una misma aplicación: React 19, Vue 3.5, Angular 19 y Kotlin/Compose HTML. Según su artículo, comparten contenido y lógica de aplicación en paquetes TypeScript, mientras cada interfaz conserva los patrones propios de su framework. Es una demostración de transferencia de habilidades, no una prueba de que un framework sea superior ni una comparación de rendimiento.
Qué problema resuelve el portafolio
En un artículo publicado en DEV Community el 18 de septiembre de 2026, Cardenas cuenta que creó un portafolio que permite cambiar entre implementaciones de distintos frameworks. La intención es mostrar el mismo contenido y propósito con cuatro tecnologías, en lugar de mantener cuatro productos con funciones diferentes.
El autor también afirma que al cambiar de implementación se conservan el estado y la posición de lectura. Esa descripción forma parte de su relato: no se pudo revisar el repositorio mencionado ni reproducir sus compilaciones, así que no debe tomarse como un comportamiento verificado de la aplicación.
Cómo separa la lógica compartida de las interfaces
La estructura que describe el artículo es un monorepo con Yarn Workspaces. Incluye tres paquetes compartidos —un núcleo TypeScript, un adaptador de contenido JSON y tokens visuales—, además de cuatro aplicaciones y un shell.
#1 Best Overall
El núcleo TypeScript
Según Cardenas, el núcleo reúne entidades, interfaces de repositorio y casos de uso. La idea arquitectónica es mantener esas responsabilidades fuera de las vistas concretas: cada aplicación puede presentar la información con su framework sin duplicar, en principio, las reglas y operaciones centrales.
El artículo denomina a este enfoque Clean Architecture. Con la información disponible, lo más preciso es describirlo como una separación por capas con lógica compartida: no hay una inspección del código que permita confirmar que la implementación satisface una definición canónica de Clean Architecture.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Contenido JSON y tokens visuales
El adaptador de contenido lee datos JSON y, de acuerdo con el autor, gestiona la traducción entre español e inglés. Los tokens visuales ofrecen otra pieza compartida, aunque el artículo no detalla qué valores incluyen ni cuánto de la presentación se mantiene idéntico entre aplicaciones.
Las aplicaciones como adaptadores de interfaz
Cada frontend traduce las capacidades compartidas a componentes y mecanismos reactivos propios. Esta distinción importa: reutilizar casos de uso y contenido no convierte las cuatro interfaces en una sola implementación ni elimina el trabajo específico de cada framework.
Rank #3
Qué aporta cada framework en el ejemplo
| Implementación | Lenguaje y herramientas descritos | Enfoque de interfaz o reactividad | Alcance de lo que se sabe |
|---|---|---|---|
| React 19 | React con Vite | Hooks personalizados | Detalles atribuidos al artículo; no se verificó el código. |
| Vue 3.5 | Vue | Composition API y composables | Detalles atribuidos al artículo; no se verificó el código. |
| Angular 19 | Angular con componentes standalone | Signals, según el artículo | La documentación oficial explica el modelo general de componentes de Angular, pero no confirma esta implementación. |
| Kotlin/Compose HTML | Kotlin Multiplatform para web | Interfaz web declarativa; el artículo la incluye entre las cuatro aplicaciones | JetBrains describe Compose HTML como una biblioteca para interfaces web reactivas en Kotlin; no confirma el proyecto de Cardenas. |
La documentación de Angular presenta los componentes como bloques que se combinan para construir páginas mayores. Eso ofrece contexto para entender su papel en la aplicación, pero no verifica el código del portafolio ni el uso concreto de Signals que relata el autor.
Compose HTML merece una precisión aparte: es una vía para crear interfaces web con Kotlin y una API declarativa de HTML y CSS. No es correcto inferir de ello que el código de esta aplicación se comparte con Android u otras plataformas; las fuentes citadas no establecen ese punto para el proyecto.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Qué significa compartir arquitectura entre frameworks
El valor de la propuesta está en separar lo que puede tener una fuente común de lo que depende de la interfaz. Entidades, contratos, casos de uso y contenido pueden vivir en paquetes compartidos, mientras cada frontend adapta la presentación y la reactividad. En el relato, las aplicaciones también cuentan con view models que conectan esos elementos con sus respectivas interfaces.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Ese límite es una decisión de diseño, no una garantía automática. Si una regla de negocio termina dentro de un componente, puede quedar acoplada a un framework; si se fuerza toda la presentación dentro del núcleo común, se corre el riesgo opuesto de borrar diferencias que cada interfaz necesita. El caso descrito opta por compartir la lógica central y dejar la representación a las aplicaciones.
Un proyecto independiente llamado Clean Reactive Architecture también plantea una arquitectura para aplicaciones reactivas, incluidas React, Angular y Vue. Es una iniciativa separada y no demuestra que el portafolio siga ese diseño ni que sus ejemplos coincidan con esta implementación.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Cómo describe el autor el ensamblado y el despliegue
Cardenas relata un despliegue con Docker, Node.js 22 y OpenJDK 17. Según el artículo, un script ensambla artefactos de las cuatro aplicaciones y un servidor Nginx se ocupa de la compresión, la caché de recursos versionados y las rutas de una aplicación de página única.
Son detalles reportados por el autor, no pasos reproducidos de forma independiente. El artículo no aporta mediciones que permitan concluir cuánto tarda la compilación, qué rendimiento tiene el sitio, cuánto trabajo ahorra el monorepo o si mantener cuatro frontends resulta más sencillo que mantener uno.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsQué demuestra —y qué no— la comparación
El proyecto sirve como ejercicio de comparación práctica: el contenido y la lógica declarados como compartidos contrastan con cuatro formas de construir una interfaz. Puede ayudar a mostrar que conocer varios frameworks implica entender cómo trasladar conceptos comunes —como componentes, estado y presentación— a herramientas distintas.
No es una prueba controlada entre React, Vue, Angular y Compose HTML. No se describen cargas equivalentes, métricas, pruebas de rendimiento ni una evaluación cuantitativa de mantenibilidad. Por tanto, no permite elegir un ganador ni afirmar que la estrategia sea más rápida o más barata.
Quick Recap
- Como portafolio: permite presentar implementaciones paralelas de una misma experiencia, según el autor.
- Como ejemplo de arquitectura: ilustra una separación posible entre núcleo compartido, contenido y capas de interfaz.
- Como comparación técnica: muestra patrones distintos, pero no establece cuál rinde mejor ni cuánto cuesta mantener cada alternativa.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
