Name: Vue.js London 2023
Start: 2023-05-12T07:00:00.000Z
End: 2023-05-15T19:00:00.000Z

Acabas de llegar a una página web y tratas de hacer clic en un elemento en particular, pero justo antes de hacerlo, se carga un anuncio encima y terminas haciendo clic en eso en su lugar. Eso... eso es un cambio de diseño. Todos, tanto los desarrolladores como los usuarios, saben que los cambios de diseño son malos. Y cuanto más tarde ocurran, más interrupciones causarán a los usuarios. En este masterclass vamos a analizar cómo las fuentes web causan cambios de diseño y explorar algunas estrategias para cargar fuentes web sin causar grandes cambios de diseño. Tabla de contenidos:¿Qué es CLS y cómo se calcula?¿Cómo las fuentes pueden causar CLS?Estrategias de carga de fuentes para minimizar CLSRecapitulación y conclusión

Maximizar el rendimiento de la aplicación optimizando las fuentes web

This workshop focuses on maximizing app performance by optimizing web fonts. It covers topics such as cumulative layout shift (CLS) and how fonts cause it, as well as strategies for CLS minimization. The importance of monitoring the actual CLS score in production is emphasized. Techniques for optimizing web fonts include using system fonts, hosting your own fonts, and leveraging browser capabilities. The workshop also explores font display properties and the impact of font loading and swapping on performance. Tools like Sentry can be used for monitoring and analyzing CLS scores.

You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead. That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts. Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion

Maximize App Performance by Optimizing Web Fonts

Lazar Nikolov

El creador de Vue js da una actualización sobre las nuevas características de la tecnología.

Vue: Actualizaciones de Características

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.

The creator of Vue js gives an update on the new features of the technology.

Vue: Feature Updates

Evan You

Cuanto más trabajas en una aplicación, más complicado se vuelve su enrutamiento y más fácil es cometer un error. "¿Se llamaba la ruta usuarios o usuario?", "¿Tenía un parámetro id o era userId?". Si solo TypeScript pudiera decirte cuáles son los nombres y parámetros posibles. Si solo no tuvieras que escribir una sola ruta más y dejar que un complemento lo haga por ti. En esta charla repasaremos lo que se necesitó para traer rutas automáticamente tipadas para Vue Router.

Deja de Escribir tus Rutas

Designing APIs is a challenge, and it's important to consider the language used and different versions of the API. API ergonomics focus on ease of use and trade-offs. Routing is a misunderstood aspect of API design, and file-based routing can simplify it. Unplugging View Router provides typed routes and eliminates the need to pass routes when creating the router. Data loading and handling can be improved with data loaders and predictable routes. Handling protected routes and index and ID files are also discussed.

The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.

Stop Writing Your Routes

Eduardo San Martin Morote

¿Cómo se escribe un buen componente? En esta charla exploraremos varios patrones diferentes para escribir componentes mejores. Analizaremos técnicas para simplificar nuestros componentes, hacerlos más fáciles de entender y aprovechar al máximo los componentes que ya tenemos.

Patrones de Diseño de Componentes

The Talk covers clean components and when to create new components, as well as patterns for writing cleaner components and the benefits of VIP patterns. Refactoring and separating code into separate components can make it shorter and easier to read, reducing complexity. The importance of not repeating oneself and the benefits of using smaller components for performance and developer experience are discussed. Composables can help extract logic in large and complex components, and patterns can be incorporated into component libraries and design systems.

How do you write a good component? In this talk we’ll explore several different patterns for writing better components. We’ll look at techniques for simplifying our components, making them easier to understand, and getting more out of the components we’ve already got.

Component Design Patterns

Michael Thiessen

La aparición de las SPAs, y por lo tanto, el código del lado del cliente con mucha lógica, cambió drásticamente el juego para los desarrolladores front-end. Como resultado, en los últimos años, hemos tenido que ponernos al día con técnicas sofisticadas para construir aplicaciones de alta calidad, siendo una de las más esenciales las pruebas.Cada vez más personas comenzaron a agregar pruebas a sus aplicaciones impulsadas por Vue.js. Con diferentes grados de éxito. El campo aún es relativamente nuevo y todos necesitamos más experiencia en cómo probar aplicaciones del lado del cliente de la manera más efectiva.Con mi charla, quiero mostrar 1) cómo desarrollar una estrategia sólida de pruebas (herramientas y prácticas) y 2) trabajar en un ejemplo del mundo real de cómo combinamos las pruebas E2E con las pruebas de componentes.Quiero resaltar algunos principios generales de la teoría de pruebas y luego pasar a la aplicación práctica, codificando en vivo de manera TDD.

Escribiendo Buenas Pruebas para Aplicaciones Vue (e2e vs. Pruebas de Componentes, Características de una Prueba *Buena*)

This Talk discusses the importance of testing and the need to decouple tests from test frameworks, CSS selectors, and user interfaces. It emphasizes the benefits of writing tests first and provides examples of simulating shopping lists and working in a test-driven way. The Q&A section covers topics such as changing testing frameworks, bug coverage, and using data attributes for decoupling.

The emergence of SPAs, and therefore logic-heavy client-side code, drastically changed the game for front-end developers. As a result, for the last couple of years, we have had to catch up with sophisticated techniques to build high-quality applications—one of the essential being testing.More and more people started to add tests to their Vue.js-powered applications. With varying degrees of success. The field is still relatively new, and we all need more experience in how to test client-side applications most effectively.With my talk, I want to walk through 1) how to come up with a solid testing strategy (tools and practices) and 2) work on a real-world example of how we combine E2E testing with component testing.I want to highlight some general principles from testing theory and then go into the practical application—live coding in a TDD manner.

Writing Good Tests for Vue Applications (e2e vs. Component Tests, Features of a *Good* Test)

Markus Oberlehner

Esta charla analizará la evolución de los modos de renderizado web y de qué se trata el movimiento Jamstack. Construiremos un proyecto de demostración para mostrar cómo se pueden combinar un generador de sitios estáticos y un CMS sin cabeza para crear historias dinámicas y atractivas, manteniendo al mismo tiempo los beneficios de rendimiento y escalabilidad de un sitio estático.Aprenderás sobre las ventajas y limitaciones de cada modo de renderizado y obtendrás una comprensión más profunda de cómo utilizar Jamstack para construir experiencias de narración poderosas y dinámicas.

Una Saga de Problemas de Renderizado Web

This Talk discusses the problems faced in building and rendering web applications, different rendering methods and strategies, and the benefits of the Yamstack architecture. It covers server-side rendering, static site generation, incremental static regeneration, and edge rendering. The speaker demonstrates how to build a static site using a Hello CMS and the JAMstack architecture. Other topics include connecting Storyboard with a Nuxt application, mock data, hybrid rendering, and handling I18N with a static site generator.

This talk will look at the evolution of web rendering modes and what the Jamstack movement is all about. We will build a demo project to show how a static site generator and a Headless CMS can be combined to create dynamic and engaging stories while maintaining a static site's performance and scalability benefits.You will learn about the advantages and limitations of each rendering mode and gain a deeper understanding of how to use Jamstack to build powerful and dynamic storytelling experiences.

A Saga of Web Rendering Woes

Alba Silvente Fuentes

Conoce TresJS ▲ ■ ●, una forma declarativa de llevar la magia de ThreeJS utilizando componentes y composables de Vue en la vida cotidiana. Piénsalo como React-three-fiber o Lunchbox pero sin necesidad de un renderizador personalizado. Simplemente funciona.¿Estás listo para agregar una nueva dimensión a tus aplicaciones Vue?

TresJS, una forma declarativa de crear escenas 3D a partir de componentes Vue

The speaker discovered 3D with 3GS and was inspired to create a 3D ecosystem for the Vue community using Troy.js. The process of setting up a 3D scene and objects in Tress was explained, along with creating and configuring 3D objects. The talk also covered animating objects with Tress and the 'Cientos' package, as well as the future of Tress.js and its compatibility with older versions of Three. The speaker expressed gratitude to sponsors and contributors and highlighted the potential for product customization with Tress.js.

Meet TresJS ▲ ■ ●, a declarative way of bringing the magic of ThreeJS using everyday Vue Components and composables. Think of it as React-three-fiber or Lunchbox but without the need of a custom renderer. It just works.Are you ready to add a new dimension to your Vue Apps?

TresJS, a declarative way of creating 3D scenes from Vue components

Alvaro Saburido

Los módulos Nuxt son la forma por defecto de extender nuestras aplicaciones Nuxt con nuevos comportamientos y funcionalidades. ¿Alguna vez has construido el tuyo propio? ¿Por qué te molestarías con cientos de módulos ya disponibles? Vamos a responder esas preguntas juntos y ver por qué crear tus propios módulos en Nuxt 3 puede ayudarte a tener una comprensión más profunda de cómo funciona Nuxt, al mismo tiempo que te abre el camino para involucrarte en el código abierto.

Módulos Nuxt 3 y Código Abierto

Nuxt.js modules are a central part of Nuxt and have had 14 million downloads. Creating Nuxt modules is easy with Nuxt 3. Modules can provide assets, CSS injection, plugins, and auto imports. Learning Nuxt modules gives a deeper understanding of Nuxt and extends its functionalities. The Nuxt community is friendly to newcomers and encourages module creation.

Nuxt modules are the de-facto way of extending our Nuxt applications with new behaviors and functionalities. Have you ever built your own? Why would you bother with hundreds of modules already out there? Let's answer those questions together and see why making your own modules in Nuxt 3 can both help you have a deeper understanding of how Nuxt works while also paving the way for you to get into open source!

Nuxt 3 Modules and Open-Source

Lucie Haberer

Creando un nuevo meta-marco basado en Vue desde cero con codificación en vivo.

Construyendo para el Edge - Creando un marco de próxima generación

NUXT is a framework for building web apps that has undergone significant changes with the introduction of Nitro, a new server. The Talk covers topics such as building a framework with Nitro, rendering a view app, configuring Nitro and Vite, and integrating Nuxt with an existing Vue 2 project. The collaboration between Nuxt and Chrome has resulted in performance improvements, and the future of Nuxt and Nitro looks promising with new ideas and extensions being developed.

Creating a new Vue-based meta-framework from scratch with live coding.

Building for the Edge - Crafting a Next-Gen Framework

Daniel Roe

Aprende cómo construir una aplicación Vue implementada en el edge para brindar una experiencia ultrarrápida a tus usuarios finales.

Nuxt en el Edge

Nuxt is a web framework with many features including server-side rendering, client-side rendering, static site generation, edge site rendering, and more. The Edge is a limited environment running on CDN nodes, such as Cloudflare network. Database options on the Edge include Postgre with Neon, Versel on Neon, Superbase, MySQL with plan scale, HyperDB, and KV with redis and Cloudflare storage. The speaker demonstrates creating a demo with a votes table, handling API requests, adding authentication, saving votes, and displaying results. The roadmap to a full stack Nuxt 3 with an edge-first experience is in progress. Copilot is a helpful tool for developers. Integrating SSO with GitHub and improving the developer experience are important considerations for Nuxt 3.

Learn how to build a Vue application deployed to the edge to bring a blazing fast experience to your end users.

Nuxt on the Edge

Sebastien Chopin

Mejorar el rendimiento de las aplicaciones Vue o Nuxt no es una tarea fácil. Sin embargo, hay algunas victorias rápidas que puedes implementar fácilmente y que mejorarán drásticamente el rendimiento de tu sitio web. Una de estas victorias rápidas es la Optimización de Imágenes. En esta charla, te enseñaré cómo optimizar imágenes al vuelo con servicios de Gestión de Activos Digitales como Cloudinary o Sistemas de Gestión de Contenidos, utilizar el concepto de Carga Perezosa, usar formatos comprimidos de imágenes como WEBP, ¡y mucho más!

Optimización de Imágenes - Victoria Rápida para Mejorar el Rendimiento en Aplicaciones Vue & Nuxt

Image optimization is crucial for website performance and user experience. Services like IPX and Cloudinary can help optimize images on the fly. Cloudinary offers additional functionalities and transformations for image management. Lazy loading and the lazy pattern can improve website performance by deferring image loading. Optimized images deliver a better user experience. Fallbacks can mitigate the impact of service failures.

Improving Performance of Vue or Nuxt apps is not an easy task. However, there are some quick wins that you can implement easily that will drastically improve the performance of your website. One of such quick win is Image Optimization. In this talk, I will teach you how to optimize images on the fly with Digital Asset Managements services like Cloudinary or Content Management Systems, utilize the concept of Lazy Loading, use compressed format of images like WEBP, and many more!

Image Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps

Jakub Andrzejewski

Hay un costo que muchas empresas no consideran al usar software de código abierto. Puede costar mucho dinero y tiempo mantenerse actualizado con las versiones obsoletas.El software de código abierto es gratuito para las empresas hasta que el autor obsoleta una versión.Estas son algunas mejores prácticas que recomendamos al considerar la adopción de software de código abierto:<ul><li> - ¿Quién es el autor? ¿Tienen una reputación sólida que va a perdurar en el tiempo? ¿Tienen los recursos para respaldar una biblioteca empresarial?</li><li> - ¿Cuánto soporte en línea hay en la comunidad para esta biblioteca? ¿Cuántas dependencias tiene esta biblioteca?</li><li> - ¿Tiene una política de fin de vida? ¿Qué sucederá cuando lancen una nueva versión? ¿Las empresas tendrán la opción de quedarse en versiones antiguas durante mucho tiempo?</li><li> - ¿Qué se debe considerar al migrar a un marco de trabajo compatible después de que una versión haya sido obsoletada?</li></ul>

El Costo Oculto del Software de Código Abierto

Today's Talk discusses the hidden costs of open source software and the importance of estate planning for open source stacks. It highlights the challenges faced by product managers in terms of library upgrades and conflicting priorities. The Talk also emphasizes the steps to establish an end-of-life policy for open source stacks, including monitoring, inventorying, ranking, and outlining upgrade plans. It further emphasizes the need to consider risk, dependencies, and business impact when identifying support dates and upgrade options. The Talk concludes by stressing the importance of being proactive in formalizing an end-of-life policy to avoid costly migration projects.

There is a cost that many companies don’t consider when using open source. It can cost a lot of money and time to keep upgrading sunsetted versions.Open source is free for companies to use until the author sunsets a version.These are some best practices that we we recommend when considering open source adoption:<ul><li>        - Who is the author? Do they have a strong reputation that is going to be around for a long time? Do they have the resources to support an enterprise library?</li><li>        - How much online support is there in the community for this library? How many dependencies are on this library?</li><li>        - Does it have an end of life policy? What’s going to happen when they rev on a version? Will companies have an option to stay on older versions for a long time?</li><li>        - What should you consider when migrating to a supported framework after a version has been sunsetted?</li></ul>

The Hidden Cost of Open Source

Aaron Mitchell

En la actualidad, el rendimiento web es una de las cosas más importantes que todos quieren optimizar en sus aplicaciones, y está claro para todos cómo impacta dramáticamente un sitio web mal optimizado en los negocios. Sin embargo, como industria, fallamos completamente en reconocer su complejidad y mal utilizamos la herramienta más común para medirlo: Google Lighthouse. Si eres una de esas personas que piensa que un buen rendimiento equivale a una buena puntuación en Lighthouse, también has caído en esta trampa y esta charla es para ti.

Probablemente estás utilizando Lighthouse de forma incorrecta: Cómo nos engañó un único número mágico

The Talk discusses the importance of performance and mobile consumption in e-commerce, as well as the use and limitations of Google Lighthouse for measuring page quality. It highlights the challenges and considerations in using Lighthouse, including the difference between lab data and real-world data, and the need to understand user experience beyond a single score. The Talk also touches on the potential use of AI in evaluating website performance, optimizing third-party libraries, and setting a JavaScript budget for better performance.

These days web performance is one of the most important things everyone wants to optimize on their apps, and it's clear to everyone how dramatic the impact of a poorly optimized website is on business. Yet we as an industry completely fail in recognizing its complexity and widely misuse the most common tool to measure it — Google Lighthouse. If you’re one of those people thinking that good performance equals a good Lighthouse score, you’ve also fallen into this trap and this talk is for you.

You’re Probably Using Lighthouse Wrong: How We Got Tricked by a Single Magic Number

Filip Rakowski

En el mundo de las Aplicaciones de Página Única, el renderizado del lado del cliente ha sido durante mucho tiempo el método preferido para renderizar contenido. Sin embargo, a medida que las SPAs han evolucionado, han surgido otros modos de renderizado que ofrecen diferentes ventajas y desventajas. En mi charla, exploraremos por qué es importante ir más allá de una página en blanco como solicitud inicial y exploraremos diferentes modos de renderizado como SSR, SSG, ISG y más. No solo cubriremos los pros y los contras de cada modo, sino que también proporcionaremos ejemplos reales y comparables. Al final de la charla, tendrás una mejor comprensión de los diferentes modos de renderizado disponibles para las SPAs y podrás elegir el mejor para tus necesidades. Únete a mi charla para explorar el arte de los modos de renderizado.

El Arte de los Modos de Renderizado: Ir Más Allá de una Página en Blanco

Google processes billions of searches per day, but less than 10% of websites get visitors from Google. SEO is user-focused and requires continuous improvement. JavaScript used to be a challenge for search engines, but now they can handle it. Server-side rendering is a solution for the challenges of single-page applications. Good SEO includes HTTPS, mobile friendliness, core web vitals, and handling URL changes. Meta tags and accessibility are important for SEO. Google Search Console provides valuable insights for tracking keyword performance.

In the world of Single Page Applications, client-side rendering has long been the go-to method for rendering content. However, as SPAs have evolved, other rendering modes have emerged that offer different advantages and disadvantages. In my talk, we will explore why it's important to go beyond a blank page as initial request and explore different rendering modes like SSR, SSG, ISG and more. We'll not only cover the pros and cons of each mode but also provide real and comparable examples. By the end of the talk, you'll have a better understanding of the different rendering modes available for SPAs, and be able to choose the best one for your needs. Join my talk to explore the art of rendering modes.

The Art of Rendering Modes: Go Beyond a Blank Page

Alexander Lichter

Muchas organizaciones con bibliotecas de componentes están trabajando en actualizaciones para sus aplicaciones Vue 2 para poder soportar Vue 3. ¡A veces no es fácil! Idealmente, podrías escribir tu código una vez y compilarlo para diferentes entornos de ejecución de Vue. En esta charla, haremos exactamente eso. Al final, tendrás una receta para enviar bibliotecas que admitan tanto Vue 2 como Vue 3.

Construyendo Bibliotecas Vue Compatibles con Versiones Anteriores

This Talk discusses the challenges of upgrading to Vue 3 and maintaining Vue 2 and Vue 3 branches in a component library. It explores strategies for shipping libraries and using monorepos, as well as developing backwards compatible code. The speaker emphasizes the importance of testing and deploying components, and highlights the challenges of supporting multiple Vue versions. The Talk concludes with a demonstration of juggling and a discussion on the end-of-life status of Vue 3.

Many organizations with component libraries are working on upgrades for their Vue 2 apps so that they can support Vue 3. Sometimes it's not easy! Ideally, you could write your code once and cross-compile it for different Vue runtimes. In this talk, we'll do exactly that. At the end, you'll have a recipe for shipping libraries that support both Vue 2 and Vue 3.

Building Backwards Compatible Vue Libraries

Jessica Sachs

El rock &amp; roll está vivo y en plena forma, y en esta charla mostraré que Vue es tan versátil que se puede utilizar para hacer visualizaciones de audio mientras la guitarra eléctrica suena a través del navegador. La audiencia tendrá acceso a una aplicación Vue que les permitirá votar por una canción para que se reproduzca en vivo en el escenario. La pantalla muestra todos los votos y los reproduzco a medida que van llegando. Mientras toco música, se muestra información sobre los metadatos y se reproduce una visualización de audio mientras estoy en el escenario. Cuantos más votos reciba una canción, más alta aparecerá en la lista y más posibilidades habrá de que la toque. Toda la experiencia se crea utilizando Vue y Uniform. Además de despertar al público con un poco de rock &amp; roll picante, explicaré cómo se construyó el software y por qué Vue es una tecnología tan importante para arquitecturas componibles con múltiples canales. Vue también se utiliza para controlar el sonido de la guitarra, directamente desde el navegador.

Alive and Kicking - Un Vistazo a Rock & Roll

The Talk introduces FutS guitar karaoke, a virtual experience in the browser using Vue, Nuxt, Supa Bass, Pignan, Cloudinary, and WebMedia. The virtual experience visualizes audio and allows users to vote and share their votes on Twitter. The browser interacts with the amplifier to change sounds on the guitar, and the browser updates in real-time with vote data. The guitar signal resembles the playing song, and users can choose between Chuck Berry's 'Johnny B. Goode' and AC-DC for the song performance.

Rock &amp; roll is alive and kicking and in this talk I will showcase that Vue is so versatile it can be used to do audio visualisations while rock guitar soars through the browser. The audience will have access to a vue application which allows them to vote for a song to be played live on stage. The screen shows all the votes and I play them as they come up. While playing music meta data is shown and an audio visualisation plays while I’m rocking on stage. The more votes a song gets, the higher it shows on the list and the more chance I’ll play it. The whole experience is created using Vue and Uniform. Next to waking the audience up with some spicy rock &amp; roll, I will explain how the software was build and why Vue is such an important technology for composable architectures with multiple channels. Vue is also used to control the guitar sound, right from the browser.

Alive and Kicking - A Vue Into Rock & Roll

Tim Benniks

En esta charla, discutiremos algunas mejores prácticas para probar aplicaciones Vue 3. Exploraremos cómo Mock Service Worker y Vue Testing Library pueden ayudarnos a probar aplicaciones Vue 3 de manera más cercana a una situación de usuario real. Los asistentes saldrán con una comprensión sólida de cómo probar eficazmente sus aplicaciones Vue 3 para garantizar la confiabilidad y mantenibilidad.

Probando Aplicaciones Vue 3 con Mock Service Worker

This Talk discusses testing V3 applications with Mock Service Worker, which is a library that allows simulating server responses in tests. It covers setting up Mock Service Worker by creating mock API responses and connecting it with the application. The Talk also explains how to write unit tests for asynchronous components using Vue's suspense component. It demonstrates how to test components that interact with APIs and handle error responses. Additionally, it mentions the testing library for components without API calls and emphasizes the importance of testing component interactions and API integration.

In this talk, we will discuss some best practices for testing Vue 3 applications. We will explore how the Mock Service Worker and the Vue Testing Library can aid us in testing Vue 3 applications closer to a real-live user situation. Attendees will leave with a solid understanding of how to effectively test their Vue 3 applications to ensure reliability and maintainability.

Testing Vue 3 Applications with Mock Service Worker

Lisi Linhart

Esta charla está diseñada para mostrar a las personas qué es un virtual DOM y para qué se utiliza. Veremos un poco de teoría al respecto y luego construiremos una versión simplificada del VDOM de Vue 3 en el escenario desde cero, paso a paso. ¡Después de la charla, las personas tendrán más familiaridad con la caja negra que a veces es el "VDOM".

Construyendo el VDOM de Vue 3 en el Escenario

Today we will build a virtual DOM, which is a programming interface for HTML and XML documents. The virtual DOM decouples rendering logic from the actual DOM, making it easier to manipulate and inspect. We will create our own virtual DOM by implementing functions to create, mount, unmount, and patch virtual nodes. We will also explore event handling, rendering lists of objects, and unmounting nodes. The virtual DOM in Vue 3 has a flatter hierarchy and may be replaced by direct DOM manipulation for better performance.

This talk is designed to show people what a virtual DOM is, and what it is used for. We'll see a bit the theory of it, then build a simplified version of the Vue 3 VDOM on stage from scratch - step by step! After the talk, people will have more familiarity with the black box that sometimes is "VDOM".

Building the Vue 3 VDOM on Stage

Marc Backes

Las pruebas visuales comparan la apariencia de tu aplicación con un estado anterior. Si se detectan cambios visibles, puedes permitirlos o no. Así que tú o tus probadores tienen los ojos en todas partes, sin necesidad de verificar manualmente repetidamente. He estado utilizando pruebas visuales durante un tiempo, salvándome el pellejo en varias ocasiones. Veamos juntos mi experiencia y exploremos si y cómo las pruebas visuales también pueden ayudar a tus proyectos.

Vamos a lo Visual: Pruebas Visuales en tu Proyecto Vue.JS

This Talk discusses the importance of fixing small UI errors and typos, as they can leave a negative impression and raise questions about trust in applications. Traditional testing methods may not catch all UI errors, so visual testing is introduced as a solution. The Visual Regression Tracker is recommended as a tool for managing visual test results. Best practices for visual testing include ensuring the application is fully loaded, addressing flakiness, and handling false negatives. The key lessons include giving tests eyes, looking beyond the given path, using visual testing, and covering the original with suitable tests if consistent results can't be obtained.

Visual testing compares the appearance of your application with a previous state. If changes become visible, you can allow them or not. So you or your testers have their eyes everywhere - without needing to check manually repeatedly. I've been using visual testing for a while, saving my neck a few times. Let's look at my journey together and explore if and how visual testing can also help your projects.

Let’s Get Visual - Visual Testing in Your Vue.JS Project

Ramona Schwering

Esta charla va a proporcionar recomendaciones para hacer que una aplicación de página única sea accesible. La charla no va a cubrir lo básico de accesibilidad, como agregar texto ALT o usar elementos HTML correctos, pero va a cubrir las principales deficiencias existentes en nuestra SPA.En ningún orden en particular, esta charla va a cubrir los siguientes temas:<ul><li>- Proporcionar una lista de recursos (blog, libro y personas a seguir)</li><li>- Presentar el problema con SPA con un ejemplo en vivo</li><li>- Describir y resolver problemas con el enrutamiento en SPA</li><li>- Describir y resolver problemas con cambios dinámicos en una aplicación Vue</li><li>- Una breve introducción a los elementos HTML correctos (y cómo aprovechar Vue para esto)</li><li>- Describir y solucionar el historial del navegador</li></ul>

Hagamos Nuestra Aplicación de Página Única Accesible

Today's Talk focused on making single-page applications more accessible. It highlighted the importance of web accessibility for all users, including those with disabilities and different circumstances. The Talk discussed common accessibility issues in single-page applications, such as dynamic content loading and page refreshing, and provided solutions to address them. It also demonstrated the implementation of LiveRegion and user answer composable in Vue.js to improve accessibility. Additionally, the Talk emphasized the need to enhance routing, navigation, and component selection for better accessibility. Lastly, it mentioned the use of the View App Setting plugin to check for accessibility issues in development.

This talk is going to provide recommendations to make a single page application accessible. The talk is not going to cover the basic of accessibility, like adding ALT text or using correct HTML elements, but it is going to cover major shortfalls existing in our SPA.In no particular order, this talk is going to cover the following topics:<ul><li>- Provide a list of resources (blog, book and people to follow)</li><li>- Introduce the issue with SPA with a live example</li><li>- Describe and solve issues with Routing issue in SPA</li><li>- Describe and solve issues with dynamic changes in a Vue app</li><li>- A quick intro to correct HTML element (and how to leverage Vue for this)</li><li>- Describe and fix Browser history</li></ul>

Let’s Make Our Single Page Application Accessible

Simone Cuomo

¿Cuál es la mejor manera de estructurar una aplicación Vue.js para que pueda escalar y satisfacer todas las necesidades de tus usuarios? Hay múltiples patrones establecidos por la comunidad de Vue y la comunidad de programación en general que se pueden adoptar para hacer que tus bases de código sean más predecibles, mantenibles y extensibles.

Patrones para Aplicaciones Vue.js a Gran Escala

In this Talk, Daniel Kelly discusses patterns for large-scale Vue.js app development, emphasizing the importance of following standards and using officially recommended tooling. He highlights the Vue.js style guide as a valuable resource for styling standards and suggests using TypeScript and Nuxt 3 to enhance development capabilities. He also mentions the benefits of having a naming convention for routes and the concept of wrapping third-party dependencies for flexibility. Additionally, he mentions the app-icon component for a generic icon solution and the advantages of interacting with backends via an SDK.

What is the best way to structure a Vue.js application so that it can scale to meet all your users' needs? There are multiple patterns established by the Vue community and the programming community at large that can be adopted in order to make your codebases more predictable, maintainable, and extendable.

Patterns for Large Scale Vue.js Applications

Daniel Kelly

En Jumbo Tech Campus tenemos un modelo distribuido cuando se trata de nuestra biblioteca de componentes. La forma en que trabajamos en nuestro código compartido nos ha ayudado a migrar de Vue2 a Vue3 con los esfuerzos combinados de toda la capacidad frontend.

Grandes Migraciones: Actualizando una Biblioteca de Componentes a Gran Escala

This talk explores the migration and upgrading of a Component Library in Vue and Nuxt. It draws inspiration from nature's great migrations and emphasizes the need for collaboration and compatibility. The talk discusses the team setup, including microservices and standardized modules. It highlights the migration from Vuex to Pina or Apollo Clients in micro frontends. The distributed approach to maintaining the component library is emphasized, as well as the use of Vue Demi for upgrading to Vue 3. The talk emphasizes the importance of delivering value and supporting both Vue 2 and Vue 3 in the migration process.

At Jumbo Tech Campus we have a distributed model when it comes to our component library. The way we work on our shared codebase has helped is in migrating from Vue2 to Vue3 with the combined efforts of the entire frontend capacity.

Great Migrations: Upgrading a Component Library at Scale

Joran Quinten

Vue 3 es increíble, pero muchos de nosotros todavía estamos atrapados en un monolito de Vue 2. Algunos de nosotros estamos aún más atrapados debido a las elecciones tecnológicas realizadas antes de que Vue 3 estuviera siquiera en el roadmap. Vamos a describir el proceso de migración de un proyecto grande a Vue 3 y Vite. Técnicas que podemos emplear para obtener algunos beneficios antes, procesos que podemos aplicar para hacer las cosas más rápidamente. Cosas que podemos hacer para lograrlo eventualmente.

Migrando una aplicación de 1000 componentes de clase a Vue 3

The Talk discusses the migration of a large frontend view application from Vue 2 to Vue 3. The strategy involves converting components to the Composition API, switching from Vuex to Pinea, and overcoming challenges with Vite configuration. The migration process includes selecting components based on the product roadmap, improving type safety, and reducing boilerplate. The results of the migration include improved type checking, faster tests, and a safer codebase.

Vue 3 is amazing, but a lot of us are still stuck on a Vue 2 monolith. Some of us are stuck even more due to technology choices made before Vue 3 was even on the roadmap. Let's outline the process of migrating a large project to Vue 3 and Vite. Techniques we can employ to get some benefits sooner, process we can apply to get things done more quickly. Things we can do to get it done eventually.

Migrating a 1000 Class Components App to Vue 3

Nikola Begedin

Esta charla cubrirá los beneficios de utilizar el prefetching para mejorar el rendimiento de las aplicaciones Vue.js. Los asistentes aprenderán sobre diferentes estrategias de prefetching y las mejores prácticas para optimizar el prefetching en diferentes condiciones de red.

Estrategias de Prefetch para Mejorar el Rendimiento de tu Aplicación Vue.JS

Welcome to my Vue.js talk on prefetching strategies and boosting app performance. A crucial part of web performance is optimizing for the network. Caching and resource hints, such as DNS prefetch, preconnect, preload, and module preload, can improve website performance. Prefetching non-critical sources and using different strategies can enhance user experience. Libraries like unhead and get.js offer customization and predictive prefetching based on Google Analytics data.

This talk will cover the benefits of using prefetching to improve the performance of Vue.js applications. Attendees will learn about different prefetching strategies and best practices for optimising prefetching for different network conditions.

Prefetch Strategies to Boost the Performance of Your Vue.JS App

Aleksandar Gekov

Existen dos enfoques para agregar un estado reactivo a los componentes de Vue utilizando la API de Composición. Como resultado, debes elegir si utilizar reactive(), ref(), o ambos. Te guiaré para tomar la mejor decisión.

Ref() vs. Reactive(): ¿Qué elegir usando la API de Composición de Vue 3?

This talk compares Rev and Reactive in Vue 3, exploring reactivity and their limitations. It discusses the use of watchers, identity issues, and migration strategies. The talk also highlights the benefits of using the Ref function for better reactivity and the recommended pattern of grouping Refs. Opinions from the Vue community are shared, with a majority preferring Ref over Reactive.

There are two approaches to add a reactive state to Vue components using the Composition API. As a result, you must choose whether to utilize reactive(), ref(), or both. I'll guide you in making the best decision.

Ref() vs. Reactive(): What to Choose Using Vue 3 Composition API?

Michael Hoffmann

Auth0 y Vue: Una Combinación Perfecta para el Desarrollo de Aplicaciones Seguras

Hello Vue.js live. My name is Tyler Clark and today I'm giving a talk titled, Vue.js – Building secure applications. I'll be discussing the biggest app threats today, including brute force attacks, credential stuffing, and phishing. I'll also present solutions like WebAuthn for passwordless authentication using biometrics. As you can see here, use the credentials.create function to get a challenge from a server request. Then, pass the necessary information about the user and the acceptable public key types to the server. WebAuthn eliminates password-based flows, creating a secure private and public key pair.

Auth0 and Vue: A Match Made in Heaven for Secure App Development

Tyler Clark

Aprende cómo crear una biblioteca de Vue.js y qué mejores prácticas debes seguir. También aprenderemos sobre el código abierto y cómo trabajan los mantenedores. Hablaremos sobre xState, la API de composición y estrategias de prueba que incluyen Cypress y Vue test utils!

Creando mi primera biblioteca de código abierto Vue 3

Let's talk about Vue 3 and creating your first open source library. We'll discuss design choices, a personal example of creating a Vue 3 open source library, community and open source, lessons learned, and key takeaways for creating an open source project. We'll also cover building a Vue 3 library, the Authenticator project and its requirements, code sharing and best practices, using Xstate for state management, Vue 3 best practices, testing strategies, open sourcing and community feedback, documentation driven development, challenges and improvements, and the roadmap for the future.

Learn about how to create a Vue.js library, and what best practices you should follow. We'll also learn about open source, and how maintainers work. We'll touch on xState, the composition API and testing strategies including Cypess and Vue test utils!

Creating My First Open Source Vue 3 Library

Erik Hanchett

¿Estás perdiendo la cabeza intentando convertir tu tienda Vuex a Pinia? Aquí tienes una guía paso a paso sobre cómo migrar las definiciones de tienda y las pruebas, de manera fácil y sin sufrimiento.

De Vuex a Pinia. Cómo migrar una aplicación existente

Pinia is the officially recognized state management library for Vue.js, with a simpler API than VueX and TypeScript support. Migrating to Pinia involves creating a root store, defining stores, and using store2refs or the exported use store in components. Testing real store behavior requires creating a Pinia instance, while component testing involves importing useStore and using mapState and mapAction from vigname. Migrating tests involves creating a local view and using the Pinia plugin, and Vuex and Pinia can coexist but should be migrated module by module. Store persistence can be achieved through subscribing to store changes or using a watcher.

Are you losing your mind trying to convert your Vuex store to Pinia? Here is a walkthrough on how to migrate store definitions and tests, easily and without suffering.

Vuex to Pinia. How to Migrate an Existing App

Denny Biasiolli

Con la nueva y mejorada biblioteca de gestión de estado de Vue, Pinia, obtenemos una herramienta mucho más modular. Siendo más flexible, más ligera y sin las Mutaciones de Vuex, Pinia nos presenta más oportunidades para ser creativos, para bien o para mal, con la arquitectura de nuestra aplicación y cómo se lleva a cabo y se organiza la gestión del estado dentro de ella.Esta charla explora algunas mejores prácticas aprobadas por @posva y patrones de diseño arquitectónico a considerar cuando se utiliza Pinia en producción.

Patrones Probados de Pinia

Pinnia is a lighter, more modular state management solution for Vue apps, offering consistent patterns, TypeScript support, and an intuitive developer experience. PINIA encourages splitting state into manageable domains, improving code splitting, type inferences, team collaboration, and debugging clarity. Pinia provides flexibility in accessing and mutating state, with different approaches for option and setup stores. It also offers features like patch, reset, and onAction methods. Vue Mastery offers comprehensive Pinnia courses and resources for fast learning.

With Vue's new-and-improved state management library, Pinia, we gain a much more modular tool. While being more flexible, leaner, and lacking the Mutations of Vuex, Pinia presents us with more opportunities to be creative, for better or worse, with our app architecture and how state management is conducted and organized within it.This talk explores some @posva-approved best practices and architectural design patterns to consider when using Pinia in production.

Proven Pinia Patterns

Adam Jahr

Los formularios web son el tejido conectivo de Internet. Sin ellos, las personas no pueden solicitar sus registros de salud, solicitar la universidad, pedir pad thai o reservar un boleto de avión. Sin embargo, con demasiada frecuencia, las herramientas que usamos para construir esos formularios son una mezcla de bibliotecas y soluciones caseras que pueden resultar en una experiencia de usuario deficiente, poca accesibilidad y baja mantenibilidad.En esta charla, presentaremos FormKit, un marco de construcción de formularios, y exploraremos cómo esta herramienta puede capacitar a los desarrolladores de Vue para escribir formularios consistentes, accesibles e incluso encantadores sin pasar una vida construyéndolos.Contenido de la charla:<ul><li>- El problema con los formularios, por qué son difíciles</li><li>- Introducción a FormKit</li><li>- Biblioteca de entrada</li><li>- Validación</li><li>- Accesibilidad</li><li>- Arquitectura de formularios</li><li>- Generación de formularios a partir de JSON</li><li>- Próximos pasos y declaraciones de cierre</li></ul>

Dominando los Formularios en Vue

Today's Talk focused on building forms in Vue using FormKit. The speaker highlighted the simplicity of forms in Vue and the importance of adding buttons, labels, and help text for a better user experience. They also discussed handling form data and errors, refactoring form components, and implementing inline validation. The introduction to FormKit showcased its features such as a single component approach, automatic data collection, and simplified form building. The talk also covered applying validation and form generation using the FormKit schema, which allows for easy form representation and rendering.

Web forms are the connective tissue of the internet. Without them, people cannot request their health records, apply for university, order pad thai, or book a plane ticket. Yet too often, the tools we use to build those forms are a grab bag of libraries and DIY solutions that can result in a subpar user experience, poor accessibility, and low maintainability.In this talk, we will introduce FormKit — a form-building framework — and explore how this tool can empower Vue developers to write consistent, accessible, even delightful forms without spending a lifetime building them.Talk table of contents:<ul><li>- The problem with forms, why they’re hard</li><li>- Introduction to FormKit</li><li>- Input library</li><li>- Validation</li><li>- Accessibility</li><li>- Form architecture</li><li>- Generating forms from JSON</li><li>- Next steps and closing statements</li></ul>

Conquering Forms in Vue

Justin Schroeder

Introducción al Diseño Dirigido por Dominio<ul><li>- ¿Qué es DDD?</li><li>- Principios clave de DDD</li><li>- Beneficios de usar DDD en el desarrollo de aplicaciones web</li></ul>Modelado de Dominio en Aplicaciones Vue 3<ul><li>- Cómo diseñar e implementar modelos de dominio en Vue 3</li><li>- Estrategias para integrar la lógica de dominio con el modelo de datos reactivo de Vue y la arquitectura basada en componentes</li></ul>Mejores Prácticas para Implementar DDD en Vue 3<ul><li>- Estrategias para organizar el código de una manera que siga los principios de DDD</li><li>- Técnicas para reducir el acoplamiento entre la lógica de dominio y la lógica de la aplicación</li><li>- Consejos para probar y depurar la lógica de dominio en las aplicaciones Vue 3</li></ul>

Diseño Dirigido por Dominio con Aplicaciones Vue

Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.

Introduction to Domain Driven Design<ul><li>- What is DDD?</li><li>- Key principles of DDD</li><li>- Benefits of using DDD in web application development</li></ul>Domain Modeling in Vue 3 Applications<ul><li>- How to design and implement domain models in Vue 3</li><li>- Strategies for integrating domain logic with Vue's reactive data model and component-based architecture</li></ul>Best Practices for Implementing DDD in Vue 3<ul><li>- Strategies for organizing code in a way that follows DDD principles</li><li>- Techniques for reducing coupling between domain and application logic</li><li>- Tips for testing and debugging domain logic in Vue 3 applications</li></ul>

Domain Driven Design with Vue Applications

Abdulrasaq Mustapha

- 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

TresJS crea experiencias 3D de forma declarativa con componentes Vue

The Workshop on Trace.js covers various aspects of creating 3D scenes using Vue components. It includes exercises on setting up the environment, using cameras and adding objects, animating objects, applying textures and materials, using lights and handling events, and loading and rendering 3D models. The workshop also discusses future plans for the NOX module and the Tres.js ecosystem. Participants can learn about creating realistic scenes, manipulating objects, and enhancing the visual appearance of their 3D scenes.

- 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

TresJS create 3D experiences declaratively with Vue Components

Following the expansion of the Vue ecosystem, Vue.js Live Conference has grown from a local Meetup to an international conf. The event will welcome more 5k Vue folks remotely from anywhere in the world. Every participant around the world can access online workshops, fun & networking with stellar Vue people.

Vue.js Live Conference

I'm attending Vue.js Live 2024 – get your free remote ticket and join me there with 5k other Vue.js engineers and 15+ great speakers.

Vue.js London 2023

FocusReactive

Storyblok

Stackhawk

HeroDevs

Sentry

Pitchup.com

Storyblok is a CMS that works with all modern frameworks and platforms so you are completely free to choose the best option for your project. Kickstart a new CMS project with your favorite technology in a matter of minutes, and for free.

Storyblok is a Headless CMS that works with all modern frameworks and platforms so you are completely free to choose the best option for your project. Get started in a matter of minutes!

Vue.js London 2023

Code / Create / Communicate