882: Aaron Francis Is Putting PHP in Your JS Files  ## Metadata - Author: [[Syntax - Tasty Web Development Treats]] - Full Title: 882: Aaron Francis Is Putting PHP in Your JS Files - Category: #podcasts - URL: https://share.snipd.com/episode/92ff1a4c-9f13-49f4-b47a-6ac670b2c700 ## Document Notes ## Highlights - **Aaron's PHP Journey** - Aaron Francis initially used ASP.NET but switched to PHP and various PHP frameworks like Yii and CakePHP. - He eventually settled on Laravel, which he has used since version 5. Transcript: Scott Tolinski Did you do in PHP before Laravel? Aaron Francis I picked up ASP.net when I was like 10 or 11 or 12 and then was like, this is weird and switched to PHP. And since then it was raw PHP for a super long time. And then in like maybe 2010 or 11, I picked up a framework that is impossible to say out loud. YI. Y-I YI. And I picked up Yi and it was good. It was like one of the early MVC frameworks over on the PHP side. I did Yi for a little bit, did Cake PHP for a minute, and then picked up Laravel at like 5.1 or 2 or 3, something like that. So pretty early on found my way to Laravel and I've been there ever since. Wow. ([Time 0:01:23](https://share.snipd.com/snip/c35d5a56-a04c-468f-b486-77a4c41844b8)) - **Fusion for Laravel's Purpose** - Fusion for Laravel builds upon Inertia.js, extending its capabilities to deeply integrate PHP into JavaScript. - It aims to simplify full-stack development by allowing developers to write PHP within JavaScript components. Transcript: Wes Bos That's great. So you are working on Laravel Fusion, which give us the pitch for what that is. Aaron Francis Well, for trademark purposes, Wes, it's called Fusion for Laravel. Oh, okay. Lest Taylor, listen and come after us, of course. You know how litigious he is. I don't think he cares even one bit. So Fusion. Okay, so in the Laravel ecosystem, we've got these two great ways to interact with your front end. We've got Laravel Livewire, which is spiritually similar to like Phoenix Live view, maybe similar to something like HTMX or hotwire. There are some, there are some fundamental differences, but that is like the closest spiritual ancestor to live wire. And then on the other side, the JavaScript heavy side, we've had something for a long time called inertia. And inertia was originally written by Jonathan Rennick, who now works at Tailwind Labs. And Inertia was recently folded into Laravel Inc. So it is now a first party Laravel package. So I looked at Inertia, which is wonderful. And Fusion is built on top of Inertia. I looked at Inertia and thought, what if Inertia went way beyond the bounds of what is reasonable? Like, what if it went beyond its mandate by like four or five miles? And that's where Fusion landed. So my business partner, Steve, is a JavaScript guy. He loves Vue. He loves Nuxt. He loves all of that stuff. And when we started working together, he kind of opened my eyes to some of the rough edges that Inertia and Laravel still had. And we were like looking at the javascript communities with like react server components and all that kind of stuff and thinking you know remix and papering over the network even more And thinking wow i wonder if we could do that here and so that was kind of like the the birth the the genesis story of fusion we ([Time 0:02:29](https://share.snipd.com/snip/546a1575-3f7b-44dd-a619-ac61d6eb1238)) - **Single-File Component Architecture** - Fusion for Laravel emphasizes single-file components, treating the PHP block within them as thin controllers. - Business logic resides in separate service classes or actions, promoting better organization and reusability. Transcript: Scott Tolinski Like that because, you know, with all the new React stuff, it does feel like a large part of training is making sure that people understand where the boundaries are, right? And making that explicit is, I think, a good idea. Wes Bos Yeah, I'll tell you, I wrote some code on Friday where I wrote like a provider that was injected on the server, but it turned out, luckily I didn't deploy it, but it turned out I accidentally Put about seven megs of server code loaded in the browser, you know? And like, that's a problem that can happen. It's not great. Scott Tolinski It's not great. Yeah. So I've noticed that it feels very single file component, right? Which obviously view, very single file component. Svelte, very single file component. We'll talk about the React stuff in a little bit, but is the intention here for this to always be single file component regardless of what framework you're using? Aaron Francis So that is definitely one of the hooks. I am not under the illusion that a single file is always going to be the right idea. So right now it does operate out of a Vue single file component with a Vite plugin that does a ton of work to get it out of there. I think what I am assuming is the best practice here is that you're treating this PHP block inside of your Vue single file component, you're treating that PHP code as a very thin controller, In that you are translating from HTTP into the bowels of your application. And so your business logic can live in, you know, we used to call them service classes, now we call them actions. It can live in a single, like a single class that's like publish podcast. And in there, you've got all your logic and you're calling out to these providers and whatever. But from your controller, you're just like translating the user input into some sort of known structure, a DTO or something, and then handing it off. And so I think the single file component pattern can go a long way if you treat the PHP block as a thin controller rather than a super fat controller. So your logic will have to go somewhere else. ([Time 0:06:06](https://share.snipd.com/snip/ad6ad87b-8321-4384-8615-bd889f85fb0e)) - **Fusion's Runtime Behavior** - Fusion for Laravel works by extracting and introspecting the PHP code at build time using a Vite plugin. - At runtime, it becomes a standard request-response cycle with added knowledge of shared state between the frontend and backend. Transcript: Wes Bos Like how is it actually working? Is it is it a JSON API that's sending the data back? Aaron Francis Is it server rendered? So on the first, on the initial load, so it does sit on top of inertia. And so I won't assume any inertia knowledge for the listener, but I will explain it a little bit. So on the first load, what happens is, so a request comes in, we match the URI to some component, right? And what we have there is we've got a PHP class that has been written to disk. We've got a PHP class. And what it is going to do is return basically an inertia response, which is, it says, hey, here's the front end component that you should go look up. Here's the JavaScript component. And here's all the data that you should use to populate it. So on the first request, the data is all coming down. And so there's no like load the view component and then fetch the data and wait for it to all come in. It just all comes down in that first response. And then after that, it's basically as if they're API endpoints with a little bit more knowledge. And so the more knowledge is the fact that both the front and back end are aware of the state. And so the front end can like hang on to some state, modify it, do a bunch of stuff, and then basically say, hey, here's all the state for the back end, do your thing again. And so we're kind of passing around this state that we're both aware of, but you can also just reach into the back end and just call a function as if it were an API endpoint, you know, regardless Of state. So that's kind of the lifecycle. ([Time 0:11:35](https://share.snipd.com/snip/01b3de94-e598-46f8-a905-c31d9b312520)) - **Invalidation and Caching** - Fusion for Laravel handles invalidation by syncing state between the frontend and backend via post requests. - Caching can be done at the backend and state updates can be synced to the front end to react accordingly. Transcript: Wes Bos Question as well is like how does like invalidation or caching work? But I watched the demo. Like some of it is you have like a whole like pending state, right? A successful state. But if you were to need to invalidate some data, what does that look like? You refresh the page or recall it? Aaron Francis I'm not sure I fully understand the question, but I'll answer it as if I did. And then you can tell me where I went astray. So on the first, on the first load, the data comes down, right? So you've got, let's say query, which is a blank string and podcasts, which is an array on the front end. If you V model to query, and then you type in syntax and you're like, you're searching for the syntax podcast, you type in syntax, no requests have been sent to the backend yet. All the V model stuff, everything is living on the front end. So you're like, you're syncing state on the front end and views keeping track of reactivity. And now query on the front end says syntax, even though it came down as a blank string from the back end. Then what you do is you hit, let's say you hit the search button and you can tie the action fusion.sync, which is a magic action provided by us. You can tie that to the button. And what fusion.sync will do is it will take all of the state that it knows about, which in this case is, you know, query string and podcasts. And it'll say, all right, let's send that to the backend. Let's instantiate that as state on the backend and let's run through their PHP again and send the data out to the front end. And then the data comes back out with, you know, presumably the search applied. And now the podcast array is just the one syntax podcast and Fusion does its work to like update the page. And so there's no like, there's no magic caching or anything that goes on there. That's all done via just post requests back and forth to get new stuff. Now, if you command R and hit refresh and refresh the page, it's just going to run from an initial state again, which will send down a blank query and all of the podcasts. So I answered a question. Now, the question for you is, did I answer the question? Wes Bos I think so. I'm just trying to think if you were to like favorite one of those podcasts, you have a list of 10 of them and you were to favorite it or something about one of those podcasts were to change. What you're explaining is that there's like a sync that it will be able to go back to the backend and get the new array of data. Or if something, if I were to delete one of those podcasts, what does that look like? Is that a full page reload or is that just a sync call to the backend? Aaron Francis Yeah, no, it doesn't have to be full page reload at all. So let's say that you do delete, like you have a method in your PHP called like delete enemy podcasts. And so like you delete all the podcasts from the other podcasts that are terrible. Right. And we're just leaving syntax. Now what happens then is after that method, so like you have a button on the front that says delete. And so then we will, and maybe you pass in, you know, a param, an ID or something. We call that on the back end, which on the front end, it's just a little thin shim with a little, a few pointers that say like, hey, here's the name of the method. Go find it when you get back there. Once we get back there, we validate that you're allowed to call that method. And then we run that method. And then after that, that state is all synced up again. So let's say that podcasts is a piece of state. So it's like a, you know, in parlance, it would be a computed property, right? And so then after that delete method is run, we recalculate the state, which includes podcasts, and send it back out to the front. And so then because view is reactive, everything reacts and that one podcast row goes away. ([Time 0:19:20](https://share.snipd.com/snip/4b8dd930-947f-4cde-9f45-dcdd72a94767)) - **Implementing Optimistic UI** - For optimistic UI updates with Fusion for Laravel, decorate actions by wrapping the provided function. - This lets you handle optimistic updates and revert changes if the server request fails. Transcript: Scott Tolinski Like maybe you're sending that information at the back end. You just want to update the UI and revert it if it failed for some reason just to get that instant response. Is optimistic UI anything that you've thought about or even a problem that this has? Aaron Francis The way that I have thought about that, this is another me observing from the outside. And so I think my observational powers are very high. This is not one that speaks to my soul, this optimistic UI. But I know that it is important. And so the way that I have thought about it is when you define a function on the back end that should be exposed to the front end, you get a function on the front end with the same name. So let's say in PHP, you expose a method called favorite. In your JavaScript, you've got a function called favorite. Now, this function in Vue Land is pretty powerful because it's a reactive proxy itself. And so you could say favorite.processing and you get back a reactive variable that says true or false. And And so you can see loading indicators. And so you can do all kinds of stuff on that. Or you can just call the function itself, and it'll reach into the back end and accomplish that purpose. Now, a lot of the demos I've shown have been purposefully simplistic, where it's just like, you can just use it in your template. Like it's just there. It's magical. And I think that's like, that makes a great demo. The immediate question is like, what if I need to still write JavaScript? And I'm like, yes, that is the point. I'm here to give you like JavaScript superpowers, not try to take away JavaScript from your view because that makes no sense to me. So what you can do is you can say like in your script setup, which is a view thing, or just in your script tag, which is also view has a couple different ways to do it. You can say like, I want to import that favorite function. So instead of just relying on Fusion to do it in the template, I want to import it. And then what you can do is you can wrap it, right? So you can wrap it and say like, I'm gonna import Fusion's version of the favorite function, but I'm not gonna expose it to my template. Instead, I'm gonna expose a function called favorite. So it feels similar that internally does some optimistic UI, then sends off the request. And if it doesn't, if it comes back as a 200, I'm done. If it comes back as a 400, I'll revert. But you can wrap up and then do anything you want so my goal is to not like infer or intuit what the optimistic update would be but rather give you the ability to accomplish that update by Yourself that ([Time 0:25:48](https://share.snipd.com/snip/0614d8e6-fff3-4097-a689-c020ea0877fa)) - **React Integration** - Fusion for Laravel will support React, with development already underway using tagged template literals for PHP blocks. - The React version will differ significantly from the Vue version due to JSX and the different component structure. Transcript: Wes Bos So let's talk about React and other approaches. So obviously you did Vue first as a V.1. Is React scheduled? Do you want to do that? So do I want to do that? Yes, 100%. Aaron Francis As much as I love Vue, I also am able to observe the market and understand what's going on out there. So yes, React is definitely coming. Laravel Cloud, for goodness sakes, uses full-on React. And Laravel was the one that originally turned me on to Vue. And so if Laravel is using full-on React, we got to listen up. So yes, React is definitely on the way. I have a little Slack group of people that are really excited about Fusion. And a few of them in there have already started hacking away at what is a React flavored thing, like style of this? Because I'm under no illusions that I could figure out the pattern that React developers would look at and say, yes, that makes sense to me. Because React developers, as I have seen, look at view single file components and they're like, heresy, can you imagine? One component per file. And I look at it and I'm like, that makes sense to me. I know, it feels awesome. So I am actively exploring React. I've got a few very smart people that are helping and it's going to be different. Like it's going to be fundamentally different because it's JSX and there's a idea to use a tagged template literal to write your PHP instead of this weird little PHP block because it's Not a single file component setup. And so there's a lot of things to figure out. But of course, my dream is to have the major JavaScript front end frameworks covered so that we can welcome them into the Laravel community. ([Time 0:28:53](https://share.snipd.com/snip/c5ebea07-e380-44ff-84ad-fc6e0093718b)) - **Naming Fusion** - Fusion for Laravel was originally named "Duo", following Aaron's previous package named "Solo". - The name was changed after feedback, as "Duo" wasn't well-received. Transcript: Scott Tolinski You had mentioned in the documentation that there was an original bad name for Fusion. Are you capable of sharing with us what that is? Aaron Francis Sure. I mean, it's not terrible, but it's not very good. It was called Duo. And so I had originally, I wrote a package just right before I wrote Fusion and it was called Solo. And in an abundance of creativity, I thought, well, this combines two things. We shall call it Duo. And I kept writing it and I was like, Duo kind of sucks. It's a stupid name. And so, I reached out to a friend, a couple of friends, and Josh Seary was like, Fusion and I thought that's it that's the one but duo you know when it's you get in this world where it's like Ah it means this and it's got this backstory and this lore and then you go to show people they're like it's called duo that I hate it so yeah we change it to fusion I love it you know was the Scott Tolinski Google had a duo um that last yeah that's right. A whole month or something. Aaron Francis Yeah. Yeah. If I had to name something, I would name it after a Google product because I'm pretty confident it'll go away and it'd be totally fine. Yeah, ([Time 0:32:08](https://share.snipd.com/snip/09128f57-cf1c-4059-9aff-27cf0dd43fe0)) - **Database Choices** - Aaron Francis advocates for using SQLite for its simplicity and scalability for single-machine deployments. - For larger applications, he acknowledges the strengths of both MySQL and Postgres, highlighting Postgres's extensibility and MySQL's operational ease. Transcript: Wes Bos Yeah, totally. Well, let's keep that going. You're Mr. Database. You got a bunch of courses on database. Used to work a at a database provider if you're building an app you're obviously probably view laravel but what what database are you reaching for so again that depends um so i think these Aaron Francis Days i think you can get a lot further on sqlite than most people expect. I think SQLite is amazing. I think it is in some ways it is both underutilized and everywhere, right? So there are trillions of SQLite databases, probably several dozen or hundreds on your iPhone alone, not to mention in your Chrome browser, everywhere. It's just freaking everywhere. But we haven't yet seen, and maybe we're getting there, but we haven't yet seen SQLite crack the web app space because of some of the fundamental limitations of SQLite in that it is a file On your disk. And so like, well, that's a pretty big limitation. We've seen some people try to attack that Terso with their lib SQL and their new Terso and stuff like LightFS, that kind of stuff. All really cool innovations around it. I think DHH is correct when he says you can scale up a single machine to, you know, whatever he says, billions of dollars or whatever. But like you can scale a single machine way up and live on SQLite just fine for a super long time. I think the idea of pushing everything to serverless databases was a little bit of a fad in, you know, the COVID era is like, hey, you could have a database that turns off. And you're like, but why? Why do I want my database to turn off? And so I think SQLite gets a bad rap. I think it is a lot more powerful. Then beyond that, once you do get to a point where you're like, no, I need, you know, five web servers. And they all have to, like, talk to the same database. And it's not, like, right here on the disk. Then you're at the question of MySQL and Postgres. And I think this is a spiritual battle. This is Vim, Emacs, this is Mac PC. It's like, what do you want? I think they both have things that are objectively better than the other and I think they both have things that are objectively worse. I think Postgres has way more support for esoteric types and extensibility and all kinds of like you could run SQLite in Postgres. Why? I don't really know. But that's the extent to like Postgres. Postgres can be extended to do literally anything. Redis has been re-implemented as, you know, a Postgres thing. It's like, what are y'all doing? So I think that part of Postgres is amazing. It's rock solid, fully open source, been around for a million years, like tons of extensibility, tons of types, et cetera. Operationally, I think MySQL is easier to like, is easier to scale. And part of that is because it's dumber, right? It does way, way less. It doesn't have the, you know, the connection per process thing. The reason that we see 15 to 20 Postgres service providers and one notable MySQL provider is because Postgres is fundamentally extremely extensible. And you can do all this weird like hacking around with it. And I think MySQL presumably or the company line is it's easier to scale out. But we've seen one company do it and they've done it very well. But we've only seen one company do it. And I think that's because it's got warts. MySQL is not the most pure implementation of anything. If you've ever seen those hacker news threads about like, y'all, I worked on MySQL, I wouldn't touch it with a 10 foot pole. I think those are real, but we've got some experts that are up for running at rds and then you know the cloud hosting company so it's not a very satisfying answer but ([Time 0:37:57](https://share.snipd.com/snip/aabefbd7-53e1-435c-aaf4-aba19106b10e)) - **Postgres Extensibility** - Postgres's extensibility is demonstrated through plugins like PostGIS for geospatial data and various vector support plugins. - These additions provide specialized functionalities that often give Postgres an edge over other databases. Transcript: Wes Bos That's my that's my database rant i'm curious more on the extensibility of postgres like what are some of the more common things that like are people just like reaching for plugins for For Postgres? Yeah, like what are some things? Aaron Francis Post-GIS, gotta be number one, two, or three. Wes Bos Oh, that's for storing geolocation data? Aaron Francis Yeah, that's for doing all the Esri stuff, all that, all the GeoJSON, the shapes, polygons, all of that stuff. Incredible support. Full careers are built around Post-GIS. And I don't know what those people are called. They're not like DBAs, but they're basically like Esri developers or GIS developers. And they rely a lot on PostGIS. I think another example that we've seen recently is the proliferation of vector support for Postgres. So Postgres at this point has multiple vector plugins that you could use, where MySQL has one, and it is tied to PlanetScale. They wrote it, they've implemented it, nobody else has done it. It's on their internal fork of MySQL. I don't know if it's open source, but that's one of those things where like something new happens in the landscape, Postgres is going to get it first. They just are because it's open, it's extensible, it's got this hacking culture. And there are, you know, hundreds of Postgres, you know, extension developers, whereas for MySQL, it's like, good luck. I don't know of anybody that's done it besides PlanetScale. I guess Percona. Percona's probably up there as well. Yeah, ([Time 0:41:50](https://share.snipd.com/snip/7723f4eb-c67f-4232-8f51-45e49dbe209e)) - **Postgres Hosting Options** - For Postgres hosting, consider Crunchy Data for expert management or Supabase/Xata for backend-as-a-service features. - Prisma offers a middle ground with its ORM and unique bare-metal Postgres hosting approach. Transcript: Scott Tolinski I'm wondering, Wes and I just had a question actually earlier today in one of our potluck questions, and it was asking about database hosting. And you had mentioned that there were a lot of Postgres hosts. I've hosted on like Neon and a few others, but what are like, in your mind, the best places people should be hosting their Postgres? Aaron Francis That is a fair and tough question, because I think these Postgres service providers have realized that there needs to be differentiation because just having a Postgres box at this Point has become a little bit commodified, right? And so you see something like Supabase, it's like, if you squint, it's just a Postgres provider. But if you open your eyes, it's like, oh, we're full on application backend. And you're like, well, that's fundamentally different. And so it kind of depends like on the scale of I need a place to put my database to I don't actually want a back end. That is the scale on which you can find Postgres providers. And so I think all the way at the left of I just want a place for my database. You've got stuff like RDS. But I also think like crunchy data. Crunchy data is a great one for, hey, we are the Postgres experts. We're the serious company that's like, we will take your mini terabyte database and make sure that it's okay. I got you. And then you go all the way to the other side and you've got stuff like Zeta, which, you know, Zeta and Supabase and these people have like, oh, you want to do file uploads? Sure. That's something a database should do. And you're like, ah, it's starting to kind of blur the lines between like a database and a backend as a service, which is not, you know, there's no moral judgment there. It's just a business case of like, what do we want to be? And so then you see somewhere in the middle Prisma is walking its way up from ORM to, you know, hosted provider. And they're doing interesting stuff. I just talked to their CEO recently. They're doing interesting stuff with like running Postgres as a unikernel. And now unikernel is a word that I know. I learned that like two days ago. And so they're doing interesting things where it's like, hey, instead of running it in AWS, what if we went bare metal? And I'm like, well, you're going to, like, people are going to be mad at you. And they're like, yeah, but what if we went bare metal and we, you know, compiled Postgres to be a unikernel so that it's, you know, better, faster, cheaper, we can pack it tighter. And so all of these Postgres companies exist on a spectrum and it kind of depends, like, what do you want? So that's the way that i break down the the landscape and of course everybody fits in there uh somewhere along that spectrum nice ([Time 0:43:37](https://share.snipd.com/snip/c2f080c1-b8fa-4a63-a970-530df6d56d2e)) - **Fusion's Vision** - Fusion for Laravel aims to lower the barrier to entry for JavaScript developers entering the Laravel ecosystem. - Aaron encourages feedback from JavaScript developers to refine Fusion's API and improve its developer experience. Transcript: Wes Bos Right running up on an hour here anything we haven't talked about that you'd like to touch on i don't think so i think i'll just give the the vision for for fusion and that is that we can lower Aaron Francis The bar for people coming into laravel from the javascript community so like my goal is for this to be an on-ramp into the Laravel community and make it feel really familiar and like homey To the JavaScript developers. And so I'm putting a lot of like pain into what would a JavaScript developer expect here? And that is kind of guiding some of these API decisions. So if you are a JavaScript developer, come check it out. Give me feedback on what is stupid and what is very smart. Hopefully, give me a very smart before you hit me with a stupid, but I'm open to all advice. All ([Time 0:48:04](https://share.snipd.com/snip/a7e99e42-8740-4cd8-85ba-713993e05c90)) - **Better Display CLI Tip** - Use Better Display CLI to control monitor brightness and resolution, improving video recording and call quality. - Aaron uses it with a stream deck for convenient adjustments. Transcript: Wes Bos Right, let's move into the last section of the podcast we have here, which is sick picks and shameless plugs. Did you come prepared with the sick pick? I came prepared. What do you have for us? So I know that Scott has picked this before, but I've got a spin. Aaron Francis I've got a spin on it. So it's better. It's better display. Scott Tolinski Yeah. Aaron Francis And so the spin is better display CLI. So I do a lot of video recording, a lot of screencasting, a lot of being on calls, that sort of thing. I've got these these great giant monitors right here that are basically giant lights that light up my face. And if I push this button, you'll see it really, really light up my face. But with better display CLI, you can write scripts that control the resolution, the brightness, everything. And I've tied it to a button on my stream deck so that when I get on a call, I can say, this doesn't look great. Let me better display and turn it down a little bit. So better display, but check out the CLI. Scott Tolinski Man, I gotta do that because every time we start to record, that's the first thing I do is I have to go to both of my displays, lower the brightness down. Otherwise, yeah, especially glasses, brightness, everything. Yeah, I know, the worst. ([Time 0:48:56](https://share.snipd.com/snip/0b6f7e8d-c054-43b1-bde9-156fac2d1e08)) - **Acquiring Screencasting.com** - Aaron acquired the domain screencasting.com for $5,000 via GoDaddy's buy-it-now option. - He considers the investment worthwhile, given the domain's relevance to his work. Transcript: Wes Bos You ever tell a story about how you got that domain? That a great domain, screencasting.com. Aaron Francis It is the best domain and the story is super short. It was available as a buy it now on GoDaddy. It was like, it wasn't like $9.99. It was, you know, $5,000. But I looked it up and it was like, wait, I can just buy screencasting.com and it's $5,000? And it's totally paid off. Totally, like, totally worth it. Wow. 100%. That's amazing. That's ([Time 0:51:45](https://share.snipd.com/snip/e47428f9-6e7e-4d8b-afdd-399a59fa4c0c))