Events and Nesting in Laravel Livewire, pairing with Caleb Porzio - Matt Stauffer Livestream

the native one does Caleb you're more familiar with what the native one does so you can maybe tell me what I did wrong here but let's say we were to just ignore what what why it is that I had to make my own instead of using yours I can't remember but it's very very simple and I can paginate anything by just basically keep track of the page the per page and then you know paginate basically says okay give me an account the full number of them and then skip you know however many pages and then take however many per page so this is very similar to what with pagination does but again for some reason I wasn't able to use the native one so I said yeah I muted myself that's as interesting I would like to look more at that the with pagination is that I made is super simple it's it basically tries to basically just make the arrow paginate work you know and the rest is up to you so I I swap out basically instead of driving the page out of the query string and writing it to the query string I just do that with live way or data so I don't actually add anything smart and it's possible that something I did it might have something to do with the fact that our pagination information is changing while we're still in the same component I can't remember what it was but in the end and it's possible that I just didn't eat actually need to do it but in the end it was very easy and very PHP II to just say I'm gonna build my own pagination and not worry about it like I felt like oh I'm gonna have to do interview it yeah I'm have to do a bunch of magic no I didn't the only downside is that like when I'm paginating something I end up calling this paginate instead of paginate in the query which whoo guys it's not a good you could probably fix there's a like a have you seen the custom paginate or option like you can change the resolver with like a callback I'm sure I could I wasn't good to do it now but yes you're 100% right I'm confident that I could do it and use that to make like a simpler situation so before I move on Marissa says is live we're getting the point where you'd recommend to use it in production for enterprise Oh probably uh well I'd say wait a month I'm gonna launch 1.0 at lyric on online in late February and by that time right now it's ready it's already being used in production it's been public for over six months it's been worked on for over a year people message me all the time that they're using it in production so it works that's that but I would say hold on because it's not I want it to be and and my deadline for that is late February so there's going to be a little bit of a couple slight API changes so if it makes no difference to you wait until late February if not get started now it's not gonna change that much yeah and we got a future plans for livewire I assume the answer that is tuned in to Larrick on online yeah all right so so that was the biggest refactor I did since last time I pulled out this paginates thing but it's nothing complicated everyone can see we had already started building all these same methods last week and it's just keeping track of what page were on how many per page building the queries for us and then also giving the stuff that we need to view what how many pages do we have total and then a next page helper and then a previous page helper and our action and those things allow us in the view to say I don't even remember where it is no let's see we don't need this anymore it's not in the packaged car Oh cuz this is the wrong one I want package lists all right so total records package count page page out of and then you know ceiling package count divided by pack so we're doing our math in here we're not getting that magic kind of Link's thing that we're doing but in the end it's very simple to just build a next page in a previous page you know all these things we're doing is just calling these methods this next page of previous page and those methods are just in here and all they're doing is modifying this page count and that's it everything else is just magic for us all right so I think that's it so what we were talking about last time Caleb was the the idea of nesting components and so before we maybe dive into the really deep depths of nesting these big components the package list and the popular in recent packages I had stopped at a few of these because I would looked at something and said well quite a few these things these two dues right here are their view components inside other view components and so I saw oh this is a moment we're gonna have to stop and have this really complicated conversation about how to nest to live our components inside of other ones but just a bit ago I realized that something that's a view component side view component often is really just a blade partial inside of the life of our component not a live wire component inside of another lie to our component so I figured let's do this title icon one real quick to show what it looks like to do literally just play partials in there and just recognize how simple it is to potentially like do nesting without them actually being specifically live why are you and then maybe I want to kind of dig in with you about like when do you ever actually need to do like livewire components inside of other ones does that make sense yep okay alright so anybody if you're if you're having any trouble following at all just let us know in the in the notes I can answer about the high level stuff but anything live our specific Caleb can you answer while I'm coding as well so I only see I only see twitch cuz I'm looking at your screen and I'm on Twitch alright I would see you too if it's YouTube I'll just read it out to you cool yeah all right so in here basically once we get down to it we have this livewire dot partials packaged card so this package card right here in view is an actual so we've got packaged index dot view and then we've got packaged card view so packaged index dot view is basically a list and then it passes all these things down into this package for our twitch card view component so in the view world we've got a parent view component that then pulls in a child view component and so when I thought oh I'm gonna iterate over these package cards I'll be doing the same thing here but I realized that like this package card doesn't need to be a livewire component because all it is is just HTML there's nothing it's not getting new Ajax requests every time it pulls them in these it's already got the data so all I did was I just went and I asked this in the last Clause like is there anything against me making more view or blade files in this and you're like no so we currently only have a single livewire component meaning a single PHP class under the live world world but we've already got I mean how many is this like five one two three four we already got four views and we're gonna build more and so they think that's a really helpful kind of way of thinking about it is like we are like we have assumed a component with a ton of blade so this is still blade that working with so if I want to make a new one here I just make package - card that blade F PHP so I did that in here there's nothing live wiry about this at all this is literally just blade and so I realize it's the same thing like if I wanna so what was that thing we were building is this little title icon just so everyone knows what it looks like it's a little it's a little view component we have that makes it really easy to build these little icons here right and so let's go look at what that looks like I think its title icon dot view there's not really that much going on here there is some conditional logic which we'll have to talk about a little bit but let's just grab this template real quick and we're gonna make a new view partial called title icon double a dot php' and in title icon we're gonna throw this template in here and so okay so let's talk a little bit about bringing logic in oops I can't do that okay let's talk a little bit about bringing logic in so let's say in title icon we've got these things that are making stuff really helpful for us now a default prop is super easy because we're just gonna default it in our blade right but how about this kind of stuff where we're generating a class like a list of classes some of them are gonna be easy right it's just gonna be conditional stuff in our class list and blade but how about how about this kind of stuff here where we're kind of looking stuff up out of an array how would you handle that yeah so without giving too much away laravel is gonna make all this way better at Larrick anima yeah so tune into that so the real answer is laravel magic but for now the answer is exactly what you yeah okay block at the top I've made lit my own little abstractions that like do like attribute merging and optional you know parameters into a component and stuff like that and it all sucks but you know I don't know it's not the worst thing in the world a little block at the top it's sort of become a pattern for me like what you're doing is a lot of includes I have have a little PHP block at the top and I just do little small data manipulations in there and you're literally just basically like this or it's just kind of like yeah because what we're talking about is basically like this data and this computers are really basically just on mount or unchanged you know pull information out of here and we don't need this information anywhere else so all right so let's see what what we were doing here so CSS class is going to be pulling something out of this and then I assume that this is where's these additional classes are coming down here okay so let's let's start by building it exactly the same way that it is in the view and then see if there's a reasonable refactor so a CSS class equals icon sizes and then package this dot size I think it's gonna be it's a prop that's going to be potentially passed in so size or small right and so that's allowing us to set the default there so if they pass in size they can otherwise they end up just getting small all right so we've done that computer prop so where it asks for this CSS class there we're now just gonna do a CSS class okay I'm taking a look at the chat so after these plate changes the me2 all right so image V if image so I guess some of these have images huh I feel like I've never seen any of these him have images I feel like they all are just the letter I think that might have been like an idea we came up with but never used so I'm gonna pull it out okay so we've got two div here that's basically gonna be for the letter thanks for following poco five five four three so this right here is basically joining CSS class and then there's no image additional classes string right so converting beat I've been doing a lot of converting of YouTube late lately so that's what we're doing here background color dots two arrows : o : yep color and the color has a default here right and this okay cool so what we're doing right now and then the classes we want to basically say give me a combination of this CSS class thing right wasn't that what that was yep no what wrong no whatever okay CSS class and then also has a series of additional classes if you don't have an image and I'm pretty sure all of them don't have images so we're just gonna get rid of that whole concept of no image and ignore for now okay cool finally let's come in here and make this a little bit easier to see and sorry everybody know this we're a little bit in the weeds here but hopefully we'll get back out in just a second so we want to do a little bit of manipulation here so we're basically gonna be echoing the title except we're gonna want to run string or place anybody remember the syntax for that nope I think that's it and then it's it's so annoying dealing with like really nice primitive objects and then and now we got to do our horrible nasty world okay so we want the substr my goodness string in start length okay so that and then 0 1 and then so I think that's alright that strings are also gonna get way better no I don't know if I saw that part so that's great I'm very happy about that because this right here that was like look at look at the difference between the the nice job good way of doing this and then this jank right here oh it's so nasty i base iMessage Taylor basically the same thing I was like this is yeah this is why everyone hates blade is because PHP is so annoying yeah yeah it really is all right just like that for presentational stuff like that gone yeah so this is so again we're building these components but this is just blade there's nothing livewire about what we're doing right now so lot this is gonna be livewire sorry everybody my finger and everyone who's doesn't know my fingers are still taped together so typing is not easy right now livewire dot partials yeah right title icon and then now we want to pass it some data so because it's a view thanks for following normal II danced Thank You Jonas weird with a colon and the first dip in the partial as well up thanks oops alright so so what data are we passing and it's the same thing we're just continuing to convert I thought I turned off paste format on paste because I didn't we're just continuing to convert view to blade here and the thing is we're not converting view to live where we haven't touched anything library specific for a while string manipulation tools look in level seven oh that's nice wrist I didn't know that was already out okay so color equals package accent so we're gonna say color equals package accent [Music] except I think because we're doing that that we're still dealing with this instead size equals small and then title equals package name okay so I think that's what we're dealing with we're including this thing we're passing the data in we're crossing our fingers and then we're refreshing morning in Mexico City do you find the little caches annoying then I'll stop no caches are help hey look at that so we don't have accent but that's okay because it's haven't built the accent color thing yet so they're all gonna be the same color but that would that was ridiculously easy and that was blade I like I just can't keep getting over how much I love blade and how wonderful live wire is in that it allows me to write lots of blade like I'm super happy there there is another regex we have here where it basically strips out Nova or for Nova out of the name of all these because some of them have them in their name that we wanted to get rid of them so yeah it would be John so if y'all are interested in doing that kind of basically syntax e stuff check out Chris Pitt assert Chris on Twitter he is always doing amazing and crazy stuff with with he's got this thing called pre any I know he knew no we're working together for a while on another PHP related thing whatever went anywhere but if you want different syntax in your PHP and you're willing to kind of do a little bit of work for it crisp it is the man to follow no question he's like one of the most innovative people I know in terms of all that kind of stuff so all right so same thing here where we could go in here and basically spend a whole bunch of time doing string manipulation but that's not very fun for us today what I wanted to show was this thing that I thought was going to be this whole complicated thing with pulling in another live wire piece turns out to literally just be blade cool so the thing same thing will be true about the star rating system in any of these other things not worth us spending a whole bunch of time on that um so let's let's step back from here well let's commit it real quick and then talk a little bit about nesting in a more complicated context so let's see what do we do I'll say that the like you're you're sort of realizing this as you go and that's one of the issues with having like built at all and already thinking this way is like I I try to say like it's just blade mm-hmm and when I say it's just blade I really mean it like I mean like it's blade like do everything you would normally do in blade yeah then when you need magic use live wire but it's a hard thing to understand at first and and with noir Blake with view you think like live where as an alternative to view and with view your main abstraction is a new component my boy that's not the case you have the on T of abstractions you can extend a class you can add a trait you can use a blade include a blade component all sorts of stuff so yeah and that's a different mental framework and I appreciate you saying that because honestly I know that like the whole big thing we're going to talk about today is about this whole nesting components thing but I really like this like and so we could talk about it for the sake of talking about the edges of life wire but like what does it ever make sense to nest a library component inside another library component yeah sometimes it does so the reason that like anytime that you would nest a view component a lot of times like you have a big gnarly view template and you go I want to clean it up and you maybe put some things that could be inside of a loop inside of a nested component and things like that and really they're like stateless components or functional components the problems just passed down so any of that type of extracting like you just discovered that's a bleeder yeah component because it already has that exact behavior of just trickling down but any child that needs state obviously if it needs Chait or maybe not obviously if your child needs state and your parent needs state and you need to abstract that extract both of those things then you have to live wire components and live wire components can't they can you can nest them but you can't pass a prop from one to another and it be reactive in the sense that if we had made a parent component for this entire page that had the tag selection in it and then the two different children uh-huh that one was the popular and recent stuff and the other was just the standard layout it's not like you could keep all the tags State management at the top component and then every time it changes it would trickle down automatically mm-hmm and if you think about it this is one of those things that it's it's it's hard to really see why that is without understanding a little bit how livewire works but if you think about it anytime the parent makes a state change I would need to change everything below it mm-hmm so and because it's all Ajax related I either have to send the entire component and it's children on the request to do that or I have to do more Ajax requests to trigger you know children and say hey this thing updated read yeah you know and there's just so much extra resource intensive mnestheus Ida do was a simple event system okay you can Nets components they're completely separate from each other so if you have a big parent component and a hundred nested livewire components and you make a little change in any one of those you're not rear-ending the whole thing just that little bit so it's actually there are a helpful abstractions sometimes when you don't want every live wire refresh to pass the entire Dom back and forth mmm so you can extract little parts into separate components to keep the Ajax requests thin and performant yeah that's that's one owning like I said the event system so anytime you need to communicate back and forth from parent to children or sibling to sibling you've in am it an event from one component and listen in another and that's how you communicate so that's kind of a little bit more of the implementation but that's that's how I generally think of it I'll explain you one one specific example but I want to hear what what you think about that first so I I if you think it's interesting I wonder whether it would be fun to just do a really quick proof of concept of the problem by trying to make a child component and all it does is just somewhere in the corner says the tag we're currently viewing is blah blah blah blah and then click around and see what when it doesn't doesn't work and what we would need to do to make it work just so that we can actually kind of like talk through it and have this kind of information out there if anybody wants to see it is that worth doing make a dummy a dummy little component yeah with some small stuff and pop it into this package list component and mark that's exactly what I was thinking if you want to start a package if you want to interact with a card and then have it bubble up or like we were talking so what we're talking about last week is if a parent component had everything in it but this Center content when you change these package types then you're supposed to be changing the information in here that's when it becomes a problem so alright but real quick cause Dale and my attending laravel live UK I don't know um I'd love to but I'm not sure yet and I think somebody asked the same thing about Madrid I don't I don't yet know all of the the conferences I'm attending this year I don't know about you Kayla but I definitely Larrick on us and Larrick on live for sure so yeah those are the two for me I don't know the other ones you know all right so let's go make a dummy component so we actually would be doing make livewire or is it you name it dummy it's make live wire live wire make or whatever you want before you create that let's name it start or something we can just do the we can at least just call it star if it's simple enough to implement with sorry or something in interestingly mmm tech well that would be kind of interesting starring doesn't actually reflect up to the parent in any way or down because right now if you were to star something it wouldn't actually make any impact in synchronizing data between the two so we would have to make up a new concept whereas right now if I were to say for some way serve some reason I really want to show the tag over here all the time that actually could be something I think right because it would be in a child by working well I guess why would that not be a blade partial anyway whatever we'll just make one into a million event and even if we just say hello world it'll okay tag show her I'll accept its lowercase right tag sure yeah it does support it supports everything in case people mess up but this is fun because shower looks like shower so now everyone's gonna wonder why there's a tag shower alright so tag shower let's say right now all its gonna do is show the tag but maybe eventually it'll also like actually show you like a list of things based on this tag right so it'll actually be doing its own queries that are actually useful interesting to have like in its own state so alright so we've got our tag shower well let's get out of a few these other pieces tag show her thanks Edie alright so what we would need in here is actually to have like a tag at any point and this is the thing that we're trying to figure out how do we get this passed down and from the parents so we are let's go to our package list component so how would we include it would just do like livewire as well here like livewire tag shower and i don't remember do we pass initial data in like this or no no you just pass it in as parameters as primp oh yeah it's like passing the tag as the second parameter does a livewire directive oh just like like the no key values basically got it okay and that'll show up in the constructor yes okay you know yeah do we actually have a tag yes we have a tag okay cool in the mount method not in the constructor right okay so you never use the constructor in a live aware component anything you would normally think to do in there you would do in the mount method god and it's all dependency injected too if you like to dependency injector nice okay so in theory we'll see the tag there but when we change the tag it wouldn't change it right right so we've changed the tag and it's not synchronizing down here so this would be our you know magic spot for it so you said so the first problem just for everybody to note is that if you want to have things where let's say actually let's just do this real quick so that it seems a little bit more realistic for some reason and we wanted to have this other thing that shows you all of the the packages top top one package with this tag package with this tag and then this will be something like package name and just for the sake of it I'm gonna do oops what I brake undefined variable package that's fine so here we're gonna pass on this package thing what are we actually doing I think I did have a bite tag I think I have that um something like that I think I'd built that last time scope tags and not by tag okay cool so now we're basically saying give me the first package we're not actually saying the most popular but whatever we could random and if we something but yeah so package tagged with this tag give me the first one so now we could actually imagine this being a useful thing because first or fail maybe because nothing's tagged first hmm okay well it's just you you could you could have wraps the parent in an if statement I think oh yeah yeah that's well let's let's do this for right now no packages with this tag oh I see okay yep forget forget that cool so all top actors the tag nope actor this tag cool obviously this is not what it look like but like let's imagine this is actually a useful thing so what we'd like to do is the moment I switch to this tag to be card all of a sudden I want this to say card and show me the top actor the tag card but it's not going to because of the whole thing we're talking about synchronization okay so let's say I am a library developer I find myself this context what do I do next is this is where I'm gonna talk about events so first note the best thing to do here is to use a blade component or a blade include sure has its down we know that if for some reason and I don't even know what the reason would be that you couldn't do that but yeah totally you could just say because it's gonna rerender along with the page right right so let's say there's some happen yeah go ahead let's start with this and then we'll do the event thing because I do want to do that let's say that inside here there's a little interaction of some kind maybe a voting system or something that you could interact with and it would be all live wire II every request you don't want the entire page to go back and forth so you pull it out into a little nested component like you did make sense yep okay so the reason to pull this out is not because you want to make this request because if every time I click this it's going to change this what's also going to change this so just make it a blade include so the only contest we can think of so far that this would actually be valuable is if there are interactions that are ajaxy they're happening in here that make sense to only affect this little space yeah okay cool that's why you were saying we should have made a star instead of top tank top shower or tag Shou right yes more in line with when you would have done it yeah okay so what we can do right now actually to kind of make this a little reactive and it does make sense is how about in the parent where you do that at live wire and pass in the tag mm-hmm live wire has it can do dynamic components per se okay so you can key that little reference like you would in view with a dynamic component you can you can key it so that when the tag changes you're changing that component with a different tag passing in and so the third parameter to this you you type key as a function call so like just key as a function yep and then you pass in any key that that basically says like when that key changes so like yeah rearend so like when you're keying things enough for each loop to identify to live where it's a different thing yeah so if I do that key it will tell it really I think I don't know cuz it's gonna to string that tag or it generates yes actually no tag is a string already it's not an LP model right here so yeah all right so let's hit bass resource I don't know what this lag is I keep hitting I don't have to investigate that Hey look at that it just works and when we hit yes so that's actually a pretty powerful feature you basically have the concept of nested components which can be useful for like a wizard with different steps and each step has a component and you might have the parent that like manages what step they're on or what step to put them on mm-hmm yeah that's very so that that's one answer and then inside of that tag component you could have interactions for starring that tag and then every time you switch you'll just get a new component mm-hmm that a fresh component for that tag okay very cool and if so if I were to change card it's interesting because we're getting the fresh component in this tag but this this component is within this parent component so it's weird like so it's it's track it's keeping track of refreshing only certain sections of itself yes that is literally the most complicated part of the core of yeah cuz this this is within this whole thing that makes sense okay and so and then the eventing system I imagine we could spend the next 20 minutes learning the eventing system so maybe was really quick easy way to demonstrate it would be if we wanted a reset button inside of that component uh-huh here's the tag for some reason yeah totally I think it's a great idea no no it would be button wire click equals something like reset tag or something um something like that okay so for some reason you wanted to be able to click on this do you remember the UM cursor is a cursor hand no clue cursor:pointer cursor:hand I guess is it a cursor:pointer but for some reason hand is working great so cool all right so button so it would already be and yeah think oh this is really uh how did love PHP it just says hey we don't have that method great it's because we haven't written it yet and it's super easy to find all right tag shower I'm never gonna be able to call it anything else ever again public function reset tag and then here this is we're gonna emit event all right right do you want to go through the docs where you want me to tell you why don't you just tell us yeah all right because I wanna get to the search component so and I know you're faster than the docs are this arrow emit and then you pass in a name and optional parameters after that I'm sorry this no I it made sense but my brain didn't translate it to my hands correctly event like let's just say reset tag or something like that okay and then in our parent we will bind a listener of some sort OOP package list all right what was that mounted or so it's a protected property called listeners okay I am here for me is kind of like a eloquent model how you have like castes and stuff like that I use these protected properties for stuff like this and this is where you the key is the thing to listen for and the value is the method to run I wonder if it's a closure okay so reset tag give me a short closure in here man yeah you can't in PHP you deaf you can't do that oh yeah it's because it's a course there is a method that you could use forget listeners if you needed to dynamically generate blah blah blah love it reset tag would be this tag equals all all right so let's see if it works this arrow shouldn't help you function Thanks I accidentally deleted or missed uh protected listeners equals what I miss you everybody it must be some obvious thing but for some reason I'm not seeing it me neither oh this is just uh no that's a tea-length problem oh that's that's in here alright so we are on card and then let's hit X and see if it goes back to all Hey look at that that was so easy oh hey speaking of crisp it he's here in the chat what's up Chris sorry good idea nice Chris is is like top lot one of the top live wire guys he's using it in production is he hacks the hell out of it he's chris is one of the most uncelebrated smartest people in the entire liberal community I love that guy yeah solid guy okay sorry go ahead so one performance note I want to make mm-hmm that when you do that open up at the xhr requests good because i was actually gonna say let's open up cuz i'm i'm feeling a lag at the beginning of the page and i want to know what the lag is the part of it is probably OBS it would be surprising to me if that was livewire cuz it's just a normal PHP run mm-hmm yeah I wonder if it's view because I still have you on this page and view and wire might be battling each other out a little bit so alright so you you want to just watch the request to come through yeah filter xhr yeah okay so when you can reload the page to demonstrate that there's no xhr requests upfront right to show this is just a pure yep eh which is one of my favorite parts about this whole thing by the way yeah alright so if you hit the X now think about this before you hit it how many like if you do anything else if you filter by tag maybe filter a separate tag so just hit card like that yeah you see one xhr request just weird cuz I kind of expected to I kinda expected one for here and then one for here right it's not cool part of the magic huh if you think about it we don't need the old component so live wire all right two second explanation yeah to just kind of tease how ridiculous this is I use the blade compiler to actually store component info at compile time so that I have a reference inside of the compiled view for components and it's ridiculous that's I'll just stop there I mean you could just look at this payload right here and already just begin to think about what how intense the stuff that is is going on right now trapped children right there is actually what's tracking got it what things are listed there and a children is purely only livewire children it's not like blade partials or anything exactly so when the blades going through it's like hey is this child does this is the ID a new ID if it's a new ID I don't even remember on a leotard got it working though now when you click that X button you'll see two Ajax requests okay yep tanks our there was one request to the nested tag component then then fire dammit god which came back to the front end emitted two listening components on the front end and then those components called react at their back-end to then read fire the listeners okay so let's do something real quick to prove that out I wanna oops oh my gosh this is my finger all right so we are in our thing now I'm gonna say I remember a charge don't work VR VR okay cool so best number thanks for subscribing Nets rack 91 okay so then we want to have another button wire click equals what did I say change internal state yeah change internal state come on change internal state okay so my goal here is to be able to look at that same thing there and watch only one request happen on this one and so we should see okay so that's interesting to me by changing way do this thing and all it does is make the change in here we're only so when I'm clicking the button doing this it's only re-rendering this thing even though this thing is within this bigger thing only this little piece of components can be rendered and only when I do something that both changes this and then emit to change the parent do we get those two calls so when I click here it first emits the change or it does the xhr request that changes this but then it also emits that event up to the parent and then the parent also says oops need a rerender this as well right exactly and that that's a really intentional decision for me that these nested components are their own islands mm-hmm so that if you ever find performance and issue you can break it section out into an own love it little world and keep requests and queries small i love it okay so here's a trick we can turn that two requests into one request all right instead of emitting on the back end there's a magic emit helper for the front end the essence in the wire click okay and then it saves you the round-trip like basically this so it's money sign emit and then it's exactly what you think yep so we'll check that same thing out again we will filter down to a card see this is what I'm saying there's some kind of lag it must you know I'll believe it's view for now but like hold on let's actually share the first time I click let's unfilter our xhr alright everything's rendered if watching what will happen this time I click card yeah of course it didn't break this time so is there um time period like time to interactive on these and on my clicking on it before it's ready huh maybe I mean lie where is pretty fast well it might be slow because we have like view and other stuff and the view might be causing problems maybe you like you can see these errors in here views looking for stuff that aren't defined so I'm wondering whether we might be running into something where I'm clicking on something before it's ready for me yeah like I just clicked on a couple times it didn't do anything now I could I would interested in knowing if that is purely life or I would be really surprised and I wouldn't be surprised that what's happening is the first time I click on it view is trying to capture that and then views farting out so let's let's call it that for now sorry it would be yeah okay no problem okay so let's go back to what we were working on we were working on this xhr so we're gonna hit card we're gonna get our one request last time when we clicked on the a closer first change internal state we just see the last time we click on this we saw two and this time magic because we use this dollar sign admittance in line we got a single request I love it nice work man all right so this was all proof of concept but none of this is actually useful for our app so we're gonna get rid of it but I'm glad we did that somebody told me last time that there's an easy way to get rid of these uncommitted files do you know if the top your head what they are artisan oh I can get ya just if you basically have uncommitted files the since there are new files they don't get rid of them they don't get rid of uh when you do get reset hardhead it doesn't get rid of the new files it only gets rid of the the dirtiness of the other existing files and I always come through here and I then deleting them like this and I know that there's a way to do it I can ever remember it get clean it yep okay thanks take a sigh kiss and Jake Bassman five seconds too late okay so is there anything else you want a hack on before we get started on that search component for eleven minutes nope I'm really glad that we got to see nested components and to see their implications and how they work and I'm really impressed with how you handle that that's very cool so the crush increases so all right so let's assume that this search thing talking about so just for everyone to give the context of this so no packages calm right now if you hit search it doesn't do anything on page it doesn't really do it until you hit Search it takes you another page and then on this page it also doesn't do anything until you hit search again so it's not you know it's not a reactive at all it's just a HTTP POST so oh that's great thanks Rob na equals get reset hard yeah that's exactly what I needed let's go make that actually can't do that cuz I don't know if I have anything hidden and secret into my extra file you all can't see so I have to do it after the UM after the stream okay actually hold on let's pause and take a look at our notes so we talked over existing reef actors we created a blade not Live Wire child component component for title icon we discussed and stubbed out several options for eventing and nesting live our components and then started started the search component so what we're talking about here is building something where when I start typing and I get like a couple letters into D bounces and starts showing me that connected ones so Caleb for starters what I was thinking is that this is a component but we're running the same problem where I don't want to start typing here and my search results kind of wipe everything here like I want this all gone and we're now talking about this whole communication between components thing again should this just be a part of our package list component is there some way that you think of architectural e that you would have me start building this in a way that allows me to make this one hidden without having to get into really crazy you know is it's just I mean I'd eventually have it part of the same component alright so we'll do that for right now so package search is going to list here so we're gonna have basically an input and then I know that there's binding I can't remember what it is so we'll just say whatever we'll do our binding there and then this is ID equals search or whatever and so hey thanks for following Richard page so this is gonna be our thing so let's open our package list and then we're gonna have a search query right yeah yeah I'll just search okay so if I've got a search I'm going to be doing search results in here search results for query blah blah blah okay search may be good okay yeah no that makes sense you yep so how what's buying again it like I could look it up the docs way because we only have seven minutes left what is um binding why your colon model okay great so why are colon model equals search and we probably don't even eat this so let's just start here and watch that working thanks for falling Corollas six nine nine all right so we should be able to start typing in this thing and just say search results for query whatever I'm typing it's that same thing it must be view great it's already be bounced love it great yep and this is view view is really farting on this page so alright so now we want to say if search then do the search results and so that way we're now only gonna see it if we've started typing here wait for view to do its thing great so now sudden we're getting these search results in this context and let's just give ourselves a little okay so now in here we can iterate over results for each search results come on search results so interested like from a application perspective what is wrong with just having the text box and as you search it filters the results as it as it filters these ones down here yeah so we that may end up being the thing that makes the most sense like I think my biggest concern like you basically this text right here would end up instead saying search results and then you see him here yeah or it would like you could sort by tag and then the searching would actually search within that tag hmm like as you type it just filters the query results hmm I'm a little bit worried about the user experience be a little bit confusing if you're like looking at card and then you're like you know what I want to look at card I instead want to find everything that has to do with like analytics and then you're surprised because you only get the lnx cards when you're in reality one of the analytics things but we might be able to fix that just by showing in the user interface after like search query results or search results for query blank within group tags and then write in the blank that says like my search oh yeah let's do that and we already have a kind of introduced this concept of like it's like you know how you have like a little bubble thing that's like says card and then you can there's little X in the side of the bubble that says and it gets rid of that tag or something like that yeah I think it's great idea so let's do this I'll say that that I the the way that we're going right now is how I would do it in this component if you made your own little island that searched likes for its own specific results that I would put in a separate component mm-hmm because it's all sort of query really more filtering what we're currently working yeah yeah yeah okay and we can just punch on the UI niceness of like hey clear results or needs me no see alright so on all of our things we're gonna want to be able to so I guess if you're in popular in recent searches knocking a lot of make make a lot of sense so we'll have to push it over we'll have to push it over to all packages if you're searching around let's assume you're in one of these in this package list and you start typing this so all packaged new is first and then basically if you get in here you're gonna say if search then you're gonna say you know and a like you said we'll get rid of the we'll worry about the niceties later you'll say filtered by search query search with them about the typo and fill fill pock fill epoch row ask sit there a thing like debounce and livewire and there is there's an automatic debounce of like 150 milliseconds or something but you can customize that if you want to show them that on wire : model you can add dot d bounce and then dot anytime so you could do yeah 300 ms/ms let's let's make it super long then so you notice it taking forever to that's very I love that syntax there's tons of little tons of things that utilize that idiom of of dot amount in milliseconds or in seconds you can specify 1s or a thousand MS so y'all can notice I'm typing and we're not gonna get that D bounce for a second which is great because what especially for these types of things where someone you could assume they're in the middle of typing you know you really don't want to do that unless they are yep like pausing for a little bit all while your models on input text elements have a debounce every other element type does not have a debounce because you don't need it you'd rather how's that yeah okay Samuel sk8 is live where work a twig no and no plans to uh huh that sounded mean but maybe someday but people have asked and we basically decided it would be like kind of not not the right move it right now yeah but it's possible so if somebody really wanted to create a port and PR like an easy extension point I would be open to it but nobody's really wanted to put in the work so we would basically have to say like function ad search I'm thinking this where basically every query would always get run through this and if this search then it would modify it yeah it's come and then else it would just return query actually since we can return it we don't even have to worry about that which would just say return query let's say we're using search we would just return query search this search and then now every single time we're doing a request in any of these we're now gonna have to run the query through this ad search right and that would be right before get and then obviously this is all getting so janky that we're gonna want to start extracting these um these queries or building out two other methods oops thanks you're about to catch that for me and then we'll also do it on I see I still don't know how I handle it popular in recent well let's just throw it in there for now so in here we'd be building this query this that's actually let's not do it in popular in recent yeah I think that's a great idea now that I've typed it out it just doesn't seem to make a lot of sense there so I I think still if you start typing it's gonna bump you out of popular and recent and into the full package list so let's just say there's a cleaner way or we only this is the only time we're using it right here it's just right here so this adds search package query cool that's it alright so I don't think I have search setup you I'll just quick like where title like actually to search is that Scout I think I do have Scout setup in here actually oh my gosh that would be so cool okay so we want to filter it so we only see package discovery d.i.s.c.o I have thought for sure I did because it's pretty sure that's what we're using right now searchable it doesn't that expose a search method I don't even remember what the I haven't used it oh yeah search oh you must not be able to run a search on existing query though oh is that what it is oof no I don't know I don't know either let's let's let's let's worry about that later since we're out of time and query more mm-hmm I like what you're doing just yep that's perfect do the word title can we I was gonna say we should do the URL bar thing because it's so easy oh you would have to upgrade your live where I point seven yeah so what would I'm talking about there is the because it's 12:01 I rely got to cut it but is where basically when we click on card you instead of hash card you'd get question mark you know a tag equals card and then it would in so interesting question if I come back to this page later does the PHP rendered version already pull this in for me no I just decided not to do that because I didn't want any weird unintended side effects or people I could do that if I wanted right you could pull it out of the requests with requests arrow query does I mount because this I was just gonna say to his mount get requests passed to it or am I just gonna pull it out does because it's part of the main application flow for the first render so mount method has has the actual request yet okay so basically what I would do for anybody who's I'm supposed to remember it's fun mount and so is it basically the first thing that's passed in or oh you could dependency inject it if you want but I just use the request okay god but it's yes so what we basically say is like if a request sorry yeah I was thinking has query then then we're gonna basically to do initial scope although does this stop happening once things change yes so if you think about it this is how you make it work with the query if you add a protected property called protected updates query string equals then you can pass in the keys of the properties so in this case you could pass in search per pay anything you want and then when any of those change it'll update the query string okay and then it's up to you to seed the live where component from the query string in the mount method for the next query string updates and updated live wire hey Richard hey beg wha all right cool yeah I would love to do that now I totally meant to do it and completely forgot about it now we're out of time so I'm sorted but let's see if that worked did oh wait how did that cuz we're on the wrong page there you go packages that was the view page all right unexpected brace somewhere anybody noticed where I made the mistake and have the unexpected brace oh I never finished writing that that's why it would have been in here all right is that how we're like works I can never remember I didn't know about where like I just like I could be making it up I like where like it doesn't exist we should PR it mm-hmm let's try it if not it's gonna be where and then the three parameters be sweet if you didn't have to add those module module oh I know right I think it's not in the core you're right oh man we got a PR we're like but then that's a breaking change because yeah because he'll pain like yeah well it's something freaked me I don't know anything about that discovery okay that's what you wanted disco unknown title title it's probably name I'm sorry I'm just trying to rush just trying to get this I want to show this before I cut for today that's definitely this view thing yes Hey look at that it works so if I delete it alright so let's try it on a specific tag now so now we have less of them let's actually hold on let's look at something that's not on here called Nova grid so let's lurch for look for grid here nothing great but if we're looking for grid and base resource it worse look at this so what we would do later is add a little button that says onion Oh untagged this so I'm still looking at grid but outside of the tag the base resource thing so obviously this user interface it needs a ton of tunnel off but mm-hmm look at that one quick note before signing off we're on a stream right now so all of his requests are like triple or maybe eight times as slow as they would be in production I think most people can expect like Ajax requests to be around a hundred milliseconds between 50 milliseconds and 200 milliseconds and if generally feels pretty snappy and a decent production server where right now everything feels a little laggy but even saying that the nice UI touch to add is all the wire loading stuff which we haven't touched on yet but it looks like you might have even done but like if I were to build this and I would want all of I would want when libraries in a waiting State to kind of mute out all the results so we know it's in a waiting State this is all I have right now it's just this whole wire loading just shows the earthing text so yeah all right and that's that's a great note one of the things I'm gonna do probably not on a stream is figure out what it's not that view is a problem in this page it's the fact that I still have you code running on this and so they're kind of conflicting with each other so I'll get that out of the way okay what anything else that I so we have finished search components including easy removing currently filtered tag there's going to be if searching on recent popular page boot over to all page and then I feel like there's one of the big thing we want to do oh uh autosuggest drop-down with Alpine question mark on search sweet Caleb this was friggin fantastic thanks for hanging up thanks for your help and thanks for livewire which is really a joy to work with so just so everyone knows know backage --is is currently closed source because we were thinking about at some point turning it into an actual marketplace but we decided yesterday that we're going to flatten out the history and put the whole thing public so if you're watching this playback you can actually go to github.com slash titan co slash nova packages if you're hanging out right now it'll be a couple hours on but it will all be live you all can contribute if you want you know response no response we do that but I wanted to have like a production livewire app available open source to the communities that's why I decided we're gonna do this so alright thanks Caleb thanks for hanging out thanks for asking me oh thanks for watching everybody Tata

Channel: Matt Stauffer

Views: 8,248

Keywords: development, education, live, livestream, matt stauffer livestream, php, programming, livewire, laravel livewire, caleb porzio, learning laravel livewire, laravel livewire tutorial, livewire tutorial, livewire from scratch, how to program livewire, coding livewire, live stream

Id: y3TQq534dRM

Length: 57min 51sec (3471 seconds)

Published: Mon Jan 27 2020