How Laravel.com Was Migrated to React + Inertia w/ Chip Needham

Okay, we should be live. Yeah, there we go. We should be live. Hi everyone. Happy Thursday. It always takes me a second to remember what day of the week we're on. It I mean to me it feels like Tuesday still and sometimes I still want it to be Tuesday. I have I've got a long list I have to try to get done by tomorrow. Oh no. I'm like part of my brain wants it to be Friday and so I'm like, "Oh, happy Friday." I'm like, "Wait, it's not Friday." And I have something I have to finish by tomorrow, too. So, it's a good thing it's not Friday. Well, yeah. I mean, to be clear, like the the fun part of me wants it to be Friday at 4:45. Uh, but the work part of me wants it to be Monday. That's fair. I think that's where I'm at. Except I'm like, I need the weekend and to work. I have conference talks. I have I'm speaking at a meetup next Tuesday in San Francisco. So, I have to work on that talk which is 20 minutes and then I have to work on the Japan talk which is five minutes. Oh, that's right. You're doing the like a lightning round or whatever it's called. That'll be so cool. What What are you talking about? That one is the browser is trying to tell you something. So, it's talking about like updates that have been made to like the DOM API and stuff like that and how that can reduce the amount of JavaScript you're writing. um kind of which I gave a talk at Laracon EU that was like things you can uh things you didn't know you could do in CSS which was kind of the a similar vein you know you could like I was able to make a birthday cake fully in CSS light a candle blow out the candle like trigger confetti all through just CSS and no JavaScript so it's kind of showing like how using CSS and just things that have evolved in the browser the DOM API all of all of that to allow you to write less Java script and then the talk for the meetup is um again front end what a surprise but it it's um basically like how to make UIs that your users connect with and why that's important in the age of AI. So like how to make your UI stand out against like all of these like vibecoded applications. Yeah. Right. It's because it's all starting to kind of look the same, right? Unless you are crafting something like like like an artist really as an artisan, right? Talking about Laraveville here, like unless you actually forcefully make something different, it's going to look the same. And it's also like um because we kind of noticed this is like with AI, what is it that makes us stand out? It's like the human aspects, right? So it's like when you go to conferences and you actually connect with humans. So it's the same with like your UI and stuff too when you are putting that like human touch on it. Yeah. actually compared to just like AI doing it. I mean maybe they'll be able to think like us and maybe they'll replace us all together. Who knows? But yeah, I mean it's already come so far, right? Like it's already think about where we were even a year ago, two years ago. And if you just like that at the end of like where are we next year, that's uh fairly terrifying and uh exciting to think about. Yeah. Going next year. Sorry. Go ahead. Oh, no. I was just saying I agree. I was uh going back to your CSS thing. Have you There's like a few websites that like aggregate like CSS only creations and there's like a whole bunch of games. There's like 3D like generations and like simulations. U I saw one where someone ported Doom to CSS only and it's basic it's like a playable Doom game and it's just CSS. Um, the people that are doing that are uh I don't know. They have a lot of time, I guess. I want to do that so bad. I did see the CSS only Flappy Bird, too. Yes. Yes. I want to do that. I Yeah, I don't have the time at all. I want to do it so bad. What a game. Flappy Bird. People were selling like old iPod touches with Flappy Bird still installed because it I don't know got banned or whatever. The creator the app store. Yeah. Um, but you can buy one for like I think it was thousands of dollars. You could buy an iPod touch that still had the game installed. That's a steal. You should do that. Yeah. Lock it in. Let's do it. You should do it. Bring it to the next off site with CL with Claude now though. I uh I'm sure I could get a pretty good clone in 10 or 15 minutes probably. You could also build it with React Native now. And so then or not react native native PHP wrong. Well, both all all of the above. Um just have all kinds of versions of it. Uh the the ability to like make things now is so exciting, right? Because it was always, at least for me, you I'd have I have a million ideas. And then the problem was always like, well, when am I going to do that? When am I going to like learn to get the skills to be able to do that? Now I'm like, I don't need to know anything. I'm just going to tell Claude to do it. Uh, it's very exciting. I've got a friend who like made a a game. It's like Wordle, but it's called Invental. Um, and you you have to guess inventions and or Yes, you have to guess inventions. Um, and it'll tell you if you're like warm or cold based on the year or like earlier or sooner and then it gives you hints. Um, but like totally vibe coded. It's I he it's on Laravel cloud now too. He he deployed it on there. Um but it's just like you can think of something and make it and that barrier is is totally gone. Yeah. I feel the same way too cuz it's like if I'm thinking of building something and like maybe I want to use a certain technology but I'm like oh I don't really know that so I'll use something else. It's like no I can use that technology now and just have like claude or AI help me. Yeah, it's anything. The world is wide open now to do anything we want to do. Which is fun. Also a little scary some sometimes, especially with like I don't know current stuff you've seen about security issues too. Oh, I mean for sure there there is a whole other side that we are like conveniently not talking about. Um, and just like the I mean if you really want to go so into it, there's like this book that I think Sam Alman is like super into, but it basically talks about there's like seven possibilities of the future of AI and only two of them result in like keeping humans alive. I read some like article thing that's similar like that. But on a less like depressing we let people trickle in. So hi everyone. Um, feel free as you get a chat to let us know where you're tuning in from because it's always interesting to see the different time zones. Um, but hi everyone. We will be I'm here with Chip today and we're going to be talking about the Laravel website migration from Blade and Alpine.js to React and InertiaJS. So, we'll be talking about that and talking some about how AI was used for that migration as well as the features of Inertia V3 that were used. But, let's do quick intros first. So, hi, my name is Leah. I am a deval engineer at Laraveo. I'm frequently on these live streams and you might also see me in at Inerson events such as Larvo Live Japan in two weeks, I think now, uh, which is crazy. But I'm here today with Chip. Chip, do you want to do a quick intro? Yeah, sure. Um, hi, I'm Chip Needm. I am currently the engineering team lead of the web team or the marketing engineering team. I don't know if we really have a name settled. Uh but um yeah, leading that team at Laravel and really just helping create, curate, and and maintain all of the logged out experiences of everything Laravel has to offer. I love that. Yeah. When I was writing your title for the YouTube description, I was like, is it marketing engineering? Is it web teams? I went based on Slack. Yeah. I mean when I started it was called the web team but then since then I think everything is written down as mang or marketing engineering. Uh either one works. Yeah that's what it was when I was doing it last year too. It was like marketing engineering. Um but yeah so we're going to jump into talking about the migration. Um I guess for context too which kind of leads us into the first part is like what got migrated. So why we migrated and what got migrated. Um but larel.com itself has been migrated from blade and alpinejs to react inertia as well as some of the other pages such as um correct me if I'm wrong chip but the blog the community site laravel learn forge now. Um and then kind of what else is migrated? Yeah that's right. So there there's a lot you're you're very right. Um so right laraveville.com like at its core was converted to inertia and react and then a lot of these smaller kind of finger parts of that as you mentioned events community uh the learning program um our partners kind of site is now kind of collapsed into that as well. Um we just did forge. Uh it's hard to keep all these straight. We just did Forge and Forge was a little different too because Forge used to be an entirely separate site. Um, and it was the marketing page. Um, it was the marketing page, right? Um, and kind of part of the conversion to React and Inertia. It was also then kind of brought in and and melded together with the rest of Laravel.com. And that's part of an ongoing effort for the rest of the products to kind of all become this unified site and and experience. Which I guess for context too, um it was the same with community community learn and blog at first too. The ones that were kind of like using filament and like the admin panel, they originally were in their own repository and then we collapsed them into the Laravel.com. Yeah, that was before I got in and but I saw that and I knew that happened because I was like I mean big Larville fan by so I I'm on the the site a lot and I know where things were and I I did notice the change um kind of right before I was joining. So it's overall the concept is to try to kind of make this a more seamless like experience for people visiting the site, people using the products and really realizing the the full breadth of products but also that continuity and compatibility within the software but also like showing that through the experience of the websites which I think is great. Also for people who are wondering why did we migrate from Blade and AlpineJS to React and Inertia. So I don't know if there there's like one answer. I think there's there was a lot of boxes checked. Um and it then kind of when you step back it's like oh this is this is the clear choice. Um so I guess I'll just run through a few of them. One of them was like I think the camera might have froze real quick. Oh, it's bad now. Okay. Um, one of them was we were starting to introduce just more complexity within the sites. Um, we've got great new designers at Laravel, a great front end engineer, uh, Tim Wilson. So, now we have kind of this talent to do some more exciting and different things and really kind of push the the technical limitations. And we were starting to kind of hit a bit of a ceiling where things would be possible to stay with Blade and Nailpine. Like we did we weren't forced to, but it became apparent that there was a better or a more organized way to move forward with this additional complexity and that ended up being React and inertia. Um I think like performance with the complexity is kind of a checkbox. React handles it better. Um, as we talk about like the com combination of all of the sites and also like developer efficiency, the more reusable components and like the the just the reusable items that we can now have across all of our different sites, but then also maintain it in one centralized location and not have to go to this repo for that and that repo for that and make it look the same. it it it reduces a lot of developer effort and time. Um, but we still get really big impact. Um, man, I guess there's a lot of reasons why we did this. Uh, the SPA experience, so having just a super snappy navigation experience. Normally when you're doing SPA, right, it's more of like an application. that's where it like really shines and really is I don't know meant to be used but where it's like it's really at home in like an application situation. But for the website, I think of it as showing off how good like the product is, how good React on Inertia on Laravel is. um being kind of a longtime PHP guy, you know, there's all you're fighting in the lunchroom about like, oh, PHP is slow, PHP is outdated, PHP is this, it's that. And so there's kind of that air out there, right? Um, and so trying to like dispel that even just like subtly in in an experience like if you go to like a PHP page, a Laravel website and you have like a super snappy navigation, everything is like lightning quick and smooth. I think that just like mentally shows off what what we're about and what we're doing and like making PHP cool again. Um, I feel like that was like a necessary thing. Um, and I think I touched on it too when I said mentioned Tim Wilson, the designer. Um, we have a front-end engineer. Um, like the the talent pool is massive. So, just from like a company perspective. Um, like making things in a language that has a very like deep uh talent pool with some fantastic developers. if we want to expand the team like we can do it quick. We have some some really great people that we can can lean on. The community itself is enormous. Um so there's there's a lot of things going for it. That's like there's so like you said there's so many reasons and that's like I don't even think touching on the fact too that we're using reactant inertia for like Laravel cloud the product itself as well as nightw watch. Um, so having the site in reactant inertia now it makes it easier to like bring in the components. Um, we can use like shad CN and stuff like that because I know whenever I was building out the nightw watch um, marketing page before last year before we had a lovely web team um, I had to convert like a lot of like shadian components to be more like blade and alpine like take I'd go to nightw watch I would take the react component and have to convert it like over. So this takes away that need to. So, like you said, there's so many reasons. Um, and it is funny you're talking about the ecosystem. I'm wearing my React Miami shirt today. Yes. I love it. I didn't notice that until now. That's so great. Yeah, it's there's there's so there's a lot of things going for it. And in terms of like an organization like Laravel where we're growing, we have this massive pool of developers. It can get really difficult to collaborate or it can be even difficult as like an individual within that organization to spread out and work on different things if you have to like know a different language and a different framework for everything you touch. If you know like you said the apps are running it so why not make the site use it and that way anyone knows instantly what they need to do. There's there's not this kind of burden of learning different systems in different parts of the sites. M I think it makes it easier to collaborate too. Like if someone's like, "Hey, I'm trying to do this. Does anyone have experience with it?" It makes it easier to then relate cuz you're not like, "Oh, I do, but I was using like this specific library that's only for this thing I was using that you're not using." Like we're all kind of on the same page. Yeah. Kind of like hive mind like right if everyone's like aligned then it's like you have this massive like brain pool uh to just like power through bugs or you know whatever you want to say about it. is like you have all these people to te to touch on that can just hop in. Mhm. So I think that was like a great coverage of what all was migrated and I guess also because we mentioned what was migrated. Um but there are some pieces still in play that we are still migrating right because you mentioned like the collapse right right now um there there is a cloud migration and conversion to react. So the cloud marketing site um which was which was previously and still today is cloud.vel.com. If you're not logged in that's you that's the marketing site. Um we're moving that to laravel.com/cloud. We're putting all the redirects and everything in place so it no one no one should notice a difference. if they notice anything, they'll notice the snappiness and navigation between the layer.com site and then the cloud product and then navigating throughout the pages um of cloud. Um so we are in progress with that right now and then uh nightw watch will be the one after that. Um and then I believe vapor will follow behind that one. Yeah. So still still cranking the migrations up. Yeah, it's uh it's been fun. It's been interesting. I think like at this point I know every single page, every single component of of everything. It's I've just been staring at this stuff every day for um probably a few months now. We love that. And then I guess getting into the migration or at least like the parts that have been done already, right? How did it necessarily work? So, kind of breaking that down into two parts, right? Because I know you used AI to help with it. So, breaking it down into like the AI workflow part behind it and then also um I know you used Inertia V3. So, like the Inertia V3 features that helped with this migration as well. Um and a side note that you had ported the site over to Inertia V3 when it was wasn't even in like what the stable release yet. It was Yeah. No, it was it was early data. I think it was I saw a slack from Pascal about wanting people to test it and so I did and I I'll jump back to that I guess to start you know how did we begin to think about doing this and it was right as I was coming in so this was like end of January February there was kind of like this general idea that we would we would do this we would be migrating the pages is within the subdomains we would be converting to React to kind of create this like unified experience for like the development side but also present like a unified um face to to like the users of the sites. Um and it was a bit daunting at first. Um I mean talking about like the speed of AI at that time AI was was good but there was still a lot of like hallucinations. Um, and it's crazy to think about that was just a few months ago. There was still like a lot of I think sentiment about like reviewing like every single line that it came up with and a lot of handholding and a lot of directing. Um, and so there there was the thought that like obviously AI would be a part of this. There's a lot of heavy lifting that AI can do that is just like tedious, needless things that that humans while I could do it and spend weeks and weeks and weeks on it, like this is something we want to we want to get done. Um, and so at that point I'm like, "All right, so how do I how do we direct an agent to like properly and effectively convert an entire site um to to React?" Um, and so my like the first thing that came to my mind is like, well, we can't just like open claude and say like, hey, look at this site and then make this react and uh, good luck, right? There's there's a lot of kind of like AI planning almost involved where it's how do we think about like stages or layers um, of using AI to make that happen. And so what we kind of came up with was, you know, start with like routes and like rough elements or make like the pages, make them exist where they're going to exist and use like no styling and basic like text. Don't even use real copy. Just say what the page is. And that's where I started. And I I did that because the amount at that time of like hallucinations or the stuff that it would make up was becoming problematic. Um we were trying to make a onetoone copy of the site. Um we wanted it to be like no one should know that we just converted the site to React. Um and so doing it that way was not going to work. So So now we have this rough draft. we have like these like pages where everything's needs to go and then I'll do kind of this like this medium like like prototype. So at that point we'll bring in like the real copy um and I'll have the cloud like marketing site repo in the same like parent directory so Claude can just like go up one and look at what the code is um and check it out. So I'm like pull pull the the the copy that we need, pull the images, and the one thing we did differently was knowing that this is all about organization. I'm like, put these in like a more organized fashion. Get the files specifically as they were used, but maybe we'll use different directory directory names to make it easier for the humans later on to know like, oh, these are the logos, these are like the user icons. Um, and that's kind of like a development like improvement on our end of it so that we can fix things better. Um, and so now you have like the state of the site where you have these like it's raw copy doesn't really have the styling it should. Um, has files kind of in placeholders that that they're there. Um, and then kind of then you leave it and then you go down to doing like what I was calling like the final draft. Um, where it's really like polishing and refining. Um, and I think with the way that I think as context increases, the quality of AI work and output is has been decreasing. And that's just kind of what I see as I'm working with it. If I'm just like polish this whole page, this whole website, it's going to be it's going to be pretty bad. Maybe some things are are spot-on, some things are perfect, but it's going to make things up. It's going to put like weird shading on things. It's going to do things wrong. And so weird like rounding the borders and stuff, too, because it's still not great at like Figma to code. It will like assume stuff and it like does not stick to the actual thing. Like it always like if it's rounded borders of like four pixels, it tries to do like the tailwind like extra large rounded. Yeah, it it has a hard time like translating that I guess like e even if you weren't converting it to React like this is literally it's just copying the tailwind over, but it'll still think that it somehow is doing a good job by changing the classes you used. Um, and then you'll say like, you know, I I always think it's interesting to like not like to question the AI afterwards. And I'm like, so why did you why did you do this? Um, and it's always funny and annoying. The answer is usually like, "Oh, you're right. Like, I shouldn't have done that." Um, you're absolutely right. Why did I do that? It's I guess it's part of the process and it's just like how it is. It it is how it is. And that's I I think you kind of get used to it doing that. So the reason I was saying that how bad it is that way is I I go section by section. I go do let's let's work on the hero. Make this like visually the same. Copy the classes in use everything the same. Um and now luckily too we have with like the claude and chrome recently I've been preferring um claude for cloud code. I know Codeex maybe ranks better on some days when they test it or whatever, but um I guess I just have a relationship with Claude now and I prefer it. Um but the the Chrome um kind of plugin where it can take the screenshots or it could also navigate through a site is like super useful for this um because you can really get it visually like pixel to pixel the same but then you also have the code on the back end where it can check. So I like running through the thinking it would go like if if the shadow is messed up on this box, the corner radius is messed up on the box, it can identify that visually with its like browser plugin. What I do when I'm prompting is and I for I have to tell it literally every time it it like refuses to remember but I say specifically go to the other repo and take the the class names take how that styling was because when it tries to guess visually just from the visual information it's it's almost always wrong. So, it's it's a lot of handholding, I I think. And it's also just some like it's prompt engineering based on mistakes and understanding that the more specific you are and the more the more like closed in your your view of what you're working on is um the more accurate it is. Um once you kind of let it start running to do an entire page itself, it makes up copy. It just Yeah. And it some of it's not even bad. Some of it's interesting. Like there was one time recently, this might have been two days ago, doing the cloud stuff where it rewrote the copy on the one of the enterprise page and it wasn't bad. I was like, you know what, maybe maybe we should do it like this. Um, but again, you know, the the point and the the reason we were doing this was to start off one and then obviously we can make changes on top of that, but you don't want to have too many plates spinning in the air. Um, because then it turns into a mess. I mean, with humans as well, just trying to manage too much, right? You're not going to do a great job in all of them. Yeah. No, I think that's great. And I guess to summarize, so um and answer anorag's question which hi welcome in and I pinned it cuz you were like answering it as it came in to chat. Um but to summarize it, you used AI during the migration process in the initial part of like getting the copy over um and stuff like that like originally from those pages. Not really worrying about the style yet, but just trying to extract the copy and everything from it. And then it sounded like you used it for um like renaming some of the component names or some of the icons and stuff to make them easier to like more relevant names to make it easier to maintain and also find later on. and then somewhat in the um polishing process as well. But like you said, you have to break it up into chunks because if you just ask it to polish the whole thing is going to kind of go wild versus like and I noticed the same thing whenever I was working like the night watch site and stuff like that. I had to break it up into like components or even like certain parts of the page and ask like, "Hey, create this." And then I would let it do a first pass and then I would go back and like double check everything in the Figma to like make sure it was exact because like we said, it went wild on like the rounded borders and stuff. Um, yeah. And one thing I kind of like relate it to or like make the process I think in my mind is very similar to the way they like make animated movies where they have like these story boards where there's like just like a loose pencil drawing for like every five minutes let's say of the movie and that's where they start. So that's kind of where we're like we're setting the routes. We're like putting some like names and some maybe some hero like letters up like we've got like a hero text and that's it. We start there. It's black and white and then we kind of go we go through another pass. Now we're starting to like actually show the action. We're putting boxes where the boxes need to go. We're making containers the right size. And then we do another pass. we're going to add like the colors and and so you just kind of layer on these different passes with AI and where it's like really specific about what you want this agent to be focused on or specializing in um so that each time you know it's doing one thing really well um you know you give it one task, one very specific thing and it will succeed. I love that kind of thinking too of like breaking it down into like comparing it to like animations or like how they do the storyboard for like animated movies and stuff because it does feel like a really similar process. Um, but also I wanted to cl I know you mentioned cloud code but what other AI tools or models did you use for this and did you mainly use planning mode or or no planning mode? Yeah. So, generally I'm only using cloud code right now. When I'm doing stuff with codecs, I'm like trying things out. I wouldn't say that it is like solidly in my workflow. Um I've been trying to do that so that I can I guess better prompt engineer and better like understand how I need to be specific um to Claude. I find that when I talk to like codecs, when I really want to get something specific, you almost like speak I think it at least I kind of speak differently because I know maybe what it has a tendency to do. Um and so cloud code is kind of number one like at least for the model. Um, in terms of other tools used, so like I use I'm mostly in PHP storm. Um, and I've just got my terminal running cloud. when I start doing some of the polishing um I've been doing polycope um which has this great like visual selector um where I can like click on the specific element and then it is much easier to like zero in on like which button I'm talking about which border I'm talking about uh it feeds like the whole like div and container information um and really points the the agent to the correct spot. Uh so those are the two biggest I am trying out um air um which is um another range right which is it kind of seems like more of a cursor clone polycope a little bit um which kind of would also give me that feature. Um but I haven't really tried it out too much um because I haven't You don't use Juny do you use No, I did a while back. I think it this was probably like a year ago where everything was free. They were like you there was no credits like you just kind of asked Juny to do things and it was it was included and I might have like I think I upgraded to like PHPtorm's AI pro or whatever at that time which gave you a whole bunch included and then I think a month later they made it so you have to like you had like limits and stuff. Um, yeah, I liked it. Juny was interesting because at that time, Juny was really well integrated into the IDE. And so if you weren't doing like purely vibe coded stuff where you didn't care so much about working in the code itself, the Juny stuff and the way that they implemented that made it really easy to like work side by side with the agent. It made it easy for me at that time like a year ago, right? I was writing code by hand um like an idiot. No, I mean everyone was. That's how it was. But being able to like select the text and then just go right into Juny in the sidebar or like select the code. I mean go into the Juny and sidebar and be like why is this crashing my computer? Uh why why is this not working? Why is this causing infinite loops? Being able to do that was really helpful. I think that's why I like cursor still. But I do use cloud code a lot, the CLI, even though I've started using the browser some. Mainly whenever I was doing like the live stream with Hannah, I started using the browser more and I was like, "Oh, this is actually isn't bad." Um, but I still prefer the CLI. Yeah. I mean, if you're going to be like wanting to hop in the code really and really have tight control over it, I feel like having it IDE adjacent is pretty ideal just because you have both happening at the same time. Um, and I think in the AI era like you have to you have to fight for like quality. You can't I mean there's things that work like if you vibe code something that's like relatively simple doesn't need to interact with things doesn't need like a team to maintain it and it's not like mission critical to like your salary and your job. Um like vibe coding is fine like it's good and it's a great way to prototype and get things started and especially like fun side projects and stuff like if you just want to like spin up a fun quiz or something it's great. Yeah. I think when you start getting into like writing code for your team like if like senior developer like you you better be you know able to to create some nice code so that other people on the team can work with it can use it um it should be intuitive understandable all of that AI sometimes fails at that and so I think you have to at times fight for quality fight for standards that if you just let AI do what it wants like you're not going to get that out of it and you're going to get hard to maintain code that maybe isn't as efficient or easy to work with as you'd hope. Um, and that's personally why I like just I like code. I was a big like clean code guy before all this AI stuff. So, I'm still very much like I want this to be like beautifully written, like super easy to understand. um following the conventions of the code base already cuz sometimes AI goes rogue although sometimes you don't want it to like sometimes you want and what I found too is like with like the agent files um or like the cloud file um getting really specific about how you want it to interact with that code uh because sometimes you don't want it to follow this the standards that have been set uh because maybe you're working in a legacy codebase that has a whole bunch of spaghetti and and you hate it. So that's where like sometimes these cloud files that the agent MD files come really really like in clutch when you're trying to say don't follow these existing patterns use like best practices use I mean on top of that with skills like all the Laravel skills all the Laravel best practices eloquent um tell to use those skills don't always you know use the existing code in a situation where that code isn't good um And that's tricky. I think so much of I've spent a lot of time in code bases that I would hope that AI did not write like the existing code. Um, so that's always tricky too is trying trying to to integrate that so that you're not adding more tech debt. you're you're benefiting from efficiency of AI, but you still have something that when when AI, you know, has some errors or you run out of tokens, like you can still get work done and you can still maintain it. Um, and you can still learn. I think people still need to remember like you should also like learn what what you're doing uh and like research certain things, right? And actually understand it. Um, it's always important because that also helps you become a better prompt engineer, which I think is now like a legitimate title. Uh, which is crazy, but being able to like know how to steer the AI to do exactly what you want. That that's a skill all by itself. Now, I agree. We also got some good questions. I'm going to start with this one because I feel like it's related um to what we were talking about, too. But, hi Essen, welcome in. Um, so he asked, "What other tools did you use during the migration?" I'm guessing you used Laravel Boost probably as well. Yeah. So, okay, Boost is a huge one. I mean, I think anytime working with anything Laravel, like you've got to have Boost. Um, it has the most recent docs, especially with the current version, right? If you're working with the latest Laravel version, Laravel Boost is, I think, imperative. Um, let me let me check that as well. We've got boost. We've got um I have a few like react um different skills here. It's like um we got next. Let me hold on. Let me pull Did you use the UI.sh one too? The one from Yeah. So, I was going to say that one that that thing is fire. I don't know if it's publicly available yet um or if it's a paid thing, but um I've really enjoyed that. Where's my claude file here? Let me link their website for that. I did link our documentation for boost. So you can go to laravel.com/boost to learn more about Laravel Boost. We also have some streams about um Laravel Boost as well, including one where pushback was on stream talking about boost. And then here's the website for UI.sh, which I still need to try that out, but I figured you use that. It's really really nice. Um so I'm also using um an inertia react it's called inertia react development um which is a Laravel skill. Um I'm using uh past testing. Um always important to test. Um I haven't talked about that. Maybe we can talk about testing with AI. Yes. After this but that that's been super important. I've got a tailwind um tailwind skill that helps with working with all of the tailwind stuff. And then the last one I'm using, at least with this specific project, um is a skill that I made. It's called be more like Tim. Uh because in the the early kind of attempts to to get laravel.com over um it was functional and at least visually similar, but the code was kind of atrocious. Um, and it it didn't achieve our mission, right, of trying to make a more maintainable, easy to work with code. It kind of just made one mess a different mess. Um, and so I was thinking like, all right, well, how do I fix this? I'm not going to I could go through it all and like put like the proper human touch on it, or I could do like the the AI way here. And so what I did was I hooked up my GitHub CLI and I told Claude to go check out um all of Tim Tim Wilson the design engineers uh commits. Go look at all of his work and come up with like various like rules and observations about how he works, how he codes things, where where he breaks things off into separate components, separate files, where does he draw those lines? Um, and so I had AI kind of compile that together so that when AI, you know, had its output and ran it through and used the the Be More Like Tim rules, we ended up with an output that was much more human readable and it was a lot closer to the standards that had been set in place by Tim. Um, and was kind of like the way he wanted to work, which is the way I want to work, which is, you know, efficiently and cleanly. Um, I love that. it's it was like I don't know. It was a shower thought. I was just like, "Oh man, I've got this problem. Uh, I guess I now have to go through all this and clean it up." And but then I was like, "You know what? No, let let AI fix AI and we'll uh we'll look at everything he's he's written to public repositories or even the the Laravel internal ones and uh tell it to do that." That's so smart. Also, if you could link the skills that you mentioned, like later, send them to me and I'll post them, too. I did link the UI.sh, but I couldn't find the React Inertia one or some of the other ones you mentioned. Yeah. And there's another one called like flex UI develop. I'll send the list and then we can if anyone wants it, you can check it out afterwards or or message me and I'll I'll send it to you. And then the other tools that Chip already mentioned, he mentioned um he's trying out air.dev. dove now which is kind of jet brain's version of polycope but I think at the time of the migration or the initial one um he was using polycope PHP storm and then claude code that's right and this one is a good question too um asks also did you track core web vitals before and after the migration which metrics improved or regressed yeah so this that was a tricky one Um, and it kind of it kind of went both ways, especially initially because we had really large like chunk sizes. We had large initial uh loads. Um, and that's kind of where we started because we didn't do any optimization. It was just like let's let's see where we end up. Um so the page load time also at the same time we started using more of Cloudflare CDN um and caching. So there's a few things going on here, but overall what we saw was that load times and then obviously navigation between pages had significantly improved. Um especially with like an exclamation with the internal navigation um going to pages within the Laravel site um became basically instantaneous. Some of that just by efficiency of inertia and react and the spa stuff. Um, and some of it is kind of by optimized design where we are preloading in the background pages that are like highly visited pages. So before you even click that button, your browser already has the page information and it will just show it to you instantly. So things like that were were massive improvements and I think one of the the best parts about it where you just have like this literally lightning fast experience when when you're doing internal navigation. Um, and then what I touched on that decreased a little bit again was that large initial chunk of data that you have have to load the first time. Um, and we were able to split things off like when we were talking about this large initial chunk. Um, we're loading a lot in because we're trying to have this SPA experience. There's a lot going on all at once. We have these complex pages. we have um additional library requirements that were a little heavy. Um like we have like these code highlighting syntax highlighting code windows in a lot of our pages um and the library we use for that just happens to be fairly large. Um but just by optimizing that by deferring that loading by allowing you know your like initial view components to load instantly first and then you have everything else loading afterwards. um you can manage that and optimize for that um issue. And that was a big thing with the difference between um inertia v2 and inertia v3 was the drop of axios. So just by like changing the version of inertia we're using our our initial chunk I forget what the actual number was but it it was it was significant. It was a real number that improved our our load times and our our page size uh for the initial load by just using inertia v3 um where they dropped um dropped axios. So that's without even like implementing some of the things some of the other things that v3 introduced. It's just because they dropped access. That was we we got that by changing in our like composer file like v2 to v3 and it's there. Um, now on top of all of that too, we're doing SSR, which uh again it was it was possible before to do SSR. Inertia V3 just made it even easier not only to like run it in production, but to develop with SSR and make sure things are working and debugging things. There was a lot a lot of improvement um there in V3. And anorex said, "I checked laravel.com and the spa experience indeed feels noticeably smoother compared to the earlier version, especially on docs." Ah, docs. I'm glad someone says something about docs. Oh my gosh, you look so excited by that. Yeah, I'm really excited about Docs because Docs is I put a lot of time into Docs. So, I'm glad like human time. There is some human time involved there. Um, notice uh notably too the change log which I don't know if anyone had noticed like internally at Laravel, but we had been loading the entire change log like unpatchenated and so I'm sure I'm sure in the beginning it wasn't a big deal because it wasn't that long. Um, but it kept growing. By the time we're at 13 and we have like monthly updates, this thing was like a massive file taking forever to load and using inertia um infinite scroll. Uh, now you don't know that. Now it's it's loading it in manageable chunks. Um, like who really is going to go look at the change log and scroll all the way down to like 2001 in March to to know, you know, someone might and they can if they want to, but we're not going to load that information just by loading that page. Um, but right, the rest of the docs between kind of the SPA feel of it. Um also kind of behind that uh caching inerta inertial responses on edge servers with Cloudflare like the the combination of these technologies um allow for like a super optimized um experience. Mhm. Is there any are there any other features of inertia especially inertia v3 that were helpful for this like um so dropping the axio stuff um use http like the new hook um I don't remember where that is but I know that it's being used I know that was helpful to like have like the different states all there I don't think we're doing optimistic updates for laravel.com there. I believe in cloud there are some optimistic updates with some of the interactivity. Um oh the calculator um pricing. Yeah, that's a good one. So there's kind of some some fun stuff going on there. Um let's see what else did it do? It did instant visits. I we can probably implement some more like instant visit stuff. I think we can probably use Oh, well, I know we're using the SSR stuff. All the SSR improvements were like super high and very important to kind of get translated to the the V3 version, which really I think was actually just deleting things. I think like literally you you do less to to improve uh the SSR when you switch from V2 to V3. Um there was I feel like there was one other thing that I wanted oh layout props uh layout props for breadcrumbs and maybe a few other things for like the like learning management system. Um Laravel learn I think like those breadcrumbs are like being passed through with layout props. oh that's smart. Yeah, because we have the breadcrumbs right now, I think, on the course page and then I think you also see breadcrumbs on the lesson page. Yeah. So, just having that like the back and forth of communication between like your nested components like can always be challenging. Um I think with React 2 there's I don't know it's I love React. There's a few things and that's that's one of them sometimes is having to do like service provider like layer wrapping that is used to like communicate between components. I think this all the like prop drilling and stuff and then that can get like it gets annoying and it it get I think it gets messy depending on complexity for something like just like this website it's not a big deal. I think um my side project parchmate like that was there's a lot going on there. That is the if you think about a complex web app that's it. That's that's it. So yeah using inertia v3 over there like is a whole thing. But um and one of the benefits too I think of this kind of the ability to get to v3 from v2 is how little of like breaking it does. So that even if you're not like doing all of the best practices, you're not using all the new features, you can still like we did instantly just by upgrading, we dropped um I don't know 100k out of uh the the initial page load size just by by losing Axios. Um and now we have the future potential to to continue to improve with it. That's so nice. Like it is Pascal. Uh yeah, I mean I think I was watching your other stream. Um I think what we have to hug Pascal. So if I see him at Laran, I'll give Pascal a hug. Uh because it came right in time. This V3 beta I think he was posting about in the internal Slack about having people test it out. I think he he did a demo video and I was like, "Oh great, I need to reduce my chunks right now. I need to reduce the initial load time. Uh let's let's use V3." Um, and at that time it was beta and we launched with beta because it worked. I mean, so I was I did it initially just to like be a be a good employee and make sure you know V3 is looking good and I was like, well, everything works fine and we're having a problem right now with our initial trunk size. So, um, yeah, I guess we'll just we'll go with V3. Why not ship it also at like 11 o'clock at night or probably like 1 in the morning for you? And oh, I think it was like 4 in the morning. Yeah, Pascal found out about it through stream. Like we are on stream, me and Pascal, and you were like, "Yeah, and the Laravel website is now running V3." And he's like, "What? It is?" I did it this morning. Your stream with him was like right as I was waking up. It was like afternoon, but I I had been catching up on sleep because I was up till like 4 debugging and making sure nothing was broken. Mhm. Um I guess the Australians might have seen a few broken things, but for the most part, no one else was uh on the site. Well, I was going back and forth with you about one or two things because like I was getting pinged in the Discord, you remember? I was like, "Hey, I see this." Yeah. No, exactly. Yeah. You you were up and it's and it's part of the process. It's always um you know someone asked about like what what the actual process of the agents and the layers and how do we do it. Um, the one important piece I think that was left out was like the almost like crowdsourced final review, which is where I've been posting in Slack in public channels to get anyone with some free time to to check out the preview environment and highlight the the issues, the small errors. Um, I think for me when I'm staring at the same website for maybe a week and trying to like really like focus in on and getting everything right, you get such tunnel vision. So, I don't Some of these things are obvious, but I like they're invisible to me just because I've been looking at it for so long. So, getting those fresh eyes to to give you kind of that final punch list of this is wrong, the shadow's weird, this doesn't click, this doesn't hover. Um, I mean that's probably one of the most important things because that's that's the real quality control and it's like the really necessary part where like the the agent can't do that. The agent isn't doing that. It probably can't do it. Um, or at least not at the level of getting 10 people in your organization to look at the website and scrutinize it. Especially the different browsers too. It's like having the people test it on different browsers, different operating systems, phone, like mobile versus on desktop because then you also have iOS versus Android. And you can get those little bugs across the different ones. So having like actual humans test different ones. You mean Safari specifically. It's always Safari. And it's always Dave. Dave's like, "Hey, I found this on Safari." And I'm like, "Dang it, Safari." Yeah. No, obviously we're it's Laravel. Like we're we're going for perfection here. We want the site to be good on all browsers, all devices, everywhere. And that is tricky to to do that personally or to do that yourself. That's that's a it's a lot. So having having the people out there, especially with the fresh eyes, I I think that's like a huge component of it, too. e even if I was working well I am you know at the end of this process I'm working very closely with with Tim and Tim's looking at things and cleaning up code um that you know I'm making a mess of Tim is cleaning it up and fixing it um but it's even like getting outside the team to get eyeballs on something is super important because everyone is going to kind of get the tunnel vision or or whatever it's called like design fatigue I don't I don't know what it is but I think it could be tunnel vision and also there's so much real estate to check too, right? Especially like the initial migration if you're bringing laral.com over and learn and blog. Um because maybe there's like one little interaction that broke in the middle of it, but that's so much to check that you might not catch that right away. Yeah. And there's some complexity too that is hard to dive into and unless you're so specifically talking about the Laravel learn stuff where it was maybe it's not that complex but there's like a lot to it. There's a lot of layers. there's like the lesson and the the video and then there's like the different pieces to it. So, there's many layers to it. It's difficult to check that um and get everything right unless and I I think you might have chimed in on a few of those and then I think Devon did and I think Devon did a lot of work on it. Um so I think people that actually like made the stuff were telling me that I was breaking it which was helpful. Well, yeah, because I built it. So, like I knew and also it was using Livewire for some stuff and then it was using like an Alpine store. So, it's like that specific stuff had to be ported over. So, then afterwards we're like, "Oh, wait. This is weird." And there was a weird thing with the code block. So, oh yeah, the code blocks were every time I would fix one like the other would break. And then I think at one point we were using two different libraries for like rendering code blocks and then they were like overwriting each other and the styling wasn't working and uh oh there was something else where oh the we had a there was a total change. I don't know what we started with and I now I can't off the top of my head know what we ended up with. Uh, but that specific library couldn't render or like didn't like have auto coloring for Oh, was it um spelt? Oh, maybe it was spelt. When we were starting to add code samples for spelt, um, it didn't know what that language was. So, there was no syntax highlighting. Obviously, we wanted syntax highlighting. Um, so that was also challenging was was those uh the code blocks that I would rate right under docs actually in terms of how much time and effort I spent on it. Also, hi PPG 15, welcome in. Yes, people still use PHP. Chip and I are still use PHP. Oh my gosh. Yeah, I think what like 75% of the internet. Um, but on top of that, we're also making PHP cool again. And it has all the features that you think it's been missing. And if you haven't, you should definitely check out Laravel PHP at laravel.com or go to larcon and learn all about the fantastic community and ecosystem and framework and products and more. Yeah. And just have a good time. a lot of community events this year too. Larcon US is in Boston um July 28th and 29th and then you can you can find multiple PHP devs. There's many of us. There's many there's a whole conference of them. Yeah. And they do really cool things like my first Lyricon US was 2024 in Dallas and Joe Dixon flew a drone out of a box using Laravel reverb. Oh, that's pretty cool. Oh, what a what a cool idea. So, was it was it using like web uh websockets for like the actual communication? I think so. And he like built a UI that almost looked like um a switch like a Nintendo Switch and he like clicked. So, we didn't know there was a drone. There was a box and it was like had something over it and then he was like clicking the controls on the this like UI that looks like a Switch and it like flew the drone out of um out of the box and I think it was like recording the audience as it came out of the box. That's really amazing and that's that's why I haven't applied to speak at any conferences. I feel like the bar is high and I am not there yet. Like how do you come up with that? I don't I don't know. I don't know either. And I've spoken at the conference. I mean my favorite demo I think was my birthday cake CSS demo at EU. It's my favorite one I've done but it's no drone out of a box. Yeah. And that's that's very very creative. I wonder if that was an original idea or you saw someone else do that. I mean, that's a fantastic idea. It was good. And Joe Tanbomb that same year did um a TUI, so terminal UI app that he made um he like found a way to like emulate the um photo booth from your Mac OS in the terminal and he could take pictures that reg or that were like rendered as ASKI art. So, it's like a picture that is just as art that he took while on stage through this Tuy. Yeah. See that? That's neat. I I couldn't come up with that. I don't know. I uh I don't know. Need to figure out how they're coming up with this like how are they determining to do those things? Like I don't know. I has been a a huge like I don't know like inspiration. I I saw Aaron at um Laracon Nashville years ago and his like um like how to publish your work which I think everyone at least on my team that we went there we were thinking about like what like how to like publish a package uh but no it's like how to like how to sell your or not sell but show your work to to people like building in public um self-branding too like putting yourself out there and becoming known for a thing. Yeah. Right. Exactly. And just I don't know what that is. I I thought it was clean code for me and then AI uh just no one cares about clean code anymore. It could be um you know you could like talk about making the skill like the um code like yeah some content for you Chip. Um, and then Daniel had a good question. What would you do differently if starting over today, thinking about migrating our application? It's a good one. I think I'm going to do two parts to that because one thing about like migrating an application or a website or even like a micros service sometimes is how like daunting and how big it can be in a way. um where it's always such a pain if you have like an app your application and you're trying to migrate it obviously to not have downtime you like make a second version of your application and you plan on at some point switching over um and that like sounds like a great idea and it is it's I think maybe one of the only ways to do it unless you take your stuff down but it becomes really challenging if you're not very fast because you're going to want to be making changes on your original site, your original website, your service, whatever, you're going to want to be improving it. You're going to want to be doing bug fixes, but now all of a sudden, you have to do everything twice. Um, and so doing it as quick as possible is is a big, I guess, tip there that I've learned. And that's why I was so happy with how it was with AI because I could in a week or less depending on the size like get it done and then I'm only doing like one thing twice that marketing asked for changing instead of like features having to get migrated over and then never actually happening. Um, if I were to start over and do it differently, I feel like Leah, you actually asked part of this question earlier and I didn't touch on it, but uh talking about like planning mode or like what am I how am I using the agent to really kick it off. Um, I start off with building a dock with Claude and I go um and so this is a revised process because this is what I'm doing now for cloud. I didn't do this for layer.com. So, this is like some lessons learned and how I've addressed it. I start off with a doc, which is kind of like the source of truth for the conversion of the site. And I kind of almost like have like different pieces where I have I have Claude list out all of the routes, all the pages that like exist. I have it say like what's on them and what's needed to be to be migrated. I have claude rank like comp complexity of pages um which will be used later. Uh I have claude rank the complexity of pages now um and then I'll start kind of developing this is kind of where the human gets involved is I will go like lowhanging fruit first. I'll work on like basic styling and again this is like page by frame page by page like early frame layout. Um but getting everything written in a doc and then modifying it as it makes mistakes. Um so such as you don't like that every time it's doing a conversion of a page or an element it's I don't doing it wrong for one way or another, right? Having that like written into your doc about like how do you want it to make these changes? What does the translation look like? And that is a bit of a like trial and error process. But once you kind of get it in the rhythm, then you can say, "All right, like finish the last 20 pages for me." Because now I've kind of I've seen the edge cases. I've seen how you're messing up. I've addressed them. Now I have it written down clearly about how to avoid them. Um, so that's one thing I am doing today, but I didn't originally. Um so if you are starting to do that and migrate your application creating a kind of single source of truth document to start from that lays out a plan with like human like mental like thinking about like what's really how how should this really work? What is complex? What isn't complex? Uh I think that's important. I think that's really smart too. And do when you make that dog, do you kind of write all that stuff out yourself or are you using like planning mode to create the dog? 50/50, you know, cuz I'll I'll ask it and maybe I'll I'll start with like just copy and pasting some questions where like the routes and stuff like that. Um I'll ask about I'll ask like where are images stored and I'll start to kind of put all this together. Um, at some point towards the end, I use planning mode when I've defined like in my own words what I want to have happened. I'll use planning mode to then like tell like make an agent really like sub agent by sub agent, instruction by instruction. I use planning mode for that. And then you send the sub agents out and go go wild. And for the first few though, I'm I don't I don't do them at the same time. I do one at a time for the first few because there is some trial and error. There is some like, oh, it keeps wanting to do this. Let me let me modify my prompt or my instructions. Um, and then once you kind of feel confident that you've identified a lot of the easy problems, then you kind of just send it loose and have 10 sub agents working on the whole thing and and see what happens. I like that. And remote. and remote so that while all these things are going like you can go make yourself some lunch and just say okay on your phone like go out what was it your profile picture is like you on the lake or something just like I just imagine you going out to the lake and your sub agents are just running in the marsh. Yeah. So, my I mean my my long-term goal, I guess, for this year is to like have my agents automated and efficient enough that I could like with my phone like do my job, but like not like barely like I want to do my job well from my phone and I'm not going to do that every day. I I mean obviously that's recipe for disaster and I probably won't learn very much and I probably won't become a better developer but I want to be able to I want to say like you know what I'm going to go you know sit and code on the beach today and without a lot of effort be able to like create quality work but you're also like putting in the effort to do that right because you're doing like the skills are different things too to make sure the quality is there. It's it's definitely like a a frontload amount of work where I've got to like I've got to automate myself first and then I can you know reap the rewards of automating myself. Um but I think with like AI like as like a manager too like you're always trying to like how can I replicate myself? How can I do more work the way that is the quality that I expect? How can I get more of it done more quickly? And I think it's like well now with AI like that's a very real possibility if you if you really like spend the time to give it I don't know the parameters the prompting the the skills the custom skills about how you want specific things to be done. I think it's like a very real possibility and it's like I want to have my AI junior devs you know at least that level where it's get to work guys and I'll be back in an hour. Like right now I'm I'm trying to and it's like one of my the goals for the quarter is I'm really trying to nail down automation between like linear and like I want to be able to just like tag something in linear and it go all the way to like PR review. Obviously, I'm not going to do that for big stuff, but for like small like small changes, things that I have like high confidence that AI can just like with minimal intervention handle, just being able to send it off just like as if I had like my my intern sitting here just like, hey, you know, go go take a look at this. Um, see what happens. Um, that's that's the goal. I want to have like a really reliable way to automate stuff like that. um and have it like good quality. Mhm. Which I think is feasible for like marketing sites too cuz I think when some people think of it, they're like, "Oh, like the actual product, but we're talking about like marketing sites now." So, a lot like there are a lot of things that are brought to you that's like, "Hey, like now the marketing um our marketing team also is able to open PRs for like the copy changes, but there are a lot of like small changes like that that would talk about. There's a ton. There's There's always small adjustments, changes, changes to the product that need to be reflected on the site that like shouldn't take my time, right? They're like they're easy things. They should be automated out. Um, that's the way I see it. So, we're over so we should start wrapping up. I know you mentioned testing stuff earlier, so I think we should do another stream later on to talk more about the testing. Yeah. Yeah, I agree. And if anyone's really anxious about it, I have a LinkedIn article about testing in the AI age. If anyone looks at the LinkedIn articles, I don't know. I don't I have X, but I have like four followers and I don't really do anything on there. Yeah, I saw you post about our stream on LinkedIn. I was like, "Oh, he's a LinkedIn influencer." Yeah. I mean, I I have X. I just read on X. I don't really post anything. Um, I'm on Instagram, but all I'm doing on Instagram is like watching Eric Barnes and Laravel News so I can be on top of what's what's happening at the company I work at. But, um, the smart and then just random reels of, you know, the the cats and and all those random brain rot reels. They're pretty good. I think this is the right link. So, this is Chip's link for boring investment has pay me back 10 times in the AI age. Yeah, that's a good that's a good read right there. It's a good name. But yeah, as we're wrapping up, so we like Chip and I went over the migration of laral.com from Blade and AlpineJS to react to Inertia. During the stream, we detailed what has been migrated so far, why it's been migrated, um how AI was used for this process, like the AI tooling chip used, how inertia helped with this, um also specifically the inertia v3 features that were used and we will do another stream on the testing stuff uh that's related to this blog or artic LinkedIn article here that Chip wrote. Um, but Chip, do you have any kind of like closing thoughts about uh the migration or anything about how you used AI for it and then where can people find you offline? Yeah, I think um you know closing thoughts is like don't don't be afraid to try and think for a lot of people you will be surprised with after a few iterations how much you can get done and how how quality it can be. Um, and if you want to follow me, I'm on a lot of different social media apps and it's always chip needm, just my name. I got in early. Um, and uh, I don't post much, but you can uh, send me an email, chipvel.com. Um, yeah, I'd love to hear from you. Yeah, you're so lucky. There's so many Leah Thompsons out there. I would never There's no chance I was ever getting Leah Thompson. You got to you got to change her name to something unique. Well, there's an actress Leah Thompson, too, but she doesn't have the H at the end. Ah, but just Google like correct people and like push them there. Anyways, yeah, I think Yeah, Google like you can look up my name and it shows you the actress and then then they start seeing me because I'm doing conferences now and more streams and now I pop up over other. So, you're the more famous Leah Thompson, the other ones. Yeah, not necessarily the Back to the Future one. Um, I have P I can't think of the word. I've pinned um Chips links for Twitter and LinkedIn. Go find Chip on those and follow him to learn more. Um, I will be live next week on Tuesday for Laravel Cloud office hours at I think noon ET or Yeah. um I think noon ET next Tuesday and then on Wednesday I'll be live with Pavillis to do a um another Road to Laracon stream talking about his talk and what you can expect for or from Pavllis at Laraconus. So hopefully I'll see you all there next week and thank you all for being here. Bye.