The Eras of React
Today’s issue: Vite’s Four Loko budget, a tricky schema scheme, and the bougiest club in JavaScript.
Welcome to #172
The Main Thing
When all your Webpack knowledge is worthless now.
The Eras of React
Last issue, to celebrate Taylor Swift officially kicking off her Eras tour, we broke down The Eras of Electron. And because it never goes out of style, we’re going to do the same thing today, but for React.
~2014: If you lived through this era of React, you probably have an anal fissure you can’t get rid of. This was the interop era. Few were fortunate enough to greenfield a brand new app, so we were left with mashing React into a bigger (usually a Backbone) application. Back in the day, this was one of the big selling points of React.
~2018: This was the BYO-Architecture era. SPAs were all the rage and if you were lucky, you had someone on your team with a poor documentation kink so you could skip configuring webpack yourself. Not to mention you probably used a 15kb library to wire up a form. Yes, the ecosystem was a mess and yes, it was confusing to mash everything together. But once it was setup, React’s your view is a function of your state mental model made it all worth it.
2023: …And SPAs are dead – apparently. When React released their new documentation last week, conspicuously missing from the “Start a new React project” section was anything related to SPAs (or Vite, the modern Webpack). Specifically, they mention “If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community” then they go on to recommend Next.js, Remix, or Gatsby. What was once the default way to build React applications has now become the exception.
To understand why that is, you have to understand the React team’s vision. You’ve probably heard of React Server Components. What you probably haven’t heard of is how the React team describes them – as “a new application architecture”. RSC is more than just “rendering components on the server” – it’s an architecture, and one that would be very difficult to create yourself. Hence, frameworks.
The React team can work closely with a few frameworks (right now that’s Next.js) in order to create the proper architecture that supports everything the React team has been working on the last 5+ years – including Server components, Suspense-y asset loading, off-screen rendering, and an optimizing compiler.
Bottom Line: They say all’s well that ends well, but we’ll see how this plays out for React.
    |
Our Friends
(With Benefits)
Who's excited to build out notifications??
Courier makes notifications a breeze
There are two things I wouldn’t wish on my worst enemy: 1) getting put on a project that uses Flux, and 2) building a notification system from scratch.
Thankfully, Courier’s got you covered (for the second one, at least). Their notification API lets you easily manage templates and routing logic for over 50 service providers like Twilio, Sendgrid, APN, Firebase, and Slack — all from one centralized platform.
It takes care of all the security and scalability stuff for you, and makes it easy for anyone on your team to quickly add new channels and change providers.
Companies like Lattice and LaunchDarkly used Courier to save an average of 480 engineering hours a year. One CEO said that, “it’s probably saved us more pain (and time!) than any other single platform that we use.”
Check it out — and send your first 10,000 notifications of every month for free, no credit card required.
Pop Quiz
Sponsored by Datadog
Their Frontend Testing Best Practices Guide covers everything you need to know about eficiently creating and maintaining E2E tests.
What gets logged to the console?
const res = ["👨", "", "👩", "", "👧", "", "👦"].join('')
console.log(res)
Cool Bits
-
Jake Archibald wrote about how you can Cut the size of your images in half by optimizing for high density displays. Cutting images in half is something I haven’t done since 13 year old Tyler got his heart broken by Tara in middle school. F you Tara, look at me now.
-
Unlayer created this plug-and-play editor and page builder for your SaaS application. It’s embeddable, easy to set up, and will save you weeks of dev time. [sponsored]
-
The PlanetScale team created a free MySQL course. Is this a scheme to try and get you to eventually pay them to use their MySQL database? Probably. But we can ignore that as long as they refer to it as a schema scheme.
-
John Reilly wrote about his experience Migrating from ts-node to Bun.
-
Marvin Hagemeister continued his series on speeding up the JS ecosystem by schooling us all on how to optimize your npm scripts for 95% less overhead.
-
The Vite team just opened up this GitHub discussion to get feedback and ideas from users for the next Vite release. So far, it feels kind of like your standard HOA meeting, except there’s less screaming and also it’s not catered by Four Loko.
-
Rich Harris spoke on a Svelte Society livestream about how you can now use streaming promises in SvelteKit. Also, The Svelte Society sounds like a bougie country club where wealthy people discuss geopolitics and fine art. I bet they have multiple flavors of Four Loko on tap over there.
-
GitHub just announced Copilot X, which comes with a bunch of new features to help you
train your AI replacementI mean,increase Microsoft shareholder valueI mean, be more productive 😇.
What gets logged to the console?
const res = ["👨", "", "👩", "", "👧", "", "👦"].join('')
console.log(res) // 👨👩👧👦
It’s the ”👨👩👧👦” emoji.
This works because the Unicode standard supports mapping individual emojis with zero-width joiners to create new emojis. In our case, taking individual emojis and joining them to get a family emoji. Wow programming.