Sélectionner une page


Le rendu de journaux volumineux dans un navigateur peut être une tâche complexe Si vous voulez une interface utilisateur riche avec des couleurs, des regroupements, des recherches et des permaliens, déclare Alberto Gimeno, ingénieur GitHub. Pour cette raison, après avoir testé avec un React et une simple bibliothèque JS, ils ont décidé de créer le leur.

La décision de conception la plus importante que les ingénieurs de GitHub ont dû prendre était la décision La virtualisation. Sans virtualisation, explique Gimeno, le risque était trop élevé que l’interface utilisateur devienne lente ou ne répond pas. La virtualisation est possible à deux niveaux différents: la virtualisation des données et la virtualisation de l’interface utilisateur.

La virtualisation de l’interface utilisateur consiste à afficher uniquement un sous-ensemble de toutes les entrées liées au journal et à actualiser la vue lorsque l’utilisateur fait défiler la page. La virtualisation des données est une approche plus complexe dans laquelle le navigateur ne dispose que d’une partie des données disponibles et récupère le reste en cas de besoin.

Lorsqu’ils l’ont implémenté pour la première fois, les ingénieurs de GitHub ont d’abord testé avec une bibliothèque basée sur React, puis avec une simple bibliothèque JavaScript. Ni l’un ni l’autre ne s’en sont bien sortis. En particulier, la bibliothèque basée sur React ne prenait pas en charge une fonctionnalité clé pour GitHub, à savoir la possibilité de traiter des lignes de hauteur variable pour diviser de longues lignes de journal. La solution JavaScript simple, en revanche, semblait mieux convenir, car elle prenait en charge toutes les fonctionnalités que nous voulions, mais elle s’est avérée inférieure à la moyenne en termes d’expérience utilisateur. Combien de Explication des commentateurs de Hacker NewsCette implémentation initiale a rendu la vue du journal presque inutilisable. En particulier, le défilement et la recherche d’informations sur la page du journal ne fonctionnaient pas très bien.

Pour ces raisons, les ingénieurs de GitHub ont décidé de le faire Redéployez votre expérience de journalisation réutilisé à partir de zéro et utilisé les données d’utilisation pour mieux le définir.

Nos données nous ont montré que 99,51% des emplois existants comptaient moins de 50 000 lignes, mais nous savions que les navigateurs étaient aux prises avec plus de 20 000 lignes de journal. Nous avons également constaté que même avec un petit nombre de lignes de journal, il peut consommer trop d’espace disque. Avec toutes ces informations, nous avons décidé que nous n’avons pas besoin de virtualisation des données, mais que nous avons besoin de virtualisation de l’interface utilisateur.

La configuration requise pour la vue du journal comprenait la possibilité de restituer au moins 50 000 lignes, y compris sur les appareils mobiles. Autoriser la sélection de texte sans restrictions; pour réduire l’utilisation de la mémoire; et bien sûr, pour assurer un comportement fluide même lorsque la liste des journaux est parcourue ou recherchée.

Un facteur clé dans la nouvelle implémentation de GitHub était de structurer le DOM pour réduire le nombre de nœuds à rendre et le nombre de mutations DOM lors du défilement. Créer trop de mutations DOM pendant le défilement avait un impact particulièrement négatif sur l’expérience mobile, explique Gimeno.

Nous avons eu l’idée de regrouper les lignes de journal en clusters. Au lieu de supprimer et d’ajouter des lignes individuelles, nous ajoutons des lignes de journal dans des groupes de N lignes et ajoutons ou supprimons des groupes au lieu de lignes individuelles. Après quelques tests, nous avons maintenant une idée du nombre de lignes qu’un cluster aurait: 50 lignes par cluster.

L’ensemble du processus a pris une semaine pour arriver à une mise en œuvre initiale et plusieurs autres pour arriver à la qualité de la production. Cette approche a permis à GitHub d’avoir un contrôle complet sur les performances de l’interface utilisateur du journal, souligne Gimeno.

Cette bibliothèque n’a pas encore été publiée en version open source au moment de la rédaction, et GitHub n’a pas encore confirmé si cette bibliothèque est prévue en version open source. Nous mettrons à jour ce message lorsque nous aurons des informations supplémentaires.





Source link

Recent Posts