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

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

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.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Chakra UI View es una biblioteca de componentes centrada en la accesibilidad, diseñada para facilitar la creación de interfaces de usuario con componentes que cumplen con las especificaciones de WAI-ARIA.

La versión V1 de Chakra UI View incluye una reescritura completa en TypeScript, una nueva API de temas que permite anulaciones de componentes, variantes personalizadas y tamaños personalizados, y la implementación de componibles para una mejor organización del código.

Chakra UI View incorpora una API de fábrica que ofrece componentes primitivos personalizables y la capacidad de definir estilos dentro del tema, lo que permite a los desarrolladores crear componentes personalizados y tematizarlos de manera eficiente.

Chakra UI View es altamente compatible con herramientas como Vite y Volar, facilitando el desarrollo en Vue 3 gracias a su integración optimizada, lo que permite una compilación más rápida y eficiente.

Las futuras versiones de Chakra UI View podrían incluir una compilación sin tiempo de ejecución y el uso de máquinas de estado para gestionar componentes con mucha lógica, mejorando la eficiencia y mantenibilidad del código.

Jonathan Bakebwa
Jonathan Bakebwa
23 min
21 Oct, 2021

Comments

Sign in or register to post your comment.
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.

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

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.
Construyendo Pinia desde cero
Vue.js Live 2024Vue.js Live 2024
70 min
Construyendo Pinia desde cero
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Sumergámonos en cómo funciona Pinia bajo el capó construyendo nuestro propio `defineStore()`. Durante este masterclass cubriremos algunos conceptos avanzados de Vue como la inyección de dependencias y los scopes de efectos. Esto te dará una mejor comprensión de la API de Composición de Vue.js y Pinia. Requisitos: experiencia en la construcción de aplicaciones con Vue y su API de Composición.