Livewire Demo: Full-Page Components in a Reusable Structure

hello guys have you ever used laravel livewire for full page component so that livewire component wouldn't be a button or filter but full page that you see on the screen today we will take a look at the code of such project sent to me by one of my followers where i posted on twitter do you want me to do some code review so in this case it's a code review but interesting approach to learn from so if you take a look at the code at the routes of that project all of the routes all of them are live wire components there's no laravel controllers so livewire livewire everything is livewire so let's take a look what's inside and what we can learn from it generally this project seems to me like an example of reusable things so anything that is repeated more than once is done in a reusable way so for example if you navigate to app http livewire there are pages then there are subfolders for companies pages and other pages then every page may use component for example model then there are forms so different forms also live wire and then there are traits but specifically for live wire that can be used in pages so everything is pretty well thought of and let's take a look a bit deeper let's take a look at company index what is inside of that component it's a typical live wire component so extends component but then it uses trades with pagination is a trade by live wire itself to get the pagination so this one but then others are custom traits if we go to interact with model it's in app http livewire trades so it's not in vendor and there are methods for all the pages that may interact with models so on any table open model close model with some parameters and then similar has sort and filters if there is a table component that has sort and filters all the logic related to that is here and for example if we take a look not at company index but pages for example stores stores index the same trades are used here so that's the main idea if you have some functionality in more than one page you may reuse it as a trade and this idea came from i think from the official screencast of laravel livewire by caleb porzio i'm not sure if you can see that but there's a lesson refactoring for reusability in the building data table section so caleb is doing a lot of things like filtering sorting searching a lot of that and then refactors that into trades i will put it on full screen maybe you can see that so you can see use with pagination with sorting and with bulk actions by the way if you're planning to work with livewire i totally recommend to watch all screencasts some of them are free some of them are not free you need to become a sponsor on github of livewire but it's totally worth it and you would support caleb and his mission on livewire and let's run quickly through that repository and i will emphasize some things that i consider useful i won't do a deep one-hour review of everything because it's a huge project inside but main interesting things so use hasort and filters not sure if you know but there's a package called spatzy query builder so for example after all those conditions you may set query builder for some class with some request if we take a look at the official github for that here's how it works and how it looks so if you have a lot of filters like for eshop or for catalog something like this spicy package laravel query builder may be an option to choose from especially since it's very popular 2.7 k stars means that it's well written maintained and popular and if we scroll down the same component in render you can see this load data and it is actually using the same query builder with even more features now let's take a look at the model windows so for example method create of livewire component it does seem like a laravel controller almost like a resource controller but it is in fact live wire component so if we take a look at company index and search for create you can see where click create and then it loads the model window so open model edit open model with company open model with supplier id so different model so this is the way how to reuse as a trade any model window with passing some parameters another interesting thing i found in this repository if we take a look at company index blade you see x organisms blade component molecules and down below x atoms and it was pretty weird to me i haven't seen that anywhere before but then i googled and apparently there's a whole approach called atomic design so in this article it's for laravel and down below they list specifically atomic design principles so you can divide your components into small things like atoms like button or something that molecules is a set of atoms like in chemistry and then organisms are sets of molecules and i find it pretty interesting and same thing i found in vue.js component structure so atomic design i will link both of those articles but it's pretty much the same thing so if you can't split a component into smaller components then it must be an atom and a few examples here so i will link the articles but i find it pretty interesting now let's take a look a bit deeper what happens inside of that model component so if we open the structure of app http live wire components model and here's everything that is related to any model in all the project so you open the model or you close it and then rendering is live wire components model let's open that one model blade so visually it looks something like this you click add company you have a model window even with tabs with validation so for example let's enter something maybe that's optional next so you have a tab structure and if you enter something not sure what is required let's save and it is saved company has been saved and then not sure if you've noticed but probably the whole table is refreshed so the whole live wire component gets re-rendered and here's another example of reusing the same thing we're loading livewire component with type we don't know the component name at this point so for example company index open model form company form so then we go to app http livewire forms company form let's take a look at this one and here we have a lot of parameters for the form so what is the model what are the fields what are the tabs what are the rules for validation and also it is reused for create and edit company this is interesting so update or create is used so again i will repeat myself it's a pretty well structured and well thought of project to be honest i haven't created a project that would be that heavily relying on live wire as an architectural decision so i find it pretty fascinating i'm not sure i would do that personally because the whole re-rendering of the full page on any change i'm not entirely sure if it's the best decision let's try again let's add a company and let's see how much it takes and then let's actually open network tab and let's see what is happening here so office number that's the validation stuff getting fired from what i understand we click next another validation let's leave something we save and yes it reloads company index and let's see the response the response html is div wire 106 kilobytes are getting refreshed and that's probably the main criticism of live wire in general that it's refreshing a lot of stuff a lot of html but for the first time i see a project that is fully live wire re-rendering everything but of course the advantage is that you don't have to learn any javascript for that so everything is happening in basically app http folder so if you are a backhander and you don't want to learn vue.js or react or anything you could potentially build your whole project the whole application logic with only live wire and get the models the dynamic elements the filters so for example let's try any filter it is re-filtering so in our case there are no holiers let's try growers and then supply contracts it's empty so the whole dynamic behavior of all of that is built with only live wire without any javascript so question to you do you like the approach of this architecture unfortunately i don't have the permission to publish that repository because it was sent to me privately so i've shown only some parts of the code which i found fascinating and that developer did a really good job and we could learn something from that not only in terms of live wire but in general how to structure the components how to structure the menu items the reusable things like traits so it's a good lesson for all of us if you want more lessons like this one or reviews or laravel tips subscribe to the channel and also you can support me on this mission of creating daily videos by checking out one of the three products that you can see on the screen it's laravel admin panel generator it's a set of my courses currently 14 courses and set of live wire components if we're talking about live wire so you can purchase my live wire kit see you guys in other videos

Channel: Laravel Daily

Views: 34,992

Keywords:

Id: xY0O2tSO8v0

Length: 9min 14sec (554 seconds)

Published: Thu Mar 04 2021