Of things Epic

00:16 Alright. Thanks, everybody. I I hope you appreciated that music. AI, made that for my Epic React v two launch. And some of you may have, recognized that from the music video that I made, that, I still feel silly for doing that. But, wow, thank you all so much for being here.

00:37 I'm super excited to, to talk about things that are epic.

00:44 Yeah. So before we get into what I'm going to be sharing with you, though, I would like to invite everybody to please stand. I've been speaking for over a decade. I, I think there are, like, three talks I've ever given where I didn't do this. So raise put your hands out in front of you like this.

01:02 Squat down and come back up. This is the air squat. We're gonna do 12 of these together. Get the blood flowing, and we're gonna count out loud. Ready? One, two, three. Doesn't that feel good? Four, five. I can start this is a little much. Seven.

01:20 And the the beauty is, like, you can really squat down if you really need that extra 12. Let's do it again. No. Just kidding. Hands over your head. Over to one side and over to the other. Alright. Awesome. Thank you. Yes. Bravo. You can go ahead and sit down. Thank you so much.

01:43 Our brains need blood flow, and moving the body is how blood, gets flowing. And so this is good for you so that you can really process stuff. And if you're ever feeling kind of, like, oh, man, I'm just, like, foggy, then, yeah, do some air squats. It's good for you. So first, I just wanna say thank you.

02:01 Thank you all so much for coming. I know for, like, driving four days across the country, man, like, wow.

02:09 Flying twenty hours that is not close and some of you are close but even still you're giving out time from your family and from your work to be here and I just want you to know that I really do appreciate that and And on top of that, we have sponsors who make this event possible.

02:30 Any amount of money that we spend that we don't get from sponsors comes from me. So I really am grateful, to have the sponsors that we do. And, the organizing team zero slopes is just fabulous.

02:42 If you have had a good experience here it's because of them and I am just really, really grateful to them and the mustache crew also managing live stream and AV and everything just amazing and it I just really appreciate seeing people, doing really good things and you all do that for me.

03:02 I hope that you take the opportunity here while you're at the conference to make connections. There are a bunch of people watching the live stream hello I hope you also make connections but the the real value of a conference like this is the connections that you make with people.

03:18 How many people here could attribute a job that they got to meeting somebody at an event like this? That is nuts. Myself also. And so there's just something magical about people meeting each other in person and it's the edge that we have on top of AI. So, let's just keep with that. Please take advantage of that opportunity.

03:46 Okay. I'm gonna, just a quick warning. I'm gonna be saying thank you to some specific people and, like, calling people out for some cool things they have done. And any time you do that, you run the risk or likelihood of missing somebody. And I'm sure that I'm going to.

04:00 So I apologize if you are missed as I'm going through some of these, people. Just know that I am grateful for you too. So I want to talk about the Epic Stack really quick. Epic Stack is a project starter and a reference for people who want to build Web applications the way I build Web applications.

04:20 I announced it, on this stage here in this hotel at Remix Conf Year Two, two years ago, and some things have improved and changed over the years. So, we're at almost a thousand commits, to the project. It's got over 5,000 stars, I just noticed recently, so that's exciting. Looking forward to the next 5,000.

04:43 And there are 500 public epic stack repos, and many more that are private. That actually blows my mind that people are actually using this to generate their projects. But even more than that is the number I can't count which is how many people are referencing it every day and I really, that makes me feel good.

05:03 So some exciting things that have happened relatively recently we upgraded to reactor out of v7. Yeah, let's go. We have the epic web config. So, the Remix ESlint config is no longer was it deprecated? Something. We're not using it anymore. So I made the epic web config. You can use that.

05:23 I'll talk about that a little bit more later. Prisma type SQL is now a feature, and so you can write in a SQL file and get, types from it, which is very cool. Tigris is now supported, so object storage. And along with that, is oh, where did it go? Yeah, here we go. Open image.

05:40 We're gonna hear about that from Andre today. So optimized images that are all built in. You're not paying for a service for this. It's all just part of, the hosted solution on Fly.io. It's amazing.

06:13 Tailwind v4 is coming soon. I actually was going to merge it, and then it would, like, really mess up a couple demos for today. So we're not merging it until after today. And B test browser mode is also coming soon. I'll talk about that a little bit more, too.

06:27 But my favorite part is 160 contributors to this project. Yes, let's go. What's cool Thank you. What I think is so cool about this is that the epic stack is different from your typical, open source project.

06:46 You're using the library, you find a bug, you fix the bug, they release a new version and you install that version and now you are benefiting from your own contribution.

06:55 But with the Epic Stack you generate a project, you find some issue, you fix it and from there like it's your code so you just fixed your project you can move on with your day.

07:06 So anybody who's coming back to contribute back to the Epic Stack is purely doing it because they just want to make the world better, make other people's experience better. And I'm just like, wow, that's awesome. And so I just want to shout out, a handful of the recent contributors who have just been super awesome.

07:22 I'm not going to name them all by name right now because we don't have time, but I just thank you. And if you're not up here and you have contributed, I just really appreciate you. This is awesome. Really, really cool people.

07:33 And also the Remix team, of course, Epic Stack is built on top of React Router, and it wouldn't be what it is without, this crew. So really grateful for this team.

07:42 And honestly, I could I could name, like, the V test team and the V team and the Playwright team and, like, the Prisma team, like, all of these different, teams upon which we build our work. I think it's really cool that we can do this. Open source is just it's the bomb. It really is.

07:58 Part of the epic stack is epic web. And the idea is that epic web and epic stack kind of go together.

08:04 So if there's something in the epic Stack then we probably teach it on Epic Web, and if we don't yet then we will eventually, and if we teach something on Epic Web it'll find its way into the Epic Stack. And so since the last conference, I, launched a new version of Epic React,

08:35 to Epic Web. And especially a shout out to Artem, who has just been working his rear end off to teach you all testing. Testing JavaScript.com is still very valuable, but it's also a little bit dated and Artem has been working his rear end off to, to get you updated materials.

08:53 And he's just, in the middle of editing a new workshop a new workshop on testing React with v test in browser mode and it's fabulous. We're living in a great time. Finally, we can get rid of JS DOM. I appreciate JS DOM, but I'm so happy to be leaving that. So,

09:14 okay. I want to talk about one other thing and that is the decision documents. This is actually where a lot of people said the epic stack is really helpful to them is that we have, anytime we make a change to the epic stack, I write up, like, why are we doing this?

09:31 Like, how how do we decide to go with SQLite versus all the other options? And there are, I think, like, 40 or more decision documents in here right now. And, as things change, it makes, like, there's a bit of a burden on you. So, oh, oh, shoot. I'm in the wrong order. This is awesome.

09:52 Like, go look at these. Sorry. Spoiler alert. I also released the EPIC programming, or sorry, the EPIC programming principles. And all of those decisions that go into the EPIC stack are based on one or more of these principles that guide the way that I make decisions.

10:12 And I'm going to be talking about this a little bit more later this year at other events. But I think that having like being thoughtful about the principles that guide your decisions, is a really useful tool for you. So I recommend that you take the time to think about what guides your decisions.

10:35 Something a little bit more subjective, is the EPIC Programming Style Guide, which I'm officially releasing today. Hooray. Thanks. Yeah, so this is like what you would expect from a style guide. Here's how we write functions and here's how we do, our const variable declarations and various things like that.

10:57 And that's mostly useful for people who, don't have experience enough to have an opinion on those things or want to have, like, some consistent style on a team. And so this is part of the epic web config, which includes config for Prettier and TypeScript and ESLint.

11:15 But it also I really don't want people to have a red squiggly underline in their editor just because of some, like, subjective thing that doesn't actually affect, the end result of the program.

11:25 And so the ESlint config is pretty light weight but the style guide can be used, my hope is to use it to kind of guide your AI assistant so that when it generates code it generates it in a consistent style. So look forward to more stuff on the style guide too. Okay.

11:44 Now I want I think my timer is off. So like throw something at me if I'm going over. Because it's already saying I'm a minute and a half over and I don't think I am. Okay. We've got problems in epic town. Let's talk about what is going on or what is the problem with the epic stack. So

12:06 the,

12:11 the code that was generated is yours, which is awesome because you can customize it, change it, and like there's no indirection with, like, code hidden in some dependency. This is great. And this is part of why ShatCN has gotten so popular. It's like, now I own it. I can make any change I want.

12:27 But the problem is, what if I make a change, like, we're going to tighten the password security, validation or we're going to add Tigris support or we're adding pass keys and now you're like, I wish that I'd waited like three days to generate my project because now I have to go figure out how do I add that to, my generated project.

12:47 And then we also have like this whole big set of examples that, you can use and, you see, okay, here are the things that I need to do. So let me go over to my project and I'll add those things. My project by this time maybe it's changed a lot.

13:01 And so there's like, I can't just apply the patches. I've moved files around and stuff. So this is a problem I never thought we'd be able to solve. Yeah, sorry. I actually had screenshots for that. So, yeah, new releases and all of the examples. Never thought we'd actually be able to solve this problem.

13:19 But, things have changed in the last two years. And I think that we're getting pretty close to being able to generally, solve this problem. So I'm going to demo, something for you really quick. NPX epically.

13:35 It's epic CLI. It's epically. I'm going to epically do things. So, the first thing I want to show is, the update script. So we've got the new script. Right now, you have npm create epic app. We're going to move that over to epically. But we're going to say epically

13:54 sorry, I'm a little nervous my fingers aren't moving right. We're going to epically update. So, this project, media RSS, I, initialized this project from the epic stack a couple weeks ago. And since then there have been a number of changes to the EPIC stack that I would really like.

14:12 And so, what this does is it's going to clone the EPIC stack and it's going to find all the changes that have happened since I last updated and it's going to, let me know, hey, here are the changes you're about to add.

14:24 I can filter things out and things, but, I'm going to say, yeah, I want all of those changes. And then what it does is it, gives me a prompt that I can give to the AI and right here we have this epic CI patches. And so, what's here, let me I just got to show you.

14:42 So let's copy this. We're in our, AI. It's got I don't know. This always is kind of funny how this works. Let me give us a little bit of space here. Now, we'll try that again. Grab this. If you copy and paste, it's like, oh, no, you just want those lines. Okay, fine.

15:00 And so we'll send those lines over to the AI and it says, okay, great, I'll go check out the Epic CLI patches directory and, we'll see what changes we're gonna make. And it'll just go through the patches one at a time. And I can myself just whatever edit like if you're using Wint Cerf, I'm using, Cursor.

15:20 You could use, Cloud Code. Whatever AI you're using, you can use that. And so I apply that patch. That looks good to me. We're gonna delete that patch. And then it'll boom on to the next one. And what's cool about this approach is that I could at any time, I could be like, Oh, you know what?

15:36 I gotta, like, go, drop my kid off to at gymnastics or something. And so I'm gonna just stop and then I can continue because it's deleting the patches as it goes. So like this, we could have, like the AI assistant has trouble with context, but we can just like do pieces at a time.

15:54 And, by the time it's all done, we've done all this, all these patches. And on top of that, we can, make changes like, oh, that patch didn't really apply very well because I moved that file or I did whatever. So you can just stop at any time and make those adjustments.

16:06 So you have this AI kind of hand holding you to getting the latest of the epic stack. So that is, updating the epic stack. We can finally make that happen.

16:22 Thank you. I'm excited about that, too. We're gonna also, let's run the, NPX epicly. And it's apply. I was talking about how we have those, a bunch of examples.

16:38 And so now I can look through the examples that we've got and say, you know what, I would really like to have Stripe in this app because I'm going to start charging for this thing. And there's this, Stripe example. So I'm going to select that and it does the exact same sort of thing.

16:54 So the examples are an epic stack with a couple extra commits that, like this is what it takes to perform this action. And so now we're we just accomplished the exact same thing.

17:05 We have, the, the prompt, we have the, patches, And if we had more time, then I would go through and and show you that it actually does work. It does, and it's great. And it's only going to improve further. So very excited.

17:19 You you'll be able to apply, examples, even and the trick is, like, oh, I could just initialize a new repo from the example. But what if you've been working on your repo for a long time and the epic stack has improved a lot.

17:32 And so now the example is behind the epic stack and, like, keeping all of those up to date would be a big pain. So now you can just make an example, make a new Epic Stack and just apply that example, anytime or or apply this to an existing app.

17:46 And potentially I think we could make this work even if you didn't start out with the Epic Stack. And I'm just very excited about this practical application of AI. And also very excited that, I'm having you do it in your own editor so I don't have to pay for your, your prompts.

18:04 But, this is actually, this, most of this was not built by me. Most of this, oh, actually, call to action, please make examples. So, like, people will actually be able to make a lot of use of those. And I've got a video here that, walks you through what it takes to make an example.

18:19 But yeah, most of this work was done by Jacob Paris. In like, just, yeah, huge shout out to Jacob, you've probably seen him before. Yeah.

18:29 He rocks and, and this package, packageless project is what he's been working on to, to be able to actually bring this way beyond the epic, epic stack and, I think that it's going to be a pretty cool thing. He's still in, process of doing that.

18:46 But I was building this and he, I said I think Jacob's been working on this. So, he, decided to apply lots of that, to the Epicly, CLI and I'm very excited about that. So thank you Jacob.

18:58 So it is on GitHub, you can go start it and that is always, that's how I feed my family is the stars that you give to my repos. Just kidding. But that's all I have for you. Thank you all, you are epic.