#22 Remix Dev Tools, and everyone goes v2 – Remix Community Newsletter
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
🔥 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.
- Ryan Florence has been looking into the browser's View Transitions API, hinting at a possible future integration
- Mark Dalgleish is speaking about React Server Components soon at React Advanced London on October 20th
- Jacob Ebey has also shown some work with React Server Components
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
🔥 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.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
📄 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.
📄 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
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
