Chez Glean, la rapidité est notre fonctionnalité préférée. Contrairement à certaines entreprises, nous ne sommes motivés par aucune volonté de retenir l'attention des utilisateurs le plus longtemps possible simplement pour leur montrer des publicités. Nous sommes libres d'optimiser notre produit pour aider les individus et les équipes à trouver ce dont ils ont besoin et à repartir le plus vite possible, afin d'accomplir de grandes choses.
L'un des moyens les plus rapides de trouver des informations avec Glean passe par sa page Nouvel onglet. Elle est personnalisée et adaptée par chaque utilisateur : la mise en page, l'arrière-plan, les sites favoris et les documents suggérés. Même avec tout ce contenu dynamique, chacun s'attend à ce qu'un nouvel onglet s'ouvre instantanément, sans aucun délai perceptible. Cela représentait un défi passionnant pour notre équipe d'ingénierie — un défi qui nécessitait une solution inédite.
Découvrez le résultat dans cette vidéo. Cet article technique explique comment nous y sommes parvenus.
Étape 1 - Service Worker
Lorsqu'un navigateur web charge une page, il doit d'abord récupérer toutes ses ressources. Historiquement, cela nécessitait plusieurs secondes d'attente liées au réseau. Les Service Workers ont entièrement changé la donne. La première chose que nous avons donc faite a été de mettre en place Workbox, un excellent framework open source qui facilite la création d'un Service Worker chargeant votre page entièrement depuis le cache, même hors ligne.
Étape 2 - Redux-Persist
Maintenant que le chargement de notre code et de nos ressources était rapide, le problème suivant était qu'il fallait encore un aller-retour vers le serveur pour récupérer les préférences. Pour éviter cela, nous avons tout mis en cache localement dans IndexedDB à l'aide de redux-persist.
Cela a semblé fonctionner au début, mais a provoqué toutes sortes de problèmes de performance dans l'application, en particulier sur les machines très sollicitées. Heureusement, deux des membres fondateurs de l'équipe Chrome Speed de Google travaillent désormais chez Glean, nous connaissions donc l'outil pour le débogage : Chrome Tracing. Il a révélé que, par défaut, Chrome attend d'écrire toutes les opérations IndexedDB sur le disque via un fsync. Certains navigateurs comme Firefox ne le font pas, mais Chrome nous a au moins fourni un outil pour l'éviter : la durabilité relâchée. Nous avons donc écrit notre propre backend redux-persist et contribué également à un correctif pour Workbox. Désormais, les opérations sur le système de fichiers ne s'accumulent plus de manière pathologique.
Étape 3 - Mise en cache du rendu
Même si notre mise en cache était complète et efficace, elle n'était toujours pas assez rapide. Le navigateur passait encore plusieurs centaines de millisecondes à compiler notre JavaScript et à initialiser React pour ce premier rendu. Nous avons donc dû sortir des sentiers battus en nous inspirant du rendu côté serveur. Il s'agit d'une technique qui consiste à générer un DOM sur le serveur et à envoyer son HTML au navigateur afin qu'il puisse l'afficher immédiatement, uniquement avec l'analyse et la mise en page CSS/HTML, pendant que React se charge.
Nous avons compris que cela pouvait également fonctionner pour une page construite dynamiquement côté client. Une fois chargée, nous prenons un instantané du HTML du DOM et le conservons dans le Service Worker, de sorte qu'au chargement suivant, une page HTML pré-rendue se trouve déjà dans le cache et ne nécessite aucun JavaScript pour être affichée. Les détails sont ésotériques. Ils ont nécessité quelques considérations minutieuses afin d'éviter des écueils comme l'effacement des champs de recherche, une hydratation incorrecte et l'obsolescence des données.
Mais le résultat final parle de lui-même. À notre connaissance, il s'agit d'une technique inédite. Si cela vous intéresse, nous serions ravis de publier en open source un plugin Workbox généralisé.
Et la suite ?
Nous espérons que vous nous aiderez à l'écrire ! Envie de relever des défis passionnants comme celui-ci et de repousser les limites de la plateforme web avec nous ? Consultez notre page Carrières.
