Qwik : le roi du framework

Qu’y a-t-il de si génial avec Qwik ? Un développeur explique pourquoi c’est son framework préféré.

Qwik est de loin mon framework préféré. En plus d’être extrêmement rapide, il est également facile à utiliser et intègre tous les concepts JavaScript de pointe.

Créé par l’un des créateurs d’Angular, Miško Hevery, Qwik s’inspire fortement de React et Next.js et protège la sécurité de TypeScript dès le départ. Mais qu’y a-t-il de si génial et de différent là-dedans ?

Possibilité de reprise

Qwik utilise et a inventé un concept appelé « resumabilité ». Tous les autres frameworks doivent utiliser l’hydratation lorsqu’ils se lèvent et passent du serveur au navigateur. Hydratation consiste essentiellement à réexécuter l’intégralité du framework à partir de zéro sur le client après son exécution sur le serveur.

Qwik sérialise non seulement l’état de l’application, ce qui est déjà fait dans d’autres frameworks côté serveur, mais également l’état du framework.

Hein?

Lorsqu’un utilisateur appelle un serveur exécutant Node.js, l’application Qwik démarre. Il détermine (à partir des paramètres d’URL, des jetons de session, etc.) quel JavaScript doit être exécuté immédiatement sur le client, le cas échéant, et quel état sera nécessaire pour que le strict minimum de l’application fonctionne.

Toutes les fonctions nécessaires sont sérialisées (similaires mais plus puissantes que JSON.stringify) avec leur état d’application actuel. Lorsque ces fonctions deviennent nécessaires, elles sont chargées paresseusement à partir d’un seul écouteur d’événement global, au lieu de plusieurs.

Cela signifie qu’une page sans JavaScript ne chargera même pas le framework JavaScript lui-même, à l’exception de ce qui est nécessaire pour la prélecture.

Chargement paresseux

Le chargement paresseux est une autre fonctionnalité automatique qui rend Qwik incroyable. Dans d’autres frameworks, vous devez réfléchir manuellement au moment et à la manière dont vous souhaitez charger les composants paresseusement.

Qwik le fait pour vous en chargeant avec impatience uniquement ce qui est visible à l’écran ou ce qui est nécessaire à l’exécution de l’application sur le composant. Ne pense plus à tout ça. Vous téléchargez uniquement ce dont vous avez besoin. Lorsque ces composants sont finalement chargés, ce qui ne peut être déclenché que par un événement, ils reprennent l’application avec tout l’état prêt à fonctionner.

Dans d’autres frameworks, vous devez d’abord charger tous les composants parents. Si l’état de l’application a déjà été chargé par les parents, vous pouvez simplement le reprendre. Si une application n’a pas besoin de charger l’intégralité du framework, Qwik le saura. Il chargera simplement le JavaScript de base. C’est tout simplement révolutionnaire.

Prélecture intelligente

Par défaut, Qwik pré-extrait tous les écouteurs visibles sur la page. Son optimiseur sait quelles pages devront être récupérées, garde une trace de celles qui ont été récupérées pour éviter une nouvelle récupération et récupère ces pages sur un fil de discussion séparé.

Cela signifie que Service Works et Web Workers sont fortement utilisés dans Qwik. Cela ne devrait pas vous surprendre si vous avez déjà entendu parler ou utilisé Ville de fête pour garder ton Annonce Google JavaScript paresseux chargé de la bonne manière : en utilisant automatiquement un thread secondaire. Il utilise également le rel liez les balises pour précharger et préconnecter à d’autres serveurs.

Donc c’est rapide…

L’équipe Qwik ne prétend pas avoir construit le framework JavaScript le plus rapide. Si vous comptez 1000 insertions dans des éléments DOM, SolidJS pourrait être la voie à suivre pour la vitesse.

Cependant, si vous disposez d’une application réelle dans laquelle vous avez besoin que l’utilisateur puisse réagir immédiatement à la page, Qwik est probablement l’application la plus rapide du marché.

Référencement

Toutes ces fonctionnalités signifient que Qwik le tue avec le référencement. Vous bénéficiez de toutes les fonctionnalités d’une grande application, mais pas des frais généraux. Ton Éléments essentiels du Web vont être élevés, en particulier la plus grande peinture de contenu et le premier délai de saisie. De nombreuses applications Qwik peuvent obtenir un score Lighthouse parfait. C’est encore une fois incroyable.

Maturité

L’une des raisons pour lesquelles les gens n’utilisent pas de nouveaux frameworks est le manque de maturité. Ceci est important pour empêcher les utilisateurs de réécrire les composants, de les réutiliser, d’éliminer les bogues et de disposer de toutes les fonctionnalités dont ils ont besoin, prêtes à l’emploi.

Cela étant dit, Qwik n’est officiellement plus en version bêta et en version 1. Cela signifie qu’il ne devrait pas y avoir de changements majeurs ni de bugs sérieux.

Vous pouvez également utiliser n’importe quelle bibliothèque React avec le qwikify$ importer! Ce n’est pas vrai pour SolidJS ou Svelte, les autres nouveaux frameworks.

Cependant, Qwik Réagir n’est pas aussi rapide qu’un composant natif et devrait probablement être refactorisé lorsque vous le pouvez. Franchement, Tailwind étant aussi populaire qu’il l’est, les composants d’interface utilisateur constituent la plus grande bibliothèque personnalisée, et les gens semblent créer des composants personnalisés plus rapidement et plus proprement que jamais. Vous n’aurez peut-être pas besoin des bibliothèques externes que vous pensez avoir.

Cependant, Qwik Réagir n’est pas aussi rapide qu’un composant natif et devrait probablement être refactorisé lorsque vous le pouvez. Si Tailwind seul ne répond pas à vos besoins, vous pouvez utiliser Qwik React avec une bibliothèque de composants d’interface utilisateur mature comme KendoRéagir.

Intégrations

Qwik dispose déjà d’une longue liste d’intégrations que vous pouvez ajouter avec une simple commande de quatre lignes comme npm run qwik add auth. Il s’agit notamment d’AuthJS, Supabase, Tailwind, Prisma et d’autres bibliothèques de tests. J’ai également construit un échantillon Application Firebase Qwik. Tout ce dont vous pourriez avoir besoin est disponible, et davantage d’intégrations et de bibliothèques personnalisées sont créées plus rapidement que jamais. Personnellement, je pense que Qwik est prêt à passer à la production, malgré l’argument de maturité que les développeurs React de longue date veulent faire valoir.

Non, Qwik est mon framework préféré. Mon prochain projet l’utilisera et les développeurs ouvrent la voie à la prochaine génération de frameworks JavaScript. C’est sans aucun doute le Framework King.

npm create qwik@latest