In this episode, Michael and Alex are joined by Aaron Francis, software developer, content creator, and co-founder of Try Hard Studios.
Besides covering Aaron's journey into programming, they dive into Fusion, a new library that Aaron has been working on which will fuse your Laravel backend together with your Vue frontend, allowing you to write PHP and Vue in the same file. The three developers dive deep into the technical details of Fusion, how it works under the hood, and also how the community reactions have been so far.
Enjoy the episode!
Our Guest
Aaron Francis
Chapters
Links and Resources
- Laravel
- TryHard Studios
- Fusion
- Fusion Intro Video
- Aaron's Laracon EU 2025 Talk
- DejaVue #E029 - Inertia.js (with Joe Tannenbaum)
- Volar
- Fusion Reddit Post
- Nuxt Server Blocks
- DejaVue #E020 - Documentation and Migration: From Vue 2 to Vue 3 (with Natalia Tepluhina)
- DejaVue #E016 - The Future of Vue.js (with Evan You)
- Aaron's Year in Review post
Your Hosts
Alexander Lichter
Michael Thiessen
---
Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.
Creators & Guests
What is DejaVue?
Welcome to DejaVue, the Vue podcast you didn't know you needed until now! Join Michael Thiessen and Alexander Lichter on a thrilling journey through the world of Vue and Nuxt.
Get ready for weekly episodes packed with insights, updates, and deep dives into everything Vue-related. From component libraries to best practices, and beyond, they've got you covered.
Welcome to DejaVue.
Michael Thiessen:It's your favorite Vue podcast. You just don't know it yet. And today, I'm joined as always by Alex, and we also have a special guest like like usual. Aaron Francis is here with us today.
Alexander Lichter:How are you doing, Aaron?
Aaron Francis:Hey. I'm doing great. This is, this is very exciting. I think this may be one of my first ever, front end focused podcast. So I'm I'm excited and a little bit nervous.
Aaron Francis:I think it's gonna be fun.
Alexander Lichter:Oh, I'm more than sure. I mean, all our guests said it was fun so far. Of course, on the record. Mhmm. Yep.
Alexander Lichter:And off the record too.
Michael Thiessen:We'll promise to be nice to you.
Alexander Lichter:100 %. Yeah.
Aaron Francis:I appreciate that.
Alexander Lichter:I mean, now that we're no strangers on the Internet anymore, we see each other. No no negative comments, only constructive criticism, feedback, and yeah. Well, wanna talk about a lot of things.
Alexander Lichter:I think a lot of people listening or or watching the podcast, on YouTube might know you already. But for everybody who might not be aware, maybe can you give a little introduction around yourself, what you're doing, and what, what people might know you from?
Aaron Francis:Yeah. Totally. So I am, I guess, by trade, a Laravel developer, have been for for quite some time. And I have recently me and a friend, Steve, have recently started our own company. And what we do is we offer, educational material.
Aaron Francis:So we've started with a course on SQLite and a course on Postgres. I used to work out of MySQL database company, and then I came out of there and was like, oh, there are other databases. I can finally talk about them. And so we explored some of those other databases. But, historically, I've been primarily a a back end developer for, you know, a few decades now.
Aaron Francis:I was one of those that started when I was quite young. And so that has kind of been where I've been the whole time, and PHP has been my preferred language of choice. And then Laravel came along and cemented that forever. I love Laravel very much. And so, yeah, I do some I do a little bit of writing on my blog, YouTube videos, a whole lot of tweeting, too much tweeting.
Aaron Francis:And so if if anyone has seen me from anywhere, it's probably one of those places.
Alexander Lichter:Yeah. Perfect. Lovely. And so you mentioned you got into PHP back end programming and also, like, dabbled a bit into front end here. But maybe to start with, how did you get in programming after all?
Alexander Lichter:Because from what I recall, you you didn't, like, say, hey. I wanna do a computer science degree and get all into it. Mhmm. So there's a bit of a story there.
Aaron Francis:Yeah. So, I started programming when I was probably, you know, 11, 12, 13, something like that. And my dad, up until he, you know, retired a few years ago, was a database administrator. And so he was a SQL Server DBA, my entire life. And so I started out PHP, you know, MAMP stack, LAMP stack, whatever.
Aaron Francis:I started out with that PHP and MySQL, and I always had a DBA nearby to help me understand, you know, what was going on. And so then I went to college, and I was like, well, I don't know if I wanna be a programmer. Let me study accounting for five years. And so I did. I, you know, I got my master's degree in accounting, went and worked as a a CPA or, I guess, chartered accountant maybe in Europe or or, you know, certified professional or public accountant here in The States.
Aaron Francis:Did that for one year at a company called Ernst and Young, and I was doing other people's taxes. And I just realized doing others peep other people's taxes is not very fun. Imagine doing your own taxes, but worse. It's it's like and that's your entire job all day every day. So that was no fun, and I decided, you know what?
Aaron Francis:I'm gonna take this thing that has always been a hobby and try to make it, like, my profession. And so I left Ernst and Young, and I had been, you know, working on side projects and blogging. And that was how I got my first, like, you know, big boy programming job was somebody found my blog and was like, hey. Can you help us with this thing that you just wrote about? And that's kind of been, like, my entire story is just do stuff and put it out there and see what happens.
Aaron Francis:It has worked well so far.
Michael Thiessen:Yeah. It seems like writing and just, like, sharing your your thoughts seems to it has all sorts of benefits from, like, forces you to actually understand the stuff better, but then also people can see that. And even if it's like like one blog post can
Alexander Lichter:Yep.
Michael Thiessen:Get you a job. You know?
Alexander Lichter:Yep. That's pretty sweet.
Aaron Francis:And it's like the most esoteric stuff. I remember the blog post that got me that job. It was I think it was titled automating Yii, y I I. It's an old PHP framework.
Aaron Francis:Automating Yii migrations on Heroku. That was the blog post. And the reason I wrote that is because I had just done that. Like, I had just figured out how to automate Yii migrations on Heroku. And I just wrote it down and put it on, you know, AaronFrancis.com.
Aaron Francis:It was, you know, not on Medium, not on dev.two. It was just like, I have this little site. I'll put it up. And I got an email, you know, months later that was like, hey. We're, you know, running Yii on Heroku.
Aaron Francis:Are you available for consulting? I was like, what is going on here? And that that was it. I was off to the races.
Alexander Lichter:Perfect. And I I think, like, this is like, we say that in some episodes, especially when we talk about, like, creating content. But for everybody out there, it's like, okay. Just write down what you accomplished. It can be in a side project, a purchase like, hey.
Alexander Lichter:I did this. I couldn't find any resource or any, like, comprehensive things. Just like, okay. Write it together. And this is like you already did that.
Alexander Lichter:You're an expert in what you do because because it worked. You did it. There might be other approaches. You get in contact with people who might try the same or, yeah, find a job, get hired, or or starting your own things. And this is so incredible also, like, getting the feedback of people to then either improve, I don't know, a certain workflow or technique Mhmm.
Alexander Lichter:Or just saying, hey.
Alexander Lichter:Well, there's another perspective.
Aaron Francis:I think there's a big fear of people when they think, oh, I'm gonna put out content. I'm gonna write. I'm gonna make a video or something. And the fear is that they have to be the world's foremost expert on it. And I think, like, if you change the way that you frame the content that you're creating instead of I am the expert and here's how you should do it and you change it to, I just did this, and here's how I did it.
Aaron Francis:The it's just so much easier. The world just like, nobody can argue with the fact that that is how you did it. Right? Some people may say, like, the way you did it, there's a better way. But if you go out there and you say, I'm the expert, and here's how you should do it.
Aaron Francis:People just wanna fight on the Internet. But if you go out there and you say, hey. I had this problem. Here's my solution. Here are the trade offs.
Aaron Francis:What do you think? People are like, hey. You did that. I can't argue with that. And it just lowers that, pressure quite a bit.
Alexander Lichter:Totally agree.
Michael Thiessen:I think that's a really good tip.
Alexander Lichter:I also think that fits in in something you said at, your talk at Laracon EU in in Amsterdam because you said that one of, like, almost your last slides, you said, like, I'm not qualified, where you basically all said, okay. This like, you didn't I don't know. You didn't have a degree in computer science and whatsoever, but you stuck with the problem. You worked into that, and everybody else is like, hey. Don't be afraid of, like, writing open source code or do something.
Alexander Lichter:Mhmm. Go for it. Stick with a problem. Try things out. You don't need any permission.
Alexander Lichter:You can just go for it. You don't need any qualifications that you say to do that.
Aaron Francis:Yeah. I think yeah. So that was, like, my my last slide just said, I'm not qualified. And it was meant to be, like, an encouragement to other people because I think a lot of times people will sit on the sidelines and, like, listen to podcasts or watch people talk on stage and think, wow. Those those people are really qualified to be doing what they're doing, and I could never ever get there.
Aaron Francis:And I think the open secret I don't think anybody is, like, hiding knowledge. The open secret is everybody that's on stage on a podcast, making open source, running a software company, for goodness sakes, they just got there by, like, sticking with it. And, you know, some people, of course, have, like, really, really intense formal training, and that's awesome. But I don't, and I don't like, nobody said, hey, Aaron. You can create an open source project that combines Vue and Vite and Laravel, and I think you're the perfect person to do it.
Aaron Francis:Nobody said that. I was just sitting quietly in my room and thinking, I wonder if that's possible, and I just didn't stop. And so that's the encouragement that I was hoping to give is like, hey, everyone that's listening. I'm literally just like you. The only reason that, like, I was allowed to come up here on the stage today is I thought there was a problem, and I just kept digging until I got to the very bottom.
Aaron Francis:And that's it. And it works. And so
Michael Thiessen:And that's my habit. In the world.
Aaron Francis:Yes. That that is very important. I did put it out, and I did publish the thing. I think that's another place that's a good point where people get hung up is they do it, and then they sit on it forever because they're scared. And I get it.
Aaron Francis:It's terrifying. Like, we can talk about Reddit later. It's terrifying. Yeah. But, like, you know, you just, like, you owe it to yourself if you're gonna do all this work to put it out there and, like, reap the rewards of that, whether that's, you know, friends or notoriety or, like, a job or coming on podcast, like, you will get like, good things will happen.
Aaron Francis:Also, people will be upset, but that doesn't matter. And so, yeah, that was my charge to people is you also can do this.
Michael Thiessen:Yeah. I tried to to share about the imposter syndrome that I have felt very strongly and I still do to some degree. And it's always like, it gets quieter once I've gotten some confidence and I've gotten feedback in a particular area. Mhmm. But I remember the first several years of me working as a software developer, my manager had, like, been, like, this weekly one on one.
Michael Thiessen:And it was never, like, oh, here are my career aspirations and stuff like that. It was, like, mostly a therapy session of him reassuring me that, yeah, you're doing a good job. You're contributing. We still want to hear. Yep.
Michael Thiessen:Yep. Like, that's it was like I needed that weekly dose of reassurance that I was alright, and, like, that was so helpful. And if you can get that, then that's that's amazing. But, yeah, it it's hard.
Aaron Francis:It's
Aaron Francis:hard. Sounds like a good manager.
Alexander Lichter:Absolutely. Just wanted to say the same.
Michael Thiessen:Like Yeah.
Alexander Lichter:Friends, managers, like, also an open source as someone had never had, like, a formal, let's say, manager in that way. Like, I learned from so many people in open source and also them reassuring, hey. Yeah. That's great or constructive criticism. Like, okay.
Alexander Lichter:Good start. Oh, maybe how about that? You have, like, not maybe considered this angle. That's super helpful. You grow with that a lot.
Alexander Lichter:And then I think, like, yeah, reaping the rewards of saying, okay. Things get merged, things that you publish, people use it, people in the end say, okay. Thanks to what what you did. I don't know. I could solve a problem at work.
Alexander Lichter:I could finish my SaaS and launch and whatsoever. Like, these are, like, so so amazing feelings. And then I think this is really where you feel the impact that you can really make when, like, people are just saying, hey. Great video or, like, hey. Great content.
Alexander Lichter:Amazing. But, like, actually, it's, like, real life stories where, like, people can say, hey. Thanks thanks to you. I don't know. I I could get a better job and, actually, I don't know, could fulfill that dream of mine or this, that, or I started because of your public speaking and, get into that.
Alexander Lichter:And and look, here we are now sharing a stage. So that's, yeah, that that's all pretty amazing. On the other hand, of course, we have the negative parts as well.
Alexander Lichter:But but we'll definitely circle back to that.
Alexander Lichter:You already mentioned that you created an open source project out there that combines Laravel, Vite, Vue, and it's called Fusion.
Alexander Lichter:So maybe for everybody who hasn't heard about it yet, even though it probably isn't a podcast title, or maybe that's one, like, hey. That sounds interesting. How does that fuse all these things together, and what is it actually?
Aaron Francis:Yeah. So it's a little it's a little bit wacky. And so it will be by the time y'all are listening to this, it will be out. It's free. It's open source.
Aaron Francis:I would love your feedback, especially if you're primarily a front end person because I'm primarily a back end person. So I'd love that other perspective. But the pitch for Fusion is that it is the, in my opinion, best way to combine your batteries included Laravel back end with your modern JavaScript front end. And so the story there is right now, I I think the best story for that is inertia, and inertia is wonderful. And in fact, Fusion relies on inertia.
Aaron Francis:And so inertia is that little bit of glue between, you know, actually a lot of back ends and a lot of different front ends. It has, like, Rails, Phoenix, you know, Laravel, bunch of different back ends. Inertia sits between the two. But with Inertia, it's still very manual the way that you get data down into your front end. There's no story to get, to execute actions on the back end.
Aaron Francis:And so once you get the data down, you're just in front end land, and you have to write, you know, your API endpoints and your fetch calls, your access calls, whatever, to get that behavior back and to do something on the back end, and you're just kinda in that manual place again. And that's been totally fine. But I think in the JavaScript communities, we've seen a lot of very interesting advancements in terms of, like, bringing the front and back ends closer together. So server components, server actions, all of these things that all of these different JavaScript communities are doing that's like, hey. You've got a function on the back end.
Aaron Francis:You can call it from the front end. We'll handle the rest. It's like, wow. That's actually kinda nice. You know, there are I have some qualms with the way that, like, React server components work and that you don't know where anything is running ever and that, like, that makes my old head hurt because I'm like, I kinda like to know what's front end and what's back end.
Aaron Francis:But in principle, it seems really nice because, you know, you can kinda just talk across this barrier. And so that's what Fusion aims to do for Laravel. What it currently does is it allows you to write PHP code in your Vue single file component. You've got your Vue single file component. You've got your template.
Aaron Francis:You've got your script, your script set up, whatever. And then you can write literally a PHP block, and you can write PHP code in that block. And what that will do is that will define what state should be passed down to the front end. It will also define what actions are available to be called from the front end. And then that's it.
Aaron Francis:Like, the magic is we can talk about it, but it's in Vite, and it will, like, take the PHP, do a bunch of inspection on it, figure out what data is going to be available on the front end, and then inject a bunch of information into your compiling single file component so that your Vue component knows what data is available on the front end. And so then you're left in this position where you don't really have to define routes because we can do file based routing with Fusion. You don't have to define routes. You don't have to define controllers. You don't have to define props.
Aaron Francis:You don't have to define API endpoints or fetch calls or anything like that. It's all just there for you to use. And so the hope is that it, like, brings these two world class solutions in Vue and Laravel and brings them much closer together and allows you to, in the same way that Tailwind kind of allows you to stay in a certain context where you're like, I'm not switching back and forth between the CSS file and HTML file or whatever. Fusion the the idea for fusion is it allows you to stay in that context. And so a lot of people cried single responsibility, and my point of view is, like, it allows you to stay in one context.
Aaron Francis:Now how it actually works is the PHP solely runs on the back end. The JavaScript solely runs on the front end. There is an entire network in the middle. It's like everybody is separate. We just happen to be writing it in a place where you can maintain context for, like, the entirety of the thing that you're doing, which is what is the data that's gonna come down and what are the actions that are gonna come back, and that entire life cycle is right there in one file.
Aaron Francis:And I think that's really productive.
Alexander Lichter:So So it's, like, literally end to end in a single component.
Aaron Francis:Yes. Exactly.
Alexander Lichter:Perfect. And that that means you basically then write a Vue component with template and style if you if you don't use Tailwind, and then a PHP block and a script setup block can also coexist with all of that to run-in in the front end.
Alexander Lichter:Yep.
Aaron Francis:It can coexist it can coexist with script setup. It can coexist with script with options API, options API with a setup method Yeah. Which I think is I don't know how common that is. I don't ever really use that.
Alexander Lichter:Luckily, not that common anymore.
Aaron Francis:Yeah. It can also coexist with, no script tag at all. And so those are the four possibilities that we've allowed for so that because I'm not a dummy. I understand that, like, once the data comes down, there's still JavaScript stuff to do on the front end. Like, it's not like, oh, I just use it in my template, and then I just send everything to the back end.
Aaron Francis:It's like, no. The reason we're using these modern JavaScript front ends is for this rich interactivity, this high client side interaction, that kind of stuff. And so to just say, like, you can send your data down and use it in a template, but you can't write JavaScript. It's like, well, that's kinda totally missing the point, isn't it? And so we do inject, all the fusion stuff into whatever type of, Vue single file component you're working on.
Michael Thiessen:So I'm not a PHP person. I've written, like, a tiny, tiny amount. So I'm trying to understand, like, what kinds of things would you write your entire back end using this, or do you think it's more suited for, like, smaller mutations, or are you putting, like, your entire back end logic and everything in in these tags?
Aaron Francis:So that's a great question. And that was one of the well founded criticisms that came up on Reddit and YouTube was, like, this these files are gonna be, you know, 6,000 lines long. Like, yeah. Okay. That is a great point.
Aaron Francis:My opinion and we'll see how it kinda shakes out once the community gets a hold of it. But my opinion is the PHP that you write in your Vue single file component should basically just handle the HTTP layer. And so there's a common pattern in Laravel these days called actions, and really what they are is they're just invocable PHP classes. And so you might have an action that is like publish podcast. And what you do is at at the HTTP layer, you take all of the users' input.
Aaron Francis:Maybe you validate it. Maybe you sanitize it, and then you hand it off to publish podcast action. And that's where kind of, like, your business logic lives. And that allows you to decouple it from the input layer. And sometimes the input layer is the CLI.
Aaron Francis:Sometimes it's a user action. Sometimes it's a webhook. Sometimes it's an import and, you know, an overnight cron. Sometimes whatever. And so factoring all of that out into kind of like a standalone plain PHP class that, like, defines what input it should receive, that to me, I think, is going to be the best method for handling that.
Aaron Francis:And so the PHP block in your single file component will handle, like, taking all the input at in from the front end and then routing it off to the right place or dispatching a job or doing something like that. But in terms of, like, I need to write my billing logic in a Vue single file component, I think that's a bad idea. I hope people don't do that, but, you know, we'll see we'll see what happens. But I think it's going to be basically the translation layer from HTTP to your sprawling Laravel backend that runs the whole world. That's kinda my vision for it.
Alexander Lichter:So a bit like if you say you have a controller, of course, it also shouldn't be, like, I don't know, 5,000 lines long.
Aaron Francis:Totally. Thinking of these as controllers is a very, very good analogy. And so then you're left with, what do we do? Thin controllers, fat models? Like, you could do thin controllers.
Aaron Francis:I think that is the right way to go. You can do fat models. I have no opinion on that. You can also do these service classes, these actions, these handlers, you know, queue jobs, whatever. But I do think thin controllers and thinking of the PHP block in your SFC is a controller.
Aaron Francis:I think that's the right paradigm.
Alexander Lichter:I I mean, in the end, if you would have it, like, let's say, in separate files, then you'd also say, okay. I do a request, and that request would hit a controller. And in a way, you more or less move that code from the controller in an extra file just in your component to say, hey. This is then tightly coupled. Lovely.
Alexander Lichter:Exactly. I I wonder how does that work under the hood because now you have Mhmm. A PHP part that will be then, of course, like, a parsed out, I guess, for, like, a Vee job. And then do you have still, like, an API route for each component that's created, or how are how is it, like, generated?
Aaron Francis:Ah, so you wanna you wanna get you wanna get nerdy?
Alexander Lichter:Yes. That's what I'm looking for
Aaron Francis:Yes. Okay. So here's here's how it works. So we've already covered that you're writing your PHP and your single file component.
Aaron Francis:Then what happens is Vite, you know, picks it up, and it runs it through this entirely complicated pipeline that I really don't fully understand. This is my first experience with Vite ever. Vite is amazing. I I don't know. I don't know what I've been doing.
Aaron Francis:I've just been using Vite. I've never actually cracked open the hood. It's incredible. So crack open the hood and you realize, oh, you can write your own you write your own Vite plugins. That's interesting.
Aaron Francis:What happens next? So I wrote a Vite plug in that works before Vue's plug in, and it pulls that PHP block out. And in the process of pulling it out, what it does is it takes that user's PHP or developer, we'll call them the user, the user's PHP that they have written, and it takes the content and passes it off to a Laravel command. So in this Vite plugin, it spawns a PHP process and hands all the PHP code off to a Laravel command that ships with Fusion. And the reason that I do that is because the ability to parse PHP in PHP is pretty good.
Aaron Francis:Trying to do all of that in JavaScript would be somewhat difficult. And so I hand off all the raw code to a PHP command, and then we parse it and we walk the abstract syntax tree. And so because we're able to do that, this is a situation that PHP developers have never been in, which is a build step for PHP. That's not something we have ever, ever done. PHP is like, invent the universe on every request and destroy it.
Aaron Francis:You're done. Game over. Like, you don't have to run a pipeline. That's it. So it's not like Ruby where you have to, like, start up this long running server.
Aaron Francis:PHP is just, like, stateless. Do whatever you want. Have fun. But now we're in this situation where we're walking this abstract syntax tree of PHP that the user has written. And in that process, we're looking for stuff.
Aaron Francis:One of the things we're looking for is, hey. Did they define any props? Did they say in their PHP, this should be available on the front end? And the way that you can do that is with a little prop function, or you can set it to a public class property. Whenever we're walking that AST and we see, hey.
Aaron Francis:They declared one way or another, this should go to the front end. We kinda write it down. We're like, hey. I should write that one down. We're gonna hang on to that one.
Aaron Francis:And then when we're all done, we have all the information about the props that they defined and the methods that they exposed. And so you have to say, like, I want this method callable from the front end. So when we're done walking, we've got that information. And we take that information, the user's PHP code, and we write it to disk. And so now instead of running the PHP code that you see in the Vue single file component, we are running the transpiled, transformed version that we have written to disk.
Aaron Francis:And so for every Vue single file component, we write one PHP class. And then we also write for every Vue single file component, we write a PHP class. We also write a JavaScript shim. And the JavaScript shim basically declares these are the names of the keys. That's it.
Aaron Francis:We don't pass any data down in the build process. These are the names of the keys that are props, and these are the names of the functions that are should be exposed as actions. And so then once everything is built, Fusion is a little bit out of the way because at that point, we try to hand everything over to the default Laravel request response life cycle. And instead of routing to a controller, we have one single controller, the fusion controller. We have one single controller that every single fusion route points to that fusion controller.
Aaron Francis:And in that fusion controller, we look up, okay, what is this request URI? What component does that map to? Let's go find that PHP class that we wrote earlier, and then let's run that class and send down the data and send out the component name, the JavaScript component name. And so at that point, everything runs through a single, like, entry point controller. We find the class.
Aaron Francis:We send the data out. And then on the front end, every request comes like, every post request comes back to that single controller with a header that says, like, hey. Here's the component I'm on, and here's the PHP method I want to call. And so then we go and we look up the component. We go and look up the class.
Aaron Francis:We look up the method. We make make sure it's allowed, and then we run that and send the response back that way. And so that's kind of the entire process with the goal being we wanna do as much expensive stuff as we can at build time. So we do all our introspection, our reflection, our, like, writing of little things so that we don't have to look them up later. We do all of that at build time.
Aaron Francis:So then when you ship it off into production, it's like, it's just it's PHP classes written to the disk. Like, there's not a lot left to do. So that's kind of the full life cycle there.
Alexander Lichter:So it's like PHP code gen in a way.
Aaron Francis:Totally. Yes. I've got this is wild. I've got, PHP code that writes PHP code that writes PHP, PHP code that writes JavaScript, JavaScript code that writes PHP, and JavaScript code that writes JavaScript. So I've got the whole quadrant.
Aaron Francis:I've got it all. It's all in there.
Alexander Lichter:Yeah. I didn't expect as well as someone who used, like, Laravel quite extensively that we come to the point where we have, like, Vue components being there with JavaScript with with JavaScript. It's insane. But I'm I'm really I'm really pumped of giving that a try.
Alexander Lichter:Now you you said earlier that inertia is also part of the mix there.
Alexander Lichter:So in which parts is, like, inertia relevant to the whole process?
Aaron Francis:Yeah. So, inertia, what it does is or what I rely on it for is the basically, the client side routing that's you know, it's with inertia, it's a little wonky, but it's it's client side routing, but it's defined on the server side.
Alexander Lichter:Yeah.
Aaron Francis:And inertia's great power is you send down, like, this blob of data and this name of, you know, the page that you're navigating to, and inertia will look up that Vue component and then swap out the whole page and provide, like, the correct props and all of that. And so that's what I rely on inertia for. So instead of having to reinvent, like, you know, this pseudo client side routing and this Vue component lookup and this history and all that stuff. I rely on inertia to route these responses on the client side to find the right components and instantiate them and provide them props.
Alexander Lichter:I see. Also, on that note, for everyone who didn't listen to episode 29 yet, that was the episode on inertia two point zero with Joe Tannenbaum. So definitely worth checking out if you
Aaron Francis:Dear Friend of mine. Love Joe Tannenbaum. Shoutout!
Alexander Lichter:Yeah. So that that's that's super interesting. And because I, like, I also know and I learned in episode 29 back then that inertia can also do server side rendering, like, fully.
Aaron Francis:It can.
Alexander Lichter:Can Fusion also be, like, fully server side rendering with, like, all the Yes.
Aaron Francis:On end for import? It totally can. I have not done it yet, but there's nothing technically stopping it from hooking into inertia's server side rendering, which I have used, and it's very good. So inertia relies on a, you know, a running node process to do that server side rendering
Alexander Lichter:Yeah.
Aaron Francis:And totally, totally possible to hook into that with Fusion as well.
Alexander Lichter:Amazing. That's, checks a lot of boxes here.
Aaron Francis:I know. That's crazy. Right?
Alexander Lichter:Yeah. Maybe before we dive deeper into the the tech part, like, how did you come up with that idea? Like, were you, like, all day shower? Like, you know what? If we just take inertia and just do, like, five axis of, like, if you go that direction, but further and further, how do I make that happen?
Aaron Francis:Yeah. Honestly, that's kinda like that is also kind of my, modus operandi is like, what if we did something, but we did way more than we should reasonably do? That, you know, that's kinda where we ended up. Yeah. So like I said earlier, I started a company with my friend Steve, and Steve is a big JavaScript guy, loves Vue, loves Nuxt.
Aaron Francis:He's been using it, you know, for a super long time. I'm obviously a big Laravel guy, love Vue, never used Nuxt, but love Vue
Alexander Lichter:You should!
Aaron Francis:I know. I've I've heard. Been using Vue since, you know, one point o. And so we're working together, Steve and I.
Aaron Francis:We're working together on these, like, course platforms, and it obviously makes a ton of sense. I do the Laravel. He does the Vue. We stick inertia in the middle, and everybody's happy. But then Steve comes along, and he's been spoiled by all this JavaScript stuff.
Aaron Francis:And he's like, hey. Why is it so hard to get data into my Vue templates? Like, why are you defining a route, defining what data should be sent over the wire, and then going into Vue and defining the props? And I'm like, my friend, that's just how it should work. And he's like, no.
Aaron Francis:That's not how it should work. And he's like, why why is it so hard to get data out of the URL and, like, to have these route parameters and grab the query string? And I'm like, you gotta do all that on the back end and send it down to the front end. And he's like, this is insane. Why why are you doing this?
Aaron Francis:And so my eyes were a little bit opened, working so closely with somebody who was so, like, dyed in the wool JavaScript guy.
Aaron Francis:And I started to realize, like, boy, there actually is a lot of boilerplate here. This is kind of a mess. And so I, you know, was working with Steve, and then I was seeing in the JavaScript communities, I was seeing all of these advances of, like, you know, you can write server code and it sends to your client, but not really. And I'm like, wait.
Aaron Francis:What's going on? And so I started to put all these things together and think, wait. In my opinion, Laravel is the best back end available. In my opinion, Vue is the best front end available. It's my absolute favorite.
Aaron Francis:We should be, like, bringing those two things closer together. And, frankly, Steve was, like, the catalyst for a lot of that because without him, I wouldn't have realized, like, the squalor that we were living in and this filth. And he came along, and he's like, you live like this?
Aaron Francis:And I was like, yeah. It's great. And so that's kinda that's kinda where it came from.
Alexander Lichter:And then, like, did the two of you also worked on Fusion and together?
Aaron Francis:So, Steve helped me a lot with, like, the branding and the website and the, like, API design. I would send him screenshots, and he'd be like, that's not great. Yeah. And then, you know, at finally near the end, like, you know, days before the conference, near the end, I was sending him screenshots, and he was saying, okay. Now this is this is how I want to use slash learn Laravel.
Aaron Francis:If this is what you're telling me is possible, I will learn Laravel to use this. And I was like, finally gotten somewhere. We have gotten somewhere. So, like, when you're, you know, when you're writing something, when you're developing something, it's always nice to have an avatar in mind. Like, who is the one person that you're writing this blog post to?
Aaron Francis:Who is the one person that you're designing this interface for? And it was Steve the whole time. I was just like, if I can get Steve on board, then I will know that, like, JavaScript broadly would at least be amenable to it. They may not all like it, but if Steve, the JavaScript guy likes it, hey. We're off to a good start.
Aaron Francis:And so that was kinda my guiding light.
Alexander Lichter:Yeah. Happened like a persona and, like, in this case, a a real life persona even. Yeah. Hey. This is this is, like, the the person I'm aiming, like, to convince and to say, this is something for you.
Alexander Lichter:Perfect. You already mentioned, like, okay. The responses must be good then. How was it received so far? I mean, we are recording, as I said before, before the actual, like, repository is released, before people could look at the code, but based on the video you made and your conference talk and, of course, people posting it on all kind of social media.
Alexander Lichter:So Mhmm. How how did you feel that, the community reacted on that?
Aaron Francis:Overall, I feel great. There are a couple spots that didn't feel super great, but okay. So, you know, I gave this talk in Amsterdam just, like, a week ago. And while I was on stage, Steve pulled the trigger on releasing a YouTube video. So we we kinda, like, wanted to, like, focus all of our energy onto this one moment in time.
Aaron Francis:So I'm giving a talk. We release a tweet with, like, a trailer video that Steve built or or made. And then we release a YouTube video, which is a demo of fusion that I recorded before I left. So trying to do like the whole thing all at once. In person at Laracon, everybody loved it.
Aaron Francis:Everybody at least everybody that came up to me. Of course, you're not gonna come up to me in person and say this is stupid. Maybe, but nobody did. So everyone loved it. Everyone thought this is great.
Aaron Francis:I love inertia. This seems like the next step, or I love what they're doing in next to next. I just wish it was easier to do that in Laravel. That those kinds of things. Right?
Aaron Francis:And so everybody's like, this is great. Some people are like, you're crazy. How did you do this? This is great. I'm like, hey.
Aaron Francis:That's kinda fun. So that seems great lots of people on twitter seem to really like it the people this will not surprise you that did not like it were all redditors so I would say reddit was 80% negative in both the laravel subreddit and the Vue subreddit. The Vue subreddit, I don't spend a lot of time there, and I'm not going to. They were so mean. They hated it so much.
Aaron Francis:Like, kill it before it lays eggs, burn it with fire, go back to teaching databases, stuff like that. And it's like, oh, man. Like, maybe I'm naive. Okay. So maybe I'm naive, and I thought this is a win for the good guys.
Aaron Francis:Right? This is a win for the Vue nation. Like, most things come to react first, but I like Vue most. And so let's, like, let's focus on that. Yep.
Aaron Francis:And I thought the Vue subreddit is gonna be like, great. They chose us first. And that was just, like, adorable and totally naive. They freaking hated it. And in in every criticism, there's usually something redeemable.
Aaron Francis:I mean, burn it with fire. There's not much I can glean from that. But lots lots of questions about, like, why are we going back to 2004? And totally fair, I think on the Internet, a lot of people just read the headline and don't actually, like, read or watch the thing. And so I don't think a lot of people realized that, like, hey.
Aaron Francis:This is I mean, to be totally frank, this is like syntactic sugar. Like Yeah. We're not we're not really, like I'm definitely not transpiling your PHP to Wasm, and I'm definitely not, like, taking your JavaScript and, like, transpiling it to PHP or something. Like, near the twain shall meet. These are very separate things.
Aaron Francis:It just allows you to do it in one file to to maintain that context. And then it sets up, like, some auto wiring of, you know, stuff up and stuff down. Like, that's basically it. But people were saying, like, oh, so now you're gonna be mixing your PHP, like, echo statements into your Vue templates. And I'm like, no.
Aaron Francis:I don't even know how you would do that. Like, no. That's definitely not even possible. And so Reddit was not terribly thrilled. It didn't really bother me because most of them completely missed the the point of the library.
Aaron Francis:So overall, I feel just thrilled to death about it. A lot of people like it. Some people super hate it. And frankly, I think that's probably a good thing that there's, like, strong feelings both ways.
Michael Thiessen:Well, I always imagine, like, when I get feedback, especially negative feedback, I always imagine, like, this bell curve in my head of like, okay, people way on the left, they hate it. These are the people that are commenting, but then there's like some people who comment and who say they like, they're gonna give up with like everything in their life to do this new thing.
Alexander Lichter:And
Michael Thiessen:then there's like, most people in the middle are like, yeah, this is cool. Or, I'm not so sure about it. And it's like, maybe it's like skewed one way or the other a little bit, but like, I'm always trying to like remind myself, okay, These people who are being mean, they either missed the point or it's just, like, 1% of of people.
Alexander Lichter:Yeah. They're they're the minority. That's important. Like, I think most people who've maybe seen it, who will try it out, they don't comment. They just, like, try it and give give it a spin.
Michael Thiessen:Yeah. They're busy using it.
Alexander Lichter:Yeah. I'm busy using it or watching the demo video.
Aaron Francis:You know, there's a lot of, like, old and tired PHP hate. You know, there's like, are we still using PHP in 2025? And I'm like, brother, we are. A lot of us are. And, you know, those are the people that I can't win over and I don't really care to if if they think that, like, PHP is, you know, 2,004 WordPress.
Aaron Francis:It's like, that's really not my fight. Like, I I would love to try to convince you that, like, we're modern and cool, but it's at that point, it's like, it's almost religious. Right? It's like, VIM, Emacs, Mac, PC. It's like, I'm just not gonna try to convince you because that's a waste of everyone's time.
Alexander Lichter:I agree. Waste of time and energy, you could do way more amazing things like working further on Fusion or your your company. Yeah. Exactly.
Aaron Francis:I got a lot of stuff to do.
Alexander Lichter:Yeah. I personally was really surprised. Like, I took a look at the Reddit. I I have to admit, I am quite active on the Reddit. No.
Alexander Lichter:I I didn't write any comments, to be fair. I but I read through it. I was also like, how is that possible? Because usually, especially in the Vue world, there are not that many controversial things. I think the peak polarizing topic is composition versus versus options API, and that's, like, I think that's, like, really the peak where people have, like, really strong opinions.
Alexander Lichter:And then when I want to say, sure. Even though they're, like, yeah, whatever. I think the next thing is, like, JavaScript versus TypeScript, but it also, like Sure. We all, I think, kind of slowly, like, moved over to TypeScript. There are some people who are not.
Alexander Lichter:That's also fine. I, yeah, I haven't seen that kind of response, like, in in a long time so far, and I was really, really surprised. And I also wondered, like, okay. Is it related to these three, like, letters that upset so many people, PHP? Is it really that?
Alexander Lichter:But I also, like, with my background as someone who used Laravel quite frequently and, like, was, like, the one big framework I started with in terms of web development, I never understood the hate around it. Like, even back then, it was always like, oh, PHP. It's so old fashioned and whatnot. Well, honestly, like, it is such a complete framework, which you can do so many amazing things and especially when deployment is so easy as you don't need a build step or anything. Yeah.
Alexander Lichter:I never got that, but I I also think this is a big part why people were like, oh my god. I don't even read further. I see PHP review combined. Hell no. Hell no.
Aaron Francis:I know.
Alexander Lichter:But that's that's in my opinion, it's really a shame. And I also saw, like, that you you tweeted about that. And I really like how you dealt with the responses there and what happened.
Aaron Francis:Yeah. I I I tweeted a little bit tongue in cheek that, like, I found the best Reddit hack. And the best Reddit hack is when people are really cynical and mean. You just respond sincerely, and they just crumble. And that's, like, that's kinda like my whole thing.
Aaron Francis:It's like, I'm not going to be a mean cynical person on the Internet because I think there are enough of those, and I would like to be an example of something different. And being on Reddit is like that my rules don't end at Reddit. And so while while I do that on Twitter, I will also do that on Reddit. And so, like, on Reddit, I have a picture of my face in my real name. And when people say mean things, I respond with sincerity and curiosity.
Aaron Francis:And so, like, a lot of these people would be, like, saying something horrible, and then I would respond and be like, man. I'm sorry you don't like it. What is there anything that I could do better? And, you know, so, like, you know, all to the person, almost everyone would respond and say, oh, I'm sorry. I was just joking around.
Aaron Francis:This looks really amazing. I can't believe you've done this. And I'm like, why didn't you start there? It doesn't have to be for everyone. I'm not gonna try to convince the whole world to use it.
Aaron Francis:But if you don't like it, like, you don't have to say anything. But if you think it's amazing and I've done something cool and you don't wanna use it, maybe say that. Like, that's totally fine. And so I got a few people that actually DM'd me on Reddit and were like, hey, Aaron. I'm really sorry.
Aaron Francis:I feel ashamed for my comment. I was having a bad day. I've deleted it. And I'm like, that's totally fine. I get it.
Aaron Francis:And I think what a lot of people forget that there's, like, a real human on the other side of Reddit. And so when I respond with, like, my actual name and my actual face and say, like, oh, wow. I'm sorry. I put a lot of work into this. Is there a part of it that, like, is not clear or you don't like?
Aaron Francis:They realize, oh, man. This is just a guy that's, like, trying to make it in the world. And they they they just totally crumble. I think a lot of people on, like, the opposite side of that, the people receiving that, like, mean cynical nature, they forget that everyone wants to be important. Like, everyone wants to be recognized.
Aaron Francis:Everyone wants to feel valuable. And a lot of people on Reddit do that by, like, having the most snarky one up comment of, like, I'm the funniest or I got the most, like, replies or something. And I think it's very dismissive. Like, in my position, it's very dismissive to forget the fact that, like, that is also a real person. That is also a real person.
Aaron Francis:And the way that they're expressing that they want to feel important is not my preferred way of expressing it, which is, like, by being the smartest, meanest, most cynical person. That's not how I like to do it, but it would be foolish of me to forget that that person just wants to, like, feel like they're important. They just wanna feel special. They just wanna feel loved. And you know how I know that?
Aaron Francis:Because I want that. Like, everybody wants that. Everybody wants to feel special. Everybody wants to feel important. Everybody wants to feel like I did something cool and people clapped for me.
Aaron Francis:And the way that that expresses itself a lot on Reddit is by who can be the most cynical. And so there's a lot of, like, human things at play here. And I think if you can recognize them, you can, like, deescalate pretty quickly.
Alexander Lichter:And also turn it in something nice in the end. Like Yes. Getting even, like, getting honest feedback or a constructive feedback. We just say, hey. This is amazing.
Alexander Lichter:I would use it. But, yeah, I agree. Like, why don't you write it all well because it doesn't give that many uploads? Because, like, some rage bait or some, like, you just had to start a single comment is is all the way to the top. And still, I feel like I I agree in a lot of subreddits that's the case.
Alexander Lichter:Once again, this feels like an exception in the Vue Reddit at least. I've Mhmm.
Alexander Lichter:As I said, I've seen quite some threads there, be it about, oh, how many people still use options API? That's so crazy. Or where someone said, oh, yeah. Vue four should fully remove the options API. This, that, A few things, but this is so I'll tell you this is not a daily thing then.
Alexander Lichter:Usually, people are quite kind in terms of answering or, like, giving feedback. So maybe in the future, you could Yeah. Could come back. I don't know if you
Aaron Francis:You know, maybe after the the library is fully out and people can play with it and realize that it's not, like, you know, PHP templating of, like, from the days of your maybe then it'll it'll turn a little bit. But I think what's really gonna, if anything, what's really gonna turn it is people start to like it. They just are like, I don't know if this is, like, technically pure, but boy am I fast and productive and making great apps. That's the only thing that's gonna that's the only thing that's gonna win people over.
Alexander Lichter:But I also think, like, with that comes, okay, content, people other people sharing their their thoughts on it, and that also snowballs in a way. So I I fully agree. And I really think what you mentioned earlier on, like, the whole part of, yeah, things are usually react first, and here we have something that's Vue first. And then it's even more sad that people react like, oh, yeah. Yeah.
Alexander Lichter:What the heck? So I I feel that I feel that every time, like, we get something to Vue ecosystem or, like, something that's related to the Vue because we're like, that's amazing. Great. And some people might port it over or whatsoever. But usually Uh-huh.
Alexander Lichter:Of course, with React being sadly the dominant framework, sadly, from my position personally
Aaron Francis:Mine too.
Alexander Lichter:Then it's like, okay. We port things over. Like, I don't know, Shad cn or Radix or whatnot. Mhmm.
Alexander Lichter:And it's great that this is also happening. It takes people who do that work, and that's amazing. And sometimes that also turns into something owned. But, of course, people are usually happiest. Like, hey.
Alexander Lichter:This is, like, first class citizen. This comes from Mhmm. From that ecosystem. So, also, on that note, thank you so much for for bringing that out. Right?
Alexander Lichter:Yeah.
Aaron Francis:Of course.
Alexander Lichter:That's I think it's it's really amazing.
Aaron Francis:Yeah. Thanks. I like I said, I started with Vue back in the one point o days when Taylor Otwell, creator of Laravel, was like, hey. Vue's kinda cool.
Alexander Lichter:And that's great.
Aaron Francis:Let's let's yeah. Let's use Vue. And I I've been using it ever since. And, actually, back in, like, I think it was, like, 2016 or something, I had a I had a Vue project that was somewhat similar to this, but it was all based around you know, we use that active record pattern. We use Eloquent.
Alexander Lichter:Yeah.
Aaron Francis:And it was all based around, like, sending rich models to the front end. And so it attached it was kinda the same thing, frankly, but it attached, like, model methods to your Vue, like, your Vue objects. And even back in 2016, I was thinking, like, man, how do I combine Vue and Laravel even more? And so I've just, like I've been around Vue. Vue makes sense to my brain.
Aaron Francis:I like Vue a lot. Don't tell the subreddit, but I like options API. I think it's great. It just makes sense to me. I think one of the big distinctions on distinctions on options and composition is are you historically a back end or a front end developer?
Aaron Francis:I think that's, like, where a lot of the lines fall down. It's like as a historically back end developer, that structure just makes a lot of sense to me. And I've seen Evan's, like, image of, like, all the colored blocks, and they're all split up. And then with the setup, they're all together. And I'm like, that also makes sense to me.
Aaron Francis:It's just like a preference thing. So, yeah, I've been around Vue. I love Vue. I love what Evan and team are doing with it. I hope whatever is new, void zero doesn't, you know, distract him from keeping Vue going because Vue is Vue is my favorite front end framework by far.
Alexander Lichter:A lot of things dropped here. And, yeah, that's that's, I think, I love him to interview there. Amazing. Mhmm.
Michael Thiessen:So your vision for fusion, you know, your it'll have been released by the time this podcast comes out. Mhmm. Are you, like, at the point where where you've basically done what you wanted to do with this, or do you have, like, plans and plans for for the future of this thing? Like, where do you see this going? Are there Yeah.
Michael Thiessen:Other areas where you think you can simplify things and make it easier and Totally.
Aaron Francis:Yeah. So I do have I do have a few big things on the road map. There there's a whole, already forming a a community of people that are trying to get it into React, and I'm super grateful for them. And I think that will be important for the story. I don't know React.
Aaron Francis:I've never written React in my life, and so I'm gonna rely on community a lot for that. I think the thing that I am most interested in, the couple of things coming up here, one would be, shared types across the front and back end. And so one thing that is already possible, and I have already done it, but it's not good enough to, like, say that it's done. And so I've I've pulled it out. But one thing that is already possible is because I'm taking all of your PHP code and walking that tree, I know either by your, PHP type declaration, which we have pretty robust type support in PHP.
Aaron Francis:I either know by the fact that you declared it a certain type, or we also have type annotations where you can annotate and say, like it's kinda like JS doc, honestly, and say, like, this is the type. Please trust me. I can parse both of those. And because I'm writing a shim file for every single component, I can translate those types into a JavaScript type. And so I actually have I I found somebody through the power of the Internet that's on the Vue core, like, language team or whatever.
Aaron Francis:They helped write a plug in, which I've not implemented yet, but they've written a plug in wherein I can augment the TypeScript or definition of the Vue single file component such that when you start to type one of these magic variables that was defined in PHP, your editor knows exactly what you're talking about. So you get, you know, type completion, you get the dot, and then it pops down all the other method. Like, you get everything. And so that's a big story. I think if this is going to have any legs in the JavaScript community, it needs to have some level of either type safety or type hinting or type inference or something like that.
Aaron Francis:And even I as a historically PHP developer that doesn't rely on strict types, when I'm typing in my, you know, Vue template and I'm getting autocomplete for these variables, it's like, yeah. I want that. Like, of course, I want that. So that's big one, and is technically totally feasible. The other I think, the other two that I that I really want, one would be right now, everything is defined at the page level.
Aaron Francis:So, we have this concept of, like, pages that map to routes. Right? And the page is just a it's just a Vue component, but it's it is a page. And then you've got all your other components, you know, podcast row, podcast favorite button, all of that stuff. But the podcast page is where you can write PHP.
Aaron Francis:I think it would be nice if every component could write some subset of PHP. Not probably not, sending data down because the data would probably still need to come down from the page as props to the subcomponents. But if every component can define API endpoints where it does a thing, without having to emit out to the page and then go out to the PHP and then come back and down, I think being able to write a PHP block for a Vue component that is not a page would be very, very interesting. And then finally, the thing I think, that brings me all the way back to 2016 is having a rich fusion resource. And so, like, in Laravel, we've got eloquent models.
Aaron Francis:That's our active record implementation. There is a thin layer on top of that that can be used to translate between the eloquent model and then HTTP response, and that is called a resource. So you can have, like, a podcast model, and then you can have a podcast resource which says, like, don't show the updated time stamps. And in fact, let's change the, auto incrementing ID into a nano ID so we don't expose our IDs or whatever. Right?
Aaron Francis:And that resource handles the translation to, like, what is your API response. I think having a fusion resource where you can say, like, here's the podcast model. Here's the fusion resource, which defines what state or, like, what is the representation of the state, but also what are some methods. Right? So maybe you want to in this fusion resource, you want to have, like, you know, favorite podcasts, you know, listen later, whatever, delete, and you can send that out to Fusion.
Aaron Francis:And then in your Vue components, you can say, like, podcast dot delete, and it, like, executes an HTTP action because it was sent out as a Fusion resource. And so that's still a little murky. It's that's further off in the distance, and so it's not totally clear yet. But I think having the ability to, one, define how the state is represented for a model, and, two, define some behavior for a model specifically is a little bit different than defining it at the component level because then anywhere you send a podcast, you're getting the same kind of, like, rich representation of state and behavior.
Alexander Lichter:Super interesting. I I think you already mentioned something that is also on on the list for sure, the whole type safety part. Do you remember who who helped you on, who worked, like, on the, I guess, like, Volar or Vue Vue extension or something?
Aaron Francis:I don't. I'll I'm I'm gonna open Discord right now. But, it's funny because it's somebody with, like, a anime avatar and somebody that, like, I don't know. I have no idea who this person is. And the way that I paid this person so this is, like, paid work, of course.
Aaron Francis:You know? I'm like, hey. I need help. I'm willing to pay. The way that I paid this person was I sponsored somebody named Jonathan, I think.
Alexander Lichter:Johnson probably.
Aaron Francis:Johnson. Yes. Yeah. I sponsored that person for $400, and then, presumably, they sent the money to this other person because the the original person was like, I can't receive money where I am. I was like, okay.
Aaron Francis:Well, how how do I pay you? Kazari. Ah, yeah. The name. Yeah.
Alexander Lichter:He contributes a lot to, like, the the Vue extension. So
Aaron Francis:Yeah. There you go.
Alexander Lichter:Shoutout. Also, like, lots of Volar.
Aaron Francis:Yeah. You know, I originally, reached out to, next guy, Daniel. Right? What's what's his last name? Roe.
Alexander Lichter:Yeah. Awesome. Daniel. Friend of the show
Aaron Francis:Great guy. Super, super nice guy. Love him to death. Reached out to him, and then somebody turned me on to Johnson, and I DM ed Johnson, and then Johnson was like, I can't do it. Why don't you talk to this person?
Aaron Francis:It looks like their real name might be Mamori Maburashi, but their their handle is Kazari e x. And this person just came out of nowhere with an anime avatar, someone I've never met, and I paid them US dollars to produce the thing. And it's just like the power of the Internet. It's amazing.
Alexander Lichter:It certainly is. Yeah. I know, like, Kizari made some really, really good contributions. I also don't know their their real name, but, like, that person is super involved.
Aaron Francis:Yes. Super smart too. They had it done. I thought, like, oh, I don't know if this is possible. And they had it done in, like, I don't know, six, eight hours or something.
Aaron Francis:And, yeah, it was crazy. And they gave me a repo, and I still need to integrate it. But the the video they sent me showed them clicking on a variable in the Vue template, and the cursor pops up to the PHP block where that variable is defined. And I was like, holy crap. This is amazing.
Aaron Francis:So they did some amazing work.
Alexander Lichter:Sweet.
Alexander Lichter:And I remember, like, Evan was also commenting or, like, tweet tweeting. It's like, hey. Is I think it works regarding, like, IntelliSense, with, like, PHP and the blog there. Mhmm.
Alexander Lichter:That also, like, brought me off, like, okay. How does the tooling support look there?
Aaron Francis:Yes. So tooling support, that's a great question. So right now, the editor that I use is, JetBrains editor. It's called PHPStorm. And in PHPStorm, you can do, like, a language injection.
Aaron Francis:So you can, like, say, whenever you see this XML tag, which in our case is just PHP, inject the language PHP. And so right out of the gate with nobody's help, like, no JetBrains help, we get syntax highlighting a little bit of autocomplete. But the language injection, it's almost like you're writing a PHP script. It doesn't recognize the broader context of, like, import these classes, autocomplete this import, that sort of stuff. And so I am currently in the email communication with the JetBrains team to figure out how do we bring more robust support to, like, a PHP tag so that it is aware of all of the composer dependencies that are able to be imported and that type of stuff.
Aaron Francis:And then on VS Code, I don't know. We've got a lot of people, you know, in I've got a Slack going. We've got a lot of people that use VS Code, and this one guy, Miguel, has already written some support for, like, PHP inside of a tagged template literal for React. And so, like, there's definitely some tooling work to be done, but I think it will come relatively quickly. Because you're writing, like, honest to goodness PHP, you're not, like, writing a new language.
Aaron Francis:It's just a matter of saying, hey. Please recognize this block as PHP. Not like, here are all the rules for my new language that you now have to support. Like, I imagine that's what probably Svelte went through, which is like, we're inventing new syntax. Like, please support it.
Aaron Francis:We don't have to go that far because it's it is pure Vue and pure PHP just in places you wouldn't normally expect. And so I'm hoping it will be quick.
Alexander Lichter:Yeah. I guess also that's, like, you could even go a bit further of, like, hey. You can write PHP there. And if you need some, like, Laravel specific, I know, auto imported things, I know if there's something like, I don't know, a DD or something. Mhmm.
Alexander Lichter:Then probably, like, if there is I don't know how the state of Laravel VS Code extension is, but if that's already available Mhmm. Yeah.
Aaron Francis:It's just
Alexander Lichter:sort of, like, flagging that in the right spot. And also, the framework, like, framework to Johnson wrote called Volar, That's powering, for example, the Vue extension and also, like, MDX support and whatnot and and Astro and all that. So that could maybe also be of help here for doing, like, more than just saying, okay. Here's the PHP tech. I recognize PHP and have my auto completion, but even going beyond it.
Alexander Lichter:So I'm really curious where where that way is going with
Aaron Francis:These Volar people, these language tooling people, they are on another level. It is I've looked the I think Johnson was like, why don't you go look at Volr? And I looked and my eyes just I like Yeah. What is going on here? They're so smart.
Alexander Lichter:It's insane. And I really like I I love to highlight that fact that Volar so that was originally just like the Vue extension, and then John's realized, hey. This could work for, let's say, Angular components or Svelte components or or anything out there, so why not make it more general? And that's how Volo was born. So, like, going the extra mile, like, I know, if you did with Vite or also, like, the whole, like, of the Un.js thing. So, basically, moving something that works for a certain community step further to improve the whole, like, WEB ecosystem. This is so lovely. Now even being used for communicating with with Laravel and Vue, hopefully, it's great to see.
Michael Thiessen:So I've been thinking about as as you've been describing this, I've been thinking, well, why not do this with Nuxt? Like, Nuxt as a whole different like, we're writing JavaScript on the back end. So why not also have this with Nuxt? And I ended up finding there's some project from about two years ago, a year and a half ago called server block Nuxt, which is a similar kind of thing, but you're actually like writing the HTTP handlers, like in your single file component. So it's not quite as sugary.
Aaron Francis:Yeah.
Alexander Lichter:But it
Michael Thiessen:would be that would be very interesting to to see how how far you could take that with with Nuxt and see, like, can you Yeah. So also do something similar with the with the Nuxt Nuxt framework. Yeah?
Aaron Francis:Yeah. So I will rely on, you here because I don't know very much about Nuxt, and so I'll ask you a few questions. One is, so so with Nuxt, you have this back end ability. Right? You've got this back end place where you can write code.
Aaron Francis:So somebody, I think, on Twitter was like, hey. Why don't you bring fusion to Nuxt? And out of sheer ignorance, I had no answer. Because my thought was with Nuxt, you have your you Vue front end and your, you know, JavaScript back end and, you know, you combine the two with Nuxt. But then once you get onto the back end I know that some people use Nuxt with Laravel.
Aaron Francis:So is it like the front end makes a API request to whatever this back end handler is, and then this back end handler in JavaScript makes an API request over to a Laravel back end? And so that was the thing that I was, like, trying to figure out was that feels like too many steps to me to have two back ends at play. But, again, not something I'm super familiar with.
Alexander Lichter:Yeah. So the good part is that let's say you can write your whole application, of course, like, full stack in Nuxt. Say, okay. I have my my JavaScript TypeScript back end and do whatever I want there. But Mhmm.
Alexander Lichter:Nothing stops you. Similar to a Vue SPA to say, okay, I have my Nuxt application, whether it is server side rendered or not, and that just does API request to any kind of API. It can be Django, Laravel, whatnot, JavaScript. So on on that level, that would work. And you don't really have to integrate much with any kind of, like, extra back end, so to say.
Alexander Lichter:So probably you could do the same transforms. You just say, okay, where is basically my my Laravel back end so I can I know? Let's say you have a mono repo. So these two projects, git repository, altogether, and then say, okay, Yeah. I do this this build step.
Alexander Lichter:Oh, here is my level back and just move it there and write it there. So I don't see why that wouldn't necessarily work. I think the trickier part is more like the whole DevOps thing of, like, okay, execute it, deploying it together. But all in all, I think that's that would be possible because Interesting. I I see the point that you're like, okay.
Alexander Lichter:We have this, like, own, let's say, server engine called Nitro, which you can also use stand alone. It's a bit like Express JS. So, like, very bare bone, but has a lot of integrations. Nevertheless, you can, of course, write your back end there, as I mentioned, but you don't have to use it. So you can just say, I do an API calls all fine.
Alexander Lichter:And you can still, like, integrate a lot of things, thanks to, like, all the hooks that Nuxt offers. Yeah. You can integrate, like, a Vite plug in there easily, or you can even say, okay. I I want to customize things on my own. So that's definitely something that might be worth exploring.
Aaron Francis:Okay. Yeah. If it works, I'm all for it. I think it would be very interesting to try to figure out how to make that all happen. This is another like, we talked about at the beginning, I'm not qualified.
Aaron Francis:Like, there are so many things that I just don't know. And so, like, this is very helpful to understand that life cycle. It's very helpful to have react people in the Slack to, like, tell me what react is and how it works. And, like, I think that's another fear that people have is, like, I have to know everything. Listen, y'all.
Aaron Francis:I know very little. I know I know so little. And so thank you for explaining how that how that could potentially work.
Alexander Lichter:No problem at all. I mean, in the end, how would you know all of this? You didn't try all the technologies, and even then, you're not an expert in all of these. So Exactly. Yes.
Alexander Lichter:It's I think it's also so key to say, okay. Here is a knowledge gap, and that can be just on purpose. Like, oh, no. I I don't write React every day or, like, I I never did. So I find people who are interested in saying, hey.
Alexander Lichter:We can work together to make that happen. Here is what the mental model is. How can that fit? And Mhmm. Like, the whole collaboration part, I mean, that's also how frameworks, like, especially Vue in the end works out.
Alexander Lichter:Of course, like, Evan put a lot of effort into that, but there's so many core team members. And, of course, also, like, then the whole, like, tooling part with with Volar, as you mentioned as well. People working on vapor mode right now, which is also super interesting. And in the end, it's all a big collaboration while, for example, I know if you're a Vue user, you not don't necessarily are good at writing a framework. So, like, also getting that Totally.
Alexander Lichter:You get in touch with people, and that's that's so key. Fully agree.
Aaron Francis:Yeah. Michael, I don't know I don't know if you get this a lot, but I get a lot of because I make videos, people are like, hey. Why don't you compare Laravel and Phoenix? And I'm like, because I've never used Phoenix. Like, I I can't.
Aaron Francis:I would it would be dishonest. Do you get that a lot?
Michael Thiessen:Yeah. Or sometimes I ask for feedback on, like, oh, what should I what should I do with, mastering Nuxt? And then they, they give me some extremely specific, like, oh, show how to use this UI library that I've never heard of also to make like, you know, an app for a bowling alley so they can do this. And it's like, I mean, I've been bowling before, but I don't know what this other thing is. So, like
Aaron Francis:Yep. Don't know the rules of the game. Never use the library. What do you, like, what do you want me to say? Yeah.
Alexander Lichter:Yeah. I think also, like, this is this is so common that a lot of people also just try to do it. Like, a lot of people are like, okay. I wanna do everything. Like, okay.
Alexander Lichter:I will compare all of this together, and then you have the problem that's well, how do you differentiate between, is this actual someone who has, like, I don't know Yes. A profound experience in both to compare that? So and, yep, this is super tricky. Like, also, as someone who's doing videos every week, it's like, I try to be really clear. It's like, okay.
Alexander Lichter:Look. Or, like, on on one of my streams, actually, it was like someone talking about UI libraries and how how this is performance wise worse versus that. And if I could have looked at I I'm not calling between any of these libraries. I can't tell you much. I can look for the GitHub issues and tell you my opinion of the discussion, but that's all.
Alexander Lichter:So, like, in a way, it's also like having the courage, but just being there to say, hey. I don't know. This is so important. I am very happy that, like, I learned it after time. I was also like, a little bit of a no at all.
Alexander Lichter:Oh, yeah. This and that. But in some way, like, the powerful words of I don't know or sometimes just a a no, they're so good, and they're so important.
Aaron Francis:You are absolutely correct that it takes a lot of courage to say, I don't know. Because everyone wants you to give, like, a definitive answer. And everyone, like, you know you know, we all know that the more definitive, controversial answers you give, the better the engagement is. And so it takes a lot of courage to be like, I'm sorry. I, like, I can't offer an opinion on that.
Aaron Francis:I've I've never used that or I've never shipped that to production or I don't have a deep enough knowledge. It's like Mhmm. Sorry, guys. I can't help you there. I think that is the right thing to do if it is the true thing, but it's still like, oh, I kinda wanna just, you know, start a start a storm of engagement, but that's not the right thing to do.
Alexander Lichter:It's even beyond tech. Right? It's a lot of things. Like, I don't know. A classic thing is, sports, for example.
Alexander Lichter:Everybody's like a sports expert now and give their opinions. Whereas, like, yeah. I'm I'm also like, if someone asked me, I'm like, okay. I'm happy to share my thoughts, but look, I'm not there to judge these because I don't know. I I didn't, I don't know, studied it for long enough.
Alexander Lichter:I didn't, research enough. Or just say, hey. I'm happy to to talk about it. I and for myself, next time we have a conversation, let's talk about it. Or I I write a post later on.
Alexander Lichter:That's always better than, like, oh, here's some, like, dangerous, like, half cooked, half baked knowledge that you bring into that, and then people, I don't know, quote that, use that further. And it's always tricky. But, yeah, that's definitely a skill that a lot of people if you you feel like, oh, you don't say no often enough or I don't know, there's definitely something to train this, shortening.
Aaron Francis:One of one of my favorite one of my favorite ways out of that is to just say, I don't know enough to say. Like Yep. I I I don't have enough information. I can't I can't give you an answer.
Alexander Lichter:That's also good. Like, I don't have an opinion on that.
Aaron Francis:Mhmm. Oh, that's the best. No. No opinion.
Michael Thiessen:It's like, really?
Aaron Francis:You don't have to have an opinion on everything? You sure don't. You sure don't.
Alexander Lichter:There's one more thing. We I think we get a kinda kinda bit technical once again on fusion because that that came up when you said, okay. You have you do these PHP calls under the hood. And especially in the front end, we have a lot of, of course, state management to do. So Uh-huh.
Alexander Lichter:As these are all API calls, how do you handle things like errors, the status of the request? And then from that even further of, like, parallelization, possibly, can we do, like, certain things together, avoiding waterfalls? So, like, all these more, let's say, technical tricky things, well, I don't know, things like TanStack query or, like, pina colada, which is work on progress exist to deal with, like, server states, like, fetching these things.
Aaron Francis:I've not heard of pina colada. That's a great name. I do like pina, but I've not heard of pina colada. So kinda the the life cycle somewhat handles a lot of that. So, like, when you first load slash podcasts or whatever, the data is going to come down with the response.
Aaron Francis:And so, like, all of your you know, the list of podcasts or whatever state you have declared is going to come down with that first response as, like, a JSON blob or bundle or whatever. If it's like a, I'm I've opened a new tab and navigated to the site, it all comes down in, like, embedded in the page. And if it's like a, I click on a link and inertia link, the, response that comes back from the server is the JSON state decorated with a little bit of, like, hey. Here's the component they're loading. And so all of the state is going to be there.
Aaron Francis:Now when it comes to, like, I wanna execute an action, so I wanna, like, favorite the podcast or whatever. When Fusion writes, you know, quote, writes the functions into your, Vue component, it does it in a way that is, that is slightly decorated. And so let's say you have you've on the back end, you've exposed a method called favorite. So then in your front end, you have this function, this JavaScript function called favorite. That function is basically just a thin HTTP.
Aaron Francis:You know, it's just kind of a shim around a common HTTP request, and we'll, like, gather up the correct data, send it off, get it back. Inside of, like, this broader so, like, favorite and unfavorite are basically just decorators around this big function call. And in the function call, it does a few things. One is it is actually a proxy. And so this function favorite, if you, like, look really closely, you'll see that it is a proxy.
Aaron Francis:And what this allows me to do is not only have, like, favorite open close parentheses execute the action, you can also say, like, favorite dot busy. And that will tell you if that function is in progress or not. Oh, okay. Right? Because yeah.
Aaron Francis:So every single fusion function comes with the with its own reactive state that is actually on that same named variable. So you could do favorite open and close parenthesis that will fire the request. You can do favorite dot, I forget what it's called, in progress, and that'll say true or false. And it is a reactive. And so you can just throw that in your template, and it will, you know, flicker the, like, loading indicator or whatever.
Aaron Francis:It comes with succeeded, failed, and finished. So you can see all of those. But it also comes with recently succeeded, recently failed, and recently finished. And what that allows you to do is, have, like, a flash message that says, like, success, and then it goes away. And so instead of, like, writing your own set time out for, hey.
Aaron Francis:This thing just finished. Let's turn success on to true, and three seconds later, turn it back to false. Like, we'll handle that. We handle that for recently succeeded, recently failed, and recently finished. We also have because we are a Laravel, you know, tool, we know what a four twenty two response back from Laravel looks like.
Aaron Francis:Right? And so what we can do is we can pull the errors off of it. So you get, like, an error bag that says, like, here are all the fields, and here are all the messages. And, also, Laravel provides a top level message. So if you, like, wanna traverse the whole errors object and put stuff everywhere you can, if you just wanna show a single message, Laravel gives you I think it's probably, like, the first error.
Aaron Francis:It gives you the, like, the readable message. Yeah. And so in this example, you have favorite dot errors, and that's just like a JSON object of all the errors. You've got favorite dot error message, and that's just like the human readable message. And so all of these things are kind of, like, decorated around this HTTP request response.
Aaron Francis:And so what we do is we send off the request. We get the response back. We do a little bit of processing as as fusion, which would include, like, is it a four twenty two? Set this stuff. You know, change the state from in progress to not in progress, whatever.
Aaron Francis:But we also, because we're in control of both sides, we can grab this response and see if there's any, like, fusion state that needs to be updated. Right? So we can send a response back, get or send a request, get the response, inspect the response, and say, hey. Did Fusion send me anything that needs to be updated? Forget, like, whatever the user's function returned for a second.
Aaron Francis:Did they send me anything where I need to update some state? If so, let me update that state and then strip all of that out. And so then the response that you get in your Vue, you know, script tag or whatever is the response that you would expect from your PHP because we've taken away all of this meta information, done some interesting things with it, like sync the query string, perhaps.
Alexander Lichter:Mhmm.
Aaron Francis:Done some interesting things with it, and then we give you, like, the honest to goodness response that you would have been expecting having processed everything out of it at that point.
Alexander Lichter:That was a lot. I think that makes a lot of sense. I I I really like how, let's say, nice and in sync, the implementation, of course, basically because it's like Laravel and you together is just like, okay. We can go for the errors. It's not a problem.
Alexander Lichter:We know how the shape looks like. So in a way that it's focused on Laravel gives the benefit of, like, okay. We know we know exactly how things look like. So Yep. I really like that benefit there.
Alexander Lichter:Plus, also, as you said before, using the underlying power of inertia to just okay. Here's the JSON. That's all good. That's Mhmm. That's super helpful.
Aaron Francis:Fusion is my interpretation of what inertia would have been if it focused only on Laravel. And so inertia had a different vision, which I think is a a good and correct vision. It's just different. Inertia was like, we can be all things to all people, and they successfully pulled that off. Like, Rails uses inertia.
Aaron Francis:React uses inertia. Everybody can and does use inertia. Fusion is my vision for what if inertia was Laravel only, and we leaned fully into that. And this this is these are some of the good things that we get out of that is we know what's gonna come back. We know exactly what's gonna come back, and we know how to route it on the back end.
Aaron Francis:So that's the kind of stuff that I'm excited about is we're we're living in in one back end world, and we can control it very strictly.
Alexander Lichter:Though, I also think the same would probably work with the same, let's say, blueprint in terms of the, let's say, idea behind it. Right? Okay. We have the build step that could probably also work in, like, I don't know, Phoenix, Ruby, for Oh, yeah. Rails, Django.
Alexander Lichter:So the the concept itself can be, let's say, copied.
Aaron Francis:Yes. A 100%.
Alexander Lichter:Of course, it has to be adapted to the frameworks then, but the same idea couldn't also work. So maybe even in the future, could you imagine that you also, let's say, at least open up the opportunity to people say, hey. Does Fusion not for Laravel, but, like, a Fusion Django or similar?
Aaron Francis:Oh, I would I would love that. If if you're out there listening and I'm thinking I wanna do this for Django, call me. I would love to help with that. I do think that this space is is wide open. Like, if you're out there and you're a Rails developer and you're, like, looking to make a project or make a name for yourself, I think this space is wide open.
Aaron Francis:Like, inertia went very wide. And for going so wide, it went very far.
Alexander Lichter:Sure.
Aaron Francis:But I still think there's a lot of ground to cover in terms of, like, let's bring rails together with React. There's just, like, there's so much open space, and nobody, in my opinion, is tackling it yet.
Alexander Lichter:Yeah. So definitely call Aaron. The phone number is in the
Aaron Francis:Call call me. It's x.com/Aarondfrances.
Alexander Lichter:Easy. Easy peasy. No. I I I'm really curious how and if that will I mean, not if. The if is clear.
Alexander Lichter:How that will shake up, the the front end space because in a way, also, you have this panel of, like, server, client, back to server, but we we're, like, going closer and closer together. And I reckon Fusion is really doing that. It it fuses these three parts.
Aaron Francis:Yeah. Exactly.
Alexander Lichter:Love the the naming there as well, which is, like, on point. So
Aaron Francis:I owe that to someone you might know, Josh Cirre. He works at Laravel. He's a big JavaScript guy. I was DMing him and Joe Tennenbaum, friend of the show. I was DMing both of them because they have good taste, and Josh has a lot of JavaScript experience, and Joe's the inertia guy.
Aaron Francis:And I was like, alright. Here's some ideas. What do you think? And they're like, yes, no, yes, no. And then I finally said, like, I need a name.
Aaron Francis:I don't have a name for this freaking thing. And Josh gave me, like, four names, and Fusion was one of them. And I was like, Fusion is perfect. So thanks, Josh Cirre.
Alexander Lichter:Shout out there. Yes. I also love to have him on the show. So, Josh, when you when you're you're reading when you're listening to that, it's because you read the tweet mentioning you.
Aaron Francis:There you go.
Alexander Lichter:Come on. Come on.
Aaron Francis:He's great. He would be great on the show. I like him a lot.
Alexander Lichter:%. I we're like we had a panel recently. Actually, just the previous episode, we had an AI panel at Vuegest Nation. Then we also did a panel on on Laravel and Vue together. So that was that was really lovely to listen to.
Alexander Lichter:Cool. I I think we we got some really good grounds covered there. I wonder maybe we could go into, like, a little bit in terms of Vue specifics, so a bit further away from Fusion. So you you mentioned, and we asked this a lot of guests here, you mentioned that you're a big fan of the options API, not so much of the composition API. Now you already explained briefly why you think that makes sense, and I really was interested in the take of and I heard it before as well that, like, people, especially coming from the back end, prefer the structure of the options API while people that are, like, I don't know, start maybe from another base, maybe even react or, like, okay.
Alexander Lichter:The the front end world are more of the the composition API fans. Why why do you think is that?
Aaron Francis:I look at the composition API, and it reads top to bottom. Right? So you look at it, and you're like, I'm gonna do some stuff and do some more stuff, and you just work your way all the way down. And then finally, it's, like, done. And, like, you this magic stuff gets exposed.
Aaron Francis:No problem with magic stuff. I love magic stuff. But from my point of view, the traditionally back end developer typically likes to work in an object oriented pattern. Right? And so unless you're, like, a functional programmer, you know, whatever.
Aaron Francis:But I think a lot of back end developers feel very at home in, like, a class structure where you can say, like, you know, I'm gonna declare my class level properties at the top, then I'm gonna write some public methods and then some protected methods and then very rarely some private methods or whatever. And it kinda encapsulates all of this state and behavior. And I know where, like, to go look for stuff. And so I think back end developers looked at the options API and were like, oh, this maps like, this maps relatively to kinda like a back end class. Like, you start at the top.
Aaron Francis:You've got your data. And then you move down. You've got your life cycle hooks, then your methods or maybe your computed and then your methods and whatever. And that to me, like, just slots into my brain super well. Whereas the composition API, I'm, like, looking at it, and I'm like, this feels like procedural PHP, where it's like old script PHP, which is not to say that it's a bad format or it is an old JavaScript style, but it does remind me of an old PHP style.
Aaron Francis:And so when I look at that, I think, boy, this is like writing PHP scripts in 02/2002, '2 thousand '3 before we had, like, the enlightenment of object orientation. And I I think that's a little bit of the dissonance is in PHP, that is an old style. In JavaScript, that's a perfectly modern and acceptable and maybe even preferred style. And so, like, this also happened to me when I observed from the outside React switch away from class based components to this, like, this functional hooks. Like, you gotta have all these use use use use.
Aaron Francis:And it's like, that just doesn't make a lot of sense to my brain. Mhmm. Which is not to say that it's wrong. It is to say that I don't like it. And so with the React Hooks, don't like it.
Aaron Francis:Makes no sense to me. I have no idea what all these side effects are. What is going on? With the Vue composition, I'm very sensitive to Evan's great diagram of the colors becoming all close together, like, you know, do all these things together, it just doesn't, like, click with my brain. And so I don't know if I'm speaking for all back end developers, but as a back end developer, that's how I view it.
Michael Thiessen:I've never heard that take before, but it's a very interesting one that it's that it's, like, fits in with the back end mentality in a bit a bit more. Yeah.
Aaron Francis:Which is, honestly, I think a a big reason when Taylor was like, hey, y'all. We use Vue now. Everybody was like, sure. That makes sense. Like, yeah.
Aaron Francis:It's kinda like a class on the front end. We've got some state. We've got some behavior, and that's great.
Alexander Lichter:It's interesting. Like, yeah, then it fits a bit more to OP in terms of also, like, okay. You have instructor. You have, like, your, I don't know, class fields, let's say. I wonder if it's more about how people write code with the composition API because you said the structure, and I think this is this is a big part.
Alexander Lichter:I see this, almost day to day in projects where options API, at least people know where to put things. Right? Okay. I put in my data. I put in my methods.
Alexander Lichter:In composition API, the problem is people have to come up with that structure. Right? Yes. It's, like, wild west because you can put things everywhere. You can have these we talked about 5,000 controllers.
Alexander Lichter:You can have 5,000 lines, like, components with script setup there or just, like, as you said, like, imperatively, procedurally, like, written down. And the problem there is that this, of course, is is not really how the composition API was imagined. So it's really good you mentioned Totally. You mentioned this this wonderful chart with with the colored blocks we often, like I I referenced that, like, in almost every workshop and also on on the show a few times. We'll also include in the show notes as well.
Alexander Lichter:The fun part is people sometimes ask, yeah. This is, like, very pixelated, of course, because it's more about the big picture, but how does the code look like? And if you take a look at the code itself, then you have a Vue file from the Vue CLI, which is not used anymore of, like, options composition API, and Evan rewrote that. And the interesting part is what he's doing is something that Michael and I commonly refer to as inline composables. So instead of just writing these, like, I don't know, a couple hundred lines or so, like, from top to bottom, you have functions.
Alexander Lichter:Like, you also write, of course, functions like PHP or plain JavaScript or TypeScript or whatever. Mhmm. And now you can say, okay. This you could just put in your methods and you're done. But then you still have, of course, have the problem of, like, okay.
Alexander Lichter:You have to go for the whole code to find the things. So instead you say, I have this certain thing. You can imagine being, like, a PHP class or just in this case, it's a composable with the use in front. And I have everything related to to one concern in there. Like, how can I get the the current working directory or the network or whatsoever?
Aaron Francis:Mhmm.
Alexander Lichter:So you execute that in there. Everything runs. There's, like, the let's say, the own little cosmos in there, like it would be in a in a PHP class, and you get something out there that you either reuse or say, hey. Use the template or whatnot. And if you have especially with bigger components, then structuring is not like, oh, damn it.
Alexander Lichter:I'm like it's just like code overflow everywhere. It's too much.
Michael Thiessen:Right. Right.
Alexander Lichter:It's really more like, okay. If I have really things that I can't spin up in other components because, like, orchestration, a lot of business logic, I can at least split them up in certain composables with their duties. I can put them extra files, but I don't have to. So in this way, at least, especially in bigger components, it's more manageable. That still needs structure, obviously.
Alexander Lichter:And Yes. Like, we also had, for example, Natalia Tepluhina from the core team who does a lot of documentation works. They're also like, yeah. She works at GitLab, and they have, of course, like, a ton of developers. Finding a structure that works for all of them will be tricky.
Alexander Lichter:So they're also migrating composition API at some point and saying, yeah. Options API, it it's just easy. You know where to find things no matter which skill level. While, like, someone who's, like, a an expert programmer versus a junior would do things totally different, where to put things, where to structure things. Totally.
Alexander Lichter:There are definitely, like, let's say, advantages if you have a rather big skill difference in your team or, like, like, rather small, for example. But at least with, let's say, applying the composition API in what it was meant to be or, like, how it was thought, at least it can help a bit. But I still I still get the point for sure.
Aaron Francis:Yeah. I think the most compelling example in is in the I think it's in the Vue docs talking about composables is, like, the use mouse or use mouse position or whatever that is. And that's very like, that resonates with me. You know, the example is basically, like, let's encapsulate a little bit of state, a little bit of reactivity, maybe some behavior, I don't remember, into this, like, use mouse position or whatever, and then you can just consume it. And, like, boy, that speaks to my OOP heart where it's like, let's encapsulate some stuff.
Aaron Francis:I love encapsulating. So that that part makes total sense to me. Going back to how composition API was intended and how it is being expressed in the real world, this goes back to the I don't have an opinion. And so, like, one thing that I like about the options API is that it has opinions for me. And so I don't have to come up with or read or listen to or argue about what is the correct way to format my composition API.
Aaron Francis:Like, what is the best practice? Those are great things for people to talk about. That is not something that I am interested in in talking about. Right? And so I like the options API because it's like it's kinda like the right down the middle.
Aaron Francis:Like, is it the best? I don't know. Is it the worst? I don't think so. Definitely what works.
Aaron Francis:Yeah. And so that that that's another, like, that's another thing. And and, Evan, if you're listening, please don't ever get rid of it. But that's another thing where I'm like, this is just a total, like, religious spiritual battle of I prefer this and you prefer that and we're gonna fight. It's like, you know what?
Aaron Francis:Like, you made a very compelling argument just then for composition, and I'm still gonna use options because it's like, Yeah. It's lower mental overhead for somebody that is not a Vue expert.
Alexander Lichter:That's a key part. Yeah. 100 %. Like, if if it resonates, if you and that's also important, can be productive with it. Mhmm.
Alexander Lichter:Like, if you if you can achieve what you want, then use it. And also on that note, luckily, we had Evan on the show a couple of times, and he luckily, confirmed options API won't go anywhere, also not in Vue four. So we're safe for a little bit.
Aaron Francis:Thank you, Evan. Thank you, Evan. Sorry sorry to all the Redditors and the listeners who hate it, but thank you, Evan. I appreciate that.
Alexander Lichter:Actually, you would be surprised how many people already love the options API and say, hey. Composition is horrible. You you wouldn't believe it. Yeah. Yeah.
Alexander Lichter:Yeah. Really? It's
Aaron Francis:On Twitter, it's the exact opposite.
Alexander Lichter:Yep. That's right. That's right.
Aaron Francis:How funny. Okay. Well, that's good. Maybe I will go back to Reddit. Who knows?
Alexander Lichter:I'll ping you in the next options versus composition reddit post. Yeah.
Aaron Francis:Yeah. Please do.
Alexander Lichter:Post. So, yeah, I really think also their views, options API was and still is an identity part of the whole framework. Right? That's why a lot of people picked it. Because not like, I I don't know.
Alexander Lichter:I don't have a PhD in TypeScript to use it. Or, like, for example, I don't have to understand all the patterns of Angular, but just like, okay. It's pretty simple, small things. Yeah. Data, props, computed, all smooth.
Michael Thiessen:I think we talked about a lot of stuff. I have one one last question for you that's completely nontechnical or maybe it is technical.
Aaron Francis:I don't know.
Michael Thiessen:It depends on your answer to this. But so I've got a 10 old daughter, and you have two sets of twins if I'm correct. And so I'm, I'm curious, how do you get anything done?
Alexander Lichter:Yeah. Cause
Michael Thiessen:it seems like you're, you're producing courses, you're creating the the next the next hot open source project. So
Alexander Lichter:Yeah. All sorts of Oh, I do. We didn't even mention, the the podcast.
Michael Thiessen:That's true. Yeah.
Alexander Lichter:Yeah. Mostly technical.
Aaron Francis:So a few things. One, yes. To set the stage, I have two sets of twins. One set is three and a half years old, boy girl. One set is one year old, boy girl.
Aaron Francis:So when Okay. The second set was born, we had four children that were two and a half and younger. And so those were tough days. So many, many, many answers here. The first is it would be completely impossible if my wife was not a stay at home mom.
Aaron Francis:So all credit truly goes to her because she, like, you you mentioned very kindly a lot of things that I'm doing. She works, like, five times harder than I do, but she's she stays at home with the kids. We also have, when the new set was almost here, we welcomed a young woman from Germany to come live with us. So we have an au pair. So we have somebody that lives with us full time because we talked to we actually weirdly, in our church, there is somebody else that has two sets of twins that are the same distance in age.
Aaron Francis:They're a little bit older, but they're the same distance in age.
Michael Thiessen:Yeah.
Aaron Francis:And so we, like you know, we crawled to their feet. We're like, please tell us how to do this. They're like, listen. It'll be fine. We went out to dinner, and they're like, you have to get help because you cannot get four children that need to be put in car seats.
Aaron Francis:You cannot get them into the car or out of the car at Target. You you just can't do that as one adult. And so they very smartly turned us on to the au pair program, which is like a state, you know, a federal level program. And so this person came over. She lives with us.
Aaron Francis:Like, we, you know, pay for her. She's basically like a, you know, the sister that's, like, ten years younger than us. Just an absolutely amazing, wonderful helper. She is incredibly good at her job. So that's another big thing.
Aaron Francis:The other thing that I'm never shy about talking about is that I I work a whole lot. And so, like, I don't ever wanna give off the impression that, like, life is easy breezy. And and if your life is not easy breezy, you're doing it wrong because life is very difficult for me. It is very, very difficult. There are a few things that I don't compromise on.
Aaron Francis:Like, I always leave. This is my office. I always leave here in time to be home for bedtime with the kids. Like, it's just something I don't miss because I'm not gonna sacrifice, like, their childhood for my, whatever, open source dreams or whatever. Right?
Aaron Francis:And so, like, for example, last night, or yesterday, I left here at 06:15, went home, played with the kids, put all the kids down, had dinner. And then after that, like, I got back on my computer. And I don't like, it's not prescriptive because I don't think that, like, that is, necessarily the best way to live forever. But this is a phase in my life right now. Yeah.
Aaron Francis:This is a phase. There are a lot of things I wanna do professionally, and there are things that I wanna do on the family front. And so I don't watch sports. I don't play video games. I rarely ever exercise.
Aaron Francis:And so, like, I'm not a beacon of, like, having it all. I'm a beacon of, deciding what few things I want and then trying to optimize for that and eliminate the rest. And at some point, I would love to have, like, this carefree, easygoing, play video games, watch a bunch of new, you know, severance or whatever, but that's just not the phase of life that I'm at. And so I've made certain decisions, and also it is difficult. There's just no two ways about it.
Aaron Francis:It is very difficult.
Michael Thiessen:Alright. Thanks for being transparent about that. Then, like, it's so easy to be online and to try and make it seem like everything is easy and you're just breezing through and you're just like, you know, whatever. I just put together this project. I just put together this course and that was, you know, it's easy, but it's it's hard work.
Alexander Lichter:It's not.
Michael Thiessen:Yeah. Thank you. Thanks for Appreciating that.
Aaron Francis:Yeah. You're welcome. And I I want that to be clear. And, like, I I wrote a year end review post.
Alexander Lichter:Just wanted to mention it, actually. Yeah.
Aaron Francis:Yeah. I I yeah. So it was year end review 2024, and basically, that just was, like, this was the hardest year of my life. And there were many, many times after putting the kids down, I sat at the top of the stairs and just cried because I was, like, so freaking stressed out because I got laid off in March. Like, we started a company.
Aaron Francis:Yes. But it was because Steve and I both got laid off. So I've got four kids at home. I've got, including the au pair, seven mouths to feed. I got laid off.
Aaron Francis:And it's like, I also got rheumatoid arthritis, and I have type one diabetes. And, like, I just sat and cried. Like, the it's hard. It is just hard. But my hope is I can at least be some sort of encouragement that, like, even when things are hard, you can keep going.
Aaron Francis:And that is that is the hope. Not that it will be easy, but that it is possible.
Alexander Lichter:Yeah. I don't know what else to say to that. I think this is, like Yeah. This is such a good such a good summary. And, also, like, it's just brutal honesty as well.
Alexander Lichter:Plus what you just mentioned, you didn't and what you mentioned earlier, you didn't become like a cynical, snarky Internet person. No. It's quite the opposite. So, yeah, I hope that, like, this at least give gives a little bit of inspiration to to people out there listening. Aaron, I I have one last question.
Alexander Lichter:Where can people follow you? Where can people find you?
Aaron Francis:Yeah. You can find me, on x.com, which is a ridiculous name. You can find me on Twitter, at aaron d francis, d as in Daniel. I'm also on blue sky as aaron francis dot com. And as you mentioned briefly, we have a podcast, Mostly Technical, which is a generous name.
Aaron Francis:It's barely technical, but it is a lot of fun. So you can find that at mostlytechnical.com.
Alexander Lichter:Perfect. Of course, all the links as usual in the show notes slash description if you're watching on YouTube. Aaron, thank you so much for taking the time coming here to the show and talking with us about Fusion, Vue, Laravel, life. And I hope this won't be the last time, we'll see you either here or maybe in real life, maybe at some conference. Oh, that would be awesome.
Michael Thiessen:100 %.
Aaron Francis:Thank you both so much for having me.
Michael Thiessen:Thanks for coming on
Aaron Francis:being a Vue outsider, but a a big fan of Vue. Thank you for having me on.
Alexander Lichter:You you're a lot of things, but you're surely not a Vue outsider. Definitely.
Michael Thiessen:That's very that's very kind of you.
Alexander Lichter:Of course. We're curious how to see, how Fusion will go. And, yeah, then latest, we will come here for another update on it.
Aaron Francis:Sounds great
Alexander Lichter:Perfect. Until then, take a look at the older shows, the older episodes as well. Of course, the linked one with inertia. If you have still no idea what inertia is, check it out. Joe's explained it phenomenally.
Alexander Lichter:If this is not the latest at the DejaVue episode, then, well, just, keep listening, and see you in the next one. Bye, folks.