React is back baby!

Issue #28.December 28, 2020.2 Minute read.
Bytes

My Wife left me and my family isn’t talking to me because I had to learn about React Server Components over Christmas in order to create this issue. Worth it? No, not at all.

(joking, I had a lovely Christmas thanks for asking)

2020 Year in Review

Baby Yoda

Summoning the strength to look back on 2020

We did it. 2020 is almost behind us, and even though it’s been a tough, strange year, there’s still a lot to celebrate in JavaScript Land.

One of those things is the birth of this newsletter and the launch of ui.dev earlier this year. Thanks for reading and sharing and helping us get filthy rich off of ads. Wait, crap.

OK enough sappiness, let’s get to the highlights of 2020.

First, our joke of the year. This one came from Bytes #15 - React in the streets, D3 in the sheets.

“Are data visualizations the hottest thing to work on? Not really. But are they important? Also not really.”

Not super funny, but it’s the only joke that had multiple people write emails like this. Apparently Data Viz is Serious Business™.

Next, our favorite releases of the year.

  • Ryan Dahl (creator of Node.js) released v1.0 of Deno — a more secure and modern runtime for JavaScript and TypeScript that you’re probably definitely tired of reading about at this point.

  • Evan Wallace (co-founder & CTO of Figma) released ESBuild — a JavaScript bundler & minifier that’s “100x faster than everyone else” (his words). If you ain’t first, you’re last.

  • Sebastian McKenzie (creator of Babel) released Rome — a single toolchain that’s meant to replace Babel, ESLint, Webpack, Prettier, and Jest.

  • Airbnb released a new data data viz library called visx. This is a fantastic library and have I ever mentioned how Important and Serious and Necessary Data Visualizers are? They should get the vaccine first, IMO.

2020 was also a big year for milestone anniversaries: The Web turned 30, JavaScript turned 25, and AngularJS turned 10 (before Google announced it would be euthanized next year). Long live base-10 numbering!

Vercel made some big moves this year with the release of Next.js 10, SWR (another new data fetching library for React), and a new deployment platform. They also raised $21m back in April and another $40m earlier this month because apparently 2020 is also The Year of the YOLO in the ancient VC calendar.

And yes, GitHub has dark mode now.

The Bottom Line

2020 Winners: Server lovers, caching lovers, people who love how their face looks on Zoom, Taylor Swift fans (even with “no body, no crime” ruining the album).

2020 Losers: Regis Philbin fans. People who expected React 17 to actually have new features.

React Server Components

Dr. Dre

Y’all know me, still the same OG. But I been low-key

If you were to have asked me last week, I would have told you React is trending downward. And if you were to have asked me last week, I would have been wrong.

Like Michael Bublé, the React team decided to reclaim their position on the top of the charts over Christmas.

Meet React Server Components. Yes, React on the server.

OMG THEY JUST REINVENTED PHP LOL POGGERS

Stop it. Here’s how I like to think about it. Rendering on the server has benefits - mainly allowing easy access to data sources and quick first paints. Rendering on the client has benefits - mainly interactivity and making apps feel “appy”.

The problem is historically we’ve been stuck in an either/or situation. You either jump through ALL the SSR hoops to get a quick first paint (then hope hydration goes well) or you forget about SSR all together and hope your users are using Brave on a Macbook Pro.

With React Server Components, you no longer need to make those tradeoffs. Leverage the strengths of server/client rendering while avoiding the weaknesses.

Here are the details -

  • A component’s pathname now specifies whether it’s a server component (X.server.js), a client component (Y.client.js), or both (Z.js).

  • Server components run only on the server and they have no impact on the client’s bundle size.

  • Because server components run on the server, they have direct access to server-side resources (databases, file systems, etc).

  • Server Components preserve client state when reloaded. This is what makes Server Components different than traditional SSR with React. With traditional SSR, you send your app over the wire as a (HTML) string. Once React renders that string to the DOM, it throws it out and JavaScript takes over. Server components use a “richer” format than HTML. This format makes it so Server Components can refetch as needed and incrementally update the UI without blowing away state.

  • Server Components treat all imports of Client Components as potential code-split points. This means you get code splitting essentially for free since React will never ship a Client Component that isn’t immediately needed by the client.

The Bottom Line

React is back baby!

JS Tip

This issue is already long enough. So uh, don’t use nested ternaries regardless of how clever you think you are.

Cool Bits

  1. Radix Primitives is a low-level component library that’s focused on accessibility and easy customization.

  2. Tailwind Shades is a fun tool to help you generate color shades for Tailwind CSS. It could also be used to find that perfect shade of blush for the Kylie vs. Kendall Jenner online dress up game.

  3. If you still can’t get enough of React Server Components, Addy Osmani wrote a nice article on it too.

  4. W3Techs released the results of their 2020 Web Technologies Survey. TL;DR — WordPress is still dominating the CMS world (and still growing fast), and lots of developers are still using JQuery. Thoughts and prayers.

  5. Ryan wrote a really in-depth performance comparison of JavaScript frameworks. We typically don’t include hardcore performance stuff like this, but after seeing how much effort went into this one, we had no choice. Well played, Ryan.

  6. Umaar wrote an in-depth article that goes over ​a few techniques for selectively downloading/executing JavaScript, only when it’s appropriate to do so.

  7. Amazon released a new modular AWS SDK for JavaScript that includes TypeScript support and a few other new features.

  8. Snapdrop is a fun project that basically recreates Apple’s AirDrop feature for sharing files locally with your browser. It’ll be a great way to pass time at the airport, if we ever fly again (and if everyone else in the world starts using Snapdrop).