Rails Tutorial | Using View Components to Create Reusable Views in Ruby on Rails

[Music] what's going on everyone Steven here from tech maker TV in this episode I want to explore a newer library from github called few component and we're gonna add it to our simple project management app that we've been working on if you want to follow along with the full build-out of this project from scratch you can do that over on our website Tech Maker TV and also if you like this video be sure to give it a thumbs up and subscribe to the channel if you want to see lots of more content like this we're putting out new videos every single day with all of that said let's go ahead and get to it this is kind of an exploratory episode so if I run into any issues I'm gonna try to capture that here I just want you to see what it's like to set this up from scratch let's talk a little bit about why you might do this so essentially there's a talk over on YouTube that you can look up from the creator of this which is this Joel Huxley and he explained that essentially I'm gonna oversimplify this but it's bringing react style development into the backend with Ruby so that we can put our views into components so something that you might normally put in a partial you're gonna put in a component it looks something like this which brings us into a little bit more of an object-oriented style of development with our view code so let's see what we need to do to get started up here at the top so it looks like we just need to add a couple of things in our app also it looks like there's gonna be support natively for this in rails 6.1 so this is probably going to become a little more common potentially we're on six point zero point three point one right now or something like that in our app so we weren't there yet so it'll be done by this monkey patch I guess so let's copy this and let's jump back to our gem file and then just right here underneath our other stuff let's save that and then let's go grab the config that they want us to add so we'll go back and go to our application Darby and I believe we just need to put that right under Rails all and let's just go back over to the terminal and bundle and this should get us everything that we need okay so let's go look back at the docs for a second and see kind of what we want to try to do here so it looks like they have a generator which we're gonna try out rails generate component it looks like you name the component and then probably specify the attributes looks very much like other rails generators and we'll end up with something kind of like this so let's look over in our app at what we could potentially make a component so the first thing that stands out to me is this progress badge I don't actually start up my server again that would be helpful okay so if we refresh in here let me sign back in okay so we have this status badge that shows up in both places here so maybe we should just go ahead and make a status badge component and then it has a maybe it just has a status something like that attribute so let's see what else let's look at that and in the actual app right now so if we go to our projects index so we have at the moment a status and we have a badge color so this is a really really simple thing to kind of start with but it's probably good to go ahead and try to get our heads around this let's also look at the projects show because in actual fact the status badge as we're currently calling it in this case if we put this on a new line it will look pretty similar in this case it has it's dealing with a task and not a project so let's look at the project and let's take a look at how this is all define so we have a badge color and if we look at the task we have a color class essentially and so let's see so we're using badge color task color class and over here we're using badge color so I think we can actually effectively refactor this because these methods are identical so we can actually I think they all right so we're checking the case of status and we have not started secondary in progress info not started in progress yeah so they're the same we're just essentially using them a little bit differently ordered we've named them a little bit differently so we can actually eliminate some code duplication here and move some presentation logic out of our models which is a pretty good thing because it doesn't really need to be back here so let's go try this so I'm gonna open a new tab over in my terminal and so what is that rails G component and then we want to just give it let's just start with a status and see if we need anything else and actually that should be component like this I think let me double check I don't want to run something and mess everything up so looks like rails G component and then we give it the name of it sorry for bouncing around so much so we'll save you status badge kind of like that and it just takes the status actually you know what let's rename that let's call it progress badge it's a little bit better in the context of a project I think okay and let's see what happens here okay so we've essentially just generated a new directory called components we have a project badge component we have a test here which I'll probably get into testing in another episode because I don't really want to mess with it just yet oh I'm exploring this but in any case let's go look at these other things that we've got here okay so we have two things in our components directory we have a progress badge component and we have a progress badge component so one of them is a ruby file and the other is HTML okay so let's see about how we can just render these things so what I could do is just stick this somewhere right like right here we could do I think it was render and then we'll say progress badge component new and then I think we have to say status and then give it a status of some kind let's refresh our page over here let me just double check my syntax there yeah so we're rendering the component and then you can pass it a block optionally and then that blog gets captured in this content accessor so we'll get to that in a minute but let's refresh over here and see what happens uninitialized constant can either restart my server for it to pick that up I guess and it's gonna make me sign in again which I need to fix I'll post an episode once I figure out how to fix that if anybody has any ideas feel free to leave a comment and explain to me so you can see here that we're printing out our our little placeholder I can't highlight that because it's all drag-and-drop or basically printing out our component right here so let's see about how we can hook this up to be the component that we want so I'm gonna copy let's copy this and then we'll need a closing span tag so let's put that in here and let's try this out with the way they suggest so we'll print out content like that and then we'll close this span tag that's not how to close a span tag okay so we've got this task color class here so how do we access variables from within the component let's take a look at that really quick so it looks like we set an instance variable inside of the component and then we can just talk to the instance variable inside of our component HTML so what I want to do is I want to write an instance variable badge color and I wonder if I can actually do like just method names if I can just call the methods because that would actually be nicer you'll see what I mean in a second probably so let's open up this other component so we have statuses status and then let's do a method called badge color I think it's what we should call that right and then let's open up our project and then we'll just say case status and grab all this stuff and I guess we need to do an add a reader because we're just an object here right so so we can say case status and then we have this badge color thing okay so let's save that let's save all that and then let's actually grab this because we need to pass this and as a block if you will recall and like that and then we can actually say task status gets passed in there so let's refresh this and see what we have so it works so it's basically just printing out what we have before cool so let's go take a look at this because I have a little bit more refactoring I want to do so one thing that I did and we can if we look at the index page you'll see here that we have this div class equals in b3 and then we have the badge right here over here I guess I made the badge before adding more content here so right now we have this in b3 hanging out inside of our badge and I don't actually want this here what I want to do is just in this context I'm going to move up to this task status and add an MB 3 here so this is actually encapsulating this grip and so on so it's actually refresh this and just make sure that looks the same so it does so that's fine what we can also do here just to simplify this even more because all we're doing is actually printing out the task status which we're passing in so what we can do is just get rid of that and get rid of that and then in our component instead of rendering out the content we can just render the status because we defined it in an attribute accessor so what it looks like is that this little HTML snippet can just call methods in ER be tags on whatever we define here which I have to say is quite cool so I like it so what this means I could have fixed my syntax highlighting still have a lot of little things to fix which I'm neglecting so that's still working so what we should be able to do now is let's copy this and jump back over to our index and let's paste that in there and instead of in instead of TAS TAS will say project status and now we have a component here and let's check it out so let's go back to our top level and it looks exactly the same so that's quite cool so now we have a reusable component that we're using in multiple places so I want to do two more quick things and a little wrap up this episode first I just want to make sure that this plays nicely with stimulus reflex which it seems to be perfectly smooth so that's great and then I don't know why it wouldn't I just hadn't done it before so you know it's worth a shot to make sure the other thing that I want to do is just jump over into our project class and let's remove this let's remove this badge color okay we don't need that and let's do the same thing over in our tasks class I keep forgetting what things are called so looks better I think so now now our code is getting a little bit better we're moving some of the view logic out so you can see here we have other things like this readable status so we may may make another component for that but anyway I just wanted to kind of do a quick walkthrough on this while I'm learning it just so you kind of see from from understanding nothing to basically getting out working what the process is like so I guess it's been in maybe like 15 minutes so it's actually quite an easy library to get started with at least in the basic sense I'm gonna do some episodes in the future on actually writing tests for this stuff and then some more advanced use cases I did read through all Doc's and watch a bunch of videos on from the author of this gem on how this works there's some cool stuff you can do here with like the component with terminology and stuff for kind of defining component structures and there's some stuff you can do with validation so we'll get into all of that later as well as the testing like I said so anyway that's it for this episode I hope you enjoyed it if you did feel free to leave a comment and let me know that helps me out a lot also like the video and subscribe to the channel if you want more like this with all that's it I will talk to you next time thanks for watching

Channel: Techmaker Studio

Views: 4,545

Keywords: rails tutorial, rails view components, view components, ruby on rails tutorial 2020, ruby on rails projects, ruby on rails web development, rails 6 tutorial, ruby on rails 6, ruby on rails tutorial, ruby on rails view components, rails 6 bootstrap 4

Id: oKqJmEAn-X0

Length: 15min 32sec (932 seconds)

Published: Fri Jun 26 2020