Introducing Laravel Splade: the magic of Inertia.js with the simplicity of Blade

hey everybody today i want to show you a new package that i've been working on called laravel splayed splay provides a super easy way to build single page applications with just blade templates of course under the hood there is some javascript and view js magic going on but for you as a laravel developer they should feel very familiar think of splayed as the magic of inertia.js with the simplicity of blade it's got all the routing stuff the navigation stuff but also a ton of components to develop apps really really fast so let's dive right in let's start by creating a new laravel application i call this one example app so composer is installing all the dependencies and when it's ready we can continue by installing the splayed package so let's cd into my new directory and run composer require and then the new laravel splat package so once it's done we can install splade by running php artisan splayed install and this is going to install a bunch of backend stuff like the middleware but also the front-end stuff like view and tailwind css so when this is done we can run npm run dev and this is going to build all of our assets and let's go to this exampleapp.testurl so let's open firefox refresh the page and here is our fresh splayed application and this might look familiar and that's correct because i just copied it over from the jet stream repository so we only have two pages a home page and a documentation page so let's click on the documentation page and you see how quick it loads and that's because it's not a full page request let's open the devtools and see what happens so when i click on documentation you'll see an ajax request and let's open it up and you'll see that it only responded with some html but the cool thing is this is still just a blade template you don't have to change anything in the way you build apps so let's see how this works you can create links with a dedicated link component but if you want you can configure splayed to just use regular old-school anchor tags but for this demo i'm going to use that new link component mostly because it has some additional features that i want to show you so let's create some space here maybe margin top eight and then i will create that link component and it's just a wrap around the standard html anchor text so i can just use an href i can call this docs and let's go back to the browser and click on it here it is and it just works let's go back to the homepage and another thing that just worked with splayed is history so when i click the back button it just reloads that previous page without a full page request another really cool thing you can build with this link component are modals and it's just super easy you can just add modal as an attribute to your link element and then in your blade template in this docs blade template you need to tell what content should be in the modal so here we can use a split modal component and we are just going to wrap these two lines into this component and that's it let's save this one let's go back to the browser click on docs and here is our model with those two lines of text let's change modal to slide over and let's see what happens it's that simple you don't have to change one more thing and that documentation link it still works it still loads the full content in that panel so you can reuse the same blade template for full pages and for modals so let's get rid of all this stuff let's remove the classes and let me show the most simple component we have which is the toggle component let's imagine we have a block with some short content or maybe like a short description of the content and let's create a tag for the full content and what we want is just a button so we can toggle between the short content and the full content so let's create that button and add the click event with toggle and that's it for the button so let's name it show hide more and inside this component we can use both blade and fuse syntax so in this case we're going to use that v show directive to show or hide the content so let's go back to the browser and here is our short content we click on the button and there is our full content but i want two buttons one to show and one to hide and we can do that as well with the set toggle method i create one button to show the content and i call this one show more and let's duplicate it show less and we set it to false and let's also show and hide the buttons accordingly whoops b show toggled all right show more and show less that's it now this was a very simple component but there's also a data component which is more interesting so let's change this one to data and the data can more or less take any kind of data so not only boolean values like the talker one so let's give this one default data show and this time i'm gonna set it to true so the full content is shown by default and i need to change this toggle thing to data dot show and i can replace the set toggle method as well to data dot show equals true or false let's go back to the browser and as you can see we now by default see the full content and that show last button still works show more still works so since we are now building single page applications you might want to use this for state management and if i go to the documentation page and go back to the home page my state is lost so luckily there's a fix you can just add a remember attribute and give it a key in this case well let's go with content and now when you navigate to the next page let's hide it go to the docs and back you see my content is still hidden but when i fully reload the page it's still lost and we can also fix that because we can use local storage to store the state of this component and splay does this for you so let's hide the full content and reload the page and it's still gone for our next demo we need some database data so let's go to the database heater and uncomment this user factory thing let's migrate the database and let's see it so we now have 10 users in our database and the cool thing about this data component is that we can give it any kind of data so for example you can also give it a user model so let's go with the first user you probably won't do this in production but yeah it's just a demo let's get rid of all this stuff and then i'm going to use the fee text directive to show the user's name let's go to the browser and there it is and just to be sure let's open up a tinker session and grab that first user from the database and yeah that's the first name we saw so this works all right let's move to the next component this is the deferred component which can load data from your api or maybe an external api so for this example i have an api that gives me a random quote it's json formatted and every time i refresh it i get a new quote so let's grab this url and paste it in here and this component gives me three props so i have a processing prop which you guessed it indicates that the request is processing so processing and then we use vf processing and we have a reload method so we could create a button and every time we click it a new random quote will be fetched from that api and then lastly of course we want to show that quote so this component also has a response prop and if i remember correctly the key was content but i'm not really sure so let's go back to the browser and yes it was content so response.content that's it let's go to our page and here we have a quote and you'll see every time i click on reload it really does fetch a new quote from the api so next up is forms i've prepared three routes a user show route a user edit route and user update route and here i've got a user controller it's all very simple it just returns a blade view with the user's name so let's go to that route user slash one to fetch the first user oops here you can see it it just echoes out the user's name and then the edit template is still empty so i'm gonna be really lazy i'm grabbing all the stuff from the show template and paste it in the edit template and here i'm going to use a splayed form and just like the data component this form component also lets you set a default data set so i will give it that user eloquent model and i set the action to user update route whoops let's close the component and let's start with an input element so both the data and form components support two-way binding so we can use fuse fee model to bind to form dot name and this component also supports form validation out of the box it's as easy as just displaying form.errors.name that's it and then we need a submit button so submit and we call it update let's go to the browser change the url to edit and we have error the route binding of course requires the user eloquent model let's try again refresh and here's our little form so here's our input element but we still need to implement the controller stuff so let's go to the user controller and inside this method i'm going to validate the request we only have a name which is required it's a string and let's say max 100 and also let's create grab that validated data i need my user and with that data i'm gonna update the user so user update data and then i will redirect back to that show route the first thing you saw where it displays the full name so user show and now i should not forget the user all right let's go back to the browser let's send an empty form update and here's my validation error so that works let's do something like test one two three update and now i'm back at that show route so the redirect also works let's go back to edit and splayed also support toasts out of the box so toast and i give it a title maybe something like the user was updated that's it let's add 456 update and there is my toast and the cool thing about this toast implementation is you can display it at any position so let's go for laptop i can even add a backdrop maybe we do an info styling and we can auto dismiss it maybe after five seconds so let's go back to my edit form and update again and here's my info toast on the other side of the page and it's gone so yeah this form is quite innocent but you might also have like a delete form and you want some extra confirmation from the user you can do that as well you can just add a confirm attribute to the form and then when you submit it submit it shows this confirmation dialog and you can even customize it so you can change the text of the buttons and the top text you can add additional text so here i'm going to say are you sure you want to update this user and here it is so that's nice to have and this also works on links now let me show you one more component i've got an order status page and i've got an order success page so this order page just grabs the first order from the database and it has a status so let's check out this view status order status and this is it it's now pending and i've created a little artisan command to change the status so i can do order status maybe paid and then when i refresh the page it's set to paid so very simple and what i want to show you is that i can broadcast an event to the front end with pusher and i can listen to it on the front end so i'm going to set it back to pending for now i'm going to make that event and let's call it order status was changed let's find this event in the editor so go to app event here it is and i'm going to implement the shoot broadcast now interface so larafell knows it should broadcast this event through pusher and i'm going to broadcast it on my shop channel and i'm going to broadcast it with some data this is all default standard laravel stuff in this method you will return an array and i'm going to return it with splayed refresh on event and this will tell splay that whenever this event is broadcasted it will refresh the current page so in my command i need to fire that event event new order status was changed yep that's it and then of course i need to listen to it on the front end i already set up player for echo and pusher i'm not gonna bore you with that but in this template we're just gonna add a splayed event component we're using the private channel shop and we're gonna listen to the event order status was changed and i'm already making a mistake because event should be listen yeah that's it listen so let's make this a little bit smaller so you can see it it's now pending and with my command i'm gonna set it to paid and you see it just refreshed page let's do it one more time let's set it back to pending there it is and this just works out of the box you don't have to write any javascript for it and there are other options as well so beside refreshing you can also display a toast with toast on event and it has the same options as you saw before so i'm just giving the title of the status was changed and i'm gonna position it at the center top well that's it let's change it one more time and broadcast that event paid and there is my toast i'm going to close it and show you one last thing and besides refreshing and displaying a toast we can also redirect to a completely different route with displayed redirect on event route and let's go to that order success route let's go back to firefox and maybe this time we will set it to yeah set it to complete and now it has been redirected to that success page so that's it for the demos thanks for watching don't forget to take a look at the docs because it has more examples and components and please let me know what you think of splayed here in the comment section on youtube or maybe you can reach out on twitter so thanks again i'll see you soon bye bye

Channel: Pascal Baljet

Views: 25,626

Keywords: Laravel, PHP, Vue, VueJs, Splade, Blade, Laravel Blade

Id: 9V9BUHtvwXI

Length: 17min 33sec (1053 seconds)

Published: Fri Jul 22 2022