The Modern Index.php File

there's a lot of opinions in the web development world of where and when you should separate your components structure when it comes to the logic of a component the state and even server information and the view layer of a component so what's actually being shown to the user within most View and react and even spelt components a lot of the times that state and even server code with server actions is collocated within the same file of what's being shown to the user or the view layer and within a traditional laravel setting when it comes to a blade template or models and Views and controllers or even traditional live wire a lot of the times those concerns have been separated you have your server logic and your state and everything that happens on the server and then you have a separate file for what's actually being shown to the user so this video is meant to be an introduction into live wire volt laravel's answer to single file components within the Live Wire ecosystem and why you might want to try it out for your next [Music] project so what's the traditional way of creating a Livewire component well you have two files when you set up a new component in your Lille application you have one that is a traditional PHP file that has a class that has your server and state from a Livewire component in that class so for example a search state that has that variable and then any kind of method in this case is just rendering out the view file for this Live Wire component which would live in a separate blade template file so the logic and view are separated now what about volt the first concern might be I don't want my logic collocated with the actual view file and it was a concern for a lot of people even live wires Creator Caleb porio who has now said almost every Live Wire component that he creates these days is a volt component in fact if you take a look at some of Caleb's demos a lot of the times he would use the HTML returned in the class component so you can do inline structure within Live Wire uh that has instead of this public function render you would just be returning HTML and you could create your blade file in that function now it's okay to still be hesitant and still to be a little uncomfortable when it comes to collocating all of these things into one file so we're going to dive into exactly what you might want to take a look at as you're creating a volt component what are the things that separates the class structure versus the functional API and if you've never played around with Livewire before some of you who might be watching this video here's a primer on what Livewire actually does and why volt might be a great solution to jumping into the larel ecosystem now assuming you have no experience with with larvo Livewire or if you just wanted a refresher larvo Livewire gives you the ability to write PHP code have a view layer and for those two things to talk to each other so think of this like HTM X or even like react server components where you're calling these functions these methods on your view layer and you have something completing those functions on the server where you can run database code where you can run jobs and cues and sending emails if you want from the server without having to kind of set up a controller or an API um endpoint to run those commands placing this Live Wire component is as simple as adding this Live Wire colon and then your component's name anywhere in your blade files so what does Livewire volt do well let's start off with the class API and if you have used Livewire before this class API is going to feel really similar to you because it's a live wire component anything that you read in the docs from top to bottom you can Implement in a Livewire volt component of course there are going to be some differences for how you use traits or how you implement certain logic but for the most part anything within this component is going to feel really similar so what does Live Wire actually do if I want to call a simple um hello world function where I say hey public function um hi there and in this function I want to just um return and we'll even say die and dump so we'll die and dump um hello so if you're not familiar with PHP this Dian dump is very similar to a JavaScript console.log in way except it's executing itself on the server so if I wanted to let just have a button and here's where we can call our actual uh component so we have wire click and we can call this function by saying hi there execute function so now we have the ability of actually calling this public function hi there from our blade template again anything above this PHP question mark is basically traditional Live Wire classes and anything below this is a blade template okay but what is actually happening on the browser what what is how does this look like so if you are familiar with something like HTM X or Hotwire or even react servering components in some way shape or form a lot of what is happening here with this Live Wire component is very similar anytime this button and again let's go ahead and actually add some classes here just so we can uh make this look a little bit easier a little bit easier on the eyes let's take a look what that looks like and there we go we'll just say we'll say text white and rounded there that way we have a little bit okay this execute function button now if we were to uh let's go ahead and clear this out if we were to press this button you see here that we actually get a fetch request back and since we're dying dumping that out the whole server just responds with 500 but what would this look like if we were to change this up and actually make something happen on the server and then display that output on the page itself why don't we add a new uh state in this sense we can call State in Live Wire and again this is the class component and say say public string we'll say this is um hello and then we'll go ahead and say instead of hi there we'll say this hello equals hi there so first of off we'll set this to blank and then what we're doing is when we click High there we want to change this hello variable to hi there so why don't we go ahead and Echo out and in Blade syntax what this is doing is just displaying this variable that we have we have access to this variable no matter where we are on the vade file this one component we can just use this variable like so but in the network if I was to click this we see hi there what's happening is let's go ahead and open this up we have this post request that's hitting Livewire SL update and we're sending back a response on The Wire that's just HTML you can see here this's div wire ID Live Wire is doing some magic on the back end and then we're basically after executing that function we just kind of implement that and push that variable back onto the page so again this is very similar to something like HDMX or a little similar to hotwire a little similar to react server components a little similar to live view in the sense that anything that happens on the server of course is going when I refreshed it it went away because we haven't actually set that anything that happens on the server is automatically going to be displayed on the page if we Echo out that particular variable again incredibly high level basics of what is Live Wire and how it works by sending HTML over the wire so that you can write that server code allinone file with Live Wire volt but here's where I'm probably going to lose some of the traditional within larvo Livewire and here's where I might gain some people who are coming from the JavaScript World Livewire VT also enables you to write code in a different API format think of this very similar to like a view composition API so instead of having to write all of this in a class and again almost everything 99% of everything that you will write in this new class extense component is traditional Live Wire it's just all squished into one file but the functional API is where this shifts a little bit further so if I was to go ahead and delete this file let's delete it entirely and what I'm going to do is pull up the uh pull up the terminal and just say PHP artisan make volt playground I'm going to emit the dash dash class that I did previously so now we have a new playground file and here we go it's a lot simpler there's no class extends component we just have this PHP block and again this is completely this is different than a standard PHP block that you might write in Blade because this is still live wire it's going to compile to traditional Live Wire but the syntax that you're using specifically with the functional API is going to be a little bit more akin to Something in the JavaScript world something like the view composition API so if we were to write the same exact file that we had written before in the class we would write State and then we'll go ahead and just say um let's just say hello uh world and we'll just go ahead and call this a blank uh blank string for example all right so let's write that method to actually change this string or add information to this state after we click on a button for example we would prefix it with a dollar sign this is saying that this is a method that we can call from our blade template down here we'll just call this um new hello world and we'll say that this is a function and then we'll go ahead and um go ahead and call this out here so we can just say this hello world because we have access to that right here so this hello world and we'll just go ahead and say that this is um um hi from Livewire functional API perfect and then we'll go ahead and call this function again from our blade template so we can go ahead and say that this is a button and we'll just say wire click again this is kind of binding it to anything that we have available up here again if you're in traditional Live Wire this wire click is just calling anything in our Live Wire class that is separated it's separate from our View files wire click equals new hello world and then we'll go ahead and say run the method we add some class just so we know what's happening so py4 px2 BG gray we'll go ahead and say this is 300 okay now what does this look like run the method actually we'll go ahead and uh run log this out so we can log out um hello world again we have access to this state variable we're writing it in a different API and it might not be something that you like but it's very clean you can't ignore that fact right this looks super readable because you have state that you're declaring you have a function that you can call from here and then you can Echo out your state that you already declared up there so let's see what this looks like run the method I from L functional so you again you have this single file component where you're not having to separate the logical structure of what's running the server what around the client because anything in here can you have access to in your blade template but you're also calling any kind of PHP any kind of uh server logic Within These methods Within These functions that you're running so if I want to do a function here where I you know maybe uh write write something to the database or if I wanted in this function here to uh kick off a cued job or if I just wanted to um maybe upload a file all of that can be done within this functional API in one file so you might be used to something really similar to Livewire in the traditional sense you have two files you have a view file that has that blade. PHP where only you're writing view you might have some wire colon directives click model Etc but no logic is actually being written in that file then you have the PHP class where all of your logic is being written there and you're saying I want all this logic and now I'm rendering a view and passing it to the view it's very standard if you will in the traditional MVC structure where your Live Wire classes are just kind of replacing in a way standard controllers but with volt it's rethinking things it's saying now you just have one individual class and we didn't dive into this but you can actually have a single page in your router that serves up a volt component instead of having to place it in your blade file and I would say this might feel really similar to people who are coming from The View world or the real act world or this felt world what have you or even in the HDMX world where now instead of having to write API calls and functions within your view file or even having a separate file with that logic you can if you want have all that logic in one file whether the traditional class standard API with Livewire or the new functional API again larel gives you that flexibility while still having opinions on how to do things outside of this structure and outside of the apis and outside of the logic but you get that flexibility of saying maybe the functional API resonates with you maybe it's something you want to try in your next project or maybe it's just something that you can convince your friends who haven't yet figured out what Lille does and the magic that Lille creates on your front end and back end maybe it's a great way to kind of get little gateway drug into larel itself we'll be diving into more more of Live Wire volt in upcoming videos so stay tuned [Music]

Channel: Laravel

Views: 15,444

Keywords: laravel livewire, single file components, javascript and PHP, learn PHP, Learn Livewire, Learn Laravel Livewire, Laravel Blade, Livewire Single File, Learn Laravel beginners, HTMX for Laravel, RSC for PHP, server functions for Laravel, Server code in Laravel, Laravel Single File Components, Volt Class, Volt Functional, Livewire Volt Functional, Livewire Volt Class, Colocation PHP, Colocation Laravel, New PHP, Modern PHP, Modern Laravel and Livewire

Id: MbYPErsez7s

Length: 16min 13sec (973 seconds)

Published: Fri May 31 2024