Introduction to Hotwire - Ruby On Rails

hey guys phil here and uh today it's another ruby on rails chat and um just check the recording and today i want to talk about this kind of i'm going to do i think as a little series here maybe two or three parts at least talking about this new ish technology called hot wire and i can go over there and show you their fancy flashing logo so what is hot wire you might ask well it's very clever the name hotwire hot standing for hml html over the wire hot wire and you know in earlier things i've talked about doing action cable and using stimulus to connect to that action cable stream and you know sending the data over and everything like this hotwire is basically a way to make that more simple but also to allow us to do more of our rendering on the back end as rails developers we're not react or angular developers here so we don't like to send json and i personally you know a long time rails developer i like to do all the h write the html on the back end and send that up to the server and hotwire lets you do that and they claim that it makes you know fast first load pages and things like this i don't know if necessarily it's a speed improvement i don't think it's a speed detriment but i don't think it's a speed improvement uh i don't i i think it's just this is the way we work and it's a solution for rails developers if you are somebody who likes to do the json back and forth or whatever then you know maybe this isn't for you but for me this is a pretty cool and exciting uh suite of technologies because it is a suite of technologies uh the way that it works is that so hot wire you have this i i could do some funny little drawings but i'm not hot wire is this thing and it's kind of three components though the third one is a bit mysterious and it is you know using uh stimulus and it is using something called turbo which is kind of a way of sending streaming that data across uh using action cable really so it's kind of a mixture of action cable stimulus turbo and something called strata that i have no idea what it is there's no real they say it's in beta and blah blah blah i don't really know what it is so um what i'm going to do is show you how to set up a hotwire application and and talk a little bit more about the coolness of it and then in the next one i'm going to get more into actually developing that application and uh building out some features and and showing you some other stuff that you can do with hotwire so let's flip over here and we can create a new let me move this window what am i doing let's move this window over somewhere else and yeah okay i do have this up so i'm using uh rails 6.1.3 and i'm gonna do a rails new um [Music] hot wired and let's use a database what should we use today let's use postgresql ql so the interesting thing about hotwire is that uh you know it does everything using that same kind of restful verbiage that we are you know used to the get so a new create edit update delete you know that crud stuff that we use and the restful stuff that we use in rails and you can kind of reuse that with a different format to serve back your data and that means that we only have to write one set of partials and things like this it does use a lot of partials so uh in the past um i kind of shied away from doing too many partials because there is actually a speed impact of using a lot of partials excuse me i really need coffee there is a kind of speed impact um because you have to think you know that on the back end it's got to load up all these partials and put them together and stitch them together to give you an html page but in recent times rails five and or else well maybe later part of rails four and five and six doing that the overhead is very is very small so it's okay to use more partials and because of that uh hotwired depends on using parcels so let's say for instance you have an index page that lists a bunch of things you know like i could go back and use our cable guy application that we uh that i did the other time shows library books and you know i had each library book was represented by you know uh a partial those are the partials that you will send back over hotwire so you can reuse them on simple gets as well as hot wire dynamic updates it's interesting i think and um sometime in the next decade when my machine finishes making the uh the rails app i don't know why maybe because i'm running obs it's taking a long time so that's that's a key feature i think that you need to know and so you're going to be using a lot of partials the basic idea of of hot wire is that it creates kind of frames on the page these are not iframes these are dom frames so it's just a div with a id and so on and has and uses stimulus to load those frames in so you can reload that part but like frames links inside of that frame stay within the frame so yeah it's it is a slight change and you do have to slightly uh change your partials which you know uh a lot of the tutorials i've seen kind of gloss over now for me i was doing a lot of stuff uh you know with javascript when you load a page there's a whole bunch of javascript on the page that you know reacts to certain things or whatever if you still need to do that when you load in a partial in other words it's just not block a block of data with some links if you need to do stuff inside of that react to it with javascript and so on that's where you're going to need to write stimulus controllers so stimulus controllers are still important we can skip over we don't have to create the stimulus controllers to do the hot wire stuff but we still need stimulus controllers if that's what you're doing before i have an application you know another project of mine called bookmatchclub.com which is a tool for authors to distribute their works and so on and uh get reviews and readers and everything like that now bookmatch club i'm thinking of open sourcing that code and if i don't open source that what i might do is i'm going to be using that um to rewrite everything using hotwire and that's what i'm going to be using kind of as a demo probably over the next several videos that i do about rails and yes i've used the word probably about 25 times okay so the thing is all built um we can zip into the the directory i remember to zoom the screen this time so you can actually see what i'm doing so when we've got um we want to add hot wire it's pretty simple and you know i i didn't even know that i don't understand why i didn't know this command as well doing these videos has been very informative for me you know sometimes what i would do before is i would go into the gem file you know and i would you know add gem hot wire rails and so on you don't have to do that i don't know when they added this again it's just one of those things sometimes that you miss out on you can do this from the command line bundle add hot wire rails and it actually will even be more clever than me and see it adds the gem hot wire rails with a version number and everything like that and hot wire rails when you put that into your project and you just uh you can see that it's going to add in stimulus and turbo rails and hot wire rails i wonder if we can see that more clearly that that that's what it's doing no so uh but here's the three packages here that it's going to add stimulus rails is kind of the updated version of stimulus or the latest version of stimulus with some out of goodies and turbo rails is the replacement of turbo links and turbo rails now does a kind of streaming and with a format of turbo and hot wire rails which is the glue that sticks everything together so we've added those things in and it runs a bundle automatically so when you do bundle ad where is it bundle ad it put that thing in gems hot wire rails and ran a bundle which added in the stimulus rails turbo rails and so on just want to see yeah so okay we're good to go now the next thing we do is simply do a rails hot wire install and this will set up all the glue that we need and let's see what it does here it adds in some yarn packages of stimulus adds in the yarn package for turbo rails does some other goodies it creates [Music] updates some stuff in application.js and it modifies cable yaml now we look at cable remember how i said before when i did that other video about using action cable how the bloody thing doesn't work locally unless you use redis and well so now when you install hot wire it actually changes cable to use redis locally and what else did it add app.js let's take a look application.js uh we can see that it's importing the hotwire turbo rail stuff and do we have anything else in here it very nicely puts in this uh index of you know for all the stimulus stuff so you don't have to figure that out anymore i actually think that using the hot wire rails install is the easiest and best way to get stimulus into your project so even if you're not going to use hot wire um using a hotwire rails installer to get stimulus is probably the best thing to do um i don't think it adds anything else so that's all you need to do to set up hotwire on your app i want to keep this as a short one like i say it's just an introduction to the concepts of hotwire and i'm going to do another video where i do an application not a chat application that uses hotwire to dynamically update information on the screen and i'm gonna go on again about how i don't like to use chat applications as an example for rails or nobody's writing the new twitter or and nobody's writing a chat app um but and also the other thing is a lot of these things show oh you know if you have multiple people looking at the same screen and so on and that it doesn't happen very often in my experience in my experience what we are doing is writing siloed tenant applications you know where somebody logs in they see their data but that data might be updated by other means you know like for instance in the book application you as an author you have your website and you have your stats in your dashboard but while you're looking at your dashboard maybe a reader is going to log in and download the copy of your book so you want that to upload update on your dashboard while you're watching it that's the kind of thing that we're talking about using hotwire for anyway that's it first introduction uh probably in about a week i'll have another video where i do a hotwire app for you see you then

Channel: Phil Smy

Views: 2,395

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, rails 6

Id: 6CsHXq_AndE

Length: 14min 59sec (899 seconds)

Published: Fri Mar 05 2021