Svelte vs. React vs. Angular - Why Svelte is more environmentally friendly

There are many frameworks and compilers out there, but which one is the most environmentally friendly, and which is the easiest to get started with? To find the answers we need to figure out how easy each framework is to get started with and how big the build size is once we push it to production.

In this article, we will talk about each framework and the possible environmental impact it has when using them for bigger web applications. There isn’t much focus on making the internet more sustainable and that’s why we open the topic. The more developers and website owners we get on board the green road the less the internet will set its print on our yearly CO2 emissions.

What is the difference between a framework and a compiler?

A framework is known to be a skeleton where we will build our web application or software. Frameworks often contain lots of unused functions, a compiler, etc. A framework only defines the concept of a web application and the web application itself defines the end product. Many web developers today are using frameworks to build larger web applications since in many cases are easier. Frameworks such as React and Angular are very popular and they give developers many useful tools, but it also forces you to use defined methods such as Virtual DOM.

A compiler on the other hand is not a framework. A compiler only takes care of compiling your code into understandable code the web browser can use. This means that with a compiler alone we don’t get forced to use Virtual DOM or predefined functions in order to make things work. Some compilers have predefined methods that allow us to obtain certain results but we are not forced to use them. Compilers are used for many things such as Typescript, Svelte, and WebPack and they allowed us to write more secure code, lower the file size of our production bundles and be more free writing our projects.

What is Svelte?

Svelte is a modern and different approach to building web applications. Frameworks such as React make use of a virtual DOM and most of what is happening is happening directly in the browser. With Svelte it is different. Svelte is a compiler and that means all the action happens directly in the development stage instead of in the browser. This means that once the compilation is done, your whole web application would have turned into code that can be used by a browser.

What makes Svelte different from other frameworks is that it also makes use of the DOM instead of a virtual DOM. This means everything that has to be displayed at some point in your web application will be present in the DOM. In for example React, elements that aren’t needed won't be rendered.

Svelte is easy to get started with and it is very powerful. If you are interested in learning more about Svelte and seeing which opportunities you have using this compiler, then take a look at their website https://svelte.dev.

What is React?

React is a framework made by Facebook and it makes use of the virtual DOM. A virtual DOM only renders what needs to be seen or used on the page. React is very popular and often used by developers to create interactive web applications where elements update dynamically. To pick an example, then if you put together React with web sockets then you have a powerful chat that works on both mobile, tablets, and computers.

React is a bit different from using the normal DOM and therefore the learning curve is a bit steeper compared to using Svelte. When learning React you need to learn how you can manipulate the virtual DOM into doing what you want.

If you are interested in learning more about React then you can find the complete documentation on their website: https://reactjs.org.

What is Angular?

Angular is a web development platform built on Typescript, made by Google and it includes a component-based framework, libraries, and testing tools. Today around 1,7 million developers around the world are using Angular and more will come over the next years.

Just like Svelte Angular makes use of the real DOM, but the difference is that Angular is both a framework, library, and testing tool whereas Svelte only is a compiler. Angular has tools that keep track of changes in your code and states in order to update the DOM.

If you are interested in learning more about Angular, then you can find complete documentation on Angular's website https://angular.io

What is the environmental impact on our bundle sizes?

By researching online you will quickly find the answer that 1 gigabyte of data being downloaded results in approximately 0,478 kg CO2 being emitted. With this calculation, we can easily figure out if React, Angular or Svelte is the most environmentally friendly solution for you to use.

To break down the calculation from 1 gigabyte, we can say that 1 megabyte of data equals approximately 0,0004668 grams of CO2 and 1 kilobyte is 0,00000046 grams of CO2. These numbers might not sound like much, but when calculating the number of visitors your website has every year, then the number becomes bigger. You also need to take into consideration that these calculations are only based on the bandwidth from WiFi in general terms and not the mobile network. Emissions will be greater over the mobile network.

React:

The production bundle size varies a lot depending on the project, therefore it is not possible to build a calculation based on that data. Instead, we are using the Hello world project as a result. The react hello world bundle size is 6.3KB. With this number, we can conclude that the hello world would emit 0,00000287 grams of CO2 each visit. If you then have 10.000 visitors every year it would be approximately 0,02898 grams of CO2.

Angular:

The production bundle size also varies in Angular, therefore we researched a bit and figured that the hello world bundle size is about 180.3KB. With that number, your hello world would emit 0,0000828 grams of CO2 per visit. And with 10.000 visitors in a year, your hello world web app would emit 0,82938 grams of CO2.

Svelte:

Also with Svelte production bundle sizes seems to vary. Therefore we went with the average hello world size which is 3.8KB. This means that your hello world Svelte web app would emit 0,00000175 grams of CO2 per visit and with 10.000 visitors in a year, it would be 0,01748 grams to support the bandwidth.

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.