Versión en EspañolES

Una Mirada Diferente a la Performance Web

Resolver los problemas de rendimiento en el front-end puede ser difícil, pero identificar dónde tienes problemas de rendimiento en primer lugar puede ser aún más difícil. En este masterclass, Abhijeet Prasad, ingeniero de software en Sentry.io, profundiza en la investigación de UX, las APIs de rendimiento del navegador y las herramientas de desarrollo para ayudarte a comprender las razones por las que tus aplicaciones Vue pueden ser lentas. Te ayudará a responder preguntas como "¿Qué significa tener un sitio web rápido?" y "¿Cómo sé si mi problema de rendimiento es realmente un problema?". Al recorrer diferentes aplicaciones de ejemplo, podrás aprender cómo utilizar y aprovechar los vitales web principales, las APIs de tiempo de navegación y el seguimiento distribuido para comprender mejor tus problemas de rendimiento.

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

FAQ

Sentry es una herramienta que ayuda a monitorear la salud del código de las aplicaciones, identificando errores y bugs, y más recientemente, enfocándose en el monitoreo de rendimiento de las aplicaciones.

Recientemente, Sentry ha incorporado funcionalidades de monitoreo de rendimiento para ayudar a entender y optimizar el rendimiento de las aplicaciones web y servidores.

El rendimiento es crucial en el desarrollo web porque afecta directamente la experiencia del usuario. Una aplicación lenta puede ser inaccesible e inutilizable, lo que afecta negativamente la percepción del usuario y puede llevar a una ventaja competitiva reducida.

Sentry implementa el monitoreo de rendimiento al analizar métricas clave, interpretar datos y utilizar herramientas integradas para identificar problemas que pueden estar afectando negativamente la experiencia del usuario y la eficiencia operativa de la aplicación.

Sentry es útil para monitorear una variedad de tipos de aplicaciones, incluidas aplicaciones web construidas con tecnologías como Vue, Ionic y Electron, tanto en navegadores como en plataformas móviles.

Sentry sugiere comprender profundamente el tipo de aplicación y las operaciones de usuario que se realizan en ella, medir y analizar métricas específicas, y luego aplicar optimizaciones basadas en los datos recogidos para mejorar el rendimiento general.

vue

Abhijeet Prasad

72 min

19 Oct, 2021

Comments

Video Summary and Transcription

Este masterclass sobre Monitoreo de Performance abarca temas importantes como comprender el rendimiento y su impacto en la experiencia del usuario, medir el tamaño de los activos y el rendimiento de carga de la página, analizar datos y distribuciones de rendimiento, utilizar la API de Línea de Tiempo de Rendimiento y la API de Observador de Rendimiento, y métricas personalizadas con marcas y medidas. El masterclass también destaca la importancia de la percepción del usuario y el rendimiento, el papel de Google Lighthouse en el análisis de rendimiento y el uso de Sentry Performance Monitoring para capturar métricas e información del mundo real.

Available in English: A Different Vue into Web Performance

Video transcription and chapters available for users with access.

Available in other languages:

Watch more workshops on topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend

Vue.js London Live 2021

169 min

Vue3: Desarrollo Moderno de Aplicaciones Frontend

Top Content

Featured WorkshopFree

Mikhail Kuznetcov

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

web development vue composition api vue vue 3

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

Vue.js London Live 2021

117 min

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

Top Content

Workshop

Daniel Roe

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.

vue nuxt.js

Monitoreo 101 para Desarrolladores de React

React Summit US 2023

107 min

Monitoreo 101 para Desarrolladores de React

Top Content

WorkshopFree

2 authors

Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio

react testing angular vue

TresJS crea experiencias 3D de forma declarativa con componentes Vue

Vue.js London 2023

137 min

TresJS crea experiencias 3D de forma declarativa con componentes Vue

Workshop

Alvaro Saburido

- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento

vue

Construyendo formularios Vue con VeeValidate

Vue.js London Live 2021

176 min

Construyendo formularios Vue con VeeValidate

Workshop

Abdelrahman Awad

En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.

vue composition api vue

Construyendo Pinia desde cero

Vue.js Live 2024

70 min

Construyendo Pinia desde cero

Workshop

Eduardo San Martin Morote

Sumergámonos en cómo funciona Pinia bajo el capó construyendo nuestro propio `defineStore()`. Durante este masterclass cubriremos algunos conceptos avanzados de Vue como la inyección de dependencias y los scopes de efectos. Esto te dará una mejor comprensión de la API de Composición de Vue.js y Pinia. Requisitos: experiencia en la construcción de aplicaciones con Vue y su API de Composición.

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

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

Vue.js London Live 2021

34 min

Todo Más Allá de la Gestión de Estado en Tiendas con 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

Bienvenido a Nuxt 3

Vue.js London Live 2021

29 min

Bienvenido a 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

Un Año en Vue 3

Vue.js London Live 2021

20 min

Un Año en 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

Utilizando Rust desde Vue con WebAssembly

Vue.js London Live 2021

8 min

Utilizando Rust desde Vue con 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: Actualizaciones de Características

Vue.js London 2023

44 min

Vue: Actualizaciones de Características

Top Content

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

Estado Local y Caché del Servidor: Encontrando un Equilibrio

Vue.js London Live 2021

24 min

Estado Local y Caché del Servidor: Encontrando un Equilibrio

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