SustainableWWW Logo
Blog post image

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

There are many frameworks and compilers out there, but which one is the most environmental 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 aren’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 contains 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 it in many cases are easier. Frameworks such as React and Angular are very popular and they give the 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 it allowed us to write more secure code, lower the file size of our production bundles and be more free writing our projects.

What is Virtual DOM and what is real DOM?

A virtual DOM like the one we are using in React, is a DOM that does not exist before it is being used. You have probably tried clicking links on a dashboard before and the web browser does not refresh the page. Instead it is simply removing the old content and inserting the new. What this means is that elements might not exist in the DOM before they are required or shown. This comes in handy when creating web applications with multiple pages, since the other pages wont be added to the DOM before they are needed or requested. Using this method comes with advantages but also disadvantages such as it is harder for search engine robots to index your website this the material doesn’t exist.

Luckily search engine robots have gotten smarter over the years and the developers behind React and Angular have implemented methods to make it easier to index your website. Therefore it is possible that you can create a whole website using a virtual DOM and still get it indexed, but it not guaranteed every search engine robot out there know how to navigate a virtual DOM.

The real DOM is simply what have always been here. Since the beginning of the internet we have been using the real DOM to display websites. When entering a website HTML code will be rendered in the browser and if you use your web browsers inspector you will find all the code for a given page displayed in the DOM. This means all of your code will be rendered directly and everything will exist in the DOM even though it is not yet required. Svelte makes use of this and even though markup is still placed in the DOM you can still hide elements until they are required or needed (Same method as with the React router).

What is Svelte?

Svelte is a modern and different approach to building web applications. Frameworks such as React makes 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 wont be rendered.

Svelte is easy to get started with and it is very powerful. If you are interested in learning more about Svelte and see 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 full documentation on their website: https://reactjs.org.

What is Angular?

Angular is a web developer 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 tools whereas Svelte only is a compiler. Angular has tools that keeps 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 a full documentation on Angulars website https://angular.io

What is the environmental impact on our bundle sizes?

By researching online you will quickly find the answer that 1GB data being downloaded results in approximately 3KG CO2 being emitted just from the bandwidth. With this calculation we can easily figure out if React, Angular or Svelte is the most environmental friendly solution for you to use.

To break down the calculation from 1GB, then we can say that 1MB of data is equal to approximately 2.9 grams of CO2 and 1KB is approximately 0.003 grams of CO2. These numbers might not sound like much, but when calculating the amount of visitors your website have every year, then the number becomes big. You also need to take into consideration that these calculations only build on bandwidth and not the power consumption from every visitors device or the electricity needed to power the servers or routers.

React:

The production bundle size varies a lot depending on the project, therefore it is not possible to build a calculation from. Therefore 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,0189 grams of CO2 each visit. If you then have 10.000 visitors every year it would be approximately 189 grams of CO2just from the bandwidth.

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.54 grams of CO2 pr visit. And with 10.000 visitors in a year your hello world web app would emit 5.4KG 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.01 grams of CO2 pr visit and with 10.000 visitors in a year it would be 114 grams to support the bandwidth.