Introducing Fusion for Laravel

Speaker 1

Please welcome Aaron Francis.

Aaron Francis

Okay. Hello, hello. All right. Do we have it? There we go. All right. Uh, like Kaneko said, I traveled some number of kilometers to be here. Uh, I am excited to be here. I'm going to introduce a new library today, but before we do that, um, the clicker needs to work. Before we do that, who am I?

My name is Aaron Francis. I am the co-founder of a company called Tryhard Studios with my friend Steve. Uh, we produce a lot of things. Um, most recently, we have produced a course on PostgreSQL called Mastering PostgreSQL. We did one on SQLite, High Performance SQLite, and Screencasting.com is also us. Um, we have a lot of fun.

We try very hard, which is why we named our company Tryhard. Um, more recently, I've been doing, um, some more open source work. This is one of them. Um, this is a package called Solo. It looks like this. Um, this is a way to get every process you need to run your Laravel application behind one command. So you can run PHP Artisan Solo, and it will start, you know, HTTP, Vite.

It'll s- you can run your tests, you can run your queue worker, you can run Pent. Uh, half of those packages are Nuno's, but you can run all of your packages behind one command. So I think it's pretty cool. Um, I'm very proud of this. This is called Solo. That is a little bit about what I do, who I am. Twin dad, two times over. Um, so I have two sets of twins, boy, girl, boy, girl.

Um, and so if you think that I look very tired, please do not tell me that, but I am very tired. Um, but I wouldn't have it, um, any other way. This is our whole family. Um, I don't usually share, uh, my kids' faces on the internet, but since we're all here in person, I want you to see the big happy family. Don't we all look alike?

Isn't it, isn't it wonderful? Um, I need to thank, uh, my sponsor before we start. Um- This is, this is Jennifer. This is my wife. Um, she's a stay-at-home mom, so she works harder, um, by far than me.

And, um, the only reason I am here with you goofballs talking about code is because she is at home taking care of four kids. She is my biggest fan, and she is my favorite person. You can't, you can't linger on that slide.

I'm not gonna make it. Okay. Introducing, I have a name for you, Fusion. Fusion is the library that I'll be introducing to you today. It is a new JavaScript and Laravel library, and I know you're thinking, Aaron, we have a first-party JavaScript and Laravel library called Inertia. No longer third party, first party, yes.

This does not-- Fusion does not abolish Inertia. It fulfills Inertia. So this is, um, this is my vision for what if we took Inertia way too far? What if we just took it, like, five steps beyond what is reasonable? That is Fusion. Enough of the slides. Let's look at some code. All right. Wish me luck here. So first thing we're gonna do is I'm here in the web PHP, and we're gonna create...

The lids really don't come off. Um, so, um, I'm gonna be working with Vue today, and we're gonna create, um, we're gonna create some routes. Is that... Yeah, that looks okay. Um, so first thing is, um, we have file-based routing for Inertia. So with file-based routing, what we're gonna do is, um, we're gonna go, yeah, JS pages, and that will give us all the routes in the pages directory are

just gonna show up. I'll show you a little bit more about that in a second. Um, but if we look over here, probably can't see that, but that is okay. JS pages. Can I zoom in? Boy, that's awesome. Okay. So in pages, we have index. Um, so we're gonna start with index. So we're done with web. We're gonna come over here to index.

Hello, Laracon EU. We'll put that over there, and I've lost my cursor, and we'll put that over there, and we'll refresh that. So there is our, um, file-based routing. Uh, like I said, we'll talk more about that in a second, but I didn't have to write any of those routes. They just work, which is nice. Um, now, what are we gonna do next?

Okay. So instead of, or maybe in addition to writing a script tag, we're gonna write a PHP tag. We're gonna write a PHP tag, and we're gonna pass some stuff down to this template. We're gonna say, um, prop is, ah, let's say hello to someone else. Hello, Laracon. We're gonna pass that down, and down here, we're just gonna say name.

So if we do that and we refresh, we still get Hello, Laracon, which is good, and interestingly, we also get hot module reloading with PHP, so we can say, "Hello, Aaron." So off to a good start. Um, something that I think is perhaps a little bit foreign, uh, to us PHP developers is, um, we're just gonna, we're just gonna make that reactive, and we're gonna say, "What if we change it later?" And it'll say,

"Hello, Aaron." So, um, the interesting thing here, in my opinion, is we are keeping track of this variable all the way throughout the script, and then when we get to the end, I will gather it all up and send it to the front end. Um- You'll notice I did not import this function. This function prop right here is available to you in your view templates, but it is not available anywhere else.

So it's not gonna muddy up the rest of your application with weird stuff, um, but it is available in the view templates. However, if you wanted to import it, you could because then you'll get some nice, um, you'll get some nice stuff here. So we can say sync query string, and if we save that, you'll see in the query string at the very top, it did sync to the name, and I do not ever want to use Google Lens.

Um, okay. It did sync to the name, and we can say, "Hey," and put it in the query string, and we'll come back through, go back through our PHP, and come back out to the front end. So we have a little bit of nice... Oh, thank you. Yeah. Big fan. We do love a query string. All right. Um, all right, let's get rid of that.

So we have a little bit of, uh, a little bit of niceties there. Um, so for this hot module reloading, um, it is going to keep track of your PHP and your template block, and anytime it notices something changes in the PHP, it will, um, make a request to the back end, get all the data, and just, like, kind of, whoop, slot it into the front end. And this is...

That part was very difficult, but boy, was it really frustrating, um, to be working on this and not have hot module reloading. And so I took a lot of, took a lot of time, hopefully, to make this developer experience feel nice because if it doesn't feel nice, nobody's gonna use it. Um, so hopefully it feels good now. So let me, um... Where should we go next? Let's, let's switch over to podcast.

So you'll see here, through the magic of Zoom, you'll see that podcast is in brackets there. And so this is the, um, if you've ever used Folio, this is the Folio-style, um, route binding. And so, um, what we can do is let's say, um, we're not gonna do that. We're gonna come over here, and we're gonna s- hit, um, let's just hit one.

And so if we hit one, we see that it did not work. Let's run that again. And we need to make sure... Oh, I see what's happening. Um, just talk amongst yourselves. There we go. So there we go. We see, um, that the podcast did not come down because we need to do podcast equals prop, and we're not gonna pass a default to this one.

We're just gonna say, um, fromRoute. And so if we say fromRoute, then you'll see it does pull it out of the route and passes it down through, um, to the template on the front end. Thank goodness. Um, okay. Now, uh, that's good. That's route binding, but that is not route model binding. What we probably want is route model binding, and what we can do is we can pass through...

Actually, let's, let's do this first. Um, we can... 'Cause I wanna show you that you have some of this here. So you can say we're gonna import that prop, and then you'll see that that fromRoute does exist. And if you were to command into that fromRoute, you'll see, you will see you have a couple of options here, and those are all of the ones that you would expect.

You've got, um, you've got the param, the class, using, and withtrashed. And so if you hop back over here, you can say that the class is, um, I think I can import podcast. You can say that the class is podcast, uh, class.

Oh, that was... You're gonna see that in a second. Um, and then it just comes into the front end like that. Great show. RIP to Art of Product. Um, great show. But you see it pulls the podcast ID out of, um, the route, passes it through, turns it into a model, and it comes down into, uh, the template. And you could use, like, uh, if you said using slug.

It's not actually routed by slug in my situation, but it might be in yours, and so you can pass using slug, withtrashed, um, and whatever the other one was. I forgot. Oh, the other one is, um, if you have a, um, if you want to re- name the variable differently. So here I'm just assuming that the route, uh, parameter name is podcast because you named the variable podcast.

That's what I'm assuming, so it is as if we wrote that. Um, but if you, uh, wanna name this, you know, you wanna name this pod and still have the, uh, route binding be called podcast, you can absolutely do that in this way right here. Okay. So I accidentally made an error earlier and jumped the gun, but I wanna show you this.

Um, so in terms of developer experience, it's very frustrating to be working on the front end and then have a PHP error because what happens is the whole thing grinds to a halt, right? So if the PHP page can't load, it can't load the view template, and then Vite doesn't know that you've loaded the view template, and then your hot module reloading is dead, game over, you're hosed.

So instead, um, when I notice that you have a PHP block, I will pull it out and parse it, and if I get a parse error back, I tell Vite about that, and Vite tells you, and it shows you where it is. So we can come back over here and say, oh, end of file. Well, I must have forgotten a semicolon. And if we say, you know, A equals one, B nothing, it says, "Hey, unexpected, unexpected variable," because you didn't have a, an, an assignment or a, uh, semicolon there.

So those errors should hopefully, um, help you identify your PHP errors quickly. Of course, the, uh, the view errors still work just the same way. Okay. We are gonna move on. Um, let's move on to something a little more complicated, and that is search.

Before we do, um, I wanna talk a little bit about the process of what's going on here. Um- So what's going on here is not any sort of WASM, any sort of PHP on the front end, anything like that. Um, I think, I think some other communities have really gotten single file right, um, in some regards, and I think they've gotten it really wrong in other regards.

One regard I think they have gotten it wrong is never being able to tell where your code is running. Is it running on the client? Is it running on the server? We have no idea. Trust us, it'll be fine. I don't love that, perhaps because I'm quite old now, but I like to know if the code is running on the server or the code is running on the client. And so in our Fusion world here, it's just like that. The PHP runs on the server, the JavaScript runs on the client.

That's it. Um, what happens is, um, so I've written, I've written a lot of code here that, um... I've written a lot of code, and then the code that I wrote writes a lot of code itself. So what happens is the Vite plugin will notice that you have a PHP block there. And in the process of taking this single-file component and turning it into whatever it's supposed to be in the end, um, it says, "Wait, that PHP block belongs to me.

You carry on with the rest. Do your thing. I'm gonna take care of this part." When it takes care of this part, what it does is it pulls all of that PHP out, and it passes it to an Artisan command that says, "Hey, I just got this. Good luck. Have fun." And what the, what the Artisan command does is it parses it, so that's where we get those errors. And so if it parses it and finds some errors, it gives the errors back. But beyond that, what happens is it conforms it into, um, a proper class.

And so right here, we're writing procedural code, but it's going to take this and transform it into class-based code and write it to the disk as an actual namespaced class that it can look up and find later. So the benefits of that are, um, once it's all built, it's kinda over. Like, once you build it and ship it out to production, Fusion, uh, I mean, we still have a controller that handles a lot of this communication, but the classes are written, the JavaScript shims are written.

Everything is written. And so, um, Fusion does not play a very big role after those classes have been written. That's where, uh, Laravel, Inertia, Vue all take back over. If we want to, just for giggles, take a look at one, we can look at... So you'll see, um, you'll see it's a little bit wonky.

This was, you know, of course, written by a computer. Um, so it took the code that I wrote and transformed it into this, and you can see that it extends a Fusion page, and that's where a lot of the magic happens. That's kind of like a controller. And then we have, um, runProceduralCode, and you'll see that your code has been transformed just a little bit. Um, and you'll see that we've appended that value at the end.

And then down at the bottom, we've used a very, very old function called getDefinedVars that I think Blade uses all over the place to figure out what are the variable values now, and we sync those props up, and that's how we do the reactive stuff. It's not very magic. It's just we're writing a little bit of code based on the code that you wrote. Um, in the same way, we write a little bit of JavaScript code for you.

And so it, the computer actually wrote that to-do. I left that to-do there to remind me to do that. Um, so what this does is we know at this point, we know what all the state is because in the process of writing that generated code to the disk, we have reflected it all, figured out what is the state, what are the actions. Ooh, actions are coming. Um, what are the actions? And then we have this useFusion function that we will inject if you don't.

And so I'm showing you everything just, like, working in the template, and it's all magical, and it just shows up. It doesn't have to be that way. You can call useFusion and get all of that state back and work with it in the JavaScript yourself. Or you can just say, "Hey, I just need it to show up in the template." Um, but I've left that available for you because I understand how it actually works. You don't just want it all to be magical in the template.

You need to use this stuff in your JavaScript. So that's a little bit about how it works. Let's go back to the search demo. Okay, so here's the search demo. Um, I am going to hit this in the browser. So if we hit this Search Demo, um, you'll see we have a loading prop, we've got a search prop, and we've got a podcasts prop, and then on the right-hand side, we've got a search bar.

Um, let's make this actually work here. And so, um, what we're gonna do, what we're gonna do first is we are going to make this, um, we're gonna make this return the podcasts. And in fact, you know what? We don't actually, we don't actually ever want this state back from the front end. So you can think of this as computed, um, in, in Vue terms.

We don't ever care if the front end sends us the podcasts back because we are in charge of the podcasts. And if the, if the front end, for whatever reason, sends us the podcasts back, we shall completely ignore them. So here we're just gonna return, um, return... Let's come import, um, EU pod. There we go. We're gonna return podcast.

That's nice. Podcasts all. And there we go. So we've got some podcasts. The best one is the yellow one there, Mostly Technical with Ian Landsman and somebody else. It got cut off. Who could it be? I don't know. Um, it's a good show. Great show. We love the show. All right, so we've got the podcasts coming down. We've made it read-only. Now, um, what we need to do is we need to figure out how are we going to search against, um, this query.

So we have this search prop, so if you noticed that, very smart. Um, what we're gonna do is let's start with this input, and let's say, uh, v-model equals search. So nothing is going to happen there. And if we say tech 'cause we're searching for Mostly Technical, you'll see that tech does pop into the search bar there.

Now- Um, this is another strongly held opinion. I don't want, um, magic syncing between the front end and back end. I don't want that because the mental model that I prefer is the server does some stuff, and it sends a bunch of stuff down, and then you can do a bunch of stuff on the front end. You can do as much as you want, as fast as you want, with no round trip at all, and then if you ever wanna send it back to me, that's great, I will receive it on the back end.

So we have v-modeled to search, but that is strictly in the Vue context. There's no requests when I type in here. There's no requests flying around, so we have to have some sort of action to say, "Great, take this back, do something with it." So what we're gonna do, um, what we're gonna do is we're gonna come down to this Search button, and we're gonna put an @click="fusionSync".

This is, um, provided by me for you. Um, what this does is this takes all of the, um, all of the non-read-only front-end state, and it sends it to the back end and says, "Do with it what you will." We run your code again, and then we send the state back to you on the front end. So in this case, um, fusionSync, we v-modeled.

Um, what we haven't done is actually used the search variable up top. So let's remove this default of tech, and then while I do muck about with your code, I don't fundamentally change it. That's very important to me, so that you can just do stuff like you're used to. So you can just use search here, and at this point, search is going to be whatever the value from the front end was because the prop you gave us was an empty string, and if we detect that the front end has sent us something, we will use that instead

of the default. And I think I have... There we go. Very basic, very Laravel, um, not very optimized. As a database guy, the double, the double, uh, percent signs kill me, but hey, it works. So this should accomplish our search. Now, let's see if it does. Tech.

Hey, look at that. So, kinda cool. Um, so we now have, like, we now have a full round trip, right? So we, we can have this state defined on the back end, sent to the front end, uh, modified, sent back, run again, and come all the way back.

Now, loading equals false on the back end makes no sense to me. Do not like it, will not do it, cannot convince me otherwise. Now, how do we handle this then? Every function, um, so in, in the Vue template, I'm calling them functions, and in the PHP, I'm saying they're, they're actions. You're exposing these actions to the front end.

So every function on the front end that Vue, I'm sorry, that Fusion generates comes with a few, uh, a few little helpers. Um, so by default, it is a function, right? So we saw that here. This is the same as, um, this is the same as that. Call fusionSync. Totally fine.

Um, now, thanks to the power of JavaScript... That's not pointing to the right place. Ignore that. Thanks to the power of JavaScript, what we're gonna do is we've got fusionSync in progress. And so this particular function encapsulates a bit of state that you can then use.

So Laravel is too fast to show this, so we're gonna throw a sleep in there. Um, so if we throw a sleep in there, thank you, whoever that was, um, if we throw a sleep in there, you'll see, ah, that looked pretty good. Uh, if we search for, let's give, uh, let's give Laravel News some love. You'll see that we get that spinner, and it just, it just, it just goes back to normal when we're done.

And what's nice is that, uh, that Fusion-provided function handles all of that state for you, and it makes it reactive such that Vue clearly can react to it quite nicely. So, um, we've got a few more, uh, we've got a few more little niceties, um, and we are quickly running out of time.

So, a few more little niceties. Um, we've got... Let's come down here, and let's do a v-if. Uh, we've got fusionSync.succeeded, and you can say, "Yay." So if we come in here and we do tech, it should say, "Yay." Eh, I'm, I'm unmoved by that, um, because that should go away now.

Like, the, I don't need that anymore. So we've got recentlySucceeded as well. And so if you type in tech there, it's gonna say, "Yay. Now get back to work," and it's gonna go away. So that's quite nice. We've got, um, recentlyFailed, failed, recentlyFinished or completed, one or the other, whether that's success or fail. And then you can also pull errors off of this function itself, um, because, uh, you can do validation, which we'll show you that at some other point in the future.

Um, all right. You can define your own functions, of course. Of course, you can. Um, so we're gonna do... Let's do this. We're gonna... Yeah, let's import this. There's another function you can use here, and that is expose, and you just say what you wanna call it. So we're gonna favorite a podcast, and we're gonna say, um, you know what?

What the heck? Let's do some route model binding inside this little function. So we're gonna say return response JSON. I think it's, like, podcastToggleFavorite. Hey. Um, and then we can come down here, and wherever, uh, podcast, I think we are emitting a function or emitting an event.

Um, so we can say, um, this is a little gnarly 'cause I am doing it all in the template, which I probably wouldn't at this point, but what I'm gonna do is I'm gonna pass the na- pass a named parameter of podcast through- I'm passing the entire object. Uh, Fusion is smart enough to look and see, like, "Wait, they're wanting a model. They passed an entire object. Does that object contain the key by which we should do route model binding?

If so, we're cool. Otherwise, we'll throw an error." You could also just pass the ID, that would be fine. And then we're just gonna, we're just gonna set the value. Um, so if we come over here, and we set Hackers Incorporated, also RIP, great podcast, um, you see that that works and that is stable. So you can, um, expose as many functions as you want.

So you're basically, um, creating API endpoints without having to write routes or controllers or anything like that. Um, okay, last thing here. Um, let's see. Let's come out here, and let's go to, um... Let's just make a new page. Let's just take index and say, um, alt, so we're gonna make a new page here.

If this-- If you hate this, that's fine. We also have, um, return new class. Um, so if that feels a little bit better to you, um, I don't disagree. I actually like this. So, um, if we change to alt, um, you'll see, um... Not sure why it's all caps, honestly.

Oh, it's probably, um, it's probably down here, alt generated. Yeah. Change this to... You get the idea. Um, you have a, uh, you can, you have a class syntax as well, and then with the class syntax, what happens is, um, anything, any public property, any public property gets sent to the front end. You have public function, uh, favorite.

I don't expose these by default. That seems scary to me, and so you have to define, uh, expose on here. If you have, um, if you have an error, there we go. That's why it didn't, didn't parse. Um, you have to define expose there. If you want to do route model binding for the entire page, you've got a mount function, um, by which you can accomplish that.

So that is an alternative syntax. It doesn't matter which one you write. You don't have to choose per project, you can choose per page, um, and it will work just fine. Okay. That is it for the demo. Um, woo! Oh, thank goodness.

Um, you always need to be prepared, so I also have a slide, um, just in case. Um, but fortunately, we don't need it. It worked. Um, that is Fusion. That is what I think the future of, um, writing, uh, modern JavaScript front-ends with your batteries-included Laravel back-end will hopefully look like. Um, I need to thank a couple of people.

Um, Will King did all this branding. You can find him up in the Crunchy Data booth. And then Josh Cirre, Joe Tannenbaum, uh, Jason Beggs. A bunch of people helped me, like, figure out how this was going to work, um, and so I'm super grateful to them, uh, for that. Now, um, this is going to be free. This is totally free, open source, and I'm gonna release it on Monday.

Um, I have a lot to do, but if I didn't put Monday on-- If I didn't say Monday, I might get scared and never release it. So this is gonna be out on Monday. Um, here is the roadmap. Uh, React, obviously. End-to-end type safety, we already-- We're so close. We have, we're already reflecting the entire PHP class, so we know what the types are.

We're already writing a JavaScript shim on the front end where we can place the types. We're totally set up to do it, I just have to do it. Um, actions per component is interesting because right now we're defining actions at the page level, um, but why not, instead of writing them at the podcast page, why not at the podcast row? So the podcast row can have its own little API that does stuff.

Totally possible. And then I need, like, deferred props, infinite scrolling, and then some tooling. Um, so I need to talk to Joe Tannenbaum about VS Code and my, uh, JetBrains friends about my preferred editor, PhpStorm. Um, so that is the roadmap. We got a lot to do. Um, I want to leave you with, uh, hopefully a word of encouragement. I'm not qualified to do any of this.

I am di-- I am in no way qualified to do this. Like Koneko said earlier, I got my master's degree in accounting. I spent one year at a public accounting firm. I learned that accounting sucks, and I hate it, so I left and I became a programmer. There is nobody handing out, uh, permission slips. There's nobody saying, "You can't do this." And if somebody says you can't do this, they're lying to you, and you can do this.

If somebody says you do not belong here, they're lying to you, and you do belong here. You can do things, you just have to do them. I'm not qualified to do this. If you're sitting out there and you feel like- If you're sitting out there and you feel like, "I wish I could be up on stage.

I wish I could write open source projects. I wish I could do that, but I'm not qualified," neither am I. I'm not. I learned all of this on my own, and if I have any superpowers, it's sticking with the problem. That's it. Taylor's got this great anecdote about if you're building a SaaS, start with the hardest part, 'cause if you can't figure out the hardest part, it's not gonna work.

I sat down and I opened a view template and I wrote, "PHP name equals Aaron." Now what? That's it. You can do this. I am not qualified. If you feel like you're not qualified, you're in good company. Open source is becoming a bigger part of our company. Um, Sidecar is a package that allows you to run functions on AWS Lambda in any language that you want from your Laravel application.

I think it's very neat. Solo I showed you earlier. Fusion we just went over. This is becoming a bigger, uh, a much bigger part of our company, and, um, for the first time, I'm opening up, uh, sponsors to help make this sustainable. And so instead of GitHub sponsors, we're gonna run it through, uh, Aaron Francis slash Backstage because we want to add people to a Slack Community where we can all hang out and you can help me shape some of the future of this.

I would've made a Discord, but I'm 35 and I don't know how Discord works, okay? So I'm sorry, it's a Slack. Um, so if you would love to hang out and help me shape this, and if you know React, that would be great. Uh, please hit that up. That would be awesome. I have a hype video that producer Steve made that I wanna show you, and then we'll wrap.

Speaker 3

This. This. Like this. This. This. This. This, this, this, this, this. Like this. Like, like, like. This. This. This. Like this. This. This. This. This.

This. This, this, this, this, this. Like this.

Aaron Francis

That's all I got. Thank you!

Speaker 1

I gotta say, I'm glad that you turned down on accounting.

Aaron Francis

Yeah, me too.

Speaker 1

I'm very happy.

Aaron Francis

Me too. Accounting... Apologies to the accountants in the room. It's not great.

Speaker 1

Yeah. You're truly an inspiration for everyone.

Aaron Francis

Oh, thank you.

Speaker 1

Every single time that you... Get me all teared up. Got a couple of questions.

Aaron Francis

Tell me.

Speaker 1

So first question is from V-

Aaron Francis

Okay

Speaker 1

... Ayanna. She's asking... Yeah, she's over there. First of all, she's saying, "Amazing stuff."

Aaron Francis

Oh, that's very good question.

Speaker 1

It's a f- that's an affirmation.

Aaron Francis

Oh, shoot. There's more? There's more?

Speaker 1

Yeah.

Aaron Francis

Okay.

Speaker 1

Her question is, "Can I use Fusion in combination with regular existing Inertia apps?"

Aaron Francis

Totally, yes. Mm-hmm. Yeah, so you can, uh, you can use that Fusion path to route, uh... You can route certain Fusion pages, and then the rest of it you can just do traditional Inertia or traditional Blade. Totally.

Speaker 1

Thank you. And the last question comes from Geoff. He's asking, "What was the biggest rabbit hole you found yourself going down while building Fusion?"

Aaron Francis

All of them. Um, hot module reloading was incredibly difficult. Um, I ha- The extent of my Vite usage has been knowing that it exists. That- that's literally it. And so figuring out hot module reloading with PHP, where you actually have to get the state from the back end again and inject it to the front end, w- it just, that took, that probably took me two weeks on its own.

Um, but we got there and it, and it works now. So yeah, that part was extremely hard, but I just kept chipping away at it.

Speaker 1

Thank you for that.

Aaron Francis

Yeah.

Speaker 1

So that'll be all. A big round of applause for Aaron.