Codifica a la velocidad del diseño en Chakra UI Vue

Rate this content
Bookmark

Con Chakra UI, podemos anular los estilos de los componentes para expresar sistemas de diseño personalizados con componentes accesibles de Vue. Esta charla explora la nueva API de temas en la versión 1 y cómo puedes usarla para construir rápidamente interfaces de usuario personalizadas para tu aplicación.

23 min
21 Oct, 2021

Video Summary and Transcription

Jonathan Bakebwa presenta Chakra UI View, una biblioteca de componentes centrada en la accesibilidad, con características como la extensión de temas y la definición de variantes personalizadas. Las próximas versiones de Chakra UI V1 introducirán una compilación sin tiempo de ejecución y una API de temas con anulaciones de componentes, variantes personalizadas y tamaños personalizados. La charla demuestra cómo implementar un diseño de botón utilizando Chakra UI, personalizar los estilos de los botones, crear tamaños de botones personalizados y utilizar iconos de bibliotecas externas. Chakra UI permite una implementación rápida de diseños de interfaz de usuario y se recomienda para desarrolladores que deseen mejorar sus diseños.

Available in English

1. Introducción a Chakra UI View

Short description:

Jonathan Bakebwa presenta Chakra UI View, una biblioteca de componentes centrada en la accesibilidad. Permite extender temas, definir variantes personalizadas, tamaños y componentes. La versión V1 incluye una reescritura completa en TypeScript, una nueva API de temas, componibles y una API de fábrica para estilizar componentes. El apoyo de la comunidad con herramientas como Volar y Vite facilita su uso con Vue 3.

Hola a todos. Mi nombre es Jonathan Bakebwa. Soy el creador y uno de los mantenedores de Chakra UI View, y también soy ingeniero de UI y gerente de ingeniería en RCT.ai. Durante el día, eso es lo que hago. También soy estudiante de último año de ciencias de la computación en el Instituto de Tecnología de Beijing, y estoy emocionado de estar aquí hoy en Vue.js London hablando sobre programación a la velocidad del design con Chakra UI View.

Voy a comenzar presentando Chakra UI como una biblioteca de componentes. Chakra UI es una biblioteca de componentes centrada en la accesibilidad. Y lo que eso significa es que todos los componentes en la biblioteca de Chakra UI han sido construidos desde cero cumpliendo con las especificaciones de WAI-ARIA para componentes creados por el autor.

También hemos incorporado la capacidad de extender el tema de los componentes de Chakra UI, y esto se vuelve mucho más fácil en la versión V1, y la forma en que lo hemos hecho más conveniente es que ahora puedes anular los estilos iniciales renderizados para los componentes que están nativamente dentro de Chakra UI. También hemos agregado más características que te permiten definir variantes personalizadas, tamaños personalizados, e incluso crear tus propios componentes personalizados y tematizarlos usando Chakra UI. Y lo que esto permite es tener un código más conciso y una implementación más rápida de las interfaces de usuario. Así que vemos esto como un paso hacia la reducción de la brecha entre el design y el código, especialmente en el contexto del navegador.

Para la versión V1, hicimos una reescritura completa en TypeScript. Y lo que hicimos fue reimplementar la API de temas, y quiero hablar sobre la API de temas porque ese será el enfoque de esta charla. También pudimos implementar algunos componibles. Y lo que hicimos fue que al escribir los componentes para V1, dividimos una de la lógica en componibles, y el componente solo tuvo que lidiar con los estilos para ese componente. Esto te permite consumir algunos de los hooks que se usan comúnmente. Eso significa que no necesitas importar otra biblioteca de terceros para los hooks que estamos exponiendo.

Otra cosa que hemos agregado en la versión V1 es una API de fábrica. Esta API de fábrica proporciona algunos componentes primitivos que puedes estilizar directamente. Y también puedes, ya que es una función, usarla para... también puedes proporcionar un componente que inicialmente no está estilizado con Chakra UI. Y este componente podrá... El valor de retorno será el mismo componente, con las mismas props, todo será lo mismo. Con la diferencia de que ahora puedes agregar algunos props de estilo y funcionará nativamente. Entonces, con la nueva API de Temas, también puedes definir componentes personalizados. Y también hemos proporcionado una nueva API con el uso de la configuración de estilo. Y lo que esto te permite hacer es definir estilos dentro de tu tema, y luego puedes consumir esos valores cuando creas tus propios componentes personalizados. Y gracias a la comunidad por trabajar con diferentes herramientas como Volar y con Vite, todo esto se vuelve mucho más fácil si estás utilizando Vue 3. Definitivamente recomendamos usar Vite para Chakra UI Vue, Vue V1.

2. Próximas características en Chakra UI V1

Short description:

Las próximas versiones de Chakra UI V1 introducirán una compilación sin tiempo de ejecución, máquinas de estado para componentes con mucha lógica y una API de temas con anulaciones de componentes, variantes personalizadas y tamaños personalizados. Las anulaciones de componentes permiten anular los estilos base para componentes específicos, mientras que las variantes y tamaños personalizados brindan flexibilidad en el estilo. Estas características facilitan la creación de diseños de interfaz de usuario únicos utilizando Chakra UI.

Si tienes Webpack, también es posible usarlo. Algunas de las ideas que estamos explorando en las versiones posteriores de V1 serían una compilación sin tiempo de ejecución. Y lo que esto permitiría es que recorramos todo el contexto de tu plantilla porque nos dimos cuenta de que la mayoría de nuestros usuarios usan Chakra UI para definir propiedades estáticas, propiedades de estilo estáticas en los componentes. Y así, lo que también podemos hacer es recorrer toda tu plantilla y luego extraer esas propiedades de estilo en CSS que luego inyectaremos en tus estilos de componentes de archivo único.

También estamos planeando, en el futuro, también estamos planeando usar máquinas de estado para componentes con mucha lógica. Por ejemplo, el acordeón tiene mucha lógica que tenemos que calcular y muchos estados que tenemos que gestionar. Y la mejor manera de lidiar con esto que descubrimos como equipo fue usar máquinas de estado. Y esto nos permite que la máquina de estado solo devuelva el estado actual que luego desestructuramos en los componentes que se representan en la página. Esto lo hace mucho más conveniente de usar y es ciertamente una buena manera para nosotros de compartir lógica. Y así, en el futuro, si alguien decide construir Chakra UI para Svelte, no tiene que reescribir toda esta lógica y usar efectos secundarios para cosas que probablemente ya existan dentro de una máquina de estado, solo necesitan acceder a ese estado y luego proporcionarlo a sus componentes, lo cual es realmente conveniente.

Entonces, ¿qué viene dentro de la API de temas de V1? Como mencioné antes, vamos a proporcionar anulaciones de componentes, que veremos hoy. También proporcionamos una API de variantes personalizadas. También proporcionamos la capacidad de crear tamaños personalizados para tus componentes. También proporcionamos la API de función de fábrica y componentes personalizados. Así que para la charla de hoy, quiero centrarme en tres atributos que cubrirá la API de temas dentro de V1. El primero, entre tantos, por cierto, ya que vamos a tener tiempo, solo podemos hablar de tres. El primero será las anulaciones de componentes. Entonces, dentro del objeto de tema, para aquellos de nosotros que estamos bastante familiarizados con la V1, de V0.x de Chakra UI, dentro de las opciones del complemento, hay un valor llamado extender tema. Y en el tema extendido, para V1 hemos agregado una clave llamada componentes. Entonces, esta clave de componente te permite anular los estilos base para el componente que elijas anular dentro del tema extendido. Entonces, cuando defines los estilos base, esos estilos se aplican a todos los botones. Así que no necesitas crear un botón personalizado para hacer eso. Lo segundo que hemos permitido hacer es definir variantes personalizadas. Ahora, dentro de Chakra UI, puedes crear una variante personalizada para ese componente que esperas consumir la variante. Y finalmente, puedes definir tamaños personalizados, lo cual es realmente conveniente para crear un botón extra grande. Si necesitas un botón que tenga 100 metros de ancho, ahora puedes hacerlo con Chakra UI View, aunque no te aconsejaría crear un botón de 100 metros de ancho, no cabría en la pantalla. Pero ciertamente es posible.

Veamos todo esto en acción, cómo vamos a implementar esto, esto, cómo vamos a ver estas cosas en acción. Para empezar, fui en línea y traté de recopilar una interfaz de usuario con algunos componentes personalizados que no están implementados dentro de Chakra UI. Así que mirando muy rápidamente esta interfaz de usuario, puedo ver que hay un botón aquí y este botón parece tener un tema diferente en comparación con los estilos predeterminados que se proporcionan dentro de Chakra UI.

3. Implementando el Diseño del Botón con Chakra UI

Short description:

Los botones en este diseño tienen diferentes estilos, tamaños e iconos. Para implementar este diseño utilizando Chakra UI, podemos crear una nueva variante personalizada dentro del objeto de tema o anular completamente el botón. Clonaré mi inicio de Chakra UI Chidori y lo usaré para este proyecto.

Y hay esta variedad de un botón sólido que tiene un estilo negro, un fondo negro, los bordes están redondeados. Y también está este, este, este, este, este estilo aquí. Así que ya podemos ver que ciertas cosas están siendo compartidas por los botones.

La segunda cosa que puedo ver aquí es que la altura de este botón no es realmente la misma que la de este botón. Así que este es un tamaño diferente y es posible que necesitemos crear un tamaño personalizado para este componente. Está heredando iconos de una biblioteca externa porque no tenemos este icono dentro de Chakra UI de forma nativa. Así que es posible que necesitemos usar un icono personalizado.

Así que voy a seguir adelante y crearé un proyecto que luego podremos clonar, luego básicamente intentar reimplementar esto usando Chakra UI. Y lo bueno de esto es que no vamos a reescribir toda la lógica del botón porque necesitamos que el botón se vea diferente y no vas a escribir estilos anidados adicionales para asegurarte de que el botón se vea como quieres que se vea. Simplemente puedes definir estos y crear una nueva variante personalizada dentro del objeto de tema o puedes decidir anular completamente el botón y hacer que todos los botones compartan estos estilos. Así que sumerjámonos y veamos cómo se ve eso.

Creo que lo primero que vamos a hacer es intentar clonar este botón usando Chakra UI e intentar implementarlo. Sabes, voy a suponer que un diseñador me lo entregó y en la mayoría de los casos probablemente ya conozco todas las diferentes medidas de todos los píxeles sobre los radios y todo lo demás en particular, pero puede que no profundicemos tanto. Solo quiero mostrarte lo fácil que es implementar la representación visual de este botón.

Lo primero que voy a hacer es clonar mi inicio de Chakra UI Chidori. En realidad, creo que es un buen inicio. Lo usaré para mi proyecto. Así que si alguna vez quieres tener un proyecto que ya esté utilizando Chakra UI, simplemente ve a mi nombre de usuario de GitHub slash Chakra UI Chidori starter. Así que lo copiaré y lo clonaré. Abriré mi terminal y lo clonaré. Lo siento. Abriré mi terminal de nuevo. Y me dirigiré a mi directorio de proyectos y luego clonaré, uh, esto, bueno, debería haberlo pegado. Bueno, no lo pegué. Así que lo copiaré de nuevo. Clonaré eso. Y lo llamaré ChakraButton. Correcto. Llamaré a esto ChakraButton. Iba a intentar clonar ese botón.

4. Implementando el Diseño de ChakraButton

Short description:

Voy a ingresar al directorio ChakraButton y ejecutar yarn install y yarn dev. Luego, abriré el proyecto en VSCode para examinar el archivo main.ts. El proyecto está estructurado con Chakra UI, incluyendo diseños, rutas y un sitio generado estáticamente. Dentro del complemento de Chakra UI, eliminaré la opción de extender el tema y toda la definición del tema. También eliminaré el contenido del archivo index.view y eliminaré estilos innecesarios. Después de agregar un mensaje de hola mundo, verificaré si todo funciona. A continuación, importaré la fuente especial utilizada en el diseño.

Genial. Y aunque esto fue, oh, fui muy rápido. Voy a ingresar al directorio. Creo que se llama ChakraButton. Ejecutaré yarn install y yarn dev, y abriré el mismo directorio en una nueva terminal y lo abriré en VSCode. Así podemos ver qué hay dentro de este proyecto. Muy bien, déjame abrirlo en pantalla completa.

Genial. Eso es perfecto. Lo primero en lo que estoy interesado en ver es nuestro archivo main.ts. Este proyecto está estructurado con Chakra UI, con diseños, rutas y también un sitio generado estáticamente. Así que es bastante bueno. Lo primero que voy a ver aquí es dentro de nuestro complemento de Chakra UI, vemos que hay esta opción de extender el tema que vimos, y voy a hacer clic en el tema y dentro del tema aquí, es donde está toda la definición de nuestro tema. Dado que vamos a volver a implementarlo desde cero, voy a eliminar todo lo que hay aquí porque no lo necesitamos porque somos salvajes. Estoy bromeando, y lo voy a eliminar. También voy a ir al archivo index.view y eliminar todo lo que hay dentro. También voy a eliminar estos otros estilos porque no creo que los necesitemos. No, no creo que los necesitemos. No creo que los necesitemos. Y simplemente escribiré aquí un hola mundo para asegurarme de que todo funcione. Aquí podemos ver nuestro servicio de desarrollo en ejecución. Voy a abrirlo en una nueva pestaña. Y si actualizo esta página, ahí está, ahí está nuestro hola mundo. Está vacío. La página está vacía. No hay vacío. Y vamos a hacer algunas modificaciones simples aquí. Lo primero que quiero hacer es importar esta familia de fuentes porque me parece que se está utilizando una familia de fuentes muy especial aquí.

5. Implementando la Fuente Pop-Ins

Short description:

Voy a fonts.google.com y buscar la familia de fuentes Pop-Ins. Copiaré el enlace y reemplazaré la familia de fuentes Inter con Pop-Ins. En nuestro archivo de tema, definiré la familia de fuentes Pop-Ins para el cuerpo y los encabezados. Ahora el navegador muestra la familia de fuentes Pop-Ins y nuestro botón tiene un fondo negro.

Así que voy a ir a fonts.google.com. Y parece que se parece a Pop-Ins. Así que voy a buscar directamente Pop-Ins. Lo he estado usando mucho, así que puedo reconocer Pop-Ins. Y voy a obtener este estilo. Tal vez queramos usar el estilo en negrita. Así que también voy a copiar eso.

Creo que también vamos a usar el estilo regular. Así que copiaré todo este enlace y lo pondré dentro de nuestro archivo index.html. Esta plantilla viene configurada con Inter, pero no creo que lo necesitemos para esta demostración. Vamos a reemplazar Inter con la familia de fuentes Pop-Ins. Y finalmente, me gustaría que nuestro tema, le pediré a nuestro tema que, donde encuentre el valor de la familia de fuentes definido como cuerpo o como encabezado, me gustaría que use la familia de fuentes Pop-Ins. Para hacer eso, volvemos a nuestro archivo de tema y vamos a las fuentes. Y aquí hay una propiedad llamada cuerpo, y para el cuerpo, quiero usar esto. Y también para nuestros encabezados, me gustaría que usen la misma familia de fuentes. Y así puedo heredar eso diciendo, me gustaría que todo lo que está aquí dentro, me gustaría que herede la familia de fuentes del cuerpo. Cuerpo. Esto debería hacer referencia a lo que tenemos dentro de nuestra definición de tema aquí. Así que eso es genial. Ahora puedo ir al navegador. Y si actualizo la página, ya puedo ver que hay una familia de fuentes allí. Si lo inspecciono, puedo ver que hay una familia de fuentes llamada fuentes cuerpo. Y si hacemos clic en eso, o si intentamos buscar eso, fuentes cuerpo, la definición, debería estar en algún lugar aquí. Sí, fuentes, fuentes cuerpo. Ahí está. Ahí está nuestro Pop-Ins. Increíble. Voy a hacer zoom para que todo sea un poco más claro aquí para nosotros. Genial.

Y nuestro botón, ahora, podemos ver que tiene este fondo negro.

6. Personalizando Estilos de Botones

Short description:

Para personalizar los botones en Chakra UI, podemos definir el radio de borde y los pesos de fuente en el tema. También podemos crear diferentes variantes para los botones, como una variante oscura con un fondo negro y texto blanco. Al agregar la propiedad de variante al componente de botón, podemos aplicar la variante oscura. Además, podemos ajustar el tamaño del botón para que coincida con el diseño.

Y también puedo ver que todos los botones tienden a tener este radio de borde cuadrado. Así que voy a ir dentro de nuestro tema y voy a definir eso para nuestros botones. Pero primero necesitamos un botón. Ahí está. Y creo que el texto dentro del botón dice, comenzar. Entonces, de entrada, está bien, hay un botón de Comenzar, no se parece en nada a nuestro botón que vemos en nuestro design. Así que voy a ir y primero definir los radios de borde y los pesos de fuente.

Entonces, bajo la clave de componentes, tengo un componente de botón, ¿verdad?, y luego voy a encontrar el estilo base. El estilo base, quiero que tenga un radio de borde de ninguno. Todos estos son atajos que Chakra UI ya tiene incorporados. Así que puedes usar directamente los atajos aquí. Me gustaría que tenga un peso de fuente, creo que regular. Bien, con suerte, esto debería haber reemplazado esos valores dentro de nuestro... Muy bien, eso es genial.

Lo siguiente que quiero hacer es que me parece que esta es una variante diferente. Este botón negro es una variante diferente en comparación con este otro. Así que voy a ir y definir una clave de variantes. Variantes y quiero crear una, veamos, ¿cómo lo llamamos? Llamémoslo una variante oscura, ¿de acuerdo? La mayoría de las personas probablemente usen algo como primario o algo así. Solo lo estoy usando para que sea fácil de recordar. Puedes nombrarlos como quieras. Así que voy a darle un fondo negro. Le voy a dar un color blanco. Y si vuelvo, por supuesto, no se aplicará. La razón de eso es que necesitamos agregar la propiedad de variante aquí. Entonces podemos decir que la variante es, supongo que la llamamos oscura. Y si volvemos a nuestro navegador, debería haberse actualizado. Oh, perfecto. Ahí está. Genial.

Lo segundo es, si volvemos al tamaño predeterminado, al tamaño predeterminado aquí, podemos ver que en realidad es un poco más pequeño de lo que debería ser en comparación con el botón aquí.

7. Creando Tamaño Personalizado de Botón y Agregando Icono

Short description:

Voy a crear un tamaño personalizado para el botón, llamado 'huge', con un padding x de 6 y un padding y de 12 a 16 píxeles. Además, utilizaré un icono de pluma llamado 'arrow up right' de feathericons.com.

Así que voy a crear un tamaño personalizado y dentro de este tamaño, me gustaría que tuviera un padding muy específico. Así que volvamos a nuestro tema y creemos un tamaño personalizado. Para eso, lo colocaremos bajo la clave de tamaños, y me gustaría que tuviera un valor de Excel.

Ahora, solo para mostrarte que no existe en la biblioteca, no tenemos un botón de Excel, así que podemos decir Excel o el tamaño sería Excel. Y esto debería romper nuestro botón, porque si definimos un tamaño que no existe o perfecto, está roto. Tal vez usemos un tamaño llamado huge. Usemos huge, porque puedes nombrar estos tamaños como quieras. Así que quiero un botón huge. Y para esto, me gustaría que tuviera un padding x de 6 por 4, que son aproximadamente 24 píxeles. Creo que tiene sentido. Voy a usar seis. En Chakra UI, tenemos una cuadrícula de cuatro píxeles. Y así podemos establecer, podemos calcular cuántos píxeles se están utilizando. Y permite cierta consistencia visual en la página. Y para nuestro padding y, me gustaría que el botón grande tenga alrededor de 12, tal vez 16 píxeles a cada lado. Genial. Y genial. Ahora puedes ver que nuestro botón está heredando los estilos. Y solo voy a hacer zoom. Así podemos ver eso. Genial. Este es el tamaño que pasamos como prop en el tamaño huge.

Lo último y final aquí, como podemos ver, es que nuestro botón tiene este icono, y no creo que tengamos este icono dentro de Chakra UI en los iconos internos. Entonces, ¿cómo solucionamos este problema? Me gusta usar los iconos de pluma. Solo voy a ir a feathericons.com. Y ya configuré estos data para que funcionen con los iconos de pluma. Y voy a buscar la flecha. Y creo que el nombre de ese icono es arrow up right. Perfecto, ya podemos encontrar el icono que necesitamos, así que no necesitamos hacer muchas acrobacias para eso. Y vamos a nuestros iconos de utilidades.

8. Variantes y Tamaños Personalizados en Chakra UI

Short description:

Podemos definir variantes y tamaños personalizados en Chakra UI sin tener que reescribir todo el componente. Al importar iconos de bibliotecas externas, podemos mejorar nuestros diseños. Chakra UI nos permite escribir menos código e implementar diseños de interfaz de usuario rápidamente. Para comenzar, visita view.chakraui.com o consulta nuestro repositorio v1 en chakraui.com/ChakraUIViewNext. ¡Estoy emocionado de ver lo que construyes con Chakra UI!

Y si te preguntas cómo pudimos definir estos, dentro del archivo principal de TS, importamos el objeto de iconos de este archivo. Así que voy a entrar aquí y exportarlo desde la biblioteca. Entonces, arrow, era arrow up right, ¿verdad? Y luego voy a ir dentro de nuestra plantilla y voy a definir un icono izquierdo. Así que diré aquí, el icono izquierdo debería ser igual a la flecha hacia arriba y hacia la derecha. Y si vuelvo a nuestro navegador, o no está bien, es el icono correcto, puedo golpear correctamente. No puedo mostrar incorrectamente, solo estaba posicionado incorrectamente. Olvidé posicionarlo de la manera correcta. Creo que debería estar aquí. Muy bien, genial. Increíble. Tenemos un botón perfectamente similar. Y no creamos un componente completamente nuevo, solo definimos una nueva variante personalizada, definimos un tamaño personalizado. E incluso importamos un icono de una biblioteca externa. Y hemos vuelto a implementar esto sin tener que reescribir todo el botón. Y nos ahorra mucho tiempo en comparación con tener que haberlo escrito nosotros mismos. Y si queremos, podríamos usar un tamaño de botón como grande en caso de que necesites que sea más pequeño. Y este tamaño se reflejaría dentro de la plantilla. Creo que debido al zoom, tal vez la diferencia en el efecto no sea tan grande. Creo que probablemente sea lo mismo. Pero sí, eso es todo cuando se trata de usar Chakra UI. Pero también podríamos hacer lo mismo para esta otra variante, esta probablemente sería tu variante secundaria si fuera una variante primaria, y puedes hacerlo usando Chakra UI. Genial. Con Chakra UI, te permite escribir menos código y tener un poco más de velocidad al implementar nuevos diseños de interfaz de usuario que tu equipo de diseño te entregará. Para comenzar con Chakra UI, puedes dirigirte a view.chakraui.com o también puedes seguirnos en Twitter. También puedes consultar nuestro repositorio v1, que es chakraui.com/ChakraUIViewNext. Si quieres ver nuestra v0.next, simplemente omite el 'next' del enlace del repositorio de GitHub y podrás ver la versión actualmente lanzada. Así que si quieres comenzar con esto, simplemente dirígete a next.view.chakraui.com y podrás comenzar con nuestra API v1. Y estoy deseando ver lo que has construido, lo que construyas con esto y estoy feliz de responder cualquier pregunta y estoy muy emocionado de estar aquí hoy. Muchas gracias por la oportunidad y te deseo un excelente resto de tu día. Que tengas una maravillosa noche. ¡Adiós, adiós!

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.
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.
Vue.js London Live 2021Vue.js London Live 2021
72 min
A Different Vue into Web Performance
Workshop
Solving your front-end performance problems can be hard, but identifying where you have performance problems in the first place can be even harder. In this workshop, Abhijeet Prasad, software engineer at Sentry.io, dives deep into UX research, browser performance APIs, and developer tools to help show you the reasons why your Vue applications may be slow. He'll help answer questions like, "What does it mean to have a fast website?" and "How do I know if my performance problem is really a problem?". By walking through different example apps, you'll be able to learn how to use and leverage core web vitals, navigation-timing APIs, and distributed tracing to better understand your performance problems.