Hotwire Part 2 - Using it in a Real App - Ruby On Rails

hey guys phil here part two of my discussion about rails and the new technology called hotwire let's get into putting it into a real app [Music] hey guys phil here again zone master other things talking about rails and today is kind of part two of my uh look into hot wire hotwire as i said before is a way of sending html that's very clever name is you know html over the wire hotwire hot wire and uh it's for us rails developers who want to have the html generated on the back end and sent complete over the wire as opposed to sending something like json that would be rendered by another kind of view framework let's say like a reactor view or whatever on the front end so it's a rail solution for that and last time i kind of showed you a little bit about it about how it you know works and everything but this time what i want to do is get a little application up and running with it and show you some of the practicalities again i'm not doing a chat application i'm doing something where the code or the data would be updated from a another process let's say and people looking at the web page would want to have their information updated like it was a dashboard if you're looking at orders or or something like that so here we go let's uh flip over so i created the app last week called hotwired and we're just going to take a look at that now inside of vs code and uh well first thing because you know we want to have an app that looks half decent uh let's make this bootstrapable or let's have bootstrap as a framework here so now this might be a little extra bonus tip on how to install bootstrap and we're going to add using yarn bootstrap jquery and popper so yes once again we still have to have jquery as well as stimulus and all that other stuff so we've added those in using yarn and let's take a look at our application js and what we need to do is simply import bootstrap and then we are going to need to import a stylesheet application that's it application because it'll figure it'll figure it out and we can or cannot put semicolons at the end there i think the style these days that the kids use is to not do that so we're pulling in this something called style sheets application which is not here so we're just going to create style sheets application dot scss and in that this is you know because we want to oops we need to at import the actual bootstrap goodies which we can say bootstrap scss bootstrap so this will pull in the actual uh css com from the bootstrap node module i know i'm off on a tangent here because this is nothing to do with hot wire but just for your information if you look at node modules down here inside of that this bootstrap and inside of that is the actual compiled i'm not going to do anything fancy with bootstrap so we're just getting the thing in there so we need to create this file just to be nicely you know we could actually put this line of code in the application.js because we're just including it but to be nice we're going to put it into a style sheet so there we go done that okay so that will have um bootstrap installed and we'll see that in a second when we get to the actual thing uh actual stuff so what we want to do now we're going to kind of continue on the theme that i did in some other ones we're going to do uh let's clean up this stuff we're gonna create a library book and we're just gonna look at some status as a library book so we'll do it the easy way let's just scaffold a library book with a title similar to what i did in some of the other videos a title a status a description [Music] a status date of date time and some maybe we'll do some internal info using that active record store thing text done that generate it mind grade it okay and if we fire up a rails server and let's put a root in here of uh root of good god library books index let me go over here and take a look at localhost have a good think about it there we go library books you can see that this is actually boots if i just double check that it's yeah got the bootstrap stuff in there so yeah we're looking at bootstrap and first thing i want to do i'm going to change this i really hate that div class equals container okay so we get a little bit of space breathing space okay so this is the standard you know rails app uh it gives you a table uh a standard rails app index gives you a table with the the stuff in there and so uh we're not gonna do any of that um let's take a look at index of library books and okay library books no we shall not be doing this goodbye so easiest thing again this is another little tip that i didn't really i don't know when this happened library books if i say that now we have a we're returning if we look at the controller we know that we're going to return all the library books into this uh you know variable of at library books now if you do this render at library books let's create a library book just so we can see what i'm talking about here create and then we'll do a title of cloud atlas and we'll do a status of on the shelf so we have a library book now if we skip over this is the way it was before no point in me pointing at the screen you can't see that and you know that was doing the table i've gotten rid of the table now if i refresh this and i've said this render at library books the interesting thing is it's going to say it's mission missing this partial so i guess this is some kind of auto magic happening inside of rails that if you say render a collection it will look for um a partial that is the name of that object and it will render that out so to to show you what i mean here we have inside library books we're going to create a new partial library book html erb and i have some code that i prepared earlier so you don't have to have the pain of watching me type it looks like that and that's just a card you know with a library book title and so on and notice i'm not defining this anywhere anywhere and now if we refresh that page huh it's used that partial and i guess what it's doing when you do something like this it's saying take this collection iterate over this collection i haven't delved into this i'm not exactly sure but iterate over this collection the each object in that collection find the show partial for want of a better word of that pass in the object that you're dealing with as that named partial in this case library book and let the partial deal with it so it's very interesting as i said before last week hot wire requires a lot of partials this is one of the reasons why so okay we've got this now this is just straight rails it has nothing to do with hot wire at all so let's look at the model which of course is absolutely naked and we can we can add a broadcast in here now this is one of the things i would say rightly some people kind of complain about is that should you be doing this inside of a model because i'm going to explain why after i type here um because the this is essentially saying in the model you're pushing something to the front end now the argument could be that this is not necessarily pushing to the front end it's just informing the world that this object has changed so that's first thing we're going to do is broadcast this so when i and this will [Music] this will whenever this object is changed it will be passed in itself and it will publish itself out on action cable so this is an action cable thing so if we reload this and we add another book we can see that we action cable is broadcasting the library books and it's actually already doing it it's using the partial that we said everything so in a sense we're done right except it's not on the front end because the front end isn't listening to anything yet so let's add to the index.html let's get some hop some hotwire stuff in here so first thing we do is use turbostream from and as we saw it was called library books so that's the name of the stream that you're sending out and we better do that otherwise it won't get into the page so that's this or this you know target name library books and so it's going to already stream but it doesn't know where to stream and that's where turbo frame tag library books do don't need that end so what is doing here is okay we've set up we're saying stream from library books and and that's it i mean we don't need to do the rest of the stuff technically uh or essentially because this page will then get data from the library book stream it's like a an action cable when you're listening to or any publish subscribe thing when you're listening to a queue so what we're saying here is listen to the q library books now the next one is for the kind of auto magic and this says create a frame remember before we talked about how he uses these kind of pseudo iframes that are really just dibs create a frame library books and whenever stuff happens stuff it inside that frame so of course when we refresh it's just a general refresh and if we look on the page we have the turbo frame which is simply which is this like i said it's just a div a glorified div turbo frame with an id of library book so the dom element is actually turbo frame not div but the id is library books which is this thing here and what will happen is everything will get replaced inside the line above is the turbo is the stream is the action cable stream saying listen to that stream with a very it's got the signature and everything like that so now if i go and okay maybe i don't have to have it so big if i do it like this and if i now create another um look here sorry and there we go if i create it holy cow there it is it showed up so essentially we're done right that's it um now we'll get into the problems now if i look at the the library book which is zara does update and let's set the status to be on loan because you know zardoz is a very popular book by the way if you're interested in zardoz i have another channel where i talk about my collecting of science fiction memorabilia status date time current okay so that's interesting it didn't change the status if i refresh the page it's different and i we can see that a broadcast to library books so what happened okay so you can see that it didn't update now why didn't it update and that's because when we do some kind of update where is it you can see that it flashed maybe you can see that it flashed up here so it got some kind of information but what it's looking for is this target of library book three and if we look at this div it doesn't have anything it doesn't know that this is library book three and that's because inside of our partial we need to have another turbo frame tag and what is exactly that turbo same thing turbo frame tag but this time we need it for the library book and turbo frame tank do do and now if we refresh the page you can now see that this has whole divs that we had before is wrapped in another turbo frame so we have two frames here we have the turbo frame outside of the whole thing which is of the collection turboframe id of library books and then we have turbo frame for each element which is a library book with its id you can customize that if you want but for now the default is just to to do that so now uh let's get another library book because we've already well no let's just change this one back to being on the shelf now it updates dynamically and then if i change it now it updates dynamically and if i add another library book um it adds and i can change it to be so we're done right that's it uh with the single line here in library book it pushes out all changes um let's just check i think i had an issue with this not deleting but that could have been me library book destroy it's gone so yeah so this single line pushes out now uh as you may have seen this adds to the bottom of the list so a new one comes to the bottom you can change that so by doing this like inserts by come on by using a prepend right it defaults to append so it gets at the bottom so this will do it the other way it'll put the thing at the top if you want you want me to prove it i'll prove it let's create another oh i deleted watership down so let's create another one there it's at the top so you can change the way that that insert happens um just by doing that so if you look look at it look at the things we had to change okay i didn't have to add root really so just these four files actually no because we didn't change anything in control so we create change these three files from what was generated by rails in the index we said listen to the stream we added a frame tag so that it knew where to stuff stuff from the stream and in the display we put a frame tag around just so we can say this is the thing that we're dealing with here individually and in the object we added a single line that says when stuff happens tell the world about it that's all you need to do now some for some bonus tips here if we want to change this to some kind of show method um right so which is you would do like that normally and then it would say okay you can um yeah the order changed because i'm not sorting in order so we say okay here's the show method let's show this so i click on it and it was ah what does it do it changes it doesn't work at all and that's because like i said before these kind of turbo frame tags are kind of like iframes in the world happens inside of it this is a flaw in my opinion so when you need to if you need to do that you need to have what is it data [Music] turbo frame this might be wrong of top if you know if you've ever written html and you some when you do a link you know that you can do top or blank or something like that i think this leaves a bit of a bad taste in my mouth about so now if we if we do it and we click on it okay now it goes to the show yeah i'm not a huge fan of that but okay it is what it is for now um i never tried that i wonder what happens if you say blank nothing okay so if you can only say top all right anyway so that's the one thing that so far that i found that i that i don't particularly like about um hotwire but other than that i mean that's pretty cool in such a short time we have a dynamically updating website like that we don't have to worry about it we didn't have to change anything on the back end and you can add this to a much more complicated application quite easily that's it for this part of hotwire on rails i'm going to change my screen so i can talk to you properly so if you find these kinds of things useful i really appreciate it if you hit the you know the like and the subscribe and the bell notification or you watch other videos that's supposed to be the big thing if you go on and watch some other videos of mine that would really be helpful i'm going to keep on doing these i'm trying for once a week but you know life's busy but i really appreciate all the comments and everything that i've gotten from you people out there and let's see you next time in another ruby on rails tutorial i might be doing a book review or a business video as well so see you soon whatever it is thanks for watching

Channel: Phil Smy

Views: 2,066

Keywords: ruby on rails, learn ruby on rails, software as a service, saas business, how to create the perfect saas business, tech entrepreneurs, entrepreneur, become an entrepreneur, become an entrepreneur motivational video, be an entrepreneur

Id: ofOo29R51No

Length: 23min 45sec (1425 seconds)

Published: Sat Mar 13 2021