Nick Bull Blog

Nick Bull Blog

I Tried to Use ReactJS for a One Page Site and THIS Happened…

I Tried to Use ReactJS for a One Page Site and THIS Happened…

Featured on Hashnode

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:

Image for post

Code is also very simple.

HTML:

Image for post

CCS:

Image for post

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.

Image for post

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.

Image for post

Click “Generate Report” button.

Image for post

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.

Image for post

Chad will use the same code as Brad.

Image for post Image for post

Web site is ready. Time to bundle it.

Image for post

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…

Image for post

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

Image for post

Chad

Image for post

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 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 check me on Twitter.

🔴 🔴 Every week, I send out my “3-2-1” newsletter with 3 tech news, 2 articles, 1 advice, and 1 Secret BONUS for you. Join my 3-2-1 Newsletter

#reactjs#web-development#javascript#frontend-development#newbie
 
Share this