kentcdodds.com is totally customized constructed via me (and
staff) the usage of Remix. After writing tens of
hundreds of strains of code the usage of this framework, I’ve advanced an excellent
appreciation for what this framework can do for me and the customers of my web page. I
wish to let you know about a few of it.

This is the core explanation why I really like the usage of Remix to construct internet sites:

Remix allows me to construct superb person reports and nonetheless be proud of the
code I needed to write to get there.

That is it. So what does that imply? Let’s dig deeper…

There are numerous issues that have an effect on the person’s enjoy after they use our
instrument. As a rule I believe persons are excited about efficiency/pace and
whilst that is one essential facet, it is just one a part of issues. The person
enjoy features a complete host of alternative facets of your web page regardless that. Right here
are a couple of:

• Accessibility
• Efficiency
• Content material reflows
• Reliability and availability
• Error dealing with
• Pending control
• State control
• Revolutionary enhancement
• Resilience (conduct in deficient community stipulations)
• Format
• Content material readability

Even the rate of construction of options can have an effect on the person’s enjoy. So
the person’s enjoy is
not directly impacted via the
maintainability of our code.

Remix is helping with many of this stuff. Some with out me having to take into consideration it.
Particularly, one of the more difficult issues involving state control (race
stipulations of mutations and knowledge loading) are utterly controlled throughout the
framework. As a result of this, customers would possibly not in finding themselves having to refresh the
web page as a result of they are having a look at stale information. This simply occurs with out me
eager about it. It is simply the best way Remix works.

Remix does so much to stay my web page rapid thru its use of <hyperlink /> tags to
preload belongings and knowledge on the proper time. From time to time I am blown away via the reality
that my web page feels adore it’s static recordsdata on a CDN, however it is in fact server
rendered/hydrated and each web page is totally distinctive to each person (so a shared
HTTP cache on a CDN isn’t imaginable).

Remix’s use of the platform APIs is what allows this. That is additionally what makes
Remix so resilient and nice for modern enhancement as smartly. In deficient
community stipulations the place loading the JavaScript is gradual/fails, Remix’s usual
API for mutations (<Shape />) will in fact paintings even ahead of the app is
hydrated. Which means the person can get started getting paintings achieved with the app,
although they are on a deficient connection. A lot better than an absolutely unresponsive
button whose onClick handler hasn’t but loaded (which was once my very own usual
ahead of Remix)!

Remix’s declarative error dealing with implies that it is more straightforward for me to correctly
care for mistakes within the context of the place the mistake occurs. Mix this with
nested routing and what you get is the facility to render a contextual error
with out breaking the remainder of the app.

And likewise this works at the server as smartly (which is exclusive to Remix), so customers
gets the similar enjoy whether or not the mistake came about all through a shopper
transition or a complete record obtain.

Remix makes an incredible person enjoy the default. And that is the reason one of the crucial
number one causes I really like Remix.

Apps I have helped construct are utilized by tens of millions of folks far and wide the arena.
Construction internet sites with Remix is the primary time I will be able to say that I am actually glad
with the code I deployed. The most important explanation why for that is that ahead of Remix I
spent numerous time simply looking to care for person enjoy problems. As a result of
Remix is helping such a lot with the person enjoy, I do not have such a lot complicated code
to control myself. So all that is left for me to do is locate the declarative APIs
that Remix (and React) give me, to construct my app and the person enjoy is excellent
via default.

When I am the usage of Remix, I will be able to depart my hacks at house.

In truth that is the greatest factor I’ve to mention concerning the code portion. You realize
how demo code is all the time so easy as it continuously skips the nuance of pending
states, race stipulations, error dealing with, accessibility, and so forth? Neatly, my code is not
moderately like demo code, however Remix makes it really feel lovely identical. I am unquestionably
nonetheless eager about accessibility (regardless that Remix’s
@reach-ui programs lend a hand so much with that) and blunder/pending
states. However the APIs that Remix offers me for the ones issues are easy and
declarative. I imply, right here it’s:

const loader: LoaderFunction = async ({request, params}) => {
  // this runs at the server
  // surprising runtime mistakes will cause the ErrorBoundary to be rendered
  // anticipated mistakes (like 401s, 404s, and so forth) will render the CatchBoundary
  // another way I will be able to go back a reaction and that'll render the default part
  go back json(information)
}

export default serve as AttendeesRoute() {
  const information = useLoaderData()
  go back <div>{/* render the knowledge */}</div>
}

export serve as ErrorBoundary() {
  const error = useRouteError()
  // when true, that is what used to visit `CatchBoundary` in Remix v1
  if (isRouteErrorResponse(error)) {
    go back <div>{/* render the mistake for 400-status stage responses */}</div>
  }
  go back <div>{/* render an "surprising error" message */}</div>
}

Oh, and for pending states (whether or not mutations or common transitions) you’ll be able to
stick this anyplace you wish to have the pending UI to turn up (whether or not world or
native):

const navigation = useNavigation()

const textual content =
  navigation.state === 'filing'
    ? 'Saving...'
    : navigation.state === 'loading'
    ? 'Stored!'
    : 'Able'

This significantly simplifies the React code that I write to the purpose that I
do not write any HTTP-related React code. That client-server verbal exchange is
utterly controlled via Remix and it is controlled in some way that optimizes for the
person’s enjoy. Oh, and the customer/server boundary can all be totally typed as
smartly so I spend much less time going backward and forward between my browser and editor
solving foolish errors.

I additionally love that Remix is based on internet APIs. That json serve as we are
calling above in our loader? That is only a easy serve as to create a typical
Reaction object.
That is proper. If you wish to learn to do one thing with Remix, you can spend
simply as a lot (possibly extra) time on mdn as you do
on the remix doctors and this brings me to some other factor
I really like about Remix:

The simpler I am getting at construction websites with Remix, the simpler I am getting at construction
websites for the internet.

This occurs naturally because of the truth that Remix makes use of such a lot of the internet
platform and defers to the internet platform APIs up to imaginable. (That is
very similar to how I believe that the simpler I am getting with React, the simpler I am getting at
JavaScript.)

And since Remix is based on the internet APIs as the average interface for the
server, you’ll be able to deploy the similar app to any platform (equipped the code you convey
alongside will run on the ones platforms) and all you need to do is alternate which
adapter you might be the usage of. Whether or not you wish to have to run on serverless or in a docker
container, Remix has were given you coated.

Remix is the jQuery of webhosting platforms. It normalizes their variations so
you’ll be able to write as soon as, host any place.

Some other superior a part of the loader factor is that as it runs at the server
I will be able to hit APIs that give me a long way an excessive amount of information and slender it down to only the section
of the knowledge I would like. That suggests I will be able to naturally get rid of the knowledge overfetching
downside that leads such a lot of people to succeed in for the complexity of graphql. I
imply, you’ll be able to nonetheless utterly use graphql with Remix, however as a result of Remix manages
the customer/server verbal exchange for you, you do not have to send an enormous and
complicated graphql Jstomer library to the browser and as a substitute simply depend on Remix
to do the best factor on the proper time (which it does).

And if I ever want extra information than the server is sending to the customer, I simply
scroll up within the document, alternate the loader to incorporate the additional information I would like, and
I have were given it proper there. All typed and able to move for my client-side code. It is
fabulous.

I discussed the <Shape /> part previous and the way it’s going to nonetheless paintings even
ahead of JavaScript a lot. Because of this, it is nice for the person enjoy.
And it is also nice for the developer enjoy, as a result of I do not have to control
a host of fetch and state nonsense for my mutations. In most cases, I’ve an
onSubmit that provides an match.preventDefault(), fetch, race situation
control, and cache invalidation code. Neatly, with Remix, all that is going away
and I am left with a declarative mutations API:

const motion: ActionFunction = async ({request}) => {
  // this runs at the server and I will be able to care for the request shape information right here
  // whether or not that be an immediate database interplay or calling a downstream
  // provider to accomplish the true mutation. It is simply sensible.
  go back redirect(/* ship the person anyplace you favor after this */)
}

export default serve as AttendeesRoute() {
  // glance mah! No match handler or useEffect important!
  // race stipulations treated.
  go back (
    <Shape means="POST">
      <div>
        <label htmlFor="name-input">Identify: </label>
        <enter identification="name-input" call="call" />
      </div>
      <div>
        <label htmlFor="email-input">E mail: </label>
        <enter identification="email-input" call="e-mail" sort="e-mail" />
      </div>
      <button sort="put up">Upload Attendee</button>
    </Shape>
  )
}

Oh, and you wish to have validation proper? Neatly, you might be gonna wish to do this at the
server, so you’ll be able to put it within the motion there. However you might also need it at the
Jstomer proper? Neatly, you actually simply transfer the validation common sense from the
motion right into a serve as and contact it in each the motion in addition to your
part. That is it. Wowza.

I may cross on and on. There are such a large amount of weblog posts and workshops within me. I
did not even get to discuss how easy Constructive UI is to enforce with
Remix, protected authentication, abstractability (code reuse), pagination, no
<Format /> elements important because of nested routing, and so a lot more.
I will get to all that at last I promise.

On the finish of the day, it comes again to this:

I really like Remix as it allows me to construct superb person reports and nonetheless
be proud of the code I needed to write to get there.

And that is the reason simply one thing I will be able to get in the back of and push on. Care to sign up for me?