<p>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 <a href="https://craftcms.com/">Craft CMS</a> 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.&nbsp;So it’s been a while since I’ve seen something to be <em>really</em> excited about.</p>
<p>Enter <a href="https://remix.run/">Remix</a>.</p>
<p>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.</p>
<blockquote class="twitter-tweet" data-dnt="true" data-theme="dark"><p lang="en" dir="ltr">Forget “full stack”. Remix is center stack.<br><br>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.<br><br>I think I finally know how to talk about Remix.</p>— Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/1482233495195770883?ref_src=twsrc%5Etfw">January 15, 2022</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>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.</p>
<h2>Getting GraphQL Data (aka Loaders)</h2>
<p>Remix provides a <a href="https://remix.run/docs/en/v1/api/conventions#loader">loader hook</a> 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.</p>
<script src="https://gist.github.com/davist11/87cdd99eb66d01f2a9dbc026324f9550.js?file=loader.jsx"></script>
<noscript><a href="https://gist.github.com/davist11/87cdd99eb66d01f2a9dbc026324f9550#file-loader-jsx">View Gist</a></noscript>
<p>Then in my <code>Index</code> component, I access the data from the loader hook with <a href="https://remix.run/docs/en/v1/api/remix#useloaderdata">useLoaderData()</a>, 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.</p>
<p>The great part about Remix is that this doesn’t have to be specifically a GraphQL request. This data can come from anywhere. The <a href="https://remix.run/docs/en/v1/tutorials/jokes">Jokes tutorial</a> in the Remix docs even thoroughly walks through how you can manage all this data in <a href="https://www.prisma.io/">Prisma</a>.</p>
<h2>Processing User Input (aka Actions)</h2>
<p>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 <a href="https://remix.run/docs/en/v1/api/conventions#action">action hook</a> 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.</p>
<script src="https://gist.github.com/davist11/87cdd99eb66d01f2a9dbc026324f9550.js?file=action.jsx"></script>
<noscript><a href="https://gist.github.com/davist11/87cdd99eb66d01f2a9dbc026324f9550#file-action-jsx">View Gist</a></noscript>
<p>If you don’t include an <code>action</code> 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.</p>
<h2>Bonus: Progressive Enhancement</h2>
<p>Since Remix is running on the server, you can turn off JavaScript and everything still works great. Data still loads, form actions still process; it’s beautiful. This is not running loaders and actions on the client side; it’s running them on the server. This isn’t an accident, the Remix team is carefully considering the UX.</p>
<blockquote class="twitter-tweet" data-dnt="true" data-theme="dark"><p lang="en" dir="ltr">User experience (UX) and developer experience (DX) are both important. UX is more important than DX.<a href="https://twitter.com/remix_run?ref_src=twsrc%5Etfw">@remix_run</a> 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.</p>— Kent C. Dodds &#x1f4bf; (@kentcdodds) <a href="https://twitter.com/kentcdodds/status/1482390454389805058?ref_src=twsrc%5Etfw">January 15, 2022</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<h2>Bonus: So Speedy</h2>
<p>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.</p>
<h2>Give it a Shot</h2>
<p>Remix is built on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">native Fetch API</a>, 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.</p>