Laravel Blade Components: Two Examples - Laravel Breeze/UI

This week I shared my thoughts on Twitter about Blade Components and that they are not that readable, in my opinion. After exchanging opinions with other Twitter users, I decided to practically test what's the difference of with/without components. So, two demos for you!

- - - - -

[sergiuprt]

I found out about these components recently when I've installed breeze for a small personal project. It wasn't clear at all what's the deal with them. It's clear now! thank you!

[IlPandax]

As far as I can understand, components are perfect in replacing "elements" (inputs, images, buttons, etc.) but are a complete mess when they replace "sections". I think, and of course I could be wrong, we should take a step back to extend sections and use components to replace elements.

[msmitsumitsuko]

This overwhelmed me so much. So happy you made this video.

[phread]

I implemented blade components/slots. Took a bit, but I got it done and working. HOWEVER, I decided to revert back to the original code due to a major issue: it was taking more 50-60mg of memory to display the blade. I spent multiple days trying to find why the memory went up, and found that once I reverted back to the original code I was able to decrease the memory usage by 50-60mg.. Holy

One other issue, the code seemed to have gotten much more difficult for somebody to follow. This might be a personal issue, mine.  

I am bummed that I can't use this approach. I will revisit this if/when the components/slots are allowed to be compiled. It will be interesting to see the difference.


However, THANK YOU for taking your time to create this video. It was a tremendous help for me to create the components/slots.

[Ruggieof]

I've always used view partials that I pass an array to as a second parameter long before components came out. I use them virtually the same way (inputs, buttons, charts, modals, etc) but feel I have more flexibility (not to mention several large code bases with this already in place). I can pass any data I want to the view, including custom arrays without any weird IDE linting issues. I have the option to place the views wherever I want instead of a central components folder. And I feel it makes it clear "something dynamic/special is happening here" instead of trying to look like another html tag. If anyone is wondering how to do this, just make a view without any @sections in it. Then use @include('path.to.your.view', [array_of_data_here]) where you want it to show up. The array data ends up in the views local scope. So if you pass ['data'=>$something] you can access it in the view by calling $data. For edge cases where I need default logic, I handle that in the view partial via a @php declaration at the top of the view that checks if the expected input exists and creates the default if needed. This wasn't meant to be an argument against components, more that there was already a way to get DRY within Laravel before they came along.

Hey, I am just falling love in your channel! I learn laravel now, and it is so difficult to me to find explanations of laravel features, that makes really sence! I don't need so much time to understand them! Thans man!

[celebritydev]

Thanks for clearing some concepts. Components help to not having to repeat yourself over again.

The DRY concept.

[AlfredoElizondoLife]

Nos the next step is to know when to make:component, when to livewire and when to just use simple ones like the ones described here, btw liked that you usted that componentize word.

[theological]

i've been using laravel since 5.5 and i use it almost exclusively for every project big or small. I'd be lying if I said that laravel wasn't leaving me behind. I take a break from learning to work on projects for 3-4 months and when I come back during a lull the laravel world has sped forward and there's so much new material out. Like you, sometimes I wonder what the trade off value is: use repeated code that I'm super familiar with and just copy/paste because it's second nature, or take the time to learn the new component syntax. Will I save more copy/paste time by learning the syntax or will I spend more time learning syntax than it takes me to just copy/paste things....

[martinh]

Components are great for making complex reusable features, like profile cards and so on. I'm less convinced about taking it down to tag level components. I've seen people turn h1's, td's, tr's etc. into components. The main reason they do this is because they're using Tailwind and want to avoid copying large blocks of tw class names all over the place - which would be a real maintenance nightmare. I think in those cases you might be better off using plain old CSS or even Tailwind's apply functionality.

Designing reusable components can also be very tricky. Sometimes you're far better off just using HTML until you reach the point of repeating yourself and it clicks "hey, I should turn this into a component!". So I guess my take on this is to use components where it makes sense to use them.

[sunwavesonmars]

i like this kind of style of working, makes it easier once you understand it

[JohnSmith-zlrz]

I like Blade Components, actually for now I avoid Vue or React on Laravel.

[jihadabdulrazaq]

I just started using laravel breeze and I agree with you, using components for atoms (inputs, selects, buttons...etc) and using traditional includes, yield and extends could be better for sections.

[Sdirimohamedsalah]

I have the same opinion, GEST is not a component it's A LAYOUT, it's not readable, hard to figure out, a time consuming, NOT always DRY sometimes you find yourself in blocked situation. A button is a component yes! I believe that all wrappers or any portions that have a logic should not be used as components here include is pretty cool solution.

[shoemoney]

Sounds like Taylor is getting a God complex. Honestly I also do not like forced to learn tailwind when I am already pretty overwhelmed. Eventually someone will fork it. Just like what happened with b2 then matt forked it into wordpress.

[msdeav]

Thank you, now I'll start to use them

[carlosvargas]

You helped me understand laravel better.

[themathittiahcompany]

Thanks. This is quite informative. However, a video on the routing rules for jetstream will be appreciated

[marlonferreira]

I just release my first project using breeze. I still missing the simplicity of Laravel 7 (or before). Taylor did a good job on Breeze, but I prefer the old brade components instead. One good point of new blade components is the ability to use AlphineJS almost on-the-fly.

[sodomousprime]

I am getting left behind too, I am still struggling to get my head around the x components. I have been using laravel since 5.2 and every version update seamed to be straight forward but the upgrade from 7 to 8 feels like more of a change in one version that all of the past changes combined over the years.