Vuetify 3: Titan

Rate this content
Bookmark

Aprende sobre las nuevas características que llegarán a la próxima versión del marco de trabajo. Ve cómo el equipo central abordó la portabilidad de Vuetify de Vue 2 a la API de composición de Vue 3. Previsualiza las actualizaciones de las características principales, como el nuevo sistema de diseño, las metodologías de prueba mejoradas, las opciones de personalización ampliadas, las actualizaciones de las clases de utilidad CSS, y mucho, mucho más.

John Leider
John Leider
20 min
21 Oct, 2021

Comments

Sign in or register to post your comment.

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 navegadores modernos. El marco de trabajo ha añadido nuevas características como un sistema de validación, diversidad de estilos, opciones de personalización semánticas y un concepto de densidad. Las opciones de personalización mejoradas, el rendimiento mejorado y el soporte avanzado de navegadores 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, mejorada usabilidad y compatibilidad con navegadores modernos. Hemos completado los componentes básicos y añadido 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 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.

2. Nuevas Características y Conceptos

Short description:

Una de las cosas que hemos añadido recientemente al framework es un nuevo sistema de validación que permite la validación en línea y las 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 múltiples componentes. Además, hemos implementado el concepto de densidad del material design, que permite un mayor control sobre el tamaño del componente y el espacio vertical.

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.

3. Personalización Mejorada y Rendimiento Mejorado

Short description:

El framework ahora permite cambios globales en todos los componentos para admitir un estilo más compacto. Los usuarios pueden interactuar con los componentes de diferentes maneras, incluyendo botones y elementos de lista de entrada. Las opciones de personalización se han mejorado, proporcionando flexibilidad a través de propiedades de interfaz textual y la capacidad de mezclar y combinar diferentes implementaciones de diseño. El nuevo plugin 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 la utilización de características siempre verdes como Focus Within y variables CSS, mejorando la experiencia del usuario con indicaciones visuales en elementos interactivos.

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.

4. Soporte Avanzado de Navegador y Variables CSS

Short description:

Con el soporte avanzado de navegador en Viewtify 3, los elementos ahora pueden tener una visualización visual distinta basada en su interacción con las 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 la base para expandir las opciones de personalización, facilitando la modificación y proporcionando más opciones durante las modificaciones.

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.

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

Everything Beyond State Management in Stores with Pinia
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.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
One Year Into Vue 3
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!
Utilising Rust from Vue with WebAssembly
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: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The creator of Vue js gives an update on the new features of the technology.
Local State and Server Cache: Finding a Balance
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

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
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
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
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
Daniel Roe
Daniel Roe
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.
Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
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.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- 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
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
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.
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
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.