Este artículo es compartido por Huawei Cloud Community " Implementación de la tecnología Cross-Framework de la biblioteca de componentes OpenTiny de 0 a 1 ", autor: Seleccionado por Huawei Cloud Community.
En la edición número 44 de la transmisión técnica en vivo "DTSE Tech Talk" de Huawei Cloud "Juegue con la biblioteca de componentes de marco cruzado OpenTiny desde cero para lograr un avance de front-end integral", el evangelista de tecnología DTSE de desarrollo front-end de Huawei Cloud, Sr. Mo Chunhui En esta transmisión en vivo, intercambiamos las ventajas principales y los conceptos de diseño de la solución de biblioteca de componentes OpenTiny con los desarrolladores y demostramos cómo OpenTiny implementa la tecnología de biblioteca de componentes entre marcos de 0 a 1 a través de operaciones prácticas específicas.
Llevarlo de 0 a 1 para desarrollar un componente de interfaz de usuario entre marcos
La implementación de la tecnología de marco cruzado de biblioteca de componentes es un método muy importante para mejorar la eficiencia del desarrollo de páginas web y la flexibilidad de las aplicaciones. Con el rápido desarrollo de la tecnología front-end, los tipos de bibliotecas y marcos de componentes se están volviendo cada vez más diversos, por lo que la implementación de tecnología entre marcos para las bibliotecas de componentes es de gran importancia para resolver los puntos débiles del desarrollo y reducir los costos de desarrollo.
El objetivo de esta operación práctica es crear una demostración de botones en los marcos Vue, React y Solid para mostrar cómo implementar la aplicación de tecnología entre marcos en bibliotecas de componentes. A través de este ejercicio, esperamos brindar a los desarrolladores un proceso de implementación claro y específico para ayudar a todos a comprender mejor la aplicación práctica de esta tecnología.
Para obtener el código fuente específico, consulte: https://github.com/opentiny/dtt-cfc
Este proceso práctico se divide principalmente en cuatro partes:
1. Proyecto de inicialización
a) Utilice pnpm para gestionar el proyecto y configurar pnpm-workspace.yaml
b) Configurar el entorno del proyecto eslint, prettier y git
2. Cree una aplicación Vue y agregue la lógica relacionada con el componente @opentiny/vue-button:
a) Inicializar la aplicación Vue
b) Desarrollar la capa de adaptación del componente Vue y el componente vue-button
c) Desarrollar archivos js adaptados a renderless.
3. Cree una aplicación React y agregue la lógica relacionada con el componente @opentiny/react-button:
a) Inicializar la aplicación React
b) Desarrollar la capa de adaptación de los componentes de React y el componente del botón de reacción.
c) Desarrollar archivos js adaptados a renderless.
4. Cree una aplicación Solid y agregue la lógica relacionada con el componente @opentiny/solid-button:
a) Inicializar la aplicación Solid
b) Desarrollar la capa de adaptación y los componentes de botón sólido de Componentes sólidos
c) Desarrollar archivos js adaptados a renderless.
La biblioteca de componentes TinyVue actualmente implementa cross-end, cross-framework y cross-version
Gracias a la arquitectura de diseño Renderless, TinyVue del proyecto OpenTiny, como biblioteca de componentes de Vue, no solo implementa una biblioteca de componentes entre marcos, sino que también implementa un conjunto de código que no solo es compatible con Vue 2 / Vue 3, sino que también es compatible con PC. y móvil.final, más adaptable a especificaciones de múltiples temas. En aplicaciones prácticas, los desarrolladores pueden desarrollar proyectos entre terminales (PC, dispositivos móviles, relojes), entre marcos (Vue2, Vue3, React, Solid), entre temas (fuentes, colores, esquinas redondeadas, íconos...), entre especificaciones de diseño (iconos, interacciones, configuraciones por defecto...).
La siguiente imagen es el efecto de demostración después de iniciar el ejemplo de especificación de diseño cruzado, marco cruzado, versión cruzada y diseño cruzado de OpenTiny (para obtener un código fuente específico, consulte: https://github.com/opentiny/ componente de marco cruzado ):
Entonces, ¿por qué OpenTiny quiere implementar bibliotecas de componentes entre terminales, entre marcos y entre versiones?
En la actualidad, las bibliotecas de componentes de la industria generalmente se clasifican según los diferentes marcos front-end React, Angular y Vue. O según el terminal de destino, como biblioteca de componentes de PC, biblioteca de componentes móviles, biblioteca de componentes de subprogramas, etc. Dado que las versiones de Vue 2 y Vue 3 son incompatibles, el código de la biblioteca de componentes de Vue 2 es diferente del código de la biblioteca de componentes de Vue 3. Es decir, la misma pila de tecnología también tiene diferentes versiones de la biblioteca de componentes. El status quo actual es sin duda una carga tanto para el desarrollo de bibliotecas de componentes como para el uso de bibliotecas de componentes.
Además, los dos conjuntos de bibliotecas de componentes de Vue 2/Vue 3 corresponden a dos conjuntos diferentes de códigos. Es inevitable que las funciones de los componentes y las API no estén sincronizadas. Si los desarrolladores desean migrar de la biblioteca de componentes de Vue 2 a Vue 3 biblioteca de componentes, enfrentarán ciertos costos y riesgos.
Las categorías de biblioteca de componentes actuales son las siguientes:
Frente a un punto bastante doloroso en la industria, TinyVue adopta el concepto de diseño de separar componentes y marcos (arquitectura sin renderizado) al permitir que los componentes web admitan especificaciones de extremo cruzado, pila de tecnología cruzada y UX cruzada, solo los desarrolladores Si necesita desarrollar y mantener un conjunto de códigos de biblioteca de componentes, puede lanzar versiones de diferentes pilas de tecnología para diferentes terminales, lo que reduce los costos de desarrollo y mantenimiento. Al mismo tiempo, cuando los usuarios usan este conjunto de bibliotecas de componentes, aunque usan versiones de diferentes terminales y diferentes pilas de tecnología, debido a que la capa inferior se basa en un conjunto de códigos, sus interfaces API son básicamente las mismas, lo que reduce la Costo del aprendizaje, uso, migración y actualizaciones del usuario.
Por supuesto, esta arquitectura de diseño debe combinar el paradigma de desarrollo orientado a la lógica empresarial y el patrón de diseño sin componentes de representación. Porque el simple hecho de utilizar un paradigma de desarrollo orientado a la lógica empresarial sólo puede reunir las partes de la misma lógica empresarial que originalmente estaban dispersas en varias etapas del ciclo de vida. Hay muchas formas de implementar patrones de diseño de componentes que no son de renderizado. Por ejemplo, las funciones de alto orden HOC se pueden usar en React y las ranuras de alcance ScopedSlot se pueden usar en Vue. Sin embargo, cuando la lógica de negocios de los componentes se vuelve cada vez más compleja , las funciones de alto orden y las ranuras de inserción de alcance hacen que el código sea difícil de entender y mantener. Por lo tanto, solo combinando los dos es posible realizar componentes web que admitan terminales cruzados y marcos cruzados.
TinyVue finalmente logra el efecto de ser utilizado en diferentes marcos y diferentes terminales al completar cuestiones como la adaptación del dispositivo, la adaptación de la resolución y la adaptación de la interacción. No solo eso, para Vue 2 y Vue 3, TinyVue también lanzó los adaptadores de versión correspondientes para suavizar las diferencias entre Vue 2 y Vue 3, y lograr un conjunto de código que admita las versiones Vue 2 y Vue 3. De esta manera, ya sea un proyecto Vue 2 o un proyecto Vue 3, la forma de usar los componentes es la misma y se puede lograr una conmutación perfecta, lo que reduce en gran medida el costo y el riesgo de migrar de Vue 2 a Vue 3.
Resumir:
OpenTiny es una solución de desarrollo front-end web de nivel empresarial que proporciona una biblioteca de componentes de interfaz de usuario entre terminales y entre marcos, se adapta a múltiples terminales como PC/terminales móviles, admite pilas de múltiples tecnologías Vue2/Vue3/Angular y tiene un motor de bajo código flexible y escalable, que incluye sistema de configuración de temas/plantillas intermedias y de backend/línea de comandos CLI y otras herramientas ricas para mejorar la eficiencia, que pueden ayudar a los desarrolladores a desarrollar aplicaciones web de manera eficiente.
Por supuesto, OpenTiny, como parte importante de las soluciones en la nube de Huawei, permite a los desarrolladores crear aplicaciones nativas de la nube. También ayudará a los desarrolladores a mejorar el rendimiento y la confiabilidad de las aplicaciones y promoverá la innovación y el desarrollo de aplicaciones.
En el futuro, con el desarrollo y la aplicación continuos de la tecnología, OpenTiny seguirá brindando una experiencia más conveniente y eficiente a los desarrolladores.
Haga clic para seguir y conocer las nuevas tecnologías de Huawei Cloud lo antes posible ~
Lei Jun: La versión oficial del nuevo sistema operativo de Xiaomi, ThePaper OS, ha sido empaquetada. Una ventana emergente en la página de lotería de la aplicación Gome insulta a su fundador. El gobierno de Estados Unidos restringe la exportación de la GPU NVIDIA H800 a China. La interfaz de Xiaomi ThePaper OS está expuesto. Un maestro usó Scratch para frotar el simulador RISC-V y se ejecutó con éxito. Kernel de Linux Escritorio remoto RustDesk 1.2.3 lanzado, soporte mejorado para Wayland Después de desconectar el receptor USB de Logitech, el kernel de Linux falló Revisión aguda de DHH de "herramientas de empaquetado ": no es necesario construir la interfaz en absoluto (Sin compilación) JetBrains lanza Writerside para crear documentación técnica Herramientas para Node.js 21 lanzadas oficialmente