Laravel Blade Components: Two Examples - Laravel Breeze/UI

hello guys today i want to talk to you about blade components and blade slots and it will be an experiment video it started with my own tweet i tweeted a few days ago that i don't really like in the laravel breeze or same in laravel jet stream that in the scaffolding blades you immediately have x something so x layout x card x slot and x everything which is blade components and my argument was that it's not that readable instead you could be having html like this on the left hand side in laravel ui you immediately see the html and it's immediately clear what's inside so that was my tweet and more than 300 people liked it but also i've got quite a lot of counter arguments to that tweet including from taylor himself so he just replied with dry so don't repeat yourself and then it became quite a strong discussion between me and taylor and people on both sides basically defending that blade competence is the way to go to not repeat html code and they've been around for quite a while so they're not new and basically me who is laid to the scene so to speak and i just need to adapt need to read the documentation and admit that laravel blade components are okay to use and they are convenient so i decided to convince myself in this video you will see two demo projects first laravel project is laravel breeze but without components i've tried to reverse engineer what would laravel breeze look like or laravel jet stream it's pretty similar structure without those components and then on the other side my beloved laravel ui on bootstrap what would happen if we add components to that would they be useful or not let's try it out so the first experiment is laravel breeze it's quite a new scaffolding by taylor artwell it's still in early days version zero point something and i have a separate video about it i will link that in the description of this video but basically it's a scaffolding mechanism to have login and register form an empty dashboard for example you can register and get inside but if we look at the blade of that project there are blade files like login and register you immediately see x slot and x something and i decided to try to take away those components and use same old blade logic so step by step i try to take away the components and replace with old blade structure and i will show you github commits this repository is public and step number one would be guest layout into blade extends so that guest layout if we open that as a component layouts guest it's really similar to extents and sections so instead of having slot here let's take a look at the commit instead of x guest layout we have extends the layouts guest and instead of slot we have section that's it and we change that in all files and the actual file is changing just slot to yield so that it's all there is so layout blade components is basically the same as extends and sections so nothing really fancy here so this is how our login blade looks now without layout next is auth card what is auth card if we open off card blade it's basically a logo and then html code inside of the slot and that logo is actually if we go to login is here xslot logo so what i did here i've put everything here into layout's guest if we take a look at the commit so scroll down this is layout's guest so you can ignore the formatting but what i've done here is added the logo and the content wrapper in the layout itself so there's no off card an auth card is actually visually it's if we log out login has auth card here an auth card consists of logo and login form if we take a look at register it's the same logo and login form so login form would be actually the content of the layout and logo is a static thing there's no dynamic variables here so this was my change in every file then we don't need application logo and auth card at all it was removed in all the files it's not really visible well visually because it's also formatted code but basically i've removed everything related to xoth card from all the pages next i've noticed two blade components which are really similar auth session status and auth validation errors and it is basically the same as it would be include in blade without any blade component so that was exactly the change i've made instead of x off validation i've created a partial file validation errors and inside of that partial file we have the same validation errors as we did before and pretty similar to auth session status also include so some of the blade components are just includes and up until this point i successfully changed the blade components into non-blade component structure so layouts includes partials and some static html but then it got more interesting so when i started to look at the deeper components which is x label x input also x button down below those are much harder to change to be non-components and they make total perfect sense to be blade components let's take a look if we take a look at x button which is components button blade inside of that there's a button html tag and there are a lot of attributes so type submit by default unless you override that and then there's a class attribute with a huge list of classes by tailwind css and that is one of the serious reasons to componentize that so you have one button and then in html you only have x button and class you can override if you want but that is also optional if we take a look for example in all that folder find in path x button some of them are just x button without overriding anything in fact majority in register blade is just x button so only in login blade it adds of writing one class so if we didn't have the button as blade component then we would need to repeat all of those css classes here in every page in every button and for example if you want to change some styling of a button then you only need to change that in the component for example px3 instead of px4 or something like that so this is where blade components started making total sense similar if we take a look at for example x label label blade also has a set of classes and you may overwrite some of them there's also parameter value which then comes here so actual blade files calls the components and pass the values but all the logic is inside so for example x input input blade is just a simple input but with quite a few parameters so disabled or not then long class and then you can add more attributes so in this case we're adding id type password name password autocomplete so blade components are just the default values for default input and then you add your own attributes on top and then browsing through the project i found more examples which showed that components make sense for example in navigation blade so if you log in or register for example and inside of the dashboard you have the navigation so dashboard and also top right navigation if we take a look at the code of that navigation it makes it easier to add more links so drop down link to log out but what if we copy that and paste here for example settings refresh and there we go we have a setting of course the link is incorrect but we can easily copy and paste the drop down links without really knowing what's inside so at first my logic looking at x slots and x something my negative emotions was about that it's hidden that the logic is hidden from being readable but in fact it's a good thing you see only the things that you need to see and if you want to take a look inside you go to the components similar with left hand side so x nav link is navigation link for the dashboard for example users or something or profile we save and on the left we have another menu item and also i see active request is dashboard we see users and now it's not active anymore so it's easy to read it's active when the route is users so overall my conclusion looking at laravel breeze is that it totally makes sense to have blade components for things like inputs like buttons and labels and all of the other layout components that i've changed previously i'm still 50 50 on whether it makes sense to have them as components but if you have all the layout as components then it makes it easier to read you have one structure you have everything componentized and then you know where to find the hidden logic which is resources views components now let's take a look at the opposite scenario let's take laravel ui and let's add components so this is default laravel ui login form register form and if we take a look at the code resources views auth blade files no blade components at all just plain html based on bootstrap and similar to laravel breeze let's think what we could componentize here's the commit the repository will be also in the description of this video so instead of container i've had x off card with header and card body so here's the new login blade auth card with the title so visually this will be the title login or register so the header slot with the header and then everything else below an auth card becomes a component auth card because this part is actually repeating in all the pages so container justify md8 card header card body all over the blade if you can see this is repeating email blade on top this is repeating so why don't we have it as a component and then if we want to change that we will change it in one place so for example in auth card i've replaced it for all pages but visually nothing really changed but if we want to change for example call md6 instead of call md8 for auth card we change it in the component and then all the design changes in login and register everywhere so this is where the power of components is visible if you see the repeating parts it makes sense to extract it into a component so auth card was the first component for laravel ui then to make it in the same style i've replaced extends and section into x layout it's not really necessary but if we are going for components let's go all in and we have x layout now and that layout blade is here so all the main design is actually now a component with a slot and the next phase was the input so input text and input checkbox and buttons so things which makes the most sense to have it componentized so i've created if we take a look at login blade instead of div form group and all of that block now we have input group this is for the email this is for the password and this is for the checkbox so input group and checkbooks group inside of those groups so component input group has the label the input and the validation error and this is another component input validation error is this so if there is an error we show a span with a message and that field name is a variable an input group there's also field name as a variable field value maybe present as a variable and there's also field label with translations here so visually nothing really changed we can refresh the login or the register it didn't change anything visually but the actual blade files for login blade and for register blade you could say they are more readable so we have input group and all the logic what's input group is inside of the blade component and final step was the submit group so submit button it repeats itself in the register in the login in the forgot password here it's really similar so i've extracted that to submit group which is this by default that button is called md6 and offset md4 but in one case of login we overwrite column d6 into call md8 and also have a slot for the link for forgot your password so it's not as straightforward and the x submit button doesn't look really short in the blade in this case it's longer but for register for example blade it's really short so by default we just passed the label for the button but if we need the link or some more parameters it may look a bit longer and maybe we can optimize that even more so i just spent an hour playing around so probably those components may be with more attributes or different attributes and maybe it could be even more readable but overall after changing laravel ui into components now i'm quite convinced that if you use components all over your project and you have the structure of those components the actual blade files become then shorter and perhaps more readable of course it depends on how you name your components and name your parameters so it's not html in the sense that i've used in the initial tweet so it's not the html of div class something but it's still pretty readable and moves the logic of the component into the separate layer of blade confidence so all in all i'm totally convinced by taylor's dry principle that don't repeat yourself and the repeating html code could be or should be extracted to components i'm not entirely convinced by layouts as blade components but i guess they make full picture of everything is a component and then you read the blade code just as components after components what do you think do you use blade components yourself and if you don't why and if you don't will you start after this video i will link everything in the description of this video the tweets so please read the discussion pros and cons both repositories for laravel breeze and laravel ui and let's discuss in the comments of this video everything you wanted to know about blade components also i will link in the description the official documentation for blade components how they work what are the attributes and slots and all of that so you can dig deeper into that and if you want more tips on laravel from this channel subscribe to the channel hit the bell button to be notified of new videos i'm shooting them almost daily now also tell your friends to subscribe and see you guys in other videos

Channel: Laravel Daily

Views: 19,297

Keywords:

Id: HybWBINeXMw

Length: 15min 33sec (933 seconds)

Published: Sat Nov 14 2020