Why I’m So Excited About Remix
I’ve been building on the web for a long time. There’s a part of me that still has a bit of an old school mentality, and it’s hard for me to get really excited about new technology. Sure React was cool when it came out for its state management, but I didn’t see it as the be-all and end-all for building on the web. I really like Craft CMS for building CMS powered sites since I have full control over the HTML being sent to the browser, and it’s really easy to extend for complex functionality, but it can be a bit complex to setup for beginners and with additional complexity can come performance issues. So it’s been a while since I’ve seen something to be really excited about.
Remix is an interesting mix of old school techniques along with modern technology. Ryan Florence actually sums it up perfectly as to where Remix fits in.
Forget “full stack”. Remix is center stack.— Ryan Florence (@ryanflorence) January 15, 2022
It’s an HTTP tunnel between interactivity and business logic. It’s the part of the stack that no tool before it has solved, not completely.
I think I finally know how to talk about Remix.
I was able to easily switch my site that was fully powered by Craft to utilize Craft only as a GraphQL endpoint and Remix powering the rest. The two big things I needed to figure out were: how to get data from the GraphQL endpoint, and then how to process input from a user (for my contact form). I would definitely recommend reading through the Remix docs and the two tutorials, but if you can understand these two big pictures things, you’ll have enough to get started with Remix and go deeper once you get into it.
Getting GraphQL Data (aka Loaders)
Remix provides a loader hook that runs on the server to hydrate your component. In this simple example, I run a GraphQL request and return JSON with the results of that request in the loader function.
Then in my
Index component, I access the data from the loader hook with useLoaderData(), and my component is now hydrated with that data. In MVC style of thinking, think of the loader hook as the controller processing the page load request, populating with data from the model, and then passing to the view.
The great part about Remix is that this doesn’t have to be specifically a GraphQL request. This data can come from anywhere. The Jokes tutorial in the Remix docs even thoroughly walks through how you can manage all this data in Prisma.
Processing User Input (aka Actions)
Ok great, so we’ve got data onto the page, but now we need to be able to handle user input. Remix also provides an action hook to process an action request (ex: a form submission). In my case, I have a contact form that sends me an email via SendGrid after submission.
If you don’t include an
action attribute on your form, it will automatically submit to the same page. Again, in MVC thinking, the action would again be equivalent to the controller taking the request input and processing it. But honestly, this takes me back 15 years when form actions would point directly to PHP files.
Bonus: Progressive Enhancement
User experience (UX) and developer experience (DX) are both important. UX is more important than DX.@remix_run has taught me: It's easier to start with a great UX and work toward a good DX than it is to start with a great DX and work toward a good UX.— Kent C. Dodds 💿 (@kentcdodds) January 15, 2022
Bonus: So Speedy
Did I mention how fast everything renders? I don’t tend to put too much stock into Lighthouse scores since they seem so random, but Remix crushes Lighthouse without me having to invest any additional effort into improving performance.
Give it a Shot
Remix is built on the native Fetch API, so it can run anywhere. While Remix is relatively new, it’s certainly production ready, and there is a dedicated team behind it. If you aren’t ready to dive into Remix yet, at least keep your eye on it because this is a game changer.