Lesson 16 - Sustainable Web Design In 20 Lessons

React has become something most web developers love. It makes creating whole JavaScript web applications such as dashboards and websites much easier and faster. I found it quite confusing in the beginning. The way you were supposed to handle specific scenarios was so far off compared to what I was used to. It took me a long time to get the hang of the language, and it was first after trying to build a whole web application that it came to me. The thing I was struggling most with was the way you handle events.

Let’s say I wanted to add a to-do item to a list and make a popup disappear. It was logical that I had to add the item to the list, which would refresh it, but how I could change the state to make things appear and vice versa was new to me. It was not that I didn’t know how to change the state, but it was a new way of thinking for which I got to wire my brain. I struggled with it for a while, but as with most things, it suddenly said click, and I knew the ins and outs. Since then, React and other JavaScript frameworks have grown on me, and it is hard to see myself creating bigger web applications without these frameworks.

One thing is to learn the ins and outs of React, but another is to get so acquainted with it that you can build highly optimized web applications. In this lesson, we will discuss why optimization is important, and I will share some tips I learned while working with React.

React is a relatively big framework built by Facebook in 2013, and since then, it has been growing in popularity. Today React is one of the most used frameworks to build web applications, and it will not likely decline soon. Over the years, the React team added many new features and functions to make your development faster and easier. But all of these features come with a cost, which is the overall weight of the framework. React is quite good at removing things that aren’t being used, so it is not like adding jQuery to your project, where you will get the whole package even if you only use a little. But you still have to get the basic required packages for React. So why is it essential that you optimize your React web applications? Like with websites built of HTML, CSS, and JavaScript, you need to focus on weight and performance. Optimizing your React web applications will result in

1. Your web application gets faster.

2. Your web application will use fewer resources.

3. Your web application will become lighter.

4. Your web application will pollute less.

At Sustainable WWW, we made a study to figure out which of the most modern frameworks were the heaviest. To figure this out, we decided to create a “Hello world” project with no extra packages included. This way, the projects would contain the same code, no CSS, and no additional packages. This would allow us to see the overall compiled weight by building the famous “Hello world” project. The results came as a surprise. On the internet, you find articles stating that the Virtual DOM, which React uses, is lighter and faster than the regular DOM. But what the results showed us is a different story. The winner was Svelte, a compiler allowing you to write JavaScript code almost like you would with React. Instead of functioning like React, Svelte would compile your code into regular JavaScript, which would then be processed in the web browser.

The result we came up with looks like this:

1. Svelte: 3.8 kilobytes

2. React: 6.3 kilobytes

3. Angular: 180.3 kilobytes

So what did we learn by doing this experiment? We learned that Svelte was simpler to write, much faster at compiling, and faster at processing in the web browser. It was much lighter than the React “Hello world” project.

Now that we have established that React can become quite a heavy framework and also why it is important to optimize it, we can now look at ways you can optimize your code. This lesson doesn’t contain all the tips available on the internet, but I have put together those I found most helpful. I also encourage you to search on Google to see if you can find more useful tips and tools. The better optimization you do, the better results you will see.

The first tip I want to introduce you to is the one I found most helpful over the years. Splitting your code into chunks allows your web application to import and process the needed chunks from your code. Let’s say that you have divided your code by page. When a user visits your start page, they will only load the code associated with that page. Elements from other pages will not be included unless the user navigates to those pages. It works the same way as traditional websites; you only load the data you need.

Before chunks became available in Webpack, you were only exporting one file, which meant that each time users visited your web application, they would have to load all of the pages and elements at once, which could be heavy and take a long time. The upside to that approach is that after the initial processing, every new page and element load instantly. The downside was that web developers didn’t have any wiggle room where they could reduce the amount of data their users downloaded with the split chunks that became available. Instead of loading all the data, only parts of it were downloaded, which saved lots of data for the users that only visited a single page.

Splitting your React code into chunks is easy, and it doesn’t take much time to set up in Webpack. You can use React’s lazy function to precisely control what parts of your code get split into chunks. It will tell Webpack to split the specific component into a chunk and only load it when needed. If you are interested in learning more about chunks, you can continue reading on Webpack’s website, where you will find more information.