Vuetify 3: Titán

Rate this content
Bookmark

Descubre las nuevas características que llegarán a la próxima versión del framework. Observa cómo el equipo principal abordó la migración de Vuetify de Vue 2 a la API de composición de Vue 3. Obtén un adelanto de las actualizaciones de las características principales, como el nuevo sistema de diseño, metodologías de prueba mejoradas, opciones de personalización ampliadas, actualizaciones en las clases de utilidad de CSS y mucho más.

20 min
21 Oct, 2021

Video Summary and Transcription

Hola, soy John Leader, el creador de Viewtify. Viewtify 3 es la próxima versión con nuevos conceptos de diseño, mejor usabilidad y compatibilidad con los navegadores modernos. El framework ha añadido nuevas características como un sistema de validación, diversidad de estilos, opciones de personalización semántica y un concepto de densidad. Las opciones de personalización mejoradas, el rendimiento mejorado y el soporte avanzado del navegador con variables CSS también son aspectos destacados de Viewtify 3.

Available in English

1. Introducción a Viewtify 3

Short description:

Hola, soy John Leader, el creador de Viewtify. Quiero hablar sobre Viewtify 3, la próxima versión con nuevos conceptos de diseño, mejor usabilidad y compatibilidad con navegadores modernos. Hemos completado los componentes básicos y agregado nuevas interfaces y clases de utilidad para una interacción y personalización más sencillas.

Hola, mi nombre es John Leader. Soy el creador y autor de Viewtify. Y hoy quiero 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 avanzábamos en la versión alpha.

Algunas de las actualizaciones más importantes que tenemos se encuentran en la creación de la línea base de todos los componentes básicos del framework. Tenemos muchos nuevos conceptos de design normalizados en su terminología, lo que los hace 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. También hemos estado trabajando mucho en la usabilidad real de las diferentes partes del framework, desde facilitar la manipulación y el trabajo con estilos personalizados hasta cómo se implementa en tu proyecto. Y algunas de las nuevas características del navegador de las que podemos aprovechar, uh, a medida que nos alejamos de la plataforma de Internet Explorer 11.

¿De acuerdo? Entonces, algunos de los cambios y mejoras que tenemos en los componentes mencionados al principio, los componentes básicos del framework están completos. Estos son componentes que forman la base para implementaciones más grandes. Cosas como alertas y banners, clasificaciones, así como alrededor de otros 42 componentes básicos que van desde botones hasta chips, avatares, que usamos para crear y construir algunas de las composiciones más complejas de componentes. Hemos agregado muchas interfaces nuevas para trabajar con estos diferentes componentes, cosas que simplifican la forma en que puedes interactuar y realizar diferentes opciones y cambios de design dentro de esos componentes. También hemos agregado algunas clases de utilidad adicionales para ayudarte además de modificar componentes basados en sus estructuras de propiedades normales, sino también poder realizar cambios adicionales a través de clases de utilidad para texto, color y diferentes transformaciones, entre otras cosas.

2. Nuevas características y conceptos

Short description:

Una de las cosas que hemos agregado recientemente al framework es un nuevo sistema de validación que permite la validación en línea y llamadas asíncronas. También hemos mejorado la diversidad de estilos de los componentes de entrada e implementado un sistema de posicionamiento de animación para menús y diálogos. Hemos introducido opciones de personalización semántica y un nuevo concepto llamado variantes, que permite estilos de diseño reutilizables en varios componentes. Además, hemos implementado el concepto de densidad del diseño material, que permite un mayor control sobre el tamaño del componente y el espacio vertical.

No. Una de las cosas que hemos agregado recientemente al framework en las que el equipo ha estado trabajando son los elementos de formulario y nuestros sistemas de validación. Tenemos un nuevo sistema de validación que ahora se ha expandido y se ha agregado 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 agregado nuevas funcionalidades para realizar validación, incluyendo llamadas asíncronas además de la funcionalidad de la versión dos que ya está disponible hoy en día. Este sistema de validación 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 antes estaba codificado en los inputs y ahora es algo flexible que se puede utilizar en varios lugares. También hemos trabajado mucho en mejorar la diversidad de estilos de los componentes de entrada con un nuevo concepto que se encuentra en el diseño material llamado densidad. Hablaré un poco más sobre eso más adelante.

Además de muchas de estas nuevas características y funcionalidades, también hemos trasladado todos los estilos existentes de la versión dos. Esto es además de las nuevas opciones disponibles para la densidad que hemos creado. Una de las cosas interesantes que hemos implementado recientemente es un sistema de posicionamiento de animación para cómo funcionan nuestros menús y nuestros diálogos, que normalmente llamamos componentes desmontables. Y una de las cosas nuevas que tenemos aplicadas 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 basada en la ubicación del activador. Así como se puede ver en la animación 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 la apariencia visual de la funcionalidad pero también para mejorar el rendimiento y la fluidez al trabajar con estos componentes, de manera que haya una animación nítida sin temblores, y esta es una de mis partes favoritas de la nueva versión con toda la forma en que funcionan los menús y cómo se posicionan en la pantalla. Tenemos muchas más funcionalidades que permiten al usuario tomar decisiones y crear diseños estéticos realmente agradables en su aplicación y brindarle 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 reunir múltiples aspectos de diseño diferentes dentro de Viewtify y tratar de agruparlos bajo una categoría o opciones similares entre múltiples componentes. Entonces, cuando estés trabajando en todo el framework, tendrás diferentes componentes con los que estás trabajando, pero aún se basarán 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 esto significa es que es una forma de tomar algunas de nuestras propiedades y funcionalidades mutuamente exclusivas de diseño y ponerlas detrás de una convención de nomenclatura para que podamos reutilizar esto en todo el framework y realmente expandir la funcionalidad que está disponible o utilizada, perdón, para múltiples componentes diferentes.

Un ejemplo son las cinco variantes disponibles que existen principalmente en los componentes basados en tarjetas, que son texto contenido, texto contorneado 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 nomenclatura específica. Entonces, lo que hemos hecho es homogeneizar esta funcionalidad. Hemos hecho que sea reutilizable en cualquier componente de tarjeta, alertas, hojas, banners, elementos de lista que te brindan un control adicional sobre el aspecto visual del componente, pero también, como mencioné antes, homogeneizando y haciendo esto similar en múltiples implementaciones diferentes para que podamos tener una funcionalidad similar y la misma funcionalidad 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, del diseño material y lo que es la densidad, es una declaración de cuánto espacio vertical ocupa un componente, mientras que el tamaño la densidad modifica el relleno de los componentes, modifica el tamaño de la fuente y, en general, ocupa potencialmente un espacio más grande en el eje X, mientras que la densidad, simplemente reduce la altura. Entonces, lo que hemos hecho aquí es que hemos agregado la capacidad de combinar múltiples aspectos diferentes del tamaño que está disponible en la versión dos del framework, por ahora, tenemos, ya sabes, tamaños regulares para extra pequeño, pequeño, predeterminado, grande, extra grande. Con la introducción de la densidad para la versión tres, hemos tomado los componentes que podrías haber utilizado que tenían una propiedad densa. Ahora se ha dividido en dos, que ahora son compactos y cómodos. Y estas son básicamente iteraciones de ciertos píxeles, exactamente cuatro píxeles, que se reducen y escalan para que un botón o un input mantenga el mismo aspecto visual pero ocupe físicamente menos espacio vertical. Y para los componentes que admiten tanto el tamaño como la densidad, estos funcionan juntos. Por lo tanto, puedes hacer cosas como tener un botón extra grande y compacto. Si así lo deseas. Y esto brinda muchas más opciones al usuario para poder construir su aplicación de manera que no tenga que tener un diseño tan cuadrado o algo que ocupe mucho espacio en la página.

3. Mejora de la personalización y rendimiento

Short description:

El framework ahora permite cambios globales en todos los componentes para admitir un estilo más compacto. Los usuarios pueden interactuar con los componentes de diferentes formas, incluyendo botones y elementos de lista de entrada. Las opciones de personalización se han mejorado, brindando flexibilidad a través de propiedades de interfaz textual y la capacidad de combinar diferentes implementaciones de diseño. El nuevo complemento VITE y la conversión a módulos en Vuetify han resuelto problemas con datos predefinidos y variables globales en SAS, lo que resulta en tiempos de compilación más rápidos. La integración con Vite ha permitido utilizar características siempre actualizadas como Focus Within y variables CSS, mejorando la experiencia del usuario con indicadores visuales en elementos interactivos.

La capacidad ahora donde puedes cambiar globalmente en el framework, todos los componentes de soporte de 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 brindar a los usuarios la capacidad de resolver sus problemas de diferentes formas. Así que ahora en la versión 2, la mayoría de los componentes tienen lo que me gustaría llamar propiedades de interfaz textual, cosas como se puede ver en la diapositiva para definir propiedades de título, subtítulo, texto. Esto existe en algunos componentes, pero nunca se sincronizó de una manera similar en todo el framework. Así que ahora tendrás la capacidad de personalizar los componentes de tres formas en la mayoría de las situaciones. Tendremos el enfoque predeterminado, que son elementos. Esto es prácticamente lo que es Vuetify 2 ahora. En algunos casos, es muy detallado llegar a un estilo específico, que es requerido por la estructura. Por ejemplo, si quieres tener el estilo de texto de una tarjeta en una tarjeta, tienes que tener un componente vCardText. Así que lo que hemos hecho es mantener eso como base, pero luego hemos agregado algunas propiedades. Vamos a decir, puedes especificar cualquiera de estas propiedades de interfaz textual en el título, texto, subtítulo, la capacidad de establecer avatares o iconos comunes, características solicitadas que generalmente el usuario tiene que aplicar manualmente. En lugar de eso, damos una base que no es súper flexible en algunos aspectos, pero sí flexible en otros. Así que si quieres aplicar solo un texto a una tarjeta con título, puedes hacerlo con una propiedad, o puedes hacerlo con un slot y te da la misma estructura que tendrías normalmente por defecto con elementos, pero también puedes hacer cambios adicionales dentro de él. Así que te brindamos flexibilidad para abordar tus problemas. Y en realidad puedes combinar y mezclar estos juntos y crear una implementación de diseño única y propia.

Tenemos algunas mejoras de usabilidad, cambios de calidad de vida, cosas que mejoran no solo la experiencia del desarrollador, sino también cómo interactuamos. En la versión dos, usamos SAS, pero usamos el enfoque de importación para la implementación. Hemos convertido nuestro SAS para Vuetify en lo que se llaman módulos. Esto coincide con las nuevas actualizaciones del cargador de Vuetify y nuestro nuevo complemento VITE, que está disponible ahora. Y el propósito de esto fue crear una interfaz más fácil de usar para SAS, pero también resolver problemas que teníamos con datos predefinidos y la contaminación de las variables globales dentro de SAS. También nos ha permitido hacer cosas muy interesantes con el nuevo complemento VITE. Puedes exponer la capacidad de modificar todos los estilos. Esto 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ífico para ese componente o funcionalidad que se utilizará en lugar de volver a compilar, lo que da tiempos de compilación considerablemente más rápidos, y no solo es considerablemente más rápido trabajar con una implementación de Vuetify donde personalizas las variables y compilas SASS durante el desarrollo. Ahora, no solo es más rápido, porque para los componentes que no se utilizan para variables, ya tenemos eso precompilado, sino que también nos estamos conectando a Vite, que ha sido el enfoque principal del equipo últimamente para el proceso de desarrollo. Hemos podido aprovechar algunas características siempre actualizadas de los navegadores, como Focus Within y variables CSS, al trabajar con un botón, por ejemplo, ahora proporciona diferentes indicadores visuales según cómo interactúes con ese elemento. Así que si haces clic en un botón, lo más probable es que conozcas la ubicación de ese botón y no necesitamos que proporcione un contorno cuando hacemos clic en él.

4. Soporte Avanzado del Navegador y Variables CSS

Short description:

Con el soporte avanzado del navegador en Viewtify 3, los elementos ahora pueden tener una visualización distintiva basada en su interacción con variables CSS. Estas variables, que estaban presentes en la versión dos, ahora son ciudadanos de primera clase en la versión tres. Se utilizan ampliamente en todo el framework y sirven como base para ampliar las opciones de personalización, facilitando las modificaciones y brindando más opciones durante las modificaciones.

Sin embargo, si estás navegando por 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 del navegador para poder tener una visualización distintiva basada en cómo se interactúa con un elemento en relación a las variables CSS. Estas variables 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 que permite expandir nuestras opciones de personalización dentro del framework y hacer que no solo sea más fácil de modificar, sino que te brinde más opciones durante esas modificaciones. Actualmente, el equipo está trabajando intensamente en la versión alfa. Hemos estado progresando muy bien y, hasta ahora, estamos programados para lanzar Viewtify 3 en febrero del próximo año. Estamos realmente entusiasmados con muchas de las nuevas características que vendrán en el framework. Y estamos ansiosos por que las puedas probar. Y echar un vistazo. Puedes probar la versión alfa ahora mismo si vas a next.Viewtifyjs.com. También puedes seguir nuestras actualizaciones en el tablero de lanzamientos de GitHub o incluso comunicarte y contactar al equipo de desarrollo en Discord en community.Viewtifyjs.com. Mi nombre es John Leder y esto ha sido una actualización sobre Viewtify 3. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.