Svelte vs. React vs. Angular — Why Svelte is more sustainable
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
To read the full article and see specific statistics on which of the three that are most sustainable, please click the link below to be redirected to our website: https://sustainablewww.org/principles/60c1cd3239b65e0023a6d897
