apidays LIVE Paris 2021 - APIs and the Future of Software December 7, 8 & 9, 2021 Measuring environmental impact reductions: A React-to-Svelte migration case study Gregory Pelletier, Web Developer Fullstack at Fairness

1. 23/12/2021
Measuring environmental
impact reductions
React-to-Svelte
migration case study

2. 23/12/2021
Who am I?
• Gregory Pelletier
• Senior web developper at Fairness.coop
• Twitter: @fairnesscoop - @ip512
https://fairness.coop

3. 23/12/2021
Disclaimer
• Don’t expect to have an absolute accurate metric
• Focus on being efficient
•Use technology when you really need it, not just because
you can and it’s hype

4. 23/12/2021
Should I measure anyway?

5. 23/12/2021
Should I measure anyway?

6. 23/12/2021
Of course you should!

7. 23/12/2021
Example of a web app optimisation

8. 23/12/2021
Tools used
• Lighthouse
– Performance analysis
– Can simulate a device with basic capacity
• Green IT analysis
– Provide eco index score
Analysis based on production builds, without SSR

9. 23/12/2021
Initial version (React)

10. 23/12/2021
Migration to a lighter framework:
Svelte
• What is Svelte ?
• According to svelte.dev:
– “Write less code”
– “No virtual dom”
– “Truly reactive”
• Svelte is a compiler, not a framework
• Basically, do the same as React / Vuejs but with lighter
js files, and less processing in the browser

11. 23/12/2021
Svelte growing adoption
according to The State of JS 2020
https://2020.stateofjs.com/en-US/
Satisfaction Interest Usage

12. 23/12/2021
New version

13. 23/12/2021
Performance results
React Svelte
Green IT analysis Green IT analysis
Eco-index 80.82 Eco-index 82.56
Dom size 74 Dom size 76
Page size 742 KB Page size 300 KB
Lighthouse Lighthouse
Performance 80 Performance 98

14. 23/12/2021
Conclusion
• Exercise yourself
• Consider metrics in your own context
• There is no silver bullet
• Other benefits to take into account
• Other optimisations like server-side code

15. 23/12/2021
Thank you