English versionEN

A Different Vue into Web Performance

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

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

FAQ

Sentry's performance monitoring is beneficial for a variety of applications, including web servers and web applications built for the browser. It is particularly focused on improving performance for applications built using Vue, Ionic, and Electron frameworks.

Web performance is considered an accessibility issue because slow, unusable, or unpredictable web applications create barriers for users, making them inaccessible and providing a poor user experience. Improving performance ensures that applications are accessible and usable by more people.

To identify performance issues in web applications, it's important to first understand the type of application and user operations relevant to the app. Performance monitoring tools like Sentry can help in measuring and interpreting performance data, focusing on aspects like bandwidth, latency, and resource usage.

Understanding the type of web application, whether it's a single-page application, a static site, or a hybrid, helps in recognizing the specific performance trade-offs and challenges associated with each type. This knowledge guides the optimization strategies that can be specifically tailored to improve performance effectively.

The user's perspective is crucial in web performance because it directly affects their experience and satisfaction. Performance improvements should focus on making sites load faster and become more responsive, thereby enhancing user satisfaction and potentially increasing retention and conversion rates.

Sentry uses a variety of tools to measure and improve web application performance, including browser APIs and integrations with frameworks like Vue. It provides data on key performance indicators such as load times, interaction readiness, and resource usage, enabling developers to pinpoint and resolve performance issues.

Sentry is a tool designed to monitor the health of application code. It assists software engineers by identifying errors and bugs in applications and has recently expanded its capabilities to include performance monitoring, helping users understand and optimize the performance of their applications across different platforms.

Sentry has expanded its services to include performance monitoring, which allows users to monitor and understand the performance of their applications in addition to identifying errors and bugs.

vue

Abhijeet Prasad

72 min

19 Oct, 2021

Comments

Video Summary and Transcription

This Workshop on Performance Monitoring covers important topics such as understanding performance and its impact on user experience, measuring asset size and page load performance, analyzing performance data and distributions, using the Performance Timeline API and Performance Observer API, and custom metrics with marks and measures. The workshop also highlights the significance of user perception and performance, the role of Google Lighthouse in performance analysis, and the use of Sentry Performance Monitoring for capturing metrics and real-world insights.

Available in Español: Una Mirada Diferente a la Performance Web

Video transcription and chapters available for users with access.

Available in other languages:

Watch more workshops on topic

Vue3: Modern Frontend App Development

Vue.js London Live 2021

169 min

Vue3: Modern Frontend App Development

Top Content

Featured WorkshopFree

Mikhail Kuznetsov

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

web development vue composition api vue vue 3

Monitoring 101 for React Developers

React Summit US 2023

107 min

Monitoring 101 for React Developers

Top Content

WorkshopFree

2 authors

If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project.
Workshop level: Intermediate

react testing angular vue

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

Vue.js London Live 2021

117 min

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

Top Content

Workshop

Daniel Roe

We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.

vue nuxt.js

TresJS create 3D experiences declaratively with Vue Components

Vue.js London 2023

137 min

TresJS create 3D experiences declaratively with Vue Components

Workshop

Alvaro Saburido

- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance

vue

Building Vue forms with VeeValidate

Vue.js London Live 2021

176 min

Building Vue forms with VeeValidate

Workshop

Abdelrahman Awad

In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.

vue composition api vue

Building Pinia From Scratch

Vue.js Live 2024

70 min

Building Pinia From Scratch

Workshop

Eduardo San Martin Morote

Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.

devtools vue

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia

Vue.js London Live 2021

34 min

Everything Beyond State Management in Stores with Pinia

Top Content

Eduardo San Martin Morote

Vue.js Core Team

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.

state management vue pinia react

Welcome to Nuxt 3

Vue.js London Live 2021

29 min

Welcome to Nuxt 3

Top Content

Alexandre Chopin

NuxtLabs

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.

vite vue nuxt.js

One Year Into Vue 3

Vue.js London Live 2021

20 min

One Year Into Vue 3

Top Content

Evan You

Vue.js & Vite Creator

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 vue 3

Utilising Rust from Vue with WebAssembly

Vue.js London Live 2021

8 min

Utilising Rust from Vue with WebAssembly

Top Content

Joe Lenton

Attest

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.

webassembly vue rust

Vue: Feature Updates

Vue.js London 2023

44 min

Vue: Feature Updates

Top Content

Watch video: Vue: Feature Updates

Evan You

Vue.js & Vite Creator

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.

vue vue 3 frontend

Local State and Server Cache: Finding a Balance

Vue.js London Live 2021

24 min

Local State and Server Cache: Finding a Balance

Top Content

Natalia Tepluhina

GitLab

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.

graphql vue server cache