A little over a year ago, I was introduced to Remix.run through a new project I began working on. Our goal was to launch the product on January 1st, and, thanks to Remix, we had our MVP ready two to three months ahead of the release date. This gave us ample time to incorporate post-release features into the product, enhancing the launch even further. Now, let me explain how Remix enabled us to achieve this.
Setup
As someone who started off working in Laravel, I always loved the fact that I had both my client and server code in the palm of my hands. If I needed to implement something on the backend I could just do it, I didn't have to wait for external teams or other team members to implement something for me on the server and expose an API so I could consume it, I could just get in there and code, the setup was straightforward and as soon as you have your app running you're done.
You don't need to first set up your server, install dependencies, configure the .env file, establish Docker containers, or complete any other tasks just to get half of your app running. You'll also need to do this for your Single Page Application (SPA). While it might not seem like a big deal, many companies attempt to streamline the process using techniques such as monorepos. However, it's important to note that not all companies do this!
I am sure you have gone through something similar, my biggest dread was always the setup whenever I joined a new company, will I need to install Visual Studio, will I have to have docker images running, will I have to have VM's up and run some software on deprecated CentOS distros because our software only supports that distro of Linux and so on.
Well with Remix there is absolutely none of that, you usually run npm install and copy/paste the .env variables and you're up and running, you're productive in a new environment in about 5 minutes.
I love this so much, and I understand that it's not revolutionary or unheard of, but the simplicity of Remix is a huge advantage in my opinion, as someone who has experienced the worst and the best of project setups throughout my career (that CentOS example was quite personal).
Tightly coupled decoupling
After you're up and running the next natural thing to do is to code, right? Well, this is where that Remix simplicity I mentioned above comes into play again. Imagine the following scenario:
You have a node server running on your port 8080 and your good ol' SPA on port 3000. You are a full-stack dev and you need to create a new feature like adding a new blog draft.
Naturally, you would first write your model, then you set up the database call, write the API endpoint, test it via Postman, write your validation and you're happy with what you made, well awesome, now you context switch over to your frontend codebase, the code you wrote is still fresh in your mind, you write your frontend components, you make a form, then you re-write the schema again to check on the client too that the data is valid and then finally you send it through the line.
But oh no! Something goes wrong. Now you open up the server code, you debug what is going on there, you come back to the frontend, you debug it on the frontend and you finally figure out what's not working and you fix it. You're good to go now!
And how does this process look in Remix?
You create your model, you write a schema that is reusable on both the client and the server and is located in the same file as the client/server code, you setup the frontend, you submit your data to the action, you use the same schema from the frontend to validate it on the backend, and you directly call your db right there and you're done!
Something went wrong?
Well, your client and your server are not 2 editors, but 2 lines apart from each other! Debug it in the client and the server in the same file! No context switching, no need for multiple editors, no need for multiple debuggers, everything is colocated and easily understandable, and yet it is decoupled and the boundary between the client and the server is very clear by the fact you have your JSX component for the client and then your exported action/loader for the server!
Isomorphism
You've probably heard of this term before, how we should write isomorphic JS and make it reusable. If you haven't, isomorphic code is simply code that can run both in the browser and on the server and up until Remix I have never seen any framework pull this level of isomorphism as Remix did. It was usually a concept rather than an implementation detail.
The sheer fact that Remix just builds upon web standards allows you to write reusable code to the utmost degree!
Have you ever worked on a backend that has a bunch of utilities for parsing strings, parsing URLs, doing some transformations and so on? Have you ever thought man I wish I could just call this code instead of copy/pasting it to the client?
Well, now you can with Remix. Because your server code is co-located with your client code and most of the server code relies on the web standards you will be pumping out isomorphic code like there is no tomorrow!
Need a URL parser? It will work on the server and the client! Need a header analyzer, works on both, need string transformers? They work on both, need request parsers? Guess what, they work on both!
It is such a breath of fresh air to not have to write the same code twice!
Deployment
If you haven't noticed already the biggest driving point of Remix is simplicity of use. They just rely on the web standards and abstract all the nasty bits away from you so you can focus on getting your product out there!
I have never been a dev-ops person and I have always hated it! You always have a lovely local build that works and then you want to deploy it somewhere and it becomes a nightmare for you.
Well, did you know that the Remix development build output is almost identical to its production build output? The production build only gets optimized and minifed but other than that you're practically running your production build locally!
No horrible surprises once deployed! Oh, and Remix has one of the most extensive adapter libraries out there! You can literally deploy your app anywhere, and because it only uses web standards it works everywhere too! Cloudflare, Vercel, Express, Node, Netlify, you name it! Wherever you're deploying it will probably be a breeze!
Remix is the only framework today that makes me confident in my dev-ops skills and makes me believe that I can deploy anywhere I want with ease, whether it's AWS, serverless, or a plain old server.
Flexibility
The deployment to anywhere is great, but another thing that makes Remix so easy to work with is its flexibility. You can just about use anything you can think of inside Remix, whether it's Drizzle, Prisma, Supabase, Firebase, Stripe, Sentry, Fathom, Sendgrid and so on, you can!
The best part of Remix being both a server and a client provider is that you can easily integrate anything you want into it and then consume it and provide it to your server! Plus all your .env secrets are safe and all your sensitive data is not on the client!
Tooling & templates
Even though Remix is relatively very young the tooling and templates around it are amazing and the community just keeps creating new ones!
Want to get set up in a few minutes with Stripe?
You can with https://github.com/dev-xo/stripe-stack
Want to use Supabase and deploy on Fly?
You can with https://github.com/rphlmr/supa-fly-stack
Want to have an epic time while working on your next app?
You can with https://github.com/epicweb-dev/epic-stack
Want to build a documentation website?
You can with: https://github.com/freekrai/remix-docs
And whatever you pick as a starting point, whether that's the Epic Stack by Kent, or any of the other templates built by the community the fun doesn't stop there! There is a plethora of tools and community packages you can use and explore to make your web app stand out!
Not sure how to find them? Well, Remix Guide has you covered, a complete list of all things Remix related, stacks, templates, libraries, articles, you name it, all in one place:
Although, a shameless plug, it also has developer tools! Install them and see all your outgoing and incoming requests and responses, right-click elements in the dom to view their source, get detailed logging on what is going on and have fun while exploring Remix and its possibilities like never before!
Migration
Have you ever had to migrate your codebase to a newer major version of a framework?
I feel your pain, my friend! Half of the APIs are missing, the other half had modifications, and sometimes whole concepts and approaches are removed. It takes you weeks sometimes to migrate, with Remix they think of your needs before their own.
With their revolutionary approach to migration with the future flags, your upgrades to higher versions will be nothing more than an afterthought once they drop.
Whenever they add a feature that will be part of the next major release they lock it behind a future flag which has 2 great use-cases.
The first one is that it allows you to opt in early, incrementally upgrade your codebase and iterate over versions quickly and the second is that you can help impact that feature by being an early adopter, testing it and reporting back what you find, whether it be an issue or a potential improvement you can help shape the bigger decisions the framework makes! Which in itself is an amazing feeling!
Transferability
My biggest benefit that Remix puts on the table is the transferability of the skills you learn, Remix doesn't force you to learn Remix, it forces you to learn web development!
In other frameworks you're learning the frameworks themselves rather than the web, if you get amazing at Gatsby or Next.js APIs it's not a given that all of that knowledge will be transferable to another project, for example, a SPA app, but if you learn Remix it will make whatever you're building next so much easier and more enjoyable and that's a guarantee!
I have been context-switching between two projects, a Remix app and a React SPA app, the browser APIs and standards I have learned and picked up in Remix are making my experience with the SPA app so much more enjoyable it's amusing once you realize it, makes it hard to go back really to the old ways of doing things and expecting frameworks to abstract so much from you that you don't even know how do they work but just blindly believe in what they do!
I love Remix because it gives the power back to the developer!
It gives the power back to you!
Community
The last, but not the least, the biggest part of what makes Remix so great is the community and the official discord! If you're ever stuck and need help you can just jump into the discord and find a bunch of people willing to help you figure out your issues, the best ways to do things and general positivity. If you're building a cool project for Remix everyone is enthusiastic and willing to help! And finally, if you're looking for a good laugh you'll always find it in the "random" channel while eating some watermelon 🍉
So what are you waiting for? Come join us and try Remix out today!
Thank you
If you've reached the end you're a champ! I hope you liked my article.
If you wish to support me follow me on Twitter here:
or if you want to follow my work you can do so on GitHub:
And you can also sign up for the newsletter to get notified whenever I publish something new!