Un mismo portafolio puede mostrar cómo se trasladan ideas de interfaz entre varios frameworks sin convertirlos en una competencia. En un artículo publicado el 18 de septiembre de 2026, David Henry Bernardo Cardenas describe una aplicación con cuatro implementaciones —React 19, Vue 3.5, Angular 19 y Kotlin/Compose HTML— que comparten contenido y lógica de aplicación en paquetes TypeScript, mientras cada interfaz usa sus propias convenciones de composición y reactividad. Es el diseño que relata su autor, no una implementación que haya sido verificada de forma independiente.
Qué comparte el portafolio y qué cambia
La propuesta consiste en conservar el propósito y el contenido del sitio al cambiar entre cuatro versiones. Según el autor, el proyecto mantiene una fuente común para el contenido y la lógica de aplicación, pero cada versión presenta la información con su propio framework. El artículo también afirma que el cambio conserva el estado y la posición de lectura; esa conducta forma parte del relato del autor y no está corroborada por una inspección del código o una reproducción de la aplicación.
As an Amazon Associate I earn from qualifying purchases.
La separación descrita permite distinguir dos preguntas: qué datos y operaciones necesita el portafolio, y cómo los presenta cada interfaz. La primera parte se centraliza en paquetes compartidos; la segunda se adapta a React, Vue, Angular o Compose HTML. Por eso, el ejemplo sirve para observar decisiones de diseño y adaptación, no para concluir que una tecnología sea superior.
Free tools Windows power users keep installed
One-click scans. No signup required.
Cómo se organiza la arquitectura descrita
Un núcleo TypeScript
El artículo sitúa en un paquete central las entidades, los contratos de repositorio y los casos de uso. En términos prácticos, esa capa representa conceptos y operaciones de la aplicación sin asignarles directamente la presentación de una pantalla concreta. El autor afirma que este núcleo se comparte entre las aplicaciones.
#1 Best Overall
Contenido y tokens visuales compartidos
Además del núcleo, el monorepo descrito incluye un adaptador de contenido JSON y un paquete de tokens visuales. El adaptador lee el contenido y gestiona la traducción entre español e inglés, según el artículo. Los tokens ofrecen una base visual común; no eliminan la necesidad de que cada interfaz implemente su propia estructura y comportamiento.
Aplicaciones y shell
El autor describe cuatro aplicaciones y un shell dentro de un monorepo Yarn Workspaces. Cada aplicación conecta el trabajo compartido con la capa de interfaz de su framework. El artículo presenta view models en las aplicaciones para mediar entre los datos o casos de uso y las necesidades de presentación.
La organización tiene una afinidad con la separación de responsabilidades asociada a Clean Architecture, pero la información publicada no basta para certificar que el proyecto cumple una definición canónica de esa arquitectura. En particular, no se verificaron el repositorio, las dependencias entre módulos ni los límites efectivos de cada capa. Es más preciso entenderla como la estrategia arquitectónica que el autor presenta para este portafolio.
Recommended Free Tools
Qué aporta cada interfaz
Las cuatro implementaciones no son cuatro nombres para el mismo mecanismo. Cada una requiere una adaptación de UI y reactividad distinta, incluso cuando consume conceptos y contenido compartidos.
| Implementación | Enfoque descrito | Qué se puede afirmar |
|---|---|---|
| React 19 | Vite y hooks personalizados | Son herramientas y patrones que el autor atribuye a su versión React; no se verificó el código. |
| Vue 3.5 | Composition API y composables | El artículo identifica este enfoque para la versión Vue; no se comprobó su implementación. |
| Angular 19 | Componentes standalone y Signals | Angular organiza interfaces mediante componentes que se componen en páginas mayores. El uso de Signals en este proyecto es un detalle reportado por el autor, no una revisión del ejemplo. |
| Kotlin/Compose HTML | Kotlin Multiplatform para la interfaz web | JetBrains describe Compose HTML como una vía para crear interfaces web reactivas en Kotlin con una API declarativa de HTML y CSS. Esto no demuestra que el código del proyecto se comparta con Android u otras plataformas. |
Angular, en su documentación general, presenta los componentes como bloques fundamentales que se pueden combinar para formar páginas y recomienda asignar responsabilidades claras a componentes, servicios y otros símbolos. Ese contexto ayuda a entender el modelo del framework, pero no confirma que la aplicación del portafolio aplique cada recomendación.
Por qué la interfaz necesita adaptadores propios
Compartir casos de uso o contenido no hace que los componentes de una biblioteca de UI funcionen automáticamente en otra. Cada aplicación debe traducir los datos compartidos a la estructura que espera su framework y enlazar acciones, estado y presentación mediante sus mecanismos habituales. El artículo resume esa división con view models y herramientas de reactividad propias de cada implementación.
La elección implica mantener varias capas de interfaz y sus adaptaciones. El beneficio demostrable en el relato es la posibilidad de presentar el mismo producto mediante cuatro enfoques; el artículo no ofrece una medición que permita determinar cuánto esfuerzo adicional requiere mantenerlos, ni cuánto código se ahorra con los paquetes compartidos.
Construcción y despliegue según el artículo
Para el empaquetado, el autor describe un contenedor Docker con Node.js 22 y OpenJDK 17, un script de ensamblado y artefactos de las cuatro aplicaciones. También relata un despliegue con Nginx, compresión, caché para recursos versionados y rutas de aplicación de página única (SPA). Son detalles del proceso que informa el artículo; no deben tomarse como instrucciones verificadas ni como garantía de que esos pasos funcionen sin ajustes en otro entorno.
Best Value
La mención de ambas plataformas de ejecución refleja el conjunto de tecnologías elegido para ese proyecto: Node.js para la parte JavaScript y OpenJDK para la parte Kotlin descrita. El texto no publica resultados de compilación reproducibles, tiempos, métricas de rendimiento ni pruebas comparables, así que no es posible inferir de él la velocidad o el coste operativo del despliegue.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Qué demuestra el ejemplo y qué no
El valor del caso está en hacer visible la transferencia de conceptos: un núcleo de aplicación puede plantearse aparte de la presentación, y luego conectarse a interfaces que usan modelos distintos de composición y reactividad. La comparación se vuelve útil para quien quiere practicar esos cambios de contexto o explicar experiencia en más de un ecosistema.
No es una evaluación controlada de React, Vue, Angular y Compose HTML. No hay cargas equivalentes, métricas, comparación de mantenibilidad ni evidencia publicada que permita declarar un ganador. Tampoco se puede confirmar la conservación de estado, los builds o el despliegue sin revisar y ejecutar el código. Un proyecto independiente llamado Clean Reactive Architecture también trata arquitecturas reactivas para frameworks como React, Angular y Vue, pero no es evidencia de que este portafolio use esa implementación o siga su diseño.
Cómo evaluar una estrategia similar
Si se quiere construir un portafolio comparable, conviene decidir primero qué debe permanecer igual y qué se desea contrastar. Los siguientes criterios ayudan a evitar que una demostración de múltiples frameworks termine duplicando inadvertidamente el contenido o confundiendo diferencias de UI con diferencias de producto:
- Contenido: definir una fuente de datos común y precisar cómo se representan idiomas, rutas y metadatos.
- Lógica: separar las operaciones que realmente son compartidas de los comportamientos exclusivos de una interfaz.
- Contratos: acordar qué datos y acciones recibe cada capa de presentación, y mantener esos límites comprensibles.
- Reactividad: implementar el estado con el modelo natural de cada framework, en vez de simular que los cuatro usan la misma API.
- Coste de mantenimiento: contabilizar dependencias, adaptadores, pruebas y procesos de build de cada aplicación; el caso publicado no proporciona estas mediciones.
- Verificación: ejecutar builds y pruebas de cada variante, comprobar enlaces y navegación, y ensayar el cambio entre implementaciones bajo condiciones definidas antes de afirmar que conserva estado o posición.
Así, una comparación propia puede centrarse en criterios explícitos —por ejemplo, esfuerzo de implementación, claridad de límites o facilidad de añadir una función— y documentar las condiciones de cada prueba. Sin ese método, la presencia de cuatro versiones demuestra amplitud de implementación, pero no superioridad técnica ni ahorro cuantificado.
Quick Recap
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.
