L’immutabilité en JavaScript

L’immuabilité en JavaScript, pourquoi est-ce un sujet ? Utilisée dans les frameworks modernes, elle fait l’objet de tout un écosystème d’utilitaires. Le concept n’est pas nouveau même si les raisons de son utilisation en javascript sont différentes. Nous allons voir ensemble les concepts et faire un tour d’horizon de l’écosystème.

Transcript

1. L’immutabilité en JavaScript Par @njblepage et @YvonnickFrin
2. Qu’est ce que c’est ? immutable object (unchangeable object) is an object whose state cannot be modified after it is created Wikipédia
3. Disclaimer Tous les exemples de cette présentation seront à base de loutres. Parce qu’elles sont trop badass !
4. Ecmascript
5. Object.assign
6. Array.concat
7. Object.freeze
8. Spread operator
9. Pourquoi l’utilise-t-on ?
10. Plus maintenable • Pas d’effets de bords • Pas de couplage temporel • Meilleure lisibilité (Vraiment ?) • Facile à tester
11. Plus performant ⚡ • Comparaison rapide (Shallow compare) • Moins de consommation de mémoire • Facile à mettre en cache
12. Mis en avant par les frameworks modernes
13. Virtual DOM Facilité et rapidité à : • Comparer • Mettre à jour
14. React • L’état (state) est considéré comme immutable • Les propriétés (props) le sont aussi puisqu’on considère qu’elle résulte de l’ état du composant parent
15. Redux • combineReducers • connect • Débugging en naviguant dans les états
16. Pourquoi utiliser des bibliothèques utilitaires ?
17. Les structures de données imbriquées
18. Deux approches
19. Les wrappers
20. immutable
21. immutable Forces • OptimiséCollections Faiblesses • Interopérabilité
22. seamless-immutable
23. seamless-immutable Forces • Interopérabilité Faiblesses • Invasif • API limitée
24. Les pojo
25. immer
26. immer Forces • Typé • Simple Faiblesses • Risques d’effets de bords
27. qim
28. qim Forces • Complet • Performant Faiblesses • Difficile à apprendre
30. Reprenons notre exemple
31. Changer une propriété imbriquée
32. Opérations sur les tableaux
33. Slice notation
34. On ajoute la loutre géante pour la suite des exemples !
35. List notation
36. Grouper les opérations Grouper les opérations
37. Forces • Concis • Interoperable • Complet et extensible • Courbe d’apprentissage rapide
38. Faiblesses • Non typé
39. La V2 est en cours de développement
40. Nouveautés • Index négatifs dans les tableaux • Ajout du step dans la slice notation • Ajout de l’optional chaining • Support de nouveaux types natifs ? • Et on est ouvert à d’autres propositions
41. Performances ⚡ ES2015 destructuring immutable 3.8.2 seamless-im mutable 7.1.3 immer 1.2.0 qim 0.0.52 immutad•t 2.0.0 Set a property 1119320ops/s (893ns/op) No run 70726ops/s (14.1µs/op) 161608ops/s (6.19µs/op) 563444ops/s (1.77µs/op) 615460ops/s (1.62µs/op) Set in small list (1000 items) 16308ops/s (61.3 µs/op) 6516ops/s (153µs/op) No run 2619ops/s (382µs/op) 10010ops/s (99.9µs/op) 11729ops/s (85.3µs/op) Set in medium list (10000 items) 1564ops/s (639µs/op) 606ops/s (1.65ms/op) No run 270ops/s (3.71ms/op) 1008ops/s (992µs/op) 1373ops/s (728µs/op) Set in large list (100000 items) 116ops/s (8.65ms/op) 57ops/s (17.4ms/op) No run 24ops/s (42.4ms/op) 84ops/s (11.9ms/op) 105ops/s (9.49ms/op)
42. Conclusion Aucune loutre n’a été maltraitée pendant cette présentation
43. Merci ♥ !
44. Les slides