We have two developers Brad and Chad.

Both guys were given only 1 task.

Create One Page Resume Website.

Brad is a smart guy. He chooses technologies based on the problem he wants to solve.

Chad is just a guy who loves ReactJS. Yes, that's all about him.

Let's take a look at how they will do this.

Brad

Brad created a simple website:

Code is also very simple.

HTML:

CCS:

To make it publicly seen he should deploy it.

But first, he needs to minify his website to make it ready for production.

He chooses Parcel for this job. Smart choice.

Now he has public folder with a minified source code of the website.

Time to deploy.

He chooses Netlify for it. Also smart choice.

Result: Brad's website

Ok, interesting part right now.

Let's see how long does it take to load Brad's website on the mobile device.

Open Dev Tools and go to the Lighthouse Tab.

Click "Generate Report" button.

We are interested in only 1 parameter - First Contentful Paint.

1.6s. Nice Brad.

First Contentful Paint measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page.

Now, let's compare this result to Chad's website.

Chad

As I said Chad in love with React and he will use it to create the exact same website.

He chooses Create React App as a starting point.

Chad will use the same code as Brad.

Web site is ready. Time to bundle it.

And deploy it to Netlify.

Result: Chad's website

Ok, let's measure loading speed on the mobile device.

Open Dev Tools. Go to the Light House Tab. Click "Generate Report" button.

And…

Hmm, results pretty much the same.

1.3s vs 1.6s

Not bad.

Let's go to the Network tab and look at how our assets loading.

Brad

Chad

Seems like Chad's website loading 39KB of JavaScript files.

That's React and content of the website.

Browser needs to load, parse and execute whole JavaScript file to show website content.

React traverses the component tree, computes the initial mount state, and pushes it to the DOM.

It's ok for now. File is pretty small.

But as our bundle will become larger (and it will). We will notice a white screen displayed before javascript is actually loaded.

Imagine 10 seconds of white screen on pure internet connection.

Real-world example:

Recruiter finds your resume on Linkedin.

Go to your 1-page resume website.
Recruiter is waiting for your website to be loaded. Files too >large. Pure Internet connection.

Recruiter has no time for it. Recruiter closes it.

You are not invited to an interview.

Now you can see what happens when you choose a technology that is not suitable for a particular problem.

You don't need to use React all the time.

Choose the technology wisely.

Be like Brad.

In the end

🔴 If you like this article share it with your friends and follow me on Twitter

🔴 Get more coding tips, job interview advice, and the latest tech news. Join my Newsletter

That's all. Thanks!