Advanced Remix

Wrapping Up

Kent C. Dodds

Kent C. Dodds

Professional Trainer
Advanced Remix

Check out a free preview of the full Advanced Remix course

The "Wrapping Up" Lesson is part of the full, Advanced Remix course featured in this preview video. Here's what you'd learn in this lesson:

Kent concludes the course by answering questions about PWAs, CSS in components, Storybook integration, what's exciting about the future of Remix, and community resources.


Transcript from the "Wrapping Up" Lesson

>> Thanks everybody. That's it, we're done, this has been awesome. I'm so happy that you have stuck with me and gone through all these exercises, it is a lot of work. And so yeah, well done. Now that we're finished with the exercises, before I send you off on your way, I'd love to just answer any questions that you have about remix, any questions about workshop exercises at home, whatever you'd like to ask before we say tata for now, yes

>> Do you have some resources on building like a progressive web app so I can use remix stuff?
>> Yeah, so remix doesn't have anything built in that is for progressive web app. Let's do a remix PWA GitHub because there's a GitHub project. There we go. [LAUGH] Yeah, looks like there are a couple of people have been working on this.

This one. Yeah, looks like somebody's put a lot of effort into this. So that's awesome. So take a look at that. And then Jacob EB. He's remix employee, just as so many things, really smart dude. And he's actually the genius behind a lot of the way that the defer API works.

Super cool. And so yeah, you could take a look at that. I have not personally looked into PWA's with Remix a whole lot. But one interesting thing is that I don't think anybody's tried this yet, but I'm pretty confident that Remix can run in a service worker. And so if you want it to be like completely offline and still have your loaders and actions and all that, you can try to put Remix in a ServiceWorker and then get your offline stuff there too.

Which would be pretty cool. And we definitely have an appetite for building in some utilities for offline first development. I think that would be pretty cool. Some like IndexDB back thing and synchronizing, all that stuff. There's opportunity there. But yeah, hopefully these give you some direction as you get started.

>> Is there going to be CSS inside of a component type of solution?
>> Well kinda depends on what you call CSS inside a component, that kind of feels like CSS and signing component to me. But yeah. So you can use CSS and JIS solutions that they are supported.

We've got examples for all of the major ones. CSS modules, not quite sure what you're asking for, but those are not currently supported. Eventually we are working on solving that problem. The vanilla extract same thing, I know that's kind of a hot one for people right now and it seems pretty cool.

Also not currently supported. Because it doesn't create a CSS file, at least not without integration in the bundler. So we're figuring out a good way to make that work as well. As far as a Vue single file component, right now, we don't support Vue in the future, we probably very likely will.

And when we do, I'm sure that it will support all the features that you love for Vue. So that will probably happen also. Personally, I've used all of the things, all of them, and every way you can do CSS. And for building anything that's bigger than a small app, I just love Tailwind.

I just love it. It is, for me, been one of the most productive things I've used for CSS. I built a CSS and JS library, you know emotion. I didn't build that, but I built glamorous upon which emotion was based. And I deprecated glamourous and let them handle all the maintenance, it was great.

And they did a great job, they did better than I did, that's why I deprecated it. And so, I've been involved in this, and Tailwind is the bomb, I love it. I know some people can't get over it, they don't like it, and that's fine, I'm not gonna think that you're a terrible person if you don't love it.

But I'm pretty satisfied with Tailwind but yes, we will definitely support whatever way you'd like to do CSS. The one thing that I will mention though, is that we really want to make sure that people who build Remix apps build really great apps. So we don't want to give you foot guns and things and CSS and JS is a foot gun, it totally is.

You're going to make your app slower, that's just the way that it is. Any runtime CSS and JS solution is gonna have that problem. And so we do not encourage that even though it technically can be supported. So yeah, that is that. Another question?
>> Is there any integration with storybook?

>> Not currently, but that is actually very closely related to the issues with integration testing and testing components or rendering components that use Remix components like the link tag or the link components and things. Because those components require context provided by Remix which we don't expose currently. So, as soon as the Remix router is finished, then we can start working on those utilities that will expose those providers.

And that will handle both the testing story as well as the storybook story. For me right now as a workaround for that, if I need something that lets me iterate quickly on a component in isolation like what storybook offers, I will just make a route that only renders that component with the prompts that I want.

It takes all of like 20 seconds to set that up. And so that's what I did before storybook was around and it still works. So not to downplay storybook, I think it's amazing, awesome tool. And yeah, support will come eventually.
>> What are you personally most excited about the future of Remix?

>> Okay, well, not to date this workshop too much, I guess. Yeah, the future of Remix. So there are three or four things that I'm not super jazzed about Remix right now. And one of them is the support for CSS that we talked about already. We're currently working on a solution for that.

But it would be really nice if people who are using CSS modules didn't have to rewrite their CSS to be able to migrate to Remix. So yeah, we are working on that currently. I'm not super jazzed about the testing and Storybook integration, which we also talked about. We're currently working on that as well.

I am not super excited about the the fact that we don't support Hot Module Replacement yet, also working on that right now. So the things that I'm not super excited about with Remix, we're actively working on. Some things that, and so I'm excited about those things being like handled and improved in use cases.

And some of the things, I'm not gonna not talk to you specifically about what we're doing to deal with those. And the fourth one is the authentication stuff, we talked about this in the fundamentals workshop where you have to protect every single route which is kind of annoying.

Or you have workarounds with Express middleware and stuff like that. So, those are some of the things that bother me. Luckily, none of those are cracks in the foundation, foundation is solid, those things can be solved and we are actively working on them. So it excites me to get those things done and actually when some of those things are finished, we don't like to talk too much about things that haven't actually shipped.

And so I can talk about this because we shipped it in an experiment and people have been using it and it's pretty amazing, quite stable. But yeah, some of the work that we're doing to solve some of those problems hasn't shipped anything yet, so I don't wanna talk too much about how we're working on that and how we're trying to solve that.

But when those things are finished, it will open up the opportunity for more people to be able to migrate even easier to Remix and just get nicer experiences very quickly. And then I'm also excited about the future of maybe some of the newer JavaScript runtimes that support TypeScript built in.

And the fact that the browser supports the ES modules, and hopefully getting past this terrible ES module, common JAS, nonsense that we're dealing with right now in the node ecosystem. But in Dino and Bun being able to just execute JavaScript, or TypeScript directly and in button JSX support built in, and so you can have a Remix app that doesn't have any sort of Bundler.

Now, of course, you've got tons of dependencies, right? You don't wanna load 5,000 JavaScript files in the browser. Well, what if your runtime is fast enough that you can compile or bundle on demand? Why not, sure. So no build, deploy in five seconds. That sounds kinda cool. Kinda like that.

I mean, the challenge there still is like migrations will still take how long migrations do. But if you're just changing code deploy in five seconds, that sounds awesome. So I'm really excited about opportunities that not just Remix but the web and infrastructure enables, it's amazing. And to get this released, wow, that is cool, that is really cool.

So definitely I've never been so excited about building web applications, my own website is, I think the first large deployments of a Remix application, it's probably still the largest open-source deployments of Remix application. I was building it while Remix was being built. I started it before actions were a thing.

And so like kinda constructing the plane or yeah, in the air [LAUGH], sort of thing. And I'm still just floored by what I was able to accomplish with Remix. So yeah, Remix tricked me into being a back end developer. Most of the code that I write is back end stuff, but it doesn't feel like it.

It just feels like I'm writing UI and way less code than I ever wrote for these kinds of UIs ever before. So anyway, there's enough gushing over Remix for me. There you go. Any other questions?
>> No.
>> Okay, yeah, TJ.
>> Aside from this course and your web website and the Remix website itself, do you have any other places where we go for documentation or examples in the Remix community?

>> Yeah, thank you so much for asking that. So on the Remix site, we've got our docs. And there's the quickstart guide. That's basically a tutorial version of the Remix fundamentals workshop we did yesterday. So the workshop yesterday has more stuff and then of course I'm there. But there's also an egghead course that goes through lots of that stuff as well.

And then the jokes app deep dive is a really long tutorial that I did and I live streamed the whole thing. It's six hours long on YouTube that you can go along through this tutorial with me. I'm not sure why the image failed to load. But yeah, we go into like, all right let's bring in styles and let's talk about authentication, let's set up our Prisma thing, all basically from scratch.

So, this one's really in depth, it'll teach you a lot of really cool stuff. And then we also have of course like API reference documentation and everything like that. The philosophy page is actually really useful for people trying to get an understanding of what role Remix plays in the broader ecosystem of the web, technical explanation, I recommend reading that as well, kinda explain how things work technically.

And then the community as well where this will tell you where you can go to our Discord server, really friendly place we're working hard to make sure it stays that way, so if you're not friendly stay out. But I'm sure that you're wonderful people and we'd love to have you there.

We also have a pretty active GitHub discussions, we have a lot of examples, happy to accept PRs for more and for improvements as well. And growing list of courses that the community members have made, and all of that stuff. And of course, Remix con coming I scheduled for the second week of May next year, so look forward to that as well.

So, yeah, and this page, are probably the best spots. There's actually another unofficial thing remix doc guide that somebody put together to Remix app that has just like a ton of resources, whether it's packages, tutorials, all sorts of stuff. So that's another pretty good one to take a look at and submit your own stuff too and stuff.

Thank you so much for giving me some of your time to tell you about something that I love and that I think will make the web a better place. I hope that you take the time to play with it. Try it out, do a proof of concept, and I said yesterday, the way that I develop software is, if I'm ever unsure what approach to take, I implement them both and choose the one that I hate the least.

And so, I hope that you do that. And that when you say I hate this one the least, you're actually like, actually I love this, and it's Remix. [LAUGH] Thank you so much and have a wonderful day.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now