Remix — Traditional Web Standards For ClientSide Developers

Ovidiu Stoica
4 min readMay 12, 2022

--

I’ve been a web developer for 7 years and explored all frameworks post @reactjs

The one I enjoy the most — @remix_run 💿

Let’s dive into it 👇🧵

Introduction

Remix was created by @ryanflorence and @mjackson — The creators of React Router, and later joined by @kentcdodds (@TestingLib and many great courses)

The framework was initially a closed beta costing 250$ for a license but was later released for public usage

Philosophy

Remix is an edge-first client-server framework built with the end-user and developer experience in mind

Frameworks take a lot to learn and knowledge doesn’t transfer well.

Remix is built on classic web standards

Learn Remix => accidentally learn the web

Nested Routes

In Remix you can render a hierarchy of routes at the same time.

Every sub-component concerns itself only with what it has to render, leading to better code-splitting and easier to reason about code.

No more Layout components rendered everywhere.

Data Mutation

To write data you use forms and HTTP.

When the user submits a form, Remix will:

  1. Call the action
  2. Reload all of the data for all of the rendered routes

Bonus: The code below does not require any Javascript on the client to work 🤯

(Un)expected Errors

Your UI function should only concern itself with the *happy path *.

Remix uses special components for error handling. Errors are scoped to the nearest boundary

Unexpected error => `ErrorBoundary`

Expected error => `CatchBoundary`

Styling

Remix embraces CSS stylesheets.

You can scope styles based on your routes to avoid name clashes. CSS-in-JS is supported but not recommended because they are applied at runtime.

The most popular styling solutions are Tailwind and scoped CSS.

Performance

Remix is designed to take advantage of edge computing.

Computation power, but the network is limited, so deploy close to your users serve the minimum size necessary for best experience.

It supports all the modern edge providers.

remix.run/docs/en/v1/guides/performance

Deployment

Deployment is easy.

The team provided starter templates and examples for most platforms so this won’t be a problem.

You can focus on building cool features for users.

Remix stacks

Stacks are pre-made tech stacks with deployment and scale in mind adapted to your needs with a music twist

Remix has 3 standard options and provides the ability to create your own stack template (until we run out of music genres)

More here: remix.run/docs/en/v1/pages/stacks

Community

The community is welcoming.

There are dedicated devs in the discord server to help with any issues you have. The team is very responsive.

The founders had communities before Remix (React Router + KCD Community), so it is well managed.

discord.gg/v3btfyk7

Future & Funding

The team secured a $3M seed round in October 2021 lead by @naval.

The seed gives them 2 years of leeway and more will come since investing in Open Source is growing. No pricing model is established yet.

You can safely bet your next app on @remix_run

TL;DR @remix_run

• Great community

• Built for the edge

• Secured $3M seed

• Client-server model

• Based on nested routes

• Uses Forms for mutations

• Scopes styles to the current route

• Great experience for users and devs

• Is a react framework built on web standards

--

--

Ovidiu Stoica

Hi, I’m Ovi Stoica! I help people build quality software and I write about technology, startups and marketing for developers.