Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Au-delà de la pagination : rendre vos tableaux React performants grâce au windowing

18 views

Published on

Si vous avez déjà essayé d'afficher un tableau contenant beaucoup d'éléments en React, vous savez probablement que cela peut très vite dégrader les performances de votre site. Nous allons aborder les techniques suivantes pour améliorer les performances :

- Une solution simple : la pagination
- Privilégier l'UX : Le lazy loading et ses pièges
- Le windowing : le meilleur des deux mondes ?

Dans ce talk, je souhaite vous donner les clés pour construire des tableaux performants du premier coup.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Au-delà de la pagination : rendre vos tableaux React performants grâce au windowing

  1. 1. Au-delà de la pagination : Rendre vos tableaux React performants grâce au windowing ?
  2. 2. Qui je suis 2 Salut, je m’appelle Elie ! Je travaille chez Theodo En tant que Lead Developer
  3. 3. Introduction CONTEXTE ▪ Développement d’un outil de Product Lifecycle Management ▪ Gestion et suivi de projets ▪ Page de gestion des tâches ▪ Projet démo : plateforme de news 3
  4. 4. Exemple 4 Temps de chargement : < 1s 10 ELEMENTS
  5. 5. Exemple 5 Temps de chargement : ~ 3.5 s 1000 ELEMENTS
  6. 6. Problème PERFORMANCE ▪ Au-delà de 200 tâches, la performance se dégrade ▪ Navigateur utilisé : IE 11 ▪ Temps de chargement initial ▪ Fluidité dans l’interaction 6
  7. 7. Pourquoi 7 DOM Style Layout Painting CSSOM HTML CSS Génération du DOM virtuel via le Javascript Positionnement des éléments DOM virtuel
  8. 8. 1. Pagination 8
  9. 9. Exemple 9 Librairie utilisée : react-paginate Temps de chargement : < 1s 1000 ELEMENTS
  10. 10. Pros / Cons ▪ Temps de chargement ▪ Fluidité dans l’interaction ▪ Plus facile de retrouver un élément 10 ▪ Expérience utilisateur dégradée ▪ Mal adapté au mobile
  11. 11. 2. Infinite Scroll 11
  12. 12. Exemple 12 Temps de chargement : < 1s Librairie utilisée : react-infinite-scroller 1000 ELEMENTS
  13. 13. Pros / Cons ▪ Temps de chargement ▪ Adapté pour le mobile 13 ▪ Fluidité dégradée au fur et à mesure ▪ Le scroll rapide entraîne un chargement
  14. 14. 3. Windowing 14
  15. 15. Principe 15 Crédits: Brian Vaughn ▪ Un petit élément (<ul>) contient les lignes ▪ Un grand container englobe la liste et permet de scroller ▪ Seuls les lignes visibles par rapport à la position dans le container sont rendues
  16. 16. Comment 16 ▪ Utilisation des composants Table et Column de react-virtualized ▪ Table se charge de rendre les bonnes lignes en fonction du scroll
  17. 17. Exemple 17 Temps de chargement : < 1s Librairie utilisée : react-virtualized 1000 ELEMENTS
  18. 18. Pros / Cons 18 ▪ Temps de chargement ▪ Fluidité dans l’interaction ▪ Adapté pour le mobile ▪ Développement plus complexe ▪ Librairie volumineuse
  19. 19. 19 Quand l’utiliser ? ▪ Volume de lignes important ▪ Mobile friendly ▪ Faible volume de lignes ▪ Utilisation de librairie non compatibles (ex : react- table < v7)
  20. 20. 20 Code démo Repository : https://github.com/edwandr/windowing-demo
  21. 21. Merci ! Des questions ? 21 ?

×