Huawei Developer Conference 2023 (HDC.Cloud 2023) comenzó en Dongguan del 7 al 9 de julio. Con el tema "Todos los desarrolladores son geniales", esta conferencia está dirigida a desarrolladores globales y crea una sala de tecnología para que los desarrolladores globales colisionen ideas, intercambien tecnologías y practiquen competencias, lo que les permite comprender y comprender completamente las últimas tendencias tecnológicas y abrir un espacio más amplio para la innovación tecnológica futura. ¡OpenTiny, como una solución de biblioteca de componentes front-end de nivel empresarial, también se lanzó oficialmente en esta conferencia!
Introducción:
Mo Chunhui, un experto en front-end del equipo de Huawei Yunling, como orador invitado para el lanzamiento oficial de este proyecto de código abierto, explicó a todos cómo OpenTiny, como una solución de biblioteca de componentes de nivel empresarial, puede resolver los puntos débiles y las dificultades de los usuarios.
Los siguientes son los materiales del proyecto:
A través de la introducción del panorama OpenTiny, un análisis en profundidad de los puntos débiles del mercado que enfrentan los desarrolladores y las soluciones correspondientes para los usuarios. Para escenarios de negocios empresariales toB, proporciona bibliotecas de componentes cruzados, cruzados y cruzados, plantillas de sistema de administración listas para usar y herramientas CLI que cubren todo el proceso de desarrollo front-end.
A través de la introducción de las tres etapas del desarrollo de 9 años de la biblioteca de componentes TinyVue, se han verificado más de 1500 proyectos y el uso de más de 3000 usuarios ha verificado completamente que el rendimiento de la biblioteca de componentes de fuente abierta TinyVue es seguro, estable y confiable.
El innovador diseño de arquitectura de la biblioteca de componentes de TinyVue resuelve los puntos débiles de la biblioteca de componentes de la industria actual.La interfaz API unificada admite diferentes especificaciones de visualización e interacción de terminales, y combina el paradigma de desarrollo orientado a la lógica empresarial y el modo de diseño de componentes que no son de representación para admitir diferentes pilas de tecnología y diferentes versiones de Vue. El diseño de la arquitectura ha solicitado una patente.
La demostración presentó que TinyVue admite múltiples temas, mostrando el efecto adaptativo de los componentes del proceso bajo diferentes temas. Normalmente se muestra bajo el tema claro en el lado de la PC, y se adapta automáticamente bajo el tema oscuro en la pantalla grande.La pantalla en el terminal móvil también tiene una apariencia única. Esta arquitectura innovadora aligera la carga de los desarrolladores de componentes y reduce el costo de los usuarios de componentes.
La demostración en video muestra que el uso de un conjunto de códigos TinyVue puede admitir interfaces interactivas de PC y móviles, incluida la navegación y la creación de tareas. Los cuadros de fecha y los cuadros desplegables tienen diferentes modos en diferentes dispositivos.
Proporciona dos conjuntos de plantillas TinyPro para conectarse a servicios en la nube: una plantilla comercial de back-end medio basada en Vue y una plantilla de consola de servicio en la nube basada en Angular. Admite la configuración del diseño, el marco receptivo, la personalización del tema, etc., y proporciona 20 páginas típicas, que incluyen el banco de trabajo, la página de lista, la página de formulario, la página de descripción general del servicio, la página de compra del servicio, etc.
La herramienta de línea de comandos TinyCLI es una herramienta de ingeniería integral que proporciona una serie de kits de desarrollo y complementos de ingeniería para ayudar a los usuarios a construir negocios rápidamente. La inicialización del proyecto se puede hacer con un solo comando. Entre ellos, el complemento de la línea de comandos se centra principalmente en algunas funciones individuales específicas, como la liberación de código y en línea.
TinyTheme es un sistema de configuración de temas en línea que satisface las necesidades de personalización visual en diferentes campos. Los usuarios obtienen una vista previa de la interfaz de operación en tiempo real en el sitio web oficial e implementan estilos de componentes personalizados. Se proporcionan diferentes temas, y cada conjunto de temas tiene diferentes colores de botones y bordes, con esquinas rectas y redondeadas, etc.
Lo anterior es el contenido de nuestro OpenTiny, visite nuestro sitio web oficial para obtener más detalles, nuestro sitio web es https://opentiny.design. Finalmente, todos son bienvenidos a unirse a nuestra comunidad de código abierto OpenTiny y construir un kit de desarrollo front-end de nivel empresarial con nosotros. ¡Gracias!
8 de julio - 9 de julio Campo de entrenamiento de CodeLabs:
Campo de entrenamiento:
OpenTiny se unió al campo de entrenamiento de CodeLabs esta vez, con el objetivo de ayudar rápidamente a los desarrolladores a usar la biblioteca de componentes de TinyVue para lograr una migración sin problemas de Vue2 a Vue3 y ayudar a mejorar el combate real.
En dos días, un total de 10 desarrolladores participaron y completaron con éxito el proyecto y recibieron certificados de honor. Durante este proceso, Xiao Lu mencionó: "Es realmente conveniente migrar después de compilar el proyecto TinyVue. Simplemente cambie algunas líneas de código y modifique el número de versión para instalar, y la migración es realmente fluida". Algunos desarrolladores también mencionaron: "A través de este campo de capacitación, no solo aprendí cómo actualizar el proyecto Vue2 a Vue3, sino que también aprendí a usar OpenTiny para crear formularios y páginas de formularios".
Desafío geek del 8 de julio:
Desafío:
El 8 de julio, OpenTiny también organizó un desafío geek, donde los desarrolladores compiten para mostrar sus habilidades y sabiduría.
El desafío establecido por OpenTiny se titula: Los desarrolladores usan los componentes @vue/repl y OpenTiny (Botón / Seleccionar / Casilla de verificación) para crear un campo de exploración de código Playground a través del desafío. Los desarrolladores también están muy interesados en este tema. A través de la excelente guía del disertante y la explicación paciente, la excelente capacidad de comprensión de los desarrolladores y las extraordinarias habilidades prácticas, ¡finalmente decidimos nuestro mejor héroe técnico!
Del 8 al 9 de julio, comunicación stand:
Situación del stand:
por supuesto, el contenido de la comunicación del stand es bastante rico, y nuestros expertos front-end también están realizando comunicaciones y discusiones profundas con los desarrolladores en la primera línea. Recopile los puntos débiles y los problemas que encuentran los desarrolladores, comparta y responda la confusión de los desarrolladores front-end actuales para los desarrolladores a corta distancia.
En primer lugar, OpenTiny es una solución de biblioteca de componentes de nivel empresarial, principalmente para resolver los siguientes problemas:
- Múltiples terminales requieren múltiples desarrollos
- Las capacidades no se pueden reutilizar debido a múltiples pilas de tecnología
- La carga de trabajo de actualizar una versión grande del marco es pesada
- Los sistemas de código bajo carecen de componentes configurables
- Falta de plantillas de sistemas de gestión comunitaria
En segundo lugar, durante el proceso de comunicación, muchos desarrolladores también respondieron sus propias preguntas, a las que nuestros expertos en el stand también respondieron una por una. Por ejemplo:
1. ¿Por qué OpenTiny puede implementar un conjunto de códigos para admitir tanto Vue2 como Vue3?
OpenTiny adopta una arquitectura de diseño sin procesamiento. Bajo esta arquitectura, los componentes de TinyVue tienen una interfaz API unificada. Los desarrolladores solo necesitan escribir un código, y los componentes pueden admitir la visualización de diferentes terminales, como PC y dispositivos móviles, y también admitir diferentes especificaciones de interacción de UX. Con la ayuda de la API Hooks del marco React o la API de composición del marco Vue, el código lógico central del componente se puede desacoplar del marco front-end, e incluso se puede implementar un conjunto de código de biblioteca de componentes, mientras se admiten diferentes versiones de Vue.
2. ¿Cómo migrar mi proyecto de la biblioteca de componentes original a la biblioteca de componentes OpenTiny?
Cuando un proyecto quiere migrar a la biblioteca de componentes de OpenTiny, puede adoptar un método de migración gradual, y cualquier cambio de proyecto requiere un cierto costo. Sin embargo, cuando el proyecto de la biblioteca de componentes de OpenTiny se migra de Vue2 a Vue3, se puede lograr una migración simple y fluida, y con el desarrollo de la tecnología front-end, OpenTiny puede continuar adaptándose al futuro y encarando el futuro. Por ejemplo, además de los tres marcos principales que se usan ampliamente en la actualidad, hay marcos emergentes como Svelte que también han llamado la atención de todos.Para satisfacer ciertas necesidades comerciales, se requiere la transformación del proyecto en el futuro y también se puede llevar a cabo una migración sin problemas. Si desea cambiar del proyecto original de Vue2 para usar el proyecto de biblioteca de componentes OpenTiny, puede cambiar un solo componente manteniendo las características y los efectos de la página original que creó primero. Una vez que se completa el cambio general del proyecto del proyecto, se puede lograr una migración simple y sin problemas modificando el número de versión.
3. Después de que un proyecto usa la biblioteca de componentes OpenTiny, ¿la actualización de la versión anterior a la nueva afectará el uso de las funciones anteriores?
¿La actualización de la versión después de que el desarrollador cambie a la biblioteca de componentes OpenTiny desde su propia biblioteca de componentes afectará las funciones de la versión anterior? Este problema requiere un análisis específico de problemas específicos, en función de los escenarios comerciales y de desarrollo del desarrollador, pero en general, para garantizar la continuidad del negocio, no tendrá un impacto importante en las características funcionales. Si se trata de una actualización de versión principal, puede haber un pequeño impacto.
4. ¿Cómo pueden los desarrolladores comenzar rápidamente con el proyecto de biblioteca de componentes de código abierto OpenTiny?
Para comenzar con la biblioteca de componentes, OpenTiny también ayuda constantemente a los desarrolladores a reducir los costos de aprendizaje. En primer lugar, puede visitar el sitio web oficial de OpenTiny para ver los documentos de ayuda para el aprendizaje. En segundo lugar, compartiremos transmisiones en vivo regularmente para ayudar a los desarrolladores a comenzar rápidamente. Al mismo tiempo, también ayudaremos a los desarrolladores a comprender el contenido del proyecto y utilizar el proyecto a través de artículos y videos. Luego, participaremos o llevaremos a cabo regularmente actividades para desarrolladores e intercambiaremos conferencias para comunicarnos estrechamente con los desarrolladores, comprender los puntos débiles y las dificultades de los desarrolladores y ayudarlos a resolver problemas. servicio de preguntas y respuestas de la comunidad Los desarrolladores interesados pueden unirse En nuestro grupo de intercambio técnico, hay varios ingenieros técnicos en el grupo que responderán a sus preguntas.
5. ¿Cuáles son las ventajas de la biblioteca de componentes OpenTiny y la biblioteca de componentes de los productos de la competencia?
Para los desarrolladores front-end, si necesitan construir un nuevo proyecto, inevitablemente elegirán la tecnología de acuerdo con sus propios escenarios comerciales y necesidades comerciales. En lo que respecta a las bibliotecas de componentes actualmente en el mercado, cada uno tiene sus propias ventajas. Pero actualmente existe el problema de que las bibliotecas de componentes de interfaz de usuario de interfaz de usuario de la industria generalmente se clasifican de acuerdo con sus marcos de trabajo de interfaz de usuario Angular, React y Vue, como la biblioteca de componentes React, la biblioteca de componentes Angular y la biblioteca de componentes Vue. Después de cruzar las dos clasificaciones, se pueden dividir en la biblioteca de componentes de React PC, la biblioteca de componentes de React Mobile, la biblioteca de componentes de Angular PC, la biblioteca de componentes de Angular Mobile, la biblioteca de componentes de Vue PC, la biblioteca de componentes de Vue Mobile, etc. Además, debido a que las versiones grandes de los marcos front-end Angular, React y Vue no son compatibles con versiones anteriores, las diferentes versiones corresponden a diferentes bibliotecas de componentes. Tomando Vue como ejemplo, las versiones de Vue 2.0 y Vue 3.0 no son compatibles, por lo que el código de la biblioteca de componentes de UI de Vue 2.0 es diferente al de Vue 3.0, es decir, la misma pila de tecnología también tiene diferentes versiones de bibliotecas de componentes de UI. Resumimos las bibliotecas de componentes de la interfaz de usuario de las diferentes categorías anteriores en una imagen, y luego, desde la perspectiva de los usuarios de la biblioteca de componentes, si desea desarrollar una aplicación, primero debe seleccionar una de las siguientes bibliotecas de componentes y luego aprender y dominar la biblioteca de componentes Se puede ver que la biblioteca actual de componentes de pila multi-terminal y multitecnología trae una gran carga de aprendizaje para los usuarios.
Entonces, ¿cómo puede OpenTiny resolver este problema? OpenTiny adopta una arquitectura de diseño sin procesamiento y hace que el código sea más fácil de entender y mantener a través del concepto de diseño de lógica de componentes, estilo de componentes y separación de plantillas de componentes:
- Separación de la lógica y la interfaz de usuario: al abstraer tareas como el procesamiento lógico y la conversión de datos en componentes que no se representan, se puede separar el foco de atención y mejorar la legibilidad y el mantenimiento del código.
- Mejorar la reutilización: la lógica de los componentes se puede reutilizar en múltiples escenarios. Estos componentes no dependen de componentes específicos de la interfaz de usuario o marcos front-end, y se pueden probar y usar independientemente de la interfaz, lo que mejora la reutilización y la capacidad de prueba del código.
- Cumple con el principio de responsabilidad única: este diseño fomenta el cumplimiento del principio de responsabilidad única, donde cada componente solo es responsable de tareas específicas de lógica o procesamiento de datos. Este diseño hace que el código sea más modular, extensible y mantenible, y reduce el acoplamiento entre componentes.
- Mejor capacidad de prueba: dado que los componentes sin procesamiento se prueban independientemente de la interfaz de usuario, es más fácil escribir pruebas unitarias y de integración. La prueba puede centrarse en la lógica y la conversión de datos del componente sin prestar atención a los detalles de representación e interacción de la interfaz, lo que mejora la eficiencia y la fiabilidad de la prueba.
- Mejore la eficiencia del desarrollo: los desarrolladores pueden centrarse más en la lógica comercial y el procesamiento de datos sin preocuparse por los detalles específicos de representación de la interfaz de usuario. Esto puede mejorar la eficiencia del desarrollo, reducir la escritura de código repetitivo y también brindar mejores posibilidades para la colaboración en equipo.
Por supuesto, además de estos problemas, también prestaremos más atención a la tendencia de desarrollo futuro del front-end, como micro front-end, código bajo y otras direcciones. Estos escenarios también se mejorarán y optimizarán continuamente en el futuro, de modo que OpenTiny tenga la capacidad suficiente para adaptarse al presente y al futuro. Al mismo tiempo, también trabajaremos con desarrolladores externos para crear una solución de biblioteca de componentes OpenTiny más completa y seguir creando un ecosistema de código abierto más rico. Deje que más desarrolladores se beneficien ~
otras instrucciones
OpenTiny es una solución de biblioteca de componentes de nivel empresarial que se adapta a múltiples terminales, como PC/móvil, que cubre pilas multitecnología Vue2/Vue3/Angular, y tiene herramientas que mejoran la eficiencia, como el sistema de configuración de temas/plantilla de fondo medio/línea de comando CLI, que puede ayudar a los desarrolladores a desarrollar aplicaciones web de manera eficiente.
Aspectos destacados principales:
- Cross-terminal y cross-framework: al utilizar la arquitectura de diseño de componentes sin procesamiento Renderless, un conjunto de códigos admite Vue2/Vue3, PC/Mobile al mismo tiempo, y admite la personalización de la lógica a nivel de funciones y el reemplazo completo de plantillas, con buena flexibilidad y sólidas capacidades de desarrollo secundario.
- Componentes enriquecidos: hay más de 80 componentes en el lado de la PC y más de 30 componentes en el lado móvil, incluidos componentes de alta frecuencia como Tabla, Árbol, Seleccionar, etc., con desplazamiento virtual incorporado para garantizar una experiencia fluida en escenarios de big data. Además de los componentes comunes en la industria, también ofrecemos algunos componentes de características únicas, como: divisor de panel dividido, cuadro de entrada de dirección IP de dirección IP, calendario de calendario, recorte de imagen de recorte, etc.
- Componentes configurables: los componentes admiten los modos de plantilla y configuración, adecuados para plataformas de código bajo. Actualmente, el equipo ha integrado OpenTiny en la plataforma interna de código bajo y ha realizado muchas optimizaciones para plataformas de código bajo.
- Ecología circundante completa: proporciona una biblioteca de componentes TinyNG basada en Angular + TypeScript, proporciona plantillas de fondo medio TinyPro con más de 10 funciones prácticas y más de 20 páginas típicas, proporciona herramientas de ingeniería TinyCLI que cubren todo el proceso de desarrollo front-end y proporciona una potente plataforma de configuración de temas en línea TinyTheme Bienvenido a unirse a la comunidad de código abierto OpenTiny
. Agregue el asistente de WeChat: opentiny-official para participar en la construcción conjunta ~
Sitio web oficial de OpenTiny : https://opentiny.design/
Almacén de código OpenTiny : https://github.com/opentiny/
Biblioteca de componentes Vue : https://github.com/opentiny/tiny-vue (bienvenida de Star )
Biblioteca de componentes de Angluar : https://github.com/opentiny/ng (bienvenida de Star)
Herramienta CLI : https://github ub.com/opentiny/ tiny-cli (estrella de bienvenida)