Satire disclaimer: This article is as much satire as it is serious insight if there is even any of that at all. Don’t take it too seriously, but do tell all your friends. Also, the bit about Taco Bell is 100% true. I wouldn’t joke about something like that.
My day usually begins like this: I wake up at 6:15 a.m. (kill me) to get the kids ready for school. They’re mad. I’m mad. Everyone is on the brink of an emotional breakdown because it’s 6:15 in the morning.
Usually the first thing that I do when I wake up is roll out of bed and start hammering out pushups like Christian Bale.
Before I’m even fully awake and out of bed, I grab my phone and look at Twitter. It’s a sickness, I know. I’m not proud of it but at least I’m out here admitting that I have a problem and I believe according to the rules of science that fully negates my problem and makes me better than you.
One morning a few weeks ago I wake up to this tweet…
Removing client-side React.js (but keeping it on the server) resulted in a 50% performance improvement on our landing page pic.twitter.com/vM7JhWhYKu
— Netflix UI Engineers (@NetflixUIE) October 26, 2017
The wonderful thing about Twitter is that there is essentially zero context for anything you see, which means your crazy brain gets to fill in all the holes and, in my case, that’s a recipe for utter disaster.
Here is how I read this tweet….
I believe my brain read it that way because that’s literally what the original tweet says. My brain just adds the “Your whole life is a lie” part to pretty much everything I read or hear.
Your Whole Life is a Lie
This immediately dumped me into an existential crisis.
To be fair, I’m almost constantly in a state of crisis so it’s not like this was a big leap for me. Just last night at Taco Bell I had to choose between the Beefy 5-layer Burrito and the Cheesy Gordita Crunch and I almost came apart in the drive through. You can’t force decisions like that on people and expect an immediate response! And why do I need 50 packets of Fire sauce!?!
The point is that I’m kind of emotionally fragile as it is, so you can’t suggest to me that you got rid of React because all of a sudden people just don’t need it anymore.
I had so, so, so many. questions like:
- What about binding?
- What about components?
- What about state?
- What about templates?
📝 Netflix “removed” React and improved performance.
➡️ Despite appearances, this reflects well on React.https://t.co/R8SohrLX6q
— Jake Archibald (@jaffathecake) October 31, 2017
THIS IS NOT HELPING, JAKE! I’M LOSING IT OVER HERE!
The post goes on to explain that Netflix is actually deferring client-side React until it’s needed and going with server rendered React in the meantime. He also points out that it’s only logical that it would be faster because the browser is doing less work. Netflix is apparently loading client-side React in the background. It’s there when you need it, but you don’t have to parse it if you don’t.
I decided to check this out and see for myself what is going on.
One of the places Jake mentions that server-side React is appropriate is on the login screen. So let’s start there. I loaded the login screen and it looks to me like client-side React is still every much in effect here.
As an aside, Netflix is great at naming things. I mean, look at these components—
FreezedWrapper isn’t that exciting but you can’t take
AkiraLayout from me.
So I can’t find where React has been removed. The login page itself comes in at around
194KB and that’s before it loads the
loginController.jsx file which bumps it up another
I then did what I should have done the first time which is to watch the video from Netflix that was responsible for this descent into the depths of my insecurity and I noticed that they only mentioned the splash page.
And there is your context. So let’s fix the slide again…
That is the actual story here.
It’s unfortunate that we latch on to a single slide taken completely out of context. This is not the fault of Netflix. Or maybe it is. I mean, they did tweet it out but, look, this is really the fault of 2017. This is how all of the news in our lives plays out.
What’s super unfortunate here, and what Jake was trying to convey in his post, is that we completely missed some actual cool things that Netflix is doing. Mainly the combination of server-side React and Prefetching. Or rather the idea that more complex code can be downloaded and parsed in the background instead of when the page loads.
Prefetching is Not a Solved Problem
We tend to forget that things like prefetching are not necessarily a solved problem. While Service Workers are awesome, Netflix can’t use them because the support is too sparse. Beyond that, the browser Prefetching API is flaky. In that same presentation, Netflix reports that the API (which is just the link tag) has a success rate as low as a 30%. That means your prefetch will only work about a third of the time in some cases. 😳
The reason for this is that the API is trying to make a bunch of decisions about whether or not it should prefetch depending on your device and resources. It’s not a guarantee that your resources will be loaded at all.
What’s most remarkable to me is that Netflix hit on another solution that is so simple it hurts: just make an AJAX call and don’t do anything with the result; the browser will cache that resource.
MY GOODNESS I LOVE THE WEB!
You Uh, Still Need React
So yes, you still need React on the client-side. Netflix is still using it and never said that they were not.
What they did say was that they had figured out some creative ways to make the experience better for the user and had combined that with their current React implementation. This should be exciting to you if you’re a React developer.
Maybe Netflix will open source some library for prefetching with a way cool name. Is “fakenews.js” taken?
Special Thanks to Brian Holt who reviewed this article and was still willing to be my friend.
Feed Source: CSS-Tricks