Tenemos 3 conjuntos de productos que se basan en una tecnología diferente: React, React Native y Angular.
Debido a esta separación, múltiples productos terminan luciendo y sintiéndose diferentes. Nos gustaría pasar a un aspecto compartido, lo que deja claro que estos productos van juntos.
Sin embargo, no queremos reescribir estos productos por completo, sino que preferimos modificar el estilo de cada uno de ellos.
La pregunta: ¿Qué estrategias/enfoques existen para compartir el mismo estilo y experiencia de usuario entre estas 3 tecnologías?
Lo que nos preocupa:
Investigar:
No hay nada intrínsecamente malo en lo que está sugiriendo, dividir la reutilización en diferentes niveles trae diferentes beneficios y desafíos. web-components tiene el nivel más alto que puede tener entre React y Angular, si quiere algo más bajo que sea multiplataforma, le sugiero que busque tokens de diseño, implementados usando algo como https://amzn.github.io/style- diccionario/
Puede llevar esto tan lejos como desee: lo usamos para ofrecer espaciado, tamaño y colores de temas comunes en Swift, Kotlin, React Native, Svelte y React, pero puede ir más allá y definir más, solo consulte sus ejemplos. Ofrece una buena manera de tener una representación JSON de un sistema con estilo con un contenedor nativo en la parte superior que consume esto.
Puede consultar https://nx.dev . es una poderosa herramienta de compilación que le permite compartir componentes entre proyectos angulares y de reacción. explicación y ejemplo aquí: https://nx.dev/p/a/examples/react-and-angular
Y como mencionó, puede usar los componentes web creados en su aplicación nativa de reacción y concentrarse en administrarlos usando servicios como bit.dev
En su caso, utiliza múltiples marcos frontend para crear productos y compartir el mismo estilo y experiencia de usuario entre estas 3 tecnologías que necesita para usar Nx .
¿Qué es Nx?
Nx es un marco de construcción inteligente y extensible para ayudarlo a diseñar, probar y construir a cualquier escala, integrándose perfectamente con tecnologías y marcos modernos mientras proporciona una ejecución de tareas basada en gráficos distribuidos, almacenamiento en caché de cómputo, reconstrucciones inteligentes de proyectos afectados, potentes generadores de código , compatibilidad con editores, aplicaciones de GitHub y más, y con Nx, puede:
Puede ver toda la documentación aquí Nx y aquí cómo crear aplicaciones Angular y React junto con Nx y finalmente puede ver en GitHub framework project Nx - GitHub