Skip to content

Instantly share code, notes, and snippets.

@squarism
Last active November 14, 2022 22:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save squarism/7b073b1bb6ec31dc85b5aec3c0c00652 to your computer and use it in GitHub Desktop.
Save squarism/7b073b1bb6ec31dc85b5aec3c0c00652 to your computer and use it in GitHub Desktop.
Thoughts on Remix So Far

Caveats and Disclaimers

  • I'm biased and unperfect
  • Remix 1.7.2 is the current release, things may change
  • Making a framework is harder than I know. Making it fully featured is even harder.

The Good

It embraces web standards

How you can change <form> to <Form> and have everything just work is pretty incredible. <Form> gives you extra functionality for pending states but there's also near-browser functionality with a simple prop reloadDocument to have the browser handle the pending state. In this way and others, it feels like you are staying close to standards. I found myself looking at MDN docs instead of framework APIs which was new and novel for me.

Another example, I was doing

const headers = new Headers()
headers.append(...)

And the MDN docs have Headers#append. I wonder if this will increase stability on upgrades and also teach the platform.

File Based Routing

It's the same as Next as far as I can tell. Great. Steal good ideas.

The Notes You Didn't Play

It's React but there's not as much need for global state. It's almost like the nested loading and the file based routing make you think of nested state in a similar way to vanilla prop drilling. We'll see how far this scales (and next section). You don't need to refetch or use react-query because remix knows what you are doing. The only extra work is on optimistic UI which I haven't done yet.

It's just suprising what happens naturally out of the architecture. I think Kent C Dodds said it better. It's not all roses but when I did a writes feature, I didn't have state and I didn't think about refetch. I just write to the database and the same loader loads the new data. The UI updates. It was wild.

Default Tooling

Remix usually comes with nice tools. This will vary on how you bootstrapped your app (stacks / templates) but it comes with prisma and a fast dev server. Redwood leans hard into GraphQL, Remix does not. But Redwood has storybook built-in and Remix, you'd have to work a bit for that or find a template. This is entirely preference I guess.

For example, adding unit tests and a watcher was very easy in my experience (with the stack I used).

Packages and Community

remix-auth works really well for authn. There's a lot of typing / "clipboard config" but it's also obvious how it's working. I'd like to see more of these common problems solved (hey, I'm looking at me here).

The Rough

Multiple Actions

This is the biggest one to me. I appreciate how actions and loaders work in Remix. This is Remix API for reading and writing. The problem is that this is too coarse. I think REST or CRUD is an organizational pattern that is more recognizable. Remix has chosen to go with a PHP writeback style so you end up with this coarse arrival point for, say, a write. So then people are confused on what to do.

I think this can be solved with conventions. I'm curious if I can come up with something. It's tricky because of the nested routing I think.

The real question is, did this PHP taste heritage doom Remix components to grow in length as idiom? Is it unsolved to the point of problem? With a single action, it's great. There's no problem. If this could be enhanced to CRUD, it'd be really elegant to me. Right now, you have to DIY.

Certain CSS Libs

Remix really likes tailwind. I think tailwind is neat but I haven't embraced it because ... well pre-built components for starting quick. Tailwind really is easier with Remix because of the server services. I found a way to integrate Mantine but it broke with v5. It's fixed now. I'm not saying this is a Remix problem, I knew this was the tradeoff with these CSS component libraries that need a context wrapper.

I'm happy with where this is now but it was after watching an issue.

DX

Stacks are neat (although lacking options imo). The dev server is fast. I've had a few crashes when making a bug (I should open an issue) or a change (but it's fast to restart). Error messages that takeover require you to refresh because your LiveReload component is gone. That's just OOTB behavior, I bet you could make an Error Boundary that works even in dev? Not sure.

Next Auth

Next auth seems to send emails for sign up and many other things. There is no library like this from what I can tell. Doing this by hand is a lot of work.

Wrap Up

I've put time in but I still need to explore it more. I did the tutorials end-to-end. I watched all their videos. I did a realistic spike and threw it away. I've started a side project and it's going fine. There have been a few rough edges but it's been an equal mix of my own ignorance.

I think Remix has a lot of neat ideas in it while at the same time not creating new API which would lock you in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment