Qwik: El Enfoque Sin Hidratación para Sitios de Alto Rendimiento

Rate this content
Bookmark

Hablemos sobre la hidratación y los problemas que crea. La resumibilidad es una alternativa a la hidratación que no obliga a la ejecución ansiosa del código del lado del cliente, lo que resulta en aplicaciones instantáneas incluso a medida que la aplicación se vuelve más compleja.

This talk has been presented at DevOps.js Conf 2024, check out the latest edition of this JavaScript Conference.

FAQ

Builder.io es un CMS visual headless que permite integrar y manejar contenido visualmente sin necesidad de escribir código. Se instala en tu sitio web existente mediante npm install y facilita que equipos de marketing construyan interfaces de usuario a través de un sistema de arrastrar y soltar.

Una forma efectiva de mejorar los Core Web Vitals es reduciendo la cantidad de JavaScript que se envía al cliente. Menos JavaScript significa tiempos de carga más rápidos y una mejor interacción del usuario, lo cual es crucial para un buen rendimiento según las métricas de Google.

Qwik es un framework web que busca optimizar el rendimiento eliminando la necesidad de hidratación. Esto significa que no es necesario descargar y ejecutar todo el código JavaScript de los componentes inmediatamente, lo que resulta en tiempos de carga más rápidos y un mejor rendimiento.

La resumibilidad permite que una aplicación sea interactiva sin necesidad de ejecutar nuevamente el código en el cliente. Al incluir información sobre los oyentes, el estado y las vinculaciones en el HTML enviado, Qwik puede activar la interacción del usuario inmediatamente sin hidratación, reduciendo la cantidad de código necesario en el cliente.

Party Town es una de las herramientas desarrolladas por Builder.io, aunque el texto no especifica en detalle su función. Generalmente, es una solución para mejorar el rendimiento de un sitio web, posiblemente relacionada con la gestión eficiente de scripts y tareas de terceros.

Builder.io proporciona un entorno visual donde los usuarios pueden simplemente arrastrar y soltar componentes para construir sus sitios web. Esto elimina la necesidad de codificación manual y permite a los equipos de marketing y otros usuarios no técnicos gestionar y actualizar el contenido del sitio de manera independiente.

Miško Hevery
Miško Hevery
20 min
15 Feb, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Builder.io es un CMS visual sin cabeza que permite arrastrar y soltar componentes de interfaz de usuario. Los Core Web Vitals son importantes para mejorar el rendimiento del sitio web. La hidratación en los frameworks afecta el rendimiento y la interacción con la aplicación. Qwik ofrece un enfoque diferente para la hidratación, eliminando la necesidad de descargar código innecesario. La función de resumibilidad de Qwik mejora el rendimiento al comenzar con HTML y evitar la reejecución del código.

1. Introducción a Builder.io y Qwik

Short description:

Hola, mi nombre es Marciko Heveri, CTO en Builder.io. Trabajamos en Qwik, un nuevo tipo de framework. Builder.io es un CMS visual sin cabeza que permite arrastrar y soltar componentes de UI. También tenemos Party Town y un equipo de personas increíbles trabajando en nuestro código abierto.

Hola, mi nombre es Marciko Heveri, soy el CTO en Builder.io, y he trabajado en estas cosas llamadas Angular y Karma, y ahora estamos trabajando en Qwik. Así que hablemos de Builder.io por un momento. Builder.io es un CMS visual headless. Básicamente significa que puedes arrastrar y soltar tus componentes en tu aplicación existente que puedes instalar usando, puedes instalar Builder.io usando npm install. Ok, dejame reiniciar. Ok, vamos a empezar de nuevo desde aquí. Qwik, un enfoque sin hidratación para mejorar el rendimiento de los sitios web. Hola, mi nombre es Mischko Heveri, soy CTO en Builder.io y he trabajado en esto llamado Angular y ahora trabajo en Qwik, que es un nuevo tipo de framework del que quiero hablar hoy. Builder.io es un CMS visual headless. Headless significa que se aloja en tu sitio web existente donde puedes instalarlo usando npm install y visual significa que puedes tomar tus propios componentes y permitir que tu equipo de marketing arrastre y suelte la interfaz de usuario y construya sitios web sin necesidad de tener experiencia en programación. Otra cosa genial que hacemos se llama Party Town, y estas son algunas de las personas increíbles que trabajan en nuestro código abierto en Builder.io.

2. Mejorando el rendimiento con Core Web Vitals

Short description:

Hoy quiero hablar sobre Core Web Vitals y la importancia de reducir JavaScript para mejorar el rendimiento. Muchos sitios web tienen dificultades para pasar Core Web Vitals, incluyendo Amazon. Para ilustrar, comencemos con un ejemplo simple de contador e introduzcamos gradualmente componentes más realistas. Las aplicaciones del mundo real consisten en múltiples componentes, envoltorios, acciones y actualizaciones de interfaz de usuario. Estos componentes a menudo necesitan compartir datos a través de envoltorios. A pesar de su simplicidad, incluso esta aplicación básica requiere descargar varios archivos de código al cliente.

Entonces, lo que quiero hablar hoy es sobre la velocidad, y específicamente sobre los Core Web Vitals y cómo lograr que sean lo más altos posible. Resulta que la respuesta es relativamente simple pero difícil de hacer, enviar menos JavaScript. A Google le importa mucho, y como resultado, crearon estas métricas de Core Web Vitals que rastrean y evalúan.

Pero resulta que a medida que nuestros sitios web se vuelven más populares y complicados, la cantidad de JavaScript que enviamos al cliente está aumentando lentamente a lo largo de los años, como puedes ver aquí. A medida que aumenta la cantidad de JavaScript, se vuelve más difícil pasar los Core Web Vitals. La mayoría de los sitios web tienen dificultades para pasar los Core Web Vitals, incluso Amazon, que se preocupa mucho por el rendimiento y es uno de los sitios web con mejor rendimiento. Y realmente se reduce a la cantidad de JavaScript que se envía al cliente.

Comencemos con un ejemplo muy simple. Construyamos un ejemplo de contador. Bueno, el contador probablemente se vería así. Tenemos un botón al que le das clic y se incrementa el contador. Esta es la aplicación más simple que se puede pensar. Pero no creo que sea realmente representativa de una aplicación del mundo real, porque en esta aplicación en particular tenemos nuestra mutación, que es el escucha, nuestro estado, que es el contador actual, y la representación, que es la vinculación del valor, todo dentro de un solo componente. En realidad, por lo general, la mutación, el estado y la representación se separan en componentes separados.

Veamos eso como un ejemplo más realista. O descompongamos esto. Un ejemplo de esto se vería así, donde tienes el componente del contador que está en la raíz y contiene dos componentes más pequeños, la acción y la visualización, donde el contador contiene el estado y la acción tiene el escucha, y la visualización muestra solo el contador actual. Incluso eso no es realmente muy realista, porque típicamente tenemos cosas adicionales como AppRoot, tenemos envoltorios adicionales que se utilizan para el diseño de los componentes, y así sucesivamente. Todas estas cosas adicionales hacen que sea más realista para lo que es la aplicación real. Esto es lo que se vería.

Como puedes ver, todavía tenemos un contador, pero ahora nuestra acción está envuelta en un componente adicional, al igual que nuestra visualización. La razón por la que muestro esto es porque necesitas pasar datos a través de estos envoltorios adicionales, y esto afectará la forma en que se ejecuta la aplicación. Por último, introduzcamos un elemento de acción y un ícono de visualización. La idea detrás de estas cosas es que son básicamente saltos. Son componentes que no hacen nada, pero muchas veces los tenemos en nuestra aplicación. Un ejemplo más realista de cómo se ve realmente una aplicación es una mezcla de estos componentes de la aplicación, el contador, diferentes tipos de envoltorios, finalmente un lugar donde realmente realizamos algunas acciones y un lugar donde actualizamos la interfaz de usuario. Puedes pensar en la realización de la acción como el botón de compra en una página, y puedes ver el contador como la visualización del carrito de compras actual en la interfaz de usuario. Entonces, lo que tenemos es una situación en la que la mutación y la visualización están realmente separadas entre sí, y tienen que compartir un componente raíz común, el denominador común mínimo que abarca ambos, que contiene el estado, y luego el estado se pasa a ambos lugares. Ahora, pensarías que para una aplicación tan simple, el único código que tendrías que descargar al cliente es realmente solo la acción de mutación, tal vez el estado y tal vez la visualización.

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

Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.

Workshops on related topic

Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.