Hello world!

My name is Krzysztof Pietraszek and I work as a frontend developer for Netguru.

Blog

Which frontend framework is the most eco-friendly?

Being eco-friendly is really trendy nowadays. Both individuals and enterprises are trying to be more green. As a society, we have moved from plastic straws to paper or noodle ones in just a few months. Big chain stores like Lidl are trying to greenwash themselves by reducing plastic in their plastic containers. The trend is that significant and beneficial that petrol companies are changing their brand colors to literally green to appear as more eco. As you can see, it really got out of hands in many cases. And it made me wonder if every industry will be affected by it? Is it even possible to make web development more green? Let’s find out.

Green Internet

There is an assumption that certain processes are more eco-friendly when moved to the online world. But are they? It really took me by surprise but the oldest report that I found on “green IT” was published in 2010. Even though the research doesn’t go into many details and it doesn’t split web companies like Yahoo or Facebook from hardware ones like Microsoft or Apple, it shows how energy-demanding the IT industry is. The next few reports on this topic made by Greenpeace focus mostly on what source of energy the IT companies use and how it affects CO2 emission, so let’s skip that, and let’s move on to 2012’s report named How Clean is Your Cloud?. This research is interesting because it indicates how critical web performance is in relation to energy consumption and from this point, we can’t call software green if it performs poorly. It is explored even more deeply in a book from 2016 called Designing for Sustainability and adds a mobile-first approach to the green requirements as mobiles are more eco-friendly than standard computers. Having discussed what metrics define the “greenness” let’s move on to benchmarking

Benchmarking

As base projects we will use nothing else than the mother of all demo apps: Real-world apps and to get the final metrics we will use surfgreen as it provides information about CO2 Emission and burned coal

FrameworkPerformance scoreProgressive Web App ScoreGreen Efficiency ScoreNumber of transferred mega baits to load the pageGrams of burned coalGrams of CO2 Emission
Angular844893025
React + Redux843794014
Vue + Vuex8910093025
VanillaJS933394014
Next795694014
Nuxt885292025
AngularJS473790127

Conclusion

Looking at the table it’s clear that angularJS is the biggest loser but it’s hard to point out one winner. VanillaJS has the majority of “wins” but we all know that writing in pure js can be time-consuming and it doesn’t scale as well as react or vue. Thanks to webpack all of the modern js frameworks are pretty light and the differences between them are so small that we can omit them. I would say that as long as you don’t use jQuery, you don’t use million items for loops and, in general, you keep the app's performance in your mind you can, without a doubt, call yourself an eco-friendly developer.