tour d’horizon de l’écosystème react-ien par guillaume besson
TRANSCRIPT
![Page 1: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/1.jpg)
Tour d'horizon de l'écosystème React-ien
![Page 3: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/3.jpg)
React seul ?
![Page 4: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/4.jpg)
Un histoire de taille
Minifié Gzip
Ember 478K 121K
Angular 165K 58K
React 6.5 + 101K 2.8 + 32K
Vue 81K 30K
Preact 8.1K 3.4K
![Page 5: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/5.jpg)
Ca manque
Routing State
Models
Et d’autres...
![Page 8: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/8.jpg)
![Page 9: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/9.jpg)
Styling
![Page 10: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/10.jpg)
Le classique style.css
https://github.com/webpack-contrib/css-loader
![Page 11: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/11.jpg)
Et le naming ?
https://github.com/css-modules/css-modules
![Page 12: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/12.jpg)
![Page 13: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/13.jpg)
Avec Webpack CSS loader
![Page 14: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/14.jpg)
Et l’extensibilité ?
https://github.com/styled-components/styled-components
![Page 15: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/15.jpg)
![Page 16: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/16.jpg)
State Management
![Page 17: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/17.jpg)
Le problème
Globals ou props hell ?
Side effects
![Page 18: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/18.jpg)
+ React-Redux+ Immutable.js
![Page 19: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/19.jpg)
Trois principes de Redux
● Single source of truth● State is read-only● Changes are made with pure functions
![Page 20: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/20.jpg)
En plus: Opérations asynchrones
![Page 21: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/21.jpg)
![Page 22: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/22.jpg)
En plus: moins de boilerplate
https://github.com/reduxactions/redux-actions
![Page 23: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/23.jpg)
En plus: Reselect
![Page 24: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/24.jpg)
Developer Experience
![Page 25: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/25.jpg)
En plus: redux-devtools
![Page 26: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/26.jpg)
Build lent en dev ?
![Page 27: Tour d’horizon de l’écosystème React-ien par Guillaume BESSON](https://reader034.vdocuments.pub/reader034/viewer/2022051710/5a64b6c67f8b9a824a8b467b/html5/thumbnails/27.jpg)
Hot Module Replacement