VT-S5C-pcerello-Qwik

---

title: Résumé de la vidéo "La performance et Qwik"

author: Pauline Cerello

date: 28/11/23

---

# Résumé de la vidéo "La performance et Qwik"

## Sommaire

1. [Introduction](#introduction)

2. [Histoire du développement web](#1ère-partie--histoire-du-développement-web)

3. [Présentation Qwik](#2ème-partie--présentation-qwik)

4. [Démonstrations](#3ème-partie--démonstrations)

## Introduction <a name="introduction"></a>

Dans cette vidéo je vous présente un nouveau Framework web, Qwik, que j'ai découvert lors de CDD qui a fait suite à mon stage où je travaillais sur la refonte du back office de l’entreprise.

Mon tuteur, cherchant à améliorer les performances du back office, m'a introduite à Qwik, un Framework conçu pour résoudre le problème central des performances dans les sites web modernes, principalement attribué à la complexité croissante, au poids accru, et à l'abondance de JavaScript.

## 1ère partie : Histoire du développement web <a name="1ère-partie--histoire-du-développement-web"></a>

L'évolution du développement web est cruciale pour comprendre l'intérêt de Qwik. Il faut savoir que dans le passé, les sites étaient statiques,  c'est à dire que c'était des pages fixes donc avec peu d'interactivité avec une séparation entre le rendu et l'interactivité.

Aujourd'hui, la dynamique des sites exige plus de fonctionnalités et d'interactivité, entraînant l'utilisation de Framework tels qu'Angular, React ou Vue pour gérer le HTML côté serveur. Cependant, cette approche engendre des problèmes de performances en raison de la duplication de code et de l'exécution simultanée côté serveur et côté client.

## 2ème partie : Présentation Qwik <a name="2ème-partie--présentation-qwik"></a>

Qwik intervient comme solution en permettant une application sans duplication de code et avec de bonnes performances. Créé par Misko Hevery, ingénieur logiciel chez Google et créateur d'Angular, Qwik a été conçu pour répondre aux insuffisances des Framework existants, offrant ainsi une meilleure expérience développeur.

Le fonctionnement de Qwik est axé sur la "résumabilité". Auparavant, le chargement d'une page impliquait l'envoi du HTML suivi du téléchargement et de l'exécution du JavaScript, avec une étape d'hydratation pour rendre la page interactive.

Qwik résout cela en envoyant un HTML léger avec un petit bout de code sérialisé. Lorsqu'un bouton est cliqué, le JS nécessaire est récupéré dans le cache du navigateur, suivant le principe du lazy loading. Si le JS n'est pas en cache, il est téléchargé et exécuté via une requête au serveur, permettant ainsi une page interactive immédiate sans la duplication inutile de code.

## 3ème partie : Démonstrations <a name="3ème-partie--démonstrations"></a>

Pour illustrer l'amélioration des performances avec Qwik, je fais une démonstration, suivie d'un exemple de code Qwik montrant son caractère "full stack".

En prenant l'exemple du site Builder.io, passé de Next.js à Qwik, les résultats de tests de performance avec Lighthouse indiquent une nette amélioration. Le temps avant l'apparition à l'écran est passé de 1.1s à 0.3s, et le temps avant interactivité est passé de 2.2s à 1.0s.

La particularité de Qwik réside dans son statut de Framework "full stack", où le serveur et le client partagent le même langage et la même base de code. Par exemple, les méthodes de Qwik, telles que useVisibleTask$ et useTask$, sont utilisées dans un composant qui exécute certaines tâches côté serveur et d'autres côté client. Cette approche élimine la duplication de code, conduisant à de meilleures performances et à une expérience développeur améliorée.