Vuetify 3: Titan

Hola, mi nombre es John Leader. Soy el creador y autor de Viewtify. Y hoy quería tomar un poco de tiempo para hablar sobre Viewtify 3, la próxima versión que se lanzará en febrero del próximo año. Y, uh, algunos de los diferentes elementos y aspectos en los que el equipo ha estado trabajando mientras hemos estado avanzando a través de la alpha.

Algunas de las actualizaciones más grandes que tenemos están en la forma de la creación de la línea base de todos los componentes básicos de computación para el framework están dentro. Tenemos muchos nuevos conceptos de design normalizados en su, su terminología para que sean más semánticos y fáciles de trabajar. Tenemos interfaces adicionales que te permiten, uh, interactuar con los componentes de formas más intuitivas que te permiten, uh, obtener resultados más consistentes. Y también hemos estado trabajando mucho en la usabilidad real de las diversas partes del framework para facilitar su manipulación y trabajo con estilos personalizados, así como la forma en que se implementa en tu proyecto. Y algunas de las nuevas características del navegador que podemos aprovechar, uh, a medida que nos alejamos de la plataforma Internet Explorer 11.

¿De acuerdo? Entonces, algunos de los cambios y mejoras que tenemos provienen de los componentes mencionados al principio, los componentes básicos para el framework están todos completos. Estos son componentes que forman la base para implementaciones más grandes. Cosas como alertas y banners, calificaciones, así como alrededor de 42 otros componentes básicos que van desde botones hasta chips, avatares, que usamos para crear y construir algunos de los componentes de composición más complejos. Hemos añadido muchas nuevas interfaces para cómo puedes trabajar con estos diferentes componentes, cosas que simplifican la forma en que puedes interactuar y hacer diferentes elecciones y cambios de design dentro de esos componentes. También hemos añadido algunas clases de utilidad adicionales para ayudarte además de modificar componentes basados en sus estructuras de prop normales, pero también siendo capaz de hacer cambios adicionales con la ayuda de clases de utilidad para texto y color y diferentes transformaciones y demás.

No. Una de las cosas que recientemente hemos incorporado en el framework en el que el equipo ha estado trabajando son los elementos de formulario y nuestros sistemas de validation. Tenemos un nuevo sistema de validation que se ha expandido y se ha añadido como un proveedor en línea disponible, como los llamamos, que te permite no solo implementar cualquier tipo de componente o elemento como un elemento validable hasta cierto punto, sino que también hemos añadido nueva funcionalidad para cómo puedes realizar la validation, incluyendo llamadas asíncronas además de la funcionalidad existente de la versión dos que está disponible hoy. Este sistema de validation está integrado en los nuevos componentes de formulario además de estar disponible en línea, como se muestra aquí a la derecha, donde ahora podemos tomar algo que anteriormente estaba codificado en las entradas y ahora es algo que es flexible y puede ser utilizado en varios lugares. También hemos trabajado mucho en mejorar la diversidad de estilos de los componentes de entrada con un nuevo concepto que está en el material design llamado densidad. Hablaré un poco más sobre eso más tarde.

Además de muchas de estas nuevas características y funcionalidades, todavía hemos portado todos los estilos existentes de la versión dos. Eso es además de las nuevas opciones disponibles para la densidad que hemos creado. Una de las cosas geniales que hemos implementado recientemente fue un sistema de posicionamiento de animation para cómo nuestros menús y nuestros diálogos son lo que normalmente llamamos componentes desmontables, cómo funcionan. Y una de las cosas nuevas que tenemos que se aplica a nuestro sistema es la forma en que los menús y los diálogos se animan cuando se hace clic en su activador es una transformación que se basa en la ubicación del activador. Así que como puedes ver en la animation aquí, cuando abrimos el diálogo, en lugar de ser un elemento que simplemente se anima desde el centro de la pantalla, ahora estamos transformando estos elementos desmontables desde su ubicación original del activador para mejorar realmente la sensación visual de la funcionalidad real, pero también para mejorar el performance y lo suave que es cuando estás trabajando con estos componentes para que haya una animation nítida, no hay temblores, y esta es una de mis partes favoritas de la nueva versión con todas las formas en que los menús también funcionan y cómo se posicionan en la pantalla. Tenemos mucha más funcionalidad que permite al usuario hacer diseños estéticos realmente agradables y decisiones dentro de su aplicación y simplemente dar al usuario más opciones en general.

Tenemos algunos conceptos normalizados que me gustaría llamar opciones de personalización semántica que hemos comenzado a normalizar o juntar múltiples aspectos diferentes de diseño dentro de beautify e intentar ponerlos bajo una categoría particular o opciones similares entre múltiples componentes. Así que cuando estás trabajando en el framework, tendrás diferentes componentes con los que estás trabajando, pero aún estarán basados en la misma interfaz con la que estás trabajando con múltiples componentes diferentes. Y lo que quiero decir con eso es que tenemos un nuevo concepto llamado variantes y lo que es, es una forma para nosotros de tomar algunas de nuestras propiedades y funcionalidades mutuamente exclusivas de diseño de la versión dos y ponerlas detrás de una convención de nombres para que podamos reutilizar esto a lo largo y expandir la funcionalidad que se utiliza o está disponible, perdón, para múltiples componentes diferentes.

Un ejemplo serían los cinco disponibles que existen principalmente en componentes basados en tarjetas son texto contenido, texto contorno y plano. Y estos diferentes estilos de diseño están representados en la versión dos, pero no están representados detrás de ninguna convención de nombres específica. Así que lo que hemos hecho es homogeneizar esta funcionalidad. Hemos hecho que sea reutilizable en cualquier componente de tipo tarjeta S como alertas. Hojas, banners, elementos de lista que te dan un control adicional sobre el, no solo el aspecto visual del componente, sino, uh, sabes, homogeneizando haciendo esto similar a través de múltiples implementaciones diferentes para que podamos, uh, tener una funcionalidad similar y la misma para múltiples componentes que ni siquiera tenían la capacidad de implementar estos estilos en la versión dos.

Una de las otras cosas que hemos implementado conceptualmente es, uh, la densidad del material design y lo que es la densidad, es una, uh, declaración de cuán alta o verticalmente, cuánto espacio ocupa un componente mientras que el tamaño modifica el relleno de los componentes, modifica el tamaño de la fuente y, y en general ocupa potencialmente un espacio mayor en el eje X, mientras que con la densidad, simplemente estamos reduciendo la altura. Así que lo que hemos hecho aquí es que hemos, hemos añadido la capacidad de combinar múltiples aspectos diferentes de tamaño que están disponibles en la versión dos del framework por ahora, tenemos, ya sabes, tamaño regular para extra pequeño, pequeño, por defecto, grande, extra grande. Con la introducción de la densidad para la versión tres, hemos tomado, algunos componentes con los que puedes haber trabajado que tenían una propiedad densa. Ahora se ha dividido en dos, que ahora son compactos y cómodos. Y estos son esencialmente iteraciones de ciertos píxeles, cuatro píxeles para ser exactos, que se reducen y escalan para que un botón o una entrada mantengan el mismo aspecto visual. Sin embargo, ocupará físicamente menos espacio vertical. Y luego para los componentes que soportan tanto el tamaño como la densidad, estos trabajan juntos. Así que puedes hacer cosas como tener un botón compacto extra grande. Si así lo eliges. Y lo que esto hace es que da muchas más opciones al usuario para poder construir su aplicación para que no tengas que tener un diseño tan voluminoso o algo que ocupa mucho espacio en la página.

Ahora tienes la capacidad de cambiar globalmente en el framework, todos los componentes admiten la densidad a un estilo más compacto. Y estas son algunas de las formas interesantes en las que puedes interactuar con estos componentes, como botones y elementos de lista de entrada.

Hemos trabajado mucho en las interfaces. Estamos trabajando con componentes para dar a los usuarios la capacidad de resolver sus problemas de diferentes maneras. Así que ahora en la versión 2, la mayoría de los componentes que tienen lo que me gustaría llamar propiedades de interfaz textual, cosas como puedes ver en la diapositiva para propiedades que definen, título, subtítulo, texto. Esto existe en algunos componentes, pero nunca se sincronizó de una manera que fuera similar en todo el framework. Así que ahora vas a tener la capacidad de personalizar los componentes de tres maneras en la mayoría de las situaciones. Tendremos el enfoque predeterminado, que son elementos. Esto es prácticamente lo que es Beautify 2 ahora. En algunos casos, es muy verboso llegar a un estilo específico, que es requerido por la estructura. Por ejemplo, si quieres tener el estilo de texto de tarjeta en una tarjeta, tienes que tener un componente vCardText. Así que lo que hemos hecho es que hemos mantenido eso como una línea de base, pero luego dijimos, está bien, vamos a añadir algunas props. Vamos a decir, ya sabes, puedes especificar cualquiera de estas particulares propiedades de interfaz textual tituladas texto, subtítulo, la capacidad de establecer avatares o iconos comunes, características comúnmente utilizadas y solicitadas que normalmente el usuario tiene que aplicar manualmente. En cambio, dando una línea de base que no es súper flexible en algunos aspectos, pero es flexible en otros. Así que si quieres aplicar simplemente algún texto a una tarjeta con título, puedes hacerlo con una prop, o podrías hacerlo con una ranura o te da el mismo marcado que tú escribirías. Normalmente por defecto con elementos, pero también puedes hacer cambios adicionales dentro de él. Así que simplemente te da cierta flexibilidad para cómo puedes abordar tus problemas. Y puedes mezclar y combinar estos juntos y crear un único diseño y diseño implementación de tu propia.

Así que tenemos algunas mejoras de usabilidad, cambios de calidad de vida, cosas que mejoran no sólo la experiencia del desarrollador, sino cómo interactuamos. Cómo nosotros y otros usuarios interactuamos con el framework en su conjunto desde ese perspectiva. En la versión dos, usamos, todavía usamos SAS, pero usamos el enfoque de importación hacia la implementación. Hemos convertido nuestro SAS para Vuetify en lo que se llaman módulos. Esto es para coincidir con las nuevas actualizaciones del cargador de Vuetify y nuestro nuevo plugin VITE, que está disponible ahora. Y lo que se pretendía con esto era crear una interfaz más fácil de usar para SAS, pero también para resolver problemas que estábamos teniendo con datos predefinidos y contaminando las variables globales dentro de SAS. También nos ha dado la capacidad de hacer algunas cosas bastante interesantes como con el nuevo plugin VITE. Puedes exponer la capacidad de modificar cualquier y todos los estilos. Así es como lo harías con la versión 2, pero cualquier cosa que no se modifique y tal en realidad tiene un archivo CSS precompilado específicamente para ya sea ese componente o funcionalidad que se utilizará en lugar de recompilar, lo que da tiempos de compilación drásticamente más rápidos, y no sólo es considerablemente más rápido trabajar con una implementación de archivo de vista donde estás personalizando las variables y estás personalizando SASS que se compila durante el tiempo de desarrollo. Ahora, no sólo es más rápido, porque para los componentes que no están siendo utilizados para variables, ya tenemos eso precompilado, pero también estamos enganchando a Vite, que ha sido mucho el foco del equipo últimamente para el proceso de desarrollo. Hemos podido aprovechar algunas características siempre verdes de los navegadores como Focus Within y las variables CSS, trabajando con un botón, por ejemplo, ahora proporciona diferentes indicaciones visuales basadas en cómo tu interacción ocurre con ese elemento. Así que si estás haciendo clic en un botón, es probable que estés al tanto de la ubicación de ese botón y no necesitamos que proporcione un contorno cada vez que hacemos clic en él.

Sin embargo, si estás navegando a través de tu aplicación, puede que no sea tan obvio cuando un botón se atenúa ligeramente en su opacidad. Así que ahora tenemos una nueva funcionalidad con el soporte avanzado de navegador para poder tener una visualización visual distinta basada en cómo un elemento interactúa con respecto a las variables CSS. Estas existían en la versión dos, ahora son ciudadanos de primera clase en la versión tres. Se utilizan ampliamente en todo el framework y ahora son una especie de base para permitir que nuestras opciones de personalización dentro del framework se expandan y lo hagan no sólo más fácil de modificar, sino que te den más opciones para cambiar y durante esas modificaciones. Y así, en este momento, el equipo está trabajando intensamente en la alpha. Hemos estado haciendo un gran progreso y a partir de ahora estamos listos para entregar Viewtify 3 en febrero del próximo año. Estamos realmente emocionados por muchas de las nuevas características que están llegando al framework. Y estamos realmente emocionados de que puedas echarle un vistazo. Y echar un vistazo. Puedes ver la alpha ahora mismo si vas a next.Viewtifyjs.com. Y también puedes seguir nuestras publicaciones en el tablero de publicaciones de GitHub o incluso comunicarte y ponerte en contacto con el equipo de desarrollo en Discord en community.Viewtifyjs.com. Mi nombre es John Leader y esto ha sido una especie de actualización sobre Viewtify 3. Gracias.