Things You Probably Didn't Know About Remix
Lina Mahrouch provided an in-depth analysis of Remix's capabilities in her presentation.
Remix stands out for its commitment to web standards and its ability to provide an amazing developer experience through its 'loaders' and 'actions' features. These features simplify data fetching and backend communication, promoting seamless data flow and efficient feature management in web applications.
Adding flexibility to the framework, Remix incorporates both file-based and config-based routing. Its recent transition to a Vite plugin has enhanced its capabilities, allowing for better integrations and improvements for developers. The framework's application is not confined to eCommerce. It's also used in AI tools, search engines, and portfolio sites, demonstrating its broad utility.
Share this talk with your friends
Transcript
I'm super happy, super excited to be here with you today.
I flew all the way from Morocco to be here with you. So my name is Lina and I'm a full-stack software engineer, and these are some cool stuff about me.
I work at Spell and Synexia, and I love Remix, I'm a fun girl. I'm also a professional gamer, I play Valorant professionally, so yeah, that's some cool stuff about me. Very cool. Thank you. Okay, so this is my talk title.
So today's talk is going to be about things you probably didn't know about Remix. So you're probably wondering why I chose this talk, like this talk title. Well, in my last two jobs, I introduced Remix to my teams. We were working with React, React app and React router, so yeah, the old stack.
I discovered this also framework when I was like doing some freelancing jobs and some side jobs, side projects. And the fun part about introducing Remix to the team was that like, talking, trying to convince my boss, or delivering MVP, the challenging part was getting the other developers
to try Remix. It was really hard. And yeah, you're probably wondering what and why I chose this talk. The other point is that when I share side projects on Twitter for fun, I usually get
a lot of questions about Remix and some really awesome questions from my followers. So that's why I decided to do this talk. Okay, so when I first introduced Remix to my team, my boss just told me, oh, Remix is just another JavaScript framework. What's the hype?
That was my honest reaction. Okay, jokes aside, Remix is a really cool framework.
It can help you build really cool applications, full-stack applications from scratch. So I'm going to explain some tips, some cool tips about Remix, how basic things work, etc.
So I'm going to start with really basic stuff, like the full-stack Remix data flow and the Remix forms. One of the things I really love about Remix, aside from having a really good developer experience, is that it's following web standards. And that's really something important for me.
So in Remix, we have loaders and actions. So loaders are actually fractions to handle data fetching using the get method. So it actually retrieves the data from the backend.
Actions are more like loaders, but instead they are called when you make a post, a delete, or a patch. So to explain the full-stack data flow of Remix, we have a loader. The loader fetches data from the backend, and then it passes the data to your components.
Then our loaders, the action takes the data from your component and gives it to the backend. Then our loaders are getting revalidated, and this is how it keeps the backend and frontend in sync.
So I have another example of Remix forms. I don't know if you can see this clearly, but let's say I have a post routes, where I'll get all my posts fetched from the backend. And I have a button where I'm going to be adding a post.
So if you see here, I have a button type submits where I'm going to be adding posts. So let's say I would like to add other functionalities and other features to this route, to this component, and I want to add two other buttons, one for liking the post, one for bookmarking the post.
So this is kind of tricky because in Remix, each route has one action and one loader. So how can I handle multiple form actions then? The kind of trickiest thing I do is that I have two other buttons, I have the same name action and different values.
So what I do is when I click on, for example, if I had like the old like form, if I click on delete or add, it's going to result in the same action. So here I have different values and what I do is I have an action that's going to switch
based on the action value and it's going to give me the, it's going to give me back like the form data request. It's going to have another field. Next thing is going to be file-based routing and config-based routing.
So I think a lot of you know that in a lot of other frameworks, you need to choose between file-based routing and config-based routing, but in Remix, you can do both. And yeah, I found this cool, this cool tweets post two months ago and I was like, hey, I'm going to add it to my talk.
So here in Remix, you can actually use both. You can choose any routing convention, depends on what you prefer. So it has a default route convention and it allows you to set up a manual route configuration. All you have to do is just set it up in your Remix.conf.js.
For example, if you would like to have this kind of structure, so the default one is like the file structure and if you would like to use this one, all you have to do is go to your config, to your Remix.conf.js and this is what, if you would like to have this, this
routing convention, all you have to do is just set up this, you have to set up this in your config.js, Remix.conf.js. And another cool part about Remix is that it's now becoming a Viz plugin.
So this is really, really cool thing and I was really hyped about it. So Viz is now the new default compiler and using Remix as a Viz plugin is a huge plus for the developer experience and also for the app performance.
We have HTML, we have faster build times and we also have access to really cool plugins that we were not able to use them in the, like in Remix V2 without Viz. Another misconception I had like with my team is like Remix is just for e-commerce.
When people first hear about, people first hear about Remix, they often think it's just for e-commerce. Maybe it's because with Shopify, Hydrogen and yeah, but I actually use Remix for a lot of applications in the field, not just setting products online, but I use it to build AI
tools, e-commerce with Sanity and like we get a lot of searchers and also some portfolio. So this shows that Remix is really great for different users, not just for e-commerce. Yeah, another misconception is that Remix has limited hosting options, but that's not really true.
So it depends if you like serverless or you don't. You can choose between these awesome ways to host your application. My favorite one is Resell. It's the one I use to host my site projects. That was all.
I tried to keep it short and like it should do a lot of technical stuff, so I hope you liked the talk. And if you want to reach out to me, you can just scan the code bar and yeah, talk to me on Twitter.
