Name: Vue.js London Live 2021
Start: 2021-10-20T13:00:00.000Z
End: 2021-10-21T19:00:00.000Z

Sophie Kolbe

Lera

Debbie O'Brien

Varun

Károly Török

Dimitris Kiriakakis

David Pugh

Myron Davis

Denis Radin

Rahul Rana

Richard Teeuwen

Damir Petecin

Alejandro Arevalo

Denis

mickael

Robert

Evisa

Ed Soltani

Olga Kosmylina

Abelant Zahiri

David Carmona Maroto

Pyriand3r

Matthew Hausman

Tim Medcalf

Merle Fischer

Steve Doggett

Adam Khan

Jonathan

Sriramajeyam Sugumaran

Andres Pineda

Panos Dimitriadis

Leonel Oliveira

Cuando pensamos en Vuex, Pinia, o tiendas en general, a menudo pensamos en la gestión de estado y los patrones Flux, pero no solo las tiendas no siempre siguen el patrón Flux, ¡hay mucho más en las tiendas que las hace valer la pena usar! Plugins, Devtools, renderizado en el lado del servidor, integraciones TypeScript... Vamos a sumergirnos en todo más allá de la gestión de estado con Pinia con ejemplos prácticos sobre plugins y Devtools para sacar el máximo provecho de tus tiendas.

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia

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.

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.

Everything Beyond State Management in Stores with Pinia

Eduardo San Martin Morote

Explica sobre la refactorización del código base de NuxtJS y los desafíos que enfrenta para implementar Vue 3, Vite y otros paquetes.

Bienvenido a Nuxt 3

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.

Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.

Welcome to Nuxt 3

Alexandre Chopin

Vue 3 puede sonar aún nuevo para muchos usuarios, pero en realidad ya ha sido lanzado hace más de un año. ¿Cómo evolucionó Vue 3 durante este período? ¿Por qué tardó tanto en ponerse al día el ecosistema? ¿Qué aprendimos de este proceso? ¿Qué viene después? ¡Discutiremos estas preguntas en esta charla! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Un Año en Vue 3

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.

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! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

One Year Into Vue 3

Evan You

Rust es un nuevo lenguaje para escribir código de alto rendimiento, que puede ser compilado a WebAssembly, y ejecutado dentro del navegador. En esta charla se te guiará sobre cómo puedes integrar Rust, dentro de una aplicación Vue, de una manera que es sencilla y fácil. Con ejemplos de cómo interactuar con Rust desde JavaScript, y algunas de las trampas a tener en cuenta.

Utilizando Rust desde Vue con WebAssembly

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.

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.

Utilising Rust from Vue with WebAssembly

Joe Lenton

¿Cuántas veces has implementado el mismo flujo en tu aplicación: verificar si los datos ya se han obtenido del servidor, si es así - renderizar los datos, si no - obtener estos datos y luego renderizarlos? Creo que lo he hecho más de diez veces yo mismo y he visto la pregunta sobre este flujo más de cincuenta veces. Desafortunadamente, nuestra biblioteca de gestión de estado predeterminada, Vuex, no proporciona ninguna solución para esto.Para la aplicación basada en GraphQL, había una alternativa para usar el cliente Apollo que proporcionaba herramientas para trabajar con la caché. Pero, ¿qué pasa si usas REST? Afortunadamente, ahora tenemos una alternativa de Vue a una biblioteca de react-query que proporciona una buena solución para trabajar con la caché del servidor. En esta charla, explicaré la distinción entre el estado de la aplicación local y la caché del servidor local y haré algo de codificación en vivo para mostrar cómo trabajar con este último. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Estado Local y Caché del Servidor: Encontrando un Equilibrio

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.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Local State and Server Cache: Finding a Balance

Natalia Tepluhina

Con la introducción de Composition API en el ecosistema Vue, muchos tienen curiosidad por saber qué deberían elegir. ¿Options API? ¿Composition API? ¿Cuál es la mejor? ¿Cuáles son los compromisos? En esta charla, examinaremos los dos enfoques para que puedas tomar la decisión correcta para tu aplicación.

Options API vs Composition API: Elegir el enfoque correcto para tu equipo

Today's Talk discusses the Options API and Composition API in Vue 3, highlighting the differences and considerations when choosing an approach. The Composition API offers more flexibility and integrates well with TypeScript, but may require more familiarity with JavaScript. Combining both APIs allows for structure and flexibility, with the ability to progressively enhance code. Team preferences and the level of TypeScript usage should be considered when choosing the right approach for a project.

With the introduction of Composition API into the Vue ecosystem, many are curious as to what they should pick. Options API? Composition API? Which is best? What are the tradeoffs? In this talk, we'll examine the two approaches so that you can make the right decision for your app.

Options API vs Composition API: Choosing the Right Approach for Your Team

Ben Hong

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

Vuetify 3: Titan

Hi, I'm John Leader, the creator of Viewtify. Viewtify 3 is the upcoming version with new design concepts, improved usability, and compatibility with modern browsers. The framework has added new features like a validation system, style diversity, semantic customization options, and a density concept. Enhanced customization options, improved performance, and advanced browser support with CSS variables are also highlights of Viewtify 3.

Learn about the newest features coming to the next version of the framework. See how the core team approached porting Vuetify from Vue 2 to the Vue 3 composition api. Preview updates to core features such as the new layout system, improved testing methodologies, expanded customization options, updates to css utility classes, and much much more.

John Leider

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt

We will create a Nox app using the Noxie CLI and adjust the resolution of our Zoom screens. Nuxt 3 has a new project structure and setup, with the app.vue file as the entry point. NitroMagic handles API routes and provides runtime config. Nitro has a storage abstraction layer and supports different drivers like Redis. The Nitro server is built in a two-step process and optimized for serverless and edge rendering.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Using Nitro – Building an App with the Latest Nuxt Rendering Engine

Daniel Roe

La Reactividad de Vue 3 y la API de Composición ofrecen a los desarrolladores técnicas flexibles para trabajar con datos reactivos. Permiten un nuevo y moderno enfoque para manejar la Gestión de Estado. Los desarrolladores ahora pueden implementar tiendas locales y globales sin esfuerzo. Vuex ha sido uno de los plugins de primera parte más utilizados para Vue 2. Echemos un vistazo a las ventajas y desventajas de usar Composables en lugar de Vuex. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Gestión de Estado Moderna con Vue 3

Vanessa introduces Vue Free and discusses the benefits of using the Composition API. The order of execution and grouping logical units using the Composition API is explained. The Composition API is used for state management and refactoring components. The speaker shares their initial experience with state management using Vuex. Composables are explored as an alternative for state management in Vue 3.

The Vue 3 Reactivity and Composition API offers developers flexible techniques to work with reactive data. They enable a new and modern approach to handling State Management. Developers can now effortlessly implement local and global stores. Vuex has been one of the most used First-party plugins for Vue 2. Let's have a look at the advantages and tradeoffs of using Composables instead of Vuex. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Modern State Management with Vue 3

Vanessa Otto

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 <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue3: Desarrollo Moderno de Aplicaciones Frontend

The Workshop focused on Vue 3 features, specifically the Composition API. Vue 3 introduced significant improvements and the composition API allows for modularity and improved TypeScript support. The adoption of the composition API in Vue 3 is growing, especially in larger projects. The Vue Composition API can be used with core libraries like Vuex and Vue Router, and the library VueUse provides hooks and behaviors for enhancing Vue components. The workshop showcased how to use the composition API with Vue CLI, store data, extract logic, work with props, emit events, and implement search functionality.

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 <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue3: Modern Frontend App Development

Mikhail Kuznetsov

¿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 en la comunidad Vue y en 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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Patrones para Aplicaciones Vue.js a Gran Escala

Standards are crucial for achieving predictability and maintainability in a code base. The Vue.js community provides several sources of standards, including the Vue.js Style Guide and official libraries. Personal and team-wide standards can complement community-wide ones. Alternative component structures, like an almost flat structure, can work well for large apps. Adopting a standardized route naming convention can make routes more predictable. Miscellaneous tips include wrapping third-party libraries, creating SDKs for APIs, and auto-registering components globally. Thorough testing is important, and Vue School offers various services and courses for becoming an expert in Vue.js.

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 the Vue community and the programming community at large that can be adopted in order to make your codebases more predictable, maintainable, and extendable. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Patterns for Large Scale Vue.js Applications

Daniel Kelly

Los formularios en la web siempre han estado con nosotros, sin embargo, todavía parece que siempre tienes que luchar con ellos para que la validación funcione como planeaste, e incluso con las mejoras significativas que nos brindan las bibliotecas y frameworks modernos, el mantenimiento es en su mayoría un problema.Vest es una nueva generación de framework de validaciones de formularios. Toma su sintaxis y estilo de frameworks de Unit Testing como mocha o Jest (de ahí el nombre), lo que trae la elegancia y naturaleza declarativa de estos frameworks al mundo de la validación de formularios, reduciendo en gran medida la sobrecarga que conlleva escribir, mantener y reutilizar validaciones en tus aplicaciones JS. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue Form Validations con Vest

VEST is a form validation framework inspired by unit testing libraries. It provides a structured approach to form validation, making maintenance and reuse easier. VEST supports multiple validations per field, warning validations, interdependent field validation, async validations, and memoization. It is lightweight and can be integrated with various frameworks and libraries. The speaker is open to collaboration and contributions for adding a reactive interface using VUE's reactivity model.

Forms on the web have always been with us, yet it still feels like you always have to fight them to make validation work as you planned - and even with the significant improvements modern day libraries and frameworks give us, maintenance is mostly a hassle.Vest is a new breed of form validations framework. It draws its syntax and style from Unit Testing frameworks like mocha or Jest (hence the name), which brings the elegance and declarative nature of these frameworks to the world of form validation, greatly reducing the overhead it takes to write, maintain and reuse validations in your JS apps. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue Form Validations with Vest

Evyatar Alush

Migrar a Vue 3 puede ser una tarea importante (dependiendo del tamaño de tu proyecto). En Crisp, recientemente migramos nuestra aplicación (250K líneas de código) de Vue 2.6 a Vue 3.2 en aproximadamente 2 semanas.En esta charla, compartiremos nuestros aprendizajes para que puedas beneficiarte de nuestra experiencia.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cómo migrar sin problemas una gran base de código a Vue 3

Hello, I am Baptiste from CRISP, and in this conference I'm going to show you how to migrate a large project from View 2 to View 3. Vue 3 migration is a simple process with many improvements, such as better performance and modularity. The migration strategy involves maintaining the existing Vue 2 app while gradually moving to Vue 3. Updating core libraries and replacing Vue 2 APIs with Vue 3 APIs are necessary steps. The impact of Vue 3's new reactivity system has optimized the codebase at CRISP, and the company is hiring full-stack developers and supporting the Vue.js Foundation.

Migrating to Vue 3 can be an important task (depending on your project's size). At Crisp, we recently migrated our app (250K lines of code) from Vue 2.6 to Vue 3.2 in about 2 weeks.In this talk, we will share our learnings so you can benefit from our experience.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Seamlessly Migrate a Large Codebase to Vue 3

Baptiste Jamin

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Construyendo formularios Vue con VeeValidate

This workshop focuses on building forms with VValidate, a popular Vue.js form validation library. The workshop covers the basics of VValidate, including field validation, form validation, and form submission. It also explores advanced topics such as using the composition API for form validation, handling field arrays, and using VValidate inspector and V-Validated VTools for debugging. The workshop emphasizes the flexibility and ease of use of VValidate, as well as its integration with other Vue.js libraries and UI frameworks.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Vue forms with VeeValidate

Abdelrahman Awad

Breve introducción a las nuevas características de Vue 3 y Vite, luego enfocarse en cómo esas características / mentalidad afectan la forma en que pensamos en las herramientas y la experiencia del desarrollador. Lo cual nos lleva a mi proyecto Vitesse y varios unplugins que mejoran aún más la experiencia del desarrollador de Vue (haré algunas demostraciones cortas en el medio). Finalmente, presentar las formas de utilizar esas nuevas características en las aplicaciones existentes de Vue 2 hoy y facilitar las migraciones. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Nuevas formas de Vue

The Talk discussed new ways of using Vue, including the introduction of the composition API and the script setup syntax. The Vite tooling was highlighted for its performance improvements and developer experience enhancements. Components auto-importing through Vite plugin components was introduced as a way to improve code splitting and eliminate manual registration. The use of Vite plugins, Unplugin, and Vue 2 support were also discussed. The Talk mentioned that Nuxt 3 will include many of these features.

Brief intro to the new features of Vue 3 and Vite, then focus on how those features / mindset affect the way we think of tooling and DX. Which leads to my Vitesse project and several unplugins that enhance the Vue developer experience even further (will do some short demos in between). Finally, introduce the ways to use those new features in the existing Vue 2 apps today and make the migrations easier. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

New Ways to Vue

Anthony Fu

Crear una tienda en línea en estos días no es una tarea fácil. Con tantos competidores, el Tiempo de Lanzamiento al Mercado es la clave del éxito. Es por eso que decidimos construir una integración entre Vue Storefront, una plataforma de frontend ultrarrápida para el comercio sin cabeza, y Vendure, un marco de comercio electrónico moderno y sin cabeza basado en GraphQL. Ambas herramientas están construidas utilizando una pila de JavaScript moderna (Nuxt.js y Nest.js) y tienen varias integraciones listas para usar, como motores de búsqueda, CMS, pagos, y más. Además, ambos proyectos tienen una gran comunidad de colaboradores de código abierto que respaldan el proceso de desarrollo. En esta presentación, te mostraré lo rápido que puedes crear tu tienda con VSF y Vendure. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue Storefront + Vendure = Comercio Electrónico de Código Abierto de Pila Completa

This Talk discusses the full stack open-source e-commerce using ViewStorefront and Venge. ViewStorefront is a lightning-fast frontend platform for headless commerce, while Venge is a framework for the back-end. Both tools are highly customizable and built using modern frameworks. Creating an online store with Venge is quick and easy. Overall, this Talk presents a dream stack for open-source e-commerce and encourages contributions to the projects.

Building an online store these days is not an easy task. With so many competitors Time to Market is the key to success. That's why we decided to build an integration between Vue Storefront- Lightning-Fast Frontend Platform for Headless Commerce, and Vendure - modern, headless GraphQL-based e-commerce framework. Both tools are built using modern JavaScript stack (Nuxt.js and Nest.js) and have several out of the box integrations like search engines, CMS's, payments, and so on. Also, both projects have a huge community of Open Source contributors who support the development process. In this presentation, I will show you how fast you can create your store with VSF and Vendure. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue Storefront + Vendure = Fullstack Open Source Ecommerce

Jakub Andrzejewski

Optimizando la experiencia del desarrollador con Nuxt 3: un recorrido por las formas en que la nueva versión de Nuxt ahorrará tiempo y facilitará tu vida. Exploraremos el nuevo isomorphic fetch con nitro, nos sumergiremos en el enrutamiento dinámico más potente de Nuxt 3 y, en el camino, conoceremos una serie de otras características que te darán superpoderes. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Optimizando la experiencia del desarrollador con Nuxt 3

This Talk discusses optimizing developer experience with Nuxt 3. It highlights improvements in documentation, auto importing libraries, server developer experience, and deployment. Nuxt 3 introduces a unified solution for schema, documentation, and defaults, as well as auto imports for easy component access. It also introduces a faster server framework called H3 and allows for efficient network requests with isomorphic fetch. Deployment is simplified with a single entry point and support for various platforms. The goal is to make Nuxt 3 amazing and backport features to Nuxt 2 apps.

Optimising developer experience with Nuxt 3 - a tour through the ways the new version of Nuxt will save time and make your life easier. We'll explore the new nitro-powered isomorphic fetch, dive into Nuxt 3's more powerful dynamic routing, and along the way tour a host of other features that will give you superpowers. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Optimising Developer Experience with Nuxt 3

Hay mucho que ganar al agregar animaciones a tu sitio o aplicación. Más allá de su atractivo visual, puedes guiar la atención del usuario, cubrir componentes y elementos lentos de carga, y revelar secciones de una página sin que el usuario se pregunte de dónde provienen. Esta charla cubrirá las formas incorporadas en Vue.js que te ayudan a animar tu sitio, y cómo, para animaciones más complicadas, puedes utilizar bibliotecas de terceros. También se abordarán los conceptos básicos de la animación en sí: qué animar y qué no animar, y cómo puedes utilizar las animaciones para mejorar tu sitio web sin perjudicar la experiencia de las personas con discapacidades. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Animación y Vue.js

Today's Talk covers animation in Vue JS apps, including CSS animations, JavaScript animations using the GSAP library, and handling multiple elements with transition groups. The Talk also discusses different kinds of movements, state transitions, and animating numbers and SVGs. Overall, it provides a comprehensive overview of animation techniques and tools for enhancing Vue JS apps.

There's a lot to gain from adding animations to your site or app. Beyond their visual appeal, you can guide the user's attention, cover up slow to load components and elements, and reveal sections of a page without the user wondering where it came from. This talk will cover the built-in ways Vue.js helps you animate your site, and how for more complicated animations you can hook into third party libraries. It'll also cover the basics of animation itself – what to animate, what not to animate – and how you can use animations to enhance your website without harming the experience of people with disabilities. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Animation and Vue.js

Callum Macrae

Los componentes de UI se construyen en base a flujos de usuario o gráficos de estado. Para gestionar estos estados, normalmente recurrimos a un sistema de variables booleanas como isLoading. Pero esto resulta ser propenso a errores y difícil de mantener a medida que el código crece. Existe una mejor solución. En mi charla, exploraremos cómo podemos tener un control total sobre los estados de nuestra aplicación y desarrollar un sistema de UI más adaptable al comportamiento de los usuarios, manteniendo al mismo tiempo la escalabilidad del código con máquinas de estado, en tiempo real.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vuex? No, es X(state)Vue para UI

This Talk introduces state management in Vue, focusing on the Xstate library for managing state machines in UI components. The bottom-up approach in component development can lead to complexity and challenges over time. Xstate is a JavaScript and TypeScript library designed specifically for managing state machines and state charts for UI components. The Talk provides examples of creating a toggle component using Xstate and emphasizes the advantages of using Xstate, such as code reuse, precise testing, and easy maintenance. The speaker encourages developers to plan ahead and consider state, component, and feature design to write better code.

UI components are built on user flows or state graphs. To manage these states, we usually resolved to boolean variables system like isLoading. But this proves to be buggy and hard to maintain as the codebase grows. There is a better solution. In my talk, we will explore how we can fully control our app's states and develop a more adaptive UI system to users' behavior while keeping the codebase scalable with state machines, in real time. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vuex? No, it’s X(state)Vue for UI

Maya Shavin

El ecosistema frontend avanza a un ritmo frenético. Este masterclass tiene como objetivo equipar a los participantes con una comprensión del estado del ecosistema Vue 3 + GraphQL, explorando ese ecosistema - prácticamente y a través del desarrollo de aplicaciones de pila completa. Tabla de contenidos - Los participantes utilizarán Hasura para construir una API GraphQL en tiempo real respaldada por Postgres. Juntos recorreremos su consumo desde un frontend y haremos que el frontend sea reactivo, suscrito a los cambios de datos. - Además, analizaremos las herramientas comúnmente utilizadas en el stack Vue GraphQL (como Apollo Client y Urql), discutiremos algunas alternativas menos conocidas y abordaremos los problemas frecuentemente encontrados al comenzar. - Se describirán varios patrones para gestionar datos con estado y sus compensaciones durante el masterclass, y se mostrará una implementación básica para cada patrón discutido. Nivel del masterclass NOTA: No se requiere experiencia previa con GraphQL, pero puede ser útil para ayudar a la comprensión. Se cubrirán los fundamentos. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3

GraphQL is a powerful tool for building APIs, offering flexibility in data retrieval and real-time functionality. It simplifies API documentation and enhances development with type checking and code generation. Hasura is a popular GraphQL engine that supports subscriptions, permissions, and database integrations. The Workshop covers topics such as setting up GraphQL APIs, handling permissions and security, integrating authentication, and using GraphQL with Vue.js. It also discusses various libraries and tools for working with GraphQL APIs and state management.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building full-stack GraphQL applications with Hasura and Vue 3

Gavin Ray

Sumérgete en la arquitectura de nuestra tienda masiva de Vuex. Esta solución siempre será fácil de escalar, leer y mantener, sin importar cuán grande sea tu aplicación. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Estructurando una Tienda Masiva de Vuex

The Talk discusses the process of structuring a massive UX store using modules in Vue.js. It covers topics such as namespaces, triggering mutations, and improving store usage with map mutations. The importance of refactoring the folder structure and using separate files for actions, getters, and mutations is highlighted. The Talk concludes by mentioning the possibility of adding additional layers for splitting mutations and providing contact information for further inquiries.

Dive deeply into the architecture of our massive Vuex store. This solution will always be easy to scale, read, and maintain no matter how huge your app is. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Structuring A Massive Vuex Store

Domagoj Vidovic

En esta charla aprenderás qué es Vite, por qué es tan genial y por qué quieres usarlo lo antes posible. También aprenderás cómo usar Vite con Vue.js o React, y qué es Vitepress y cómo usarlo.Alex Kyriakidis, fundador de Vue School, también responderá las preguntas más frecuentes sobre Vite, incluyendo su uso en producción, Vite y los runners de prueba, qué significa para Nuxt y muchas más. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cómo Vite cambia el juego para los desarrolladores de Vue y web

Vue School offers free training material, workshops, and consulting services. Vite is a game-changer for Vue and web development, significantly improving the development experience. It leverages the browser's native ES modules feature and uses ESBuild. Vite's dev server is much faster than other bundlers. Vite provides a blazing fast development environment for various frameworks and supports server-side rendering and static site generation. Vite is ready for production and likely to be used by Vue CLI in the future.

In this talk you will learn what Vite is, why it is so great, and why you want to use it ASAP. You will also learn how to use Vite with Vue.js or React, and what Vitepress is and how to use it.Alex Kyriakidis, founder of Vue School, will also answer the most frequently asked questions around Vite, including production use, Vite and test runners, what it means for Nuxt, and many more. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How Vite Changes the Game for Vue and Web Developers

Alex Kyriakidis

Los formularios pueden ser difíciles en el frontend. Ya sean simples o complejos, comparten puntos problemáticos comunes como el seguimiento de valores, las interacciones del usuario, la validación y el envío. Veremos cómo vee-validate te ayuda a abordar esos problemas y cómo aplicar mejoras progresivas a tus formularios y componentes de entrada.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Validación Progresiva de Formularios en Vue.js

vValidate is a popular Vue.js form validation library that solves major pain points in form building. It offers a progressive API and follows a composition first design approach. vValidate allows you to validate inputs by declaring rules on each field and supports Laravel's validation rules, JavaScript functions, and third-party libraries. It also supports validation schemas for the entire form. The diff tools plugin in vValidate provides an inspector for form validity, current values, and errors.

Forms can be hard in frontend. Whether your forms are simple or complex, they share common pain points like value tracking, user interactions, validation, and submission. We will look at how vee-validate helps you address those issues, and how to apply progressive enhancements to your forms and input components. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Progressive Form Validation in Vue.js

La mayoría de las personas en nuestra industria saben qué es Lighthouse o Page Speed Insights y los utilizan regularmente. Desafortunadamente, la mayoría de ellos no tienen idea de cómo funcionan, lo que lleva a terribles conceptos erróneos y malentendidos, especialmente para los propietarios de negocios no técnicos. En esta charla, quiero ayudar a todos a aprovechar mejor estas herramientas explicando cómo funcionan, cuál es su objetivo y cómo interpretar los datos para llegar a las conclusiones correctas. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cómo Medir el Rendimiento de manera Efectiva?

This Talk discusses the evolution of performance measurement tooling and the importance of performance in web development. It introduces Google Lighthouse as a tool that provides detailed information on webpage performance. The Talk emphasizes the significance of Core Web Vitals, including Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. It suggests hosting the Lighthouse environment locally and using Lighthouse CI for continuous performance measurement. The Talk also highlights the impact of Core Web Vitals on SEO and the importance of prioritizing field data over lab data.

Most of the people in our industry know what Lighthouse or Page Speed Insights are and use them regularly. Unfortunately, most of them have no idea how they work which leads to terrible misconceptions and misunderstandings, especially for non-tech business owners. In this talk, I want to help everyone make better use of these tools explaining how they work, what's their goal, and how to interpret the data to come to the right conclusions. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Measure Performance Effectively?

Filip Rakowski

La web es una plataforma en constante cambio y lo mismo ocurre con los sitios web que creamos. Con nuevas tecnologías y posibilidades surgen nuevos desafíos tanto para los desarrolladores como para los SEOs. En esta sesión, hablaremos sobre cómo los desarrolladores y los SEOs pueden trabajar en equipo y resolver desafíos juntos. Analizaremos algunos escenarios en los que esta colaboración puede llevar al éxito de un proyecto.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

SEO Técnico y JavaScript

Technical SEO is important for making content visible to search engines. Developers have a significant impact on the crawling and indexing process. Hash-based routing can lead to duplicate content issues, and it is recommended to use the History API instead. In 2019, 12% of websites still used fragmented URLs.

The web is an ever-changing platform and so are the websites we create. With new technologies and possibilities come new challenges for both developers and SEOs. In this session, we will talk about how developers and SEOs can become a team and solve challenges together. We will look into a few scenarios where this collaboration can bring success to a project. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Technical SEO & JavaScript

Martin Splitt

Los frameworks de frontend como Vue son vulnerables a entradas no sanitizadas para ejecutar código malicioso. Los patrones que permiten esto se entienden en general, pero aún hay casos en los que tus aplicaciones podrían estar en riesgo. Aprende cómo puedes implementar seguridad de aplicaciones automatizada para mantener tus aplicaciones seguras.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cómo los desarrolladores pueden utilizar pruebas automatizadas de seguridad de aplicaciones para proteger las aplicaciones Vue

Today, I'm going to tell you how developers can use automated application security testing to protect their Vue apps. I'll explain what it means to shift left, show an example of a cross-site scripting vulnerability, and provide the tools you need to find these vulnerabilities before production. Let's jump into an example of our Vue app with cross-site scripting. We have FontTalk, a message board where users can discuss fonts and style their posts. Bob logs in and sees a conversation about fonts. Unaware of cross-site scripting, his account is compromised. The malicious image tag sends his confidential information to the attacker. To prevent this, we need to make changes in the code.

Frontend frameworks like Vue are vulnerable to unsanitized inputs to execute malicious code. The patterns that allow for this are generally understood, but there are still some cases when your apps might still be at risk. Learn how you can implement automated application security to keep your apps safe. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How Developers Can Use Automated App Security Testing To Protect Vue Apps

Nick Teets

Migrar tu aplicación Vue 2 a Vue 3 no tiene por qué ser doloroso. Esta masterclass te guiará a través del proceso. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Migrando a Vue 3

This talk focuses on the migration process of upgrading Vue CLI-generated apps to Vue 3. It provides step-by-step instructions on removing Vue 2, fixing errors and warnings, and uninstalling the migration build. The talk also mentions a Vue 2 to Vue 3 cheat sheet available for a comprehensive guide. Additionally, the talk introduces a special view three migration build for running existing apps in view two mode, providing warnings and a safe environment for code updates.

Migrating your Vue 2 app over to Vue 3 doesn't have to be painful. This talk walks you through the process. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Migrating to Vue 3

Adam Jahr

Vanessa, Kia, and Eduardo discuss Vue.js and state management, emphasizing the evolution of state management in Vue, the introduction of Pinia as a simpler alternative to Vuex, and the comparison between Vue X and Pinia in terms of flexibility and adaptability. They explore transitioning from local state to Flux architecture, efficient data handling with VueXORM, and the importance of optimal data access in Vue components. The discussion also covers server-side data storage, cache usage, and audience engagement with VxOrm for deduplicating data in Vuex.

Panel discussion: State Management

Kia King Ishii

Vue.js es un framework frontend. Pero los diferentes módulos, como el motor de reactividad, se pueden importar por separado. Divirtámonos y exploremos posibles casos de uso para la reactividad de Vue en el backend. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Llevando Vue.js al Backend

This talk explores using Vue.js in the backend, specifically focusing on Vue 3 Reactivity. It discusses how Vue 3 Reactivity leverages ES6 proxies to update changes and intercept hooks. The talk also covers implementing Vue.js backend with live demos, showcasing the modification of proxies and the use of reactive functions. It demonstrates the creation of a reactive array and the implementation of join, leave, and message functionalities. The talk concludes by mentioning the possibility of using computed properties and inviting further questions.

Vue.js is a frontend framework. But the different modules, such as the reactivity engine can be imported on its own. Let's have some fun and explore possible use cases for Vue reactivity in the backend. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Taking Vue.js to the Backend

Marc Backes

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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

Jonathan Bakebwa introduces Chakra UI View, a component library focused on accessibility, with features like extending themes and defining custom variants. The upcoming versions of Chakra UI V1 will introduce a zero-runtime build and a theming API with component overrides, custom variants, and custom sizes. The Talk demonstrates how to implement a button design using Chakra UI, customize button styles, create custom button sizes, and use icons from external libraries. Chakra UI allows for quick implementation of UI designs and is recommended for developers looking to enhance their designs.

With Chakra UI, we are able to override component styles to express custom design systems with accessible Vue components. This talk explores the new theme API in v1 and how you can use it to quickly build custom UIs for your application. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue.js London Live 2021

Code / Create / Communicate

Sophie Kolbe

Lera

Debbie O'Brien

Varun

Károly Török

Dimitris Kiriakakis

David Pugh

Myron Davis

Denis Radin

Lera

Rahul Rana

Richard Teeuwen

Damir Petecin

Alejandro Arevalo

Denis

mickael

Robert

Evisa

Ed Soltani

Olga Kosmylina

Abelant Zahiri

David Carmona Maroto

Pyriand3r

Matthew Hausman

Tim Medcalf

Merle Fischer

Steve Doggett

Adam Khan

Jonathan

Sriramajeyam Sugumaran

Andres Pineda

Panos Dimitriadis

Leonel Oliveira

Total attendees