Vue.js London 2023

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 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.

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 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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.