Bytes #84 - Swimming in Gravy

This week, we’ve got a breakdown of the Remix vs. Next.js battle royale, new TypeScript updates, and lots of programming buzzwords that we think are real — but at this point we’re too afraid to ask. Welcome to #84.

Napolean Dynamite Meme

Come down here and see what happens if you try and hit me.

Remix vs Next.js — The Showdown

Let’s get ready to rumble… Remix threw down the gauntlet last week with a 6,700 word essay on why they’re better than Next.js. It’s well-written but super long, so we made this 13-second video summary for you.

How We Got Here: Remix is a React meta-framework that’s SSR-only and was created by the folks behind React Router. It’s “edge-first,” able to deploy anywhere, and has gotten lots of hype since it launched v1 in November.

But how is that different from Next.js? Turns out, the Remix team was tired of literally everyone asking that question, so the article uses lots of nuanced measurements to directly compare a Next.js app and a Remix app. From there, they shared the following scientific conclusions:

Remix is faster
Next.js is slower
Remix’s dad could beat up your dad

HOW? The Remix app server-rendered every single page, instead of using SSG. They could do this faster than Next.js because they cache their data “at the edge” with a Redis database and also run their servers “at the edge.” (Not everyone agrees on what “the edge” actually means, but just imagine servers close to users.)

But at what cost? Is “best-in-class performance” really worth it if you have to run a distributed server and a distributed database and a Redis cache? That Remix example even included a Docker Compose file — and now I’ve got Egghead pushing Docker courses for Remix devs on my timeline. At least we all got our Master’s Degrees in Distributed Systems, right? 💀

Remix is on to something, though — hosting sites closer to users does provide a better experience, and Vercel knows it too. Soon, Vercel will follow Remix over the edge by providing edge-rendered sites, thanks to their new Edge Functions feature (AKA two Cloudflare Workers in a trench coat). All the speed and flexibility of edge-rendering without all the extra infrastructure sounds pretty nice right now.

Bottom Line: When frameworks compete, developers win. When frameworks have raised mountains of VC cash, they tend to compete a little harder. Personally, I’m still just waiting for this livestream to happen.

Raygun Spiderman meme

The only pair programmer I’ll allow [sponsored]

Raygun gives you X-ray vision

…for your code. Now stop looking at me like that.

Raygun is a super powerful tool that makes it easy to get all the diagnostics you care about for your team’s web and mobile apps. When there’s an issue, it shows you exactly what’s going on, who’s being impacted, and exactly how to fix the root cause – down to the specific line of code itself.

This X-Ray Code Vision lets you quickly prioritize fixing the issues that have the biggest impact on your users, so that you can quickly return to watching Spider-Man 3 starring Tobey Maguire (aka the greatest film of the 21st century).

Start a 14-day free trial of Raygun and give your team a tool that’ll genuinely make their lives easier. It only takes a few lines of code, and their simple usage-based plans start at $4 a month – a small price to get your users to love you, your team to love you, and your stepdad to finally respect you.

Try it out. Thank me later.

TypeScript Meme

better type inference with indexed access types

TypeScript 4.6

TypeScript just announced its v4.6 beta — but unlike our last story, they didn’t even write a blog post calling out one of their rivals by name (boring). Hopefully they’ll fire up the hot take machine soon and write that scorching “TypeScript vs. Flow” blog post we’ve all been waiting for (since 2014).

In the mean time, there are a lot of new features and improvements in TypeScript 4.6. Will you notice most of them? Probably not, but here’s the highlights:

TypeScript now warns you about more errors, like duplicate const statements or using a static import inside a function.
If you’re writing extended classes, you can now write code before calling super(). Previously, you couldn’t include any code before super(), since you needed to call super() before accessing this. We warned you this would be dry but here you are, still reading - good on you.
TypeScript has better performance when doing recursive type checks, like with types that appear to be infinitely nested inside themselves.
There’s better type inference and type checking when working with indexed access types and dependent parameters. We don’t know what that means either but hey I’m sure it’s great.

Bottom Line: It’s another solid release for TypeScript — but Zuck just told me that Flow already had all these exact same features years ago. I guess it’s time for him and Satya to take a page out of the Remix vs. Next.js playbook and settle this once and for all… by writing long blog posts and subtweeting each other while pretending they’re on the same team.

Cool Bits

There’s a new Chrome DevTools feature that lets you record, replay, and measure user flows. I can’t tell if this feature will replace 50% of a product manager’s work, or result in 50% more product managers getting hired. Probably both.
Kyle Simpson (AKA Getify AKA Mr. LinkedIn) wrote an Expansive Intro to Monads. After reading it, you’ll probably still have some questions, like What are Monads? and Is that even a real word? But I’m pretty sure that’s the point — no one knows what it means, but it’s provocative. It gets the people going.
TinyBase is a new, “smarter way” to structure your application state with a more database-like approach. If this thing catches on they may even get their own “Remix vs TinyBase” hit piece.
Deno 1.18 was just released, and it comes with a fancy new Web Cryptography API. If you’re confused about what a Web Cryptography API is, please re-read the last sentence of Cool Bit #2 for an explanation.
Orta Theroux (from the TypeScript team) created 4 helpful-looking TypeScript cheat sheets. But if the professor catches you using them on the midterm, you DID NOT get them from me, ok? I need this class to graduate.
Josh Comeau wrote a good post about How to Make Beautiful Gradients. But all I could think while reading it was, “Is there anything on this website that’s not swimming in ~~gravy~~ gradients?”
Simple.css is a classless CSS template that lets you make good looking websites quickly. Now all you need to do is add a few gradients, upgrade to Deno 1.18 for the Web Cryptography API, get your recursive type checks going with TypeScript 4.6, throw in a few Monads (sounds right), and migrate to Remix — along with its requisite distributed server, distributed database, Redis cache, and Docker Compose File. Then, you’ll finally have a simple, modern web site for your personal blog. Was that so hard?
Dioxus is a new Rust framework for building UI’s that’s heavily inspired by React. Because there are only three guarantees in life: Death, Taxes, and Rust. Salad Fingers tried to warn us.