Jacob Paris
โ† Back to all content

#22 Remix Dev Tools, and everyone goes v2 โ€“ Remix Community Newsletter

Remix Dev Tools, and everyone goes v2

Hey folks, Jacob Paris here with another issue of Moulton, the Remix Community Newsletter!

Let's get to it!

Featured ๐Ÿ”ฅ Remix Dev Tools

The Remix Dev Tools have made crazy improvements over the last month thanks to Alem Tuzlak

There's now a custom dev server as a drop in replacement for remix-serve to make it easier to set up, but you can still integrate it yourself

On each request, it'll show you

  • the loader/actions that were hit
  • server timings to profile slow responses
  • cache/cookie info
  • any errors or redirects that were thrown

One new feature is that you can inspect the components and routes in your app and jump straight to the source in VS Code, which is super helpful for larger projects with lots of files.

https://github.com/Code-Forge-Net/Remix-Dev-Tools

๐Ÿ”ฅ Everyone goes v2

Remix launched v2 this month, which removes the v2 feature flags to lock each new feature in as the default for new apps. Outside of the flagged features

  • the Remix dev server now supports native ESM
  • there were a few changes to the names of some types, like LoaderDataArgs
  • the React peer dependency was bumped to 18, dropping support for 17

remix.run/blog/remix-v2

๐Ÿ”ฅ Insider scoop from Remix

After the v2 launch, the hot topic is what's coming next for Remix in v3. Here's a few glimpses into the what the Remix team has been working on lately.

Brooks is collecting examples of folks using Remix in production for an unnamed Remix project

If you're using Remix at work, add yourself to the list here:

github.com/remix-run/remix/discussions/7503

๐Ÿ”ฅ Track your server performance with Hydrogen

Hydrogen is Shopify's Remix based headless ecommerce framework, and Helen Lin created a flamegraph viewer for Shopify Hydrogen backends.

It uses Server-Sent Events to stream profiling data from the server to the browser where it shows how long each storefront query and cache request took in a flamegraph.

github.com/Shopify/hydrogen/discussions/1314

๐Ÿ”ฅ Remix on Bun

Bun took Twitter by storm this month with a heavy launch, and there was a landgrab to see what could be ported to it.

Bun is many things: a package manager, a build tool, a bundler, and a server, so it's never actually clear what someone means when they say "I ported X to Bun"

Many devs have found instant performance improvements using Bun's package manager over npm, but Sergio took it to the next level with an example of using Bun's server to run a Remix app

github.com/sergiodxa/remix-on-bun

๐Ÿ”ฅ Remix Auth TOTP

Daniel Kanem has released a new Remix Auth strategy for TOTP (Time-based One-Time Passwords), now built on top of Epic Web's TOTP package

Any app using Remix-Auth can install the package and get 2FA out of the box

Plus it comes with example integrations for Conform, Sonner, and React Email

totp.fly.dev

๐Ÿ”ฅ Metronome Analytics for Remix

Metronome is an analytics service built with Remix for Remix, and it's now in open beta for everyone to try out

You can track your visitors, sessions, views, and bounce rates and keep an eye on your Core Web Vitals over time

There's a generous free tier but during this beta period the full feature set is available to everyone for free

next.metronome.sh

๐Ÿ“„ Next.js vs Remix

Prateek Surana built a Twitter clone in both Next 13 (using React Server Components) and Remix v2 to compare the developer experience in either framework.

Remix doesn't have support for React Server Components yet, but it's still an impressive comparison of the two frameworks.

This is well-researched article with many diagrams and examples

prateeksurana.me/blog/nextjs-13-vs-remix-an-in-depth-case-study

๐Ÿ”ฅ Trigger.dev adapter for Remix v2

Trigger.dev is a self-hostable background jobs service built with Remix.

You can set up tons of different infrastructure options, scheduled jobs and more

trigger.dev/docs/documentation/quickstarts/remix

๐Ÿ”ฅ Remix PWA v3

Just because Remix is a server-first framework doesn't mean you can't build an offline app. Progressive Web Apps use service workers to simulate a server environment, and Remix PWA is a whole ecosystem of tools to make it easier to build PWAs with Remix.

  • Export workerLoader and workerAction from your routes to create endpoints that run exclusively in the worker thread
  • Fine grained control with multiple caching strategies to optimize what's available offline
  • Background synchronization so requests will still work even if the user closes the app

remix-pwa.run

๐Ÿ“„ Build a server-side table filtering UI

I work a lot on internal company apps (fancy CRUD UIs) and

  • almost all of them have had some sort of data table with variously complex filtering and sorting options.
  • every single one was built entirely differently

With so many apps needing to communicate database filters across the wire, it's insane to me this isn't a solved problem yet

The Open Data Protocol is an ISO/OASIS standard for REST apps, and contains a specification for URL query parameters that can be used to filter, sort, and paginate data

I've built an example of using this spec to recreate Linear's filter bar UI in Remix, parsing the query string into one format that's useful for the database, and another that's useful for the UI

The implementation guide is split across a couple articles (might turn it into a workshop) but there's also a live hosted example to play around and the source is available on Github as well

jacobparis.com/content/remix-filter-bar

๐Ÿ“„ Progressively Enhanced Modern Web Forms

Forms are still hard in 2023 but there's a lot of fantastic tools for building accessible, progressively enhanced forms in Remix

Between type safety, form validation, error handling, optimistic and pending UI, and accessibility, there's a lot to keep track of

Kent covers a bunch here as a prelude to one of the Epic Web workshops

epicweb.dev/accessible-typesafe-progressively-enhanced-modern-web-forms

๐Ÿ”ฅ SST support for RemixSite

SST is the go-to platform for creating serverless apps on AWS. Deploy a Remix app with some S3 buckets, a database, and a queue, all in javascript.

docs.sst.dev/start/remix

๐Ÿ“„ Abort async calls inside Remix loaders and actions

Browsers have an AbortController API that lets you cancel fetch requests and stop subscribing to the results. Remix uses this internally to cancel requests when the user navigates away from a page.

When a request is aborted, the browser will send that signal to the server as it closes the connection, so your loaders can know whether they've been aborted before starting any expensive work.

Sergio shows how to use this to cancel database queries, file reads, and other async work in your loaders

sergiodxa.com/tutorials/abort-async-calls-inside-remix-loaders-and-actions

๐Ÿ”ฅ Sanity template for Remix v2

Sanity is a headless CMS with a visual editor and an API. This template shows how to use Sanity with Remix v2, and includes a few examples of how to use the Sanity API in your loaders and actions.

github.com/SimeonGriggs/sanity-remix-template

Remix Community Meetups

There are active Remix meetups all around the world. If you're interested in meeting other Remix users, learning more about the framework, or just hanging out with some cool folks, check out one of these meetups.

  • ๐Ÿ‡บ๐Ÿ‡ธ Lehi, Utah
  • ๐Ÿ‡ฎ๐Ÿ‡ณ Pune, India
  • ๐Ÿ‡ฌ๐Ÿ‡ง London, UK
  • ๐Ÿ‡บ๐Ÿ‡ธ New York City
  • ๐Ÿ‡ง๐Ÿ‡ท Sรคo Paulo, Brasil
  • ๐Ÿ‡บ๐Ÿ‡ธ Austin, Texas
  • ๐Ÿ‡บ๐Ÿ‡ธ San Francisco, California
  • ๐Ÿ‡ฎ๐Ÿ‡ฑ Tel Aviv, Israel
  • ๐Ÿ‡ฒ๐Ÿ‡ฝ Mexico City, Mexico
  • ๐Ÿ‡ฉ๐Ÿ‡ฐ Copenhagen, Denmark
  • ๐Ÿ‡ฟ๐Ÿ‡ฆ Johannesburg, South Africa
  • ๐Ÿ‡ธ๐Ÿ‡ช Uppsala, Sweden
  • ๐Ÿ‡จ๐Ÿ‡ท San Jose, Costa Rica

meetup.com/pro/remix-run

This is not a one-way conversation

On behalf of the whole Remix community, Iโ€™m really glad to have you here, and I want to hear from you.

If you find something cool you'd like featured, or have questions you'd like answered, that's what I'm here for. Just hit reply and let me know, or join the conversation directly in the Remix Discord

Thanks for reading!

โ€” Jacob Paris

Professional headshot
Moulton
Moulton

Hey there! I'm a developer, designer, and digital nomad building cool things with Remix, and I'm also writing Moulton, the Remix Community Newsletter

About once per month, I send an email with:

  • New guides and tutorials
  • Upcoming talks, meetups, and events
  • Cool new libraries and packages
  • What's new in the latest versions of Remix

Stay up to date with everything in the Remix community by entering your email below.

Unsubscribe at any time.