I Tried to Use ReactJS for a One Page Site and THIS Happened…
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 created a simple website:
Code is also very simple.
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.
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.
Hmm, results pretty much the same.
1.3s vs 1.6s
Let’s go to the Network tab and look at how our assets loading.
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.
Imagine 10 seconds of white screen on pure internet connection.
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