The Remix Roadmap

Issue #321.September 9, 2024.2 Minute read.
Bytes

Today’s issue: Managing Angular, manufacturing tech Twitter drama, and manifesting the devtools you want from the universe.

Welcome to #321.


Eyeballs logo

The Main Thing

LL Cool J holding a mic in a music video

Don't call it a framework

Remix Roadmap

The biggest news in JavaScript-Land last week was the revelation that chatgpt.com has apparently switched from Next.js to Remix.

Yes, it was a slow week – but it got us thinking about what Remix has been up to lately, and what’s coming next for the framework “ecosystem of principles, patterns, and packages.”

Luckily, Ryan Florence and Michael Jackson perfectly anticipated our needs and did a livestream last week to walk through The Remix Roadmap. Here’s what we have to look forward to:

  • routes.ts is a new (snip snap, snip snap) way to configure your routes in RR v7 (which is functionally the same thing as Remix v3). You’ll no longer use a file-based convention, and instead your routes will just be an array with syntax you’ve probably already become accustomed to over the years.

  • Type-safe routing - A benefit of routes.ts is that it’ll enable a much better developer experience with more intelligent type awareness throughout your application.

  • remix-the-web-project – Michael has been working on a new collection of packages where each does one thing well, is built on web standards, and maximizes interoperability. The idea here is that these packages can be used both with and without Remix, and they’ll all be as high quality as you’ve come to expect from the Remix team over the years. They already have a bunch including file-storage, form-data-parser, and headers, to name a few.

Bottom Line: With the pressure of running a business taken out of the equation, it looks like we’re all going to benefit from the Remix crew being able to focus full time on creating software for the web.

        

Convex logo

Our Friends
(With Benefits)

Pedro from Napoleon Dynamite sitting in the bath rolling his eyes

Me during standup on week 9 of the auth sprint

Convex is the One True Platform™️ for building full-stack applications

That’s a bold claim, but it’s the only platform we’ve seen that provides an open-source, type-safe backend with a realtime relational database – plus all this stuff:

  • Queries you can write as TypeScript that are automatically cached and realtime

  • Actions to schedule async jobs and call third-party services without affecting DB performance

  • Built-in auth that integrates right into your backend

  • Search, file storage, scheduling & crons, and about 50 other things

They’re also working on something big with TanStack Start, the new full-stack React framework from Tanner Linsley & Co. – so stay tuned. 👀

Try Convex’s free tier to see how it can help you ship faster than you ever imagined.


Pop Quiz logo

Pop Quiz

Presented by Datadog

Their free guide on Best Practices for Frontend Testing teaches everything you need to know about creating E2E tests, incorporating synthetic tests, and much more.

What gets logged?

let i = 0

function x() {
  i++
  return 10
}

i += x()

console.log(i) // ?

Cool Bits logo

Cool Bits

  1. The React Native DevTools were just announced at React Universe conf. You can’t use them yet, but if we all visualize using them, we can help manifest them into existence sooner. I learned that from The Secret.

  2. Minko Gechev wrote about his experience managing the Angular project for the past few years.

  3. QA Wolf’s AI-native testing approach helps your team do two very important things: 1) get 80% automated e2e test coverage for your application with a “zero-flake guarantee”, and 2) reduce QA cycle times from hours to minutes with unlimited parallel test runs, so your team can ship 2x faster, with confidence. Learn more here. [sponsored]

  4. Alex Anderson wrote about how he accidentally made his team’s website faster by switching to Remix – right on cue for last week’s Remix psyop.

  5. ESLint now ships its own types.

  6. Matteo Collina set up an SSR performance showdown, where he benchmarked React, Vue, Solid, Svelte, and Preact against each other. As expected, this caused zero controversy and everyone online was very chill and normal about it.

  7. Document Security is a CLI app (or library component) you can add to your application to give your users a simple way to add, remove, or change encryption and security settings on PDF documents. [sponsored]

  8. HonoX is a Hono-based metaframework built on Vite – not an unrated director’s cut of Hono with bonus features on DVD you can get at Blockbuster.

  9. Fotis P. released @svg-use, a set of tools and bundler plugins to ergonomically load SVG files as components, via SVG’s <use href> mechanism.

  10. Dave Kiss wrote about how PHP is the new JavaScript. Now we just need JavaScript to become the new Lindsay Lohan, and for Jamie Lee Curtis to become the new PHP – and Freaky Friday 2 will be ready for production.


Pop Quiz logo

Pop Quiz: Answer

Sponsored by Datadog

let i = 0

function x() {
  i++
  return 10
}

i += x()

console.log(i) // ?

The answer is 10. Here’s how it works.

For clarity, we can refactor i += x() to be i = i + x(). From there, the interpreter begins evaluating our code. Before it evaluates the function invocation, it seems that i evaluates to 0, so now our code is i = 0 + x(). The invocation of x returns 10, so now it’s i = 0 + 10, which gives us i = 10.

Note that if you swap the order of i and x() like i = x() + i you get a different value - 🫂.