Une nouvelle technique ou bibliothèque JavaScript semble faire son tour dans la communauté des développeurs chaque semaine. La nécessité de la plupart d’entre eux est discutable, mais le CTO de Builder.io, Misko Hevery, affirme que son nouveau projet répond à un problème de longue date. Qwik est un framework JavaScript centré sur DOM conçu pour rendre possibles les « applications instantanées », en se concentrant sur « la capacité de reprise du rendu côté serveur du HTML et le chargement paresseux fin du code ».
Hevery est surtout connu pour être le créateur d’Angular, le framework JavaScript influent publié par Google en 2010 (alors connu sous le nom d’AngularJS). Donc, si vous faites une liste de personnes qui pourraient réparer l’état des frameworks JavaScript, Hevery figurerait en haut de cette liste.
Il a d’abord parlé des candidatures pouvant être reprises lors de la 2019 Angular Ng-Conf. Au cours de cette présentation, il a donné deux règles sur ce qu’un framework doit faire pour créer des applications qui démarrent instantanément : ne téléchargez et n’exécutez que le code strictement nécessaire pour gérer l’interaction de l’utilisateur, et ne dupliquez pas le travail que le serveur a déjà effectué.
C’est à partir de ces idéaux que Qwik a été créé. “Les cadres définissent les règles du jeu et les développeurs doivent les suivre”, a déclaré Hevery dans une interview avec The New Stack. “Parce que les règles cadres actuelles sont d’hydratation pour rendre le site interactif, tous les sites complexes tardent à démarrer. Pour sortir de ce piège, il faut un cadre avec possibilité de reprise plutôt qu’hydratation.
Les avantages du rendu côté serveur
En janvier 2021, Qwik a commencé le développement, en commençant par un projet où Hevery “jouait principalement avec jusqu’où je pouvais pousser l’idée de retarder l’exécution du code sur le client”. Il dit que la syntaxe originale n’avait pas l’outillage et laissait donc beaucoup à désirer. Pourtant, l’apprentissage sur le tas s’est avéré fructueux.
“Quand j’ai rejoint Builder.io en juin 2022”, a-t-il déclaré, “c’est devenu un effort à plein temps, et j’ai été rejoint par Adam Bradly et Manu Martinez-Almeida pour y travailler à plein temps. Il s’avère qu’entre nous trois, nous avons beaucoup d’expérience dans la construction de frameworks, nous avions donc une idée claire de ce que nous voulions que Qwik soit.
Pour mieux comprendre l’attrait de Qwik, Hevery décrit comment il se démarque des autres frameworks. « Les frameworks actuels ne s’intéressent qu’au rendu client. RSS [server-side rendering] est vraiment une réflexion après coup. Par conséquent, l’hydratation du client est le seul moyen de faire fonctionner une application, et l’hydratation est coûteuse et entraîne des démarrages d’application lents.
Il a poursuivi : “En prenant en charge l’ensemble du problème de bout en bout, la SSR n’est pas une réflexion après coup, mais un objectif central de Qwik. Le résultat est une bien meilleure performance de démarrage du site Web. Qwik peut fournir la plupart des sites sans JavaScript, puis télécharger uniquement le code nécessaire pour traiter une interaction utilisateur spécifique. »
Par exemple, lorsque vous naviguez vers une page de produit sur Amazon, vous rencontrerez de nombreuses parties du site. Le panier, les notes, les détails du produit, le menu, etc. tous doivent être chargés. Mais, comme le note Hevery, “en tant qu’utilisateur, vous n’avez pas besoin de toutes ces pièces à la fois”.
“Il serait coûteux de retarder la première interaction jusqu’à ce que tout le code soit téléchargé et exécuté, mais c’est ce que fait l’hydratation”, a-t-il poursuivi. “Au lieu de cela, Qwik envoie du HTML pur – et un petit polyfill d’environ 1 Ko – au client. Si l’utilisateur clique sur Ajouter au panier, seul le code permettant d’ajouter l’article au panier et de mettre à jour le composant du panier est téléchargé et exécuté. Cela rend la quantité de JavaScript sur le navigateur légère, quelle que soit la complexité de l’application globale.
Chargement paresseux raffiné
Qwik propose un chargement paresseux “à grain fin”, qui fait référence à la façon dont Qwik divise les applications en plus petits morceaux et accorde aux serveurs la liberté de décider quels gros morceaux de code doivent être envoyés au client et quand.
“Avec les frameworks actuels, le chargement paresseux relève de la responsabilité du développeur”, a déclaré Hevery. “Dans Qwik, le lazy-loading tombe sur le framework. Chaque rappel (effet, écouteur, fonction de rendu) est chargeable paresseusement. Cette nature fine, avec la possibilité de rendre les composants indépendamment, donne à Qwik le pouvoir de ne pas télécharger de code si le code n’est pas strictement nécessaire.
Hevery a poursuivi en expliquant que la technologie la plus proche de Qwik est en fait un incontournable pour Google (où il a travaillé de 2005 à 2021). “En interne, Google dispose d’un cadre appelé Wiz qui alimente la recherche Google, Photos et Gmail, entre autres. Wiz a des propriétés instantanées pour l’application et, selon la façon dont vous la regardez, vous pouvez dire qu’elle peut être reprise. À proprement parler, il n’y a pas d’exécution de serveur de JavaScript qui est interrompue dans Wiz, il n’y a donc pas de “reprise” en cours, mais l’effet est le même. Wiz a une partie open source appelée jsaction qui, pour autant que je sache, a lancé l’idée de sérialiser les auditeurs en HTML. La sérialisation des écouteurs de Qwik est très similaire à celle de jsaction. »
Hevery a déclaré que Qwik est très différent de Wiz dans son cœur et dans sa mise en œuvre et sa syntaxe, mais l’objectif est le même : des applications qui démarrent instantanément.
Quelle est la prochaine étape pour Qwik ?
Qwik est actuellement disponible sur le GitHub de Builder.io. Hevery ajoute que le projet se rapproche de la disponibilité générale. “Nous sommes assez confiants dans Qwik, mais voulons avoir une solution complète avant de le déclarer. Pour cette raison, nous travaillons également sur Qwik City, un méta-framework pour Qwik qui nous permet de créer des sites Web avec un routage basé sur les fichiers. De plus, nous travaillons sur Qwikify React, qui permet la migration à partir des sites Qwik et permet à Qwik d’utiliser les bibliothèques de l’écosystème React, telles que Material Components.
Hevery dit que Qwik offre aux développeurs une nouvelle approche pour créer des applications Web. “Le chargement paresseux et la capacité de reprise à grain fin se traduisent par des applications instantanées et des solutions de référencement dès le départ”, a-t-il promis.
The New Stack est une filiale en propriété exclusive d’Insight Partners, un investisseur dans les sociétés suivantes mentionnées dans cet article : Wiz.