Laravel View Components - Marcel Pociot

do you want your online store to be ultra fast fully customized to your needs and scalable to more than one billion items imios is an ultra fast php e-commerce framework ieos next level e-commerce try it now [Music] [Music] if you're running an application at scale in public or private clouds you have to tame almost boundless complexity datadog brings together all this observability data with infrastructure metrics traces and logs in one integrated platform phonage is a cloud communication platform that lets you integrate voice video and messaging into your applications we have a load of helper libraries including a laravel package and a client library for php you can find out more about us at [Music] developer.nexmo.com [Music] hey so welcome to talk about laravel view components yeah i'm rocking my corona quarantine beard and hairstyle so don't worry about that so my name is marcel potiod i am a managing partner and developer at beyond code and you can follow me on twitter where my handle is marcel potiod and i tweet mostly about laravel and php related topics okay so let's code so this is pretty much all i have for slides so i'm going to do some live coding together with you to show you what view components can do and how you can make use of them in your level 7 applications so let's just jump right right in here i have a brand new laravel 7 app all i did is basically just modify the um welcome blade so i'm using tailwind and i changed the title and removed all of the boilerplate stuff that comes with laravel all right so in here um i want to show you what view components can do for you and if you've used any of the view components before in larval 6 than or older then you might think okay well view components that's nothing new right v components are there already for quite some time and yeah that is true but i'm going to show you what's different with view components this time around so first off let's try and create our very first view component in level 7 so i'm going to use the artisan command to create a component and then show you what's different here so we're going to say php artisan make component and i'm just going to create a sidebar component so i'm going to call it sidebar and it's created successfully so if we take a look at our project structure then we can see that in the app folder there is now a view folder that has a component which is called sidebar so let's open that up and in our resources we have views and there's also a new components folder called sidebar alright so both class and blades are pretty empty right now so let's take a look the blade is just an empty div and the class is where it gets a bit more interesting so in here we have this component called sidebar that extends from one of the laravel components that are shipped out of the box we have a constructor that is empty and we have a render method where we return the view of our sidebar so if we just add something in here so let's just say we have a list navigation more links all right and then if we want to show this in our actual welcome view all we need to do is use the new notation which is x followed by a dash and then the name of our component so in our case it would be sidebar so we had a sidebar component and then we can close this so if i have this in my template and then go to the browser and refresh fair enough we see that we added our navigation and the more links all right um let me just quickly center this so it's a bit easier to see this all right so we have this and if we would do the same thing with the components that were already available in earlier versions it would be something like add component then components dot sidebar and component and this would be exactly the same thing so until this point both behave the same but here's how we can make more use of those component classes that are now in level 7. so the first thing you can do is since we now have this html like syntax we can pass attributes to our components so in here i could pass and title and then give it a name so for example let's just call it sidebar and to accept this attribute in our component we can go into our component class and just accept this in the constructor so here we are going to accept the title and then we initialize this and make sure this is public so all the public properties on our sidebar component or on the component class in general are available as variables inside of our component blade file so in here i can create an h1 title like this and if we go to our browser and refresh we have the title here so sidebar sidebar foo like this you can just add attributes to your specific component and as i said all the public attributes of this class are available as attributes or as variables inside of your view components so for example i could also do something like public links make an array first second and then in my component file i could do for each links as link and then output the link in here and and for each all right let's move this here and this works as well so everything that's public inside of your components is accessible in the actual view file now there are also scenarios where you want to pass not only static like simple variables like strings or integers but for example you might want to pass an actual array so if we use the same example so the links that we have here let's say we want to accept this in our component so we add this to our constructor so we want links and then we initialize this as well so we have this already in here so let's just remove the default ones so we have the title and we have links and to pass them in here we would do something like links equal and then well we need a variable so let's pass the variable to the welcome view first so this is in our web php file here we have the default route which is welcome and then we just pass in links and this would be something like this okay so now our welcome view receives the links view data but how can we pass it down to our actual component so this does not work so if i try this we got invalid arguments applied for for each because yeah right now we are just passing dollar links as a string so instead what you can do in laravel is similar to how you would do it in view like in view javascript you just add a colon in front of it and now the content of this will be passed as just the actual variable to the component so if we refresh fair enough this just works so now we have our links that pass in the links variable from our web php to the welcome down to our sidebar components down to our sidebar blade component view all right and what's also really cool is since this is just a basic php class i can do all i want in terms of type hinting um the attributes so for example i could just say links is going to be an array and now the next time i do this without the colon i get an exception because the argument that was passed into my component must be of the type array but we gave it a string so um yeah this is just some easier to um debug this and to prevent these errors in the first place and of course you can do this with all kinds of data so it doesn't need to be an array you can also pass in user objects or models or whatever into your specific components um all right so speaking of components and attributes what i would like to do is i would like to add some generic html like attributes to my sidebar so for example as i'm using tailwind i want to style this sidebar so i want to be able to just say class and then give it for example a background let's say bg gray 100 and text gray 900 like this and then i want this to be available inside of my component file now you might think all right then i just add class as an additional parameter in my constructor and accept it in here and then i populate this to be public and then in my blade view i can access it yeah while this might work or this will work this is not really the recommended way of doing this because this is just for standard attributes that you might want to pass to your specific blade components so instead what you can do laravel provides you with a attribute variable that is available within your component views so in here i can just say to this div attach all the attributes that were passed to the component and when i do this we now i don't i hope you can see it well let me just change this to something all right so this should be better visible and now all the data is passed down to the component so if for example i want to add a title attribute uh now title is a bad example because we already have that let's just say something like a v model then this would get added as well so if i now take a look at the html then we can see that this is in here too so with the v model example this is probably not what you would want to do so for example let's say we have our component and while we want the class attributes to be on the diff we might not want additional component attributes on like the main node on our diff so let's just say in here we would have an input let's just give it a border so that it's easier to see and now i want the v model to be associated with this input instead of it being added to our attributes down here at the up here at the diff so of course i can just copy this and if i do this it works but if we take a look at the html we can see that our input now has the remodel which is good but it also has the class attributes that we only need on the diff up here and like ways the other way around our div now has the v model but we don't need it there so luckily it is possible to do this in laravel by using methods called only and accept so with these methods you can reject or reduce the attributes however you want so for example i can say you know up here in the diff i want all the attributes except for the model and if we refresh the model is gone now and likewise here for the input we want let's say only v model and then only this attribute remains on our input and all the other attributes get added to the class up here so like this you can make use of generic attributes that you can attach to your blade component and then you can redistribute how you want to apply them within your component class so i think this is pretty cool now with the example that i had let's just say that our sidebar should provide its own kind of default styling and then we want to add custom classes from the outside later on so in here we have our attributes and what you would like to do is i would like to add something like class and let's say we want it always to be rounded and have a shadow and then we add all the attributes that are passed from the outside now if we do this and look at the source code now we can see that we now end up having two class attributes on this one div and of course this is not going to render properly so to avoid this the attributes object that we have here the attributes variable also allows us to merge certain things so we can say we want all the attributes except the model and then we want to merge them so we want to merge the class attribute with these default values and then we can get rid of our class attribute here so this basically just says pass in all the attributes except the model and when you do merge the class attributes with these values and now if we look at the html again that we output we now only have one class output a class attribute it has rounded and shadow and then we apply all the attributes that were added from the parent template and yeah this is what it looks like i hope you can see it but yeah trust me it's rounded and has a shadow all right so like this you can merge in custom default attributes into parent attributes that you pass around all right so um i talked about how public attributes are accessible within your components now i want to show you another way how you can access data which is by using methods so let's create a new component and i want to create a markztone component so i just want a little helper component that i can pass in any kind of markdown string and then i want this markdown string to be rendered as html within my component and yeah i think this is pretty pretty nice and reusable throughout my application so let's create a new component php artisan make component markdown and now let's go and edit this markdown component so in here we just go to our markdown view and what i would like to do now in my view is i want to output unescaped because i want to output html i want to somehow render whatever is given to this specific component so let's just write some cyto code so i want to render slots so the data that was passed to this component and then output this as html so what we could do is we could create a helper function called render we could for example add like a markdown render class and use this one here but what i really want to do i want to contain all the markdown rendering logic within my view component because that's what they're what they're there for so what i can do is i can just create a new method called render and this render method has what's called render html because render is already used and this method receives the markdown string all right and then we want to return the html representation of this so i'm just going to reuse the markzone class that is within the laravel male and then we are going to parse this mark down and return it now to use this this doesn't work but as i said you can access any public properties inside of those components and likewise you can access any public methods so like this it's a public method and i can just do it with dollar sign before so i'm going to call the render html variable so to say the method of it with the slot okay so let's go to our template and try it out so here i'm just going to use x markdown and let's add some markdown in here hello lara connie you online this should be rendered all right refresh and there it is so as you can see we pass in whatever we have in here this is the slot variable in our components pretty much to what used to be the slot variable in the add component syntax before so this is accessible as our slot and in here we just render this slot to html and then give it to this method and then we got our actual html output so like this this just makes it super easy to call methods within your component so that the whole logic remains in your component alone all right another cool thing about components is that you can conditionally decide when you want to render them so let's say that we have a simple logout component so i'm just going to create a new one log out and i want this lockout let's say it's the logout link i want this link to be visible only if a user is logged in of course because yeah only then they need to log out so here we just have link that says log out and that's it so if we take a look here it is the traditional approach would be to just wrap this in an if statement so if auth check then we are going to log out all right we're not going to show it but with view components you can also move this logic into the component class itself so if we go to our logout component you can add a new method called should render and in here i can add my logic that determines if this component should be rendered or not so if i'm going to add off check in here refresh it's still gone and if i go to flip this condition we see the link so this in my opinion makes it really nice to have a clean syntax in our blade files while having all the logic that is required for our components contained in the actual component class um all right so far we have only looked at these class components but there are also something like uh which is called anonymous anonymous components so you might think okay these classes they're nice but maybe i don't need them maybe i only want the blade file and do not actually need any additional logic so i don't want this class in the first place but i like this axe syntax and you can make use of this as well so instead of using the artisan command to make a component all you need to do is just create a component blade file so let's just create for example a button component so we just create a button blade php in here we have a button and let's say we want to give this button a title now to make use or then give it a default title if it doesn't exist to make use of this button it just works the same way so we can just say x button and close it and that's it and if i refresh here we have our button with the default title and then i can just pass custom attributes to it refresh and it just works so just by having the blade view if the whole class feels too heavy for you you can still make use of this fancy new syntax and have all the abilities to use like the attributes in here i can do this as well so i could also still do attributes and then have a class let's say bg red 200. and this works the same way so this is really nice if the whole class approach is not your thing or even for just smaller components where you don't need the the additional logic that comes with a class and last but not least there's um also a third way on how you can write these components and that is an inline component this is pretty much the other way around if you don't think huh the class is too much but if you think the blade view i don't actually need a blade view because i only want to for example output a button and have some additional logic within my class you can do this as well so let's just create another component um let's say input and then we can pass a flag to this make command called inline now if we take a look at our structure in our application we can see that we don't have a view for this input component but we do have a class so let's take a look at the class and then we can see that our render method is no longer returning a view file but instead we're just returning the raw html that we want to output this might not be what everyone's looking for mixing html with php but i think it's pretty cool to just have the ability if there are really smallish components that don't need their own blade file but still where you need some kind of additional logic in here so in here i could just have an input some placeholder and now to make use of this i'm just going to say hex input and it's the same thing so now i have the input that i can use and if i want to extend it i need to add the additional attributes to the constructor then make them public and perform any additional checks or whatever i want to do and then render the blade component based on that so now in here i could also for example access just blade variables as if they were present so let's just try this out we have a public value and if i refresh then we can see that this value is now placed inside of my input so these strings here behave exactly like plate blade views and have access to all the methods and all the public attributes just as you would use a blade view that lives somewhere else all right so uh yeah these are the big new things in view components i hope that you now see a use for them and see that they can make your life a bit easier i really like the ability to have everything within one class so all the logic is in there and if for example there would be a phpstorm plug-in that makes use of of all the data and the data that gets passed to the component class i think this is super powerful because suddenly you know exactly which kind of data is passed to which view and what value it has so yeah this is the bird's eye view of level view components and i hope that it cleared some things up i hope you learned something new and i hope that you find use for these view components in your next laravel project thank you do you want your online store to be ultra fast fully customized to your needs and scalable to more than one billion items imeios is an ultra-fast php e-commerce framework imios next level e-commerce try it now [Music] [Music] if you're running an application at scale in public or private clouds you have to tame almost boundless complexity datadog brings together all this observability data with infrastructure metrics traces and logs in one integrated platform phonage is a cloud communication platform that lets you integrate voice video and messaging into your applications we have a load of helper libraries including a laravel package and a client library for php you can find out more about us at [Music] developer.nexmo.com [Music] [Applause] [Music]

Channel: Laracon EU

Views: 4,020

Keywords: laracon, laravel, php, laraconeu, view components, mvc

Id: u_H1aamwmh8

Length: 32min 40sec (1960 seconds)

Published: Mon Jul 20 2020