Create Fast Apps With Stimulus Reflex And RailsBytes Templates In Ruby On Rails 6 | Week 10 - 20in20

hello everyone and welcome back to week 10 of the 20 and 20 challenge sorry this video is a little late this room has been about 95 degrees Fahrenheit which is a lot in Celsius don't worry about the conversions I'm American um apologies for that but yeah basically this video has been delayed I'm sorry for that but hopefully I can make it up to you it's gonna be a little bit of a shorter one because we're just covering a couple stimulus reflex things as well as some rails bite stuff but let me give you a basic rundown of what we're gonna build and then we'll get right into it so today we're gonna be building a small application I think in total it ends up being about 19 lines of code and all its going to do is it's going to use action cable cable ready stuff and stimulus reflex to count the number of words inside of a text area it's gonna tell you this contains you know ten words 20 words whatever and it's also going to give you the text you type in as you're typing it in in reverse order so the whole string is going to be reversed so it's a very basic application I was going to use bootstrap and stuff like that but the purpose is I want to show you how you convert what the stimulus reflex demo area tells you to do and how you can actually implement that on your own and expand it a little bit so hopefully after you're done watching this video and you follow along you can take the you know the chat application or the calendar application or the Geo locator or whatever you can build your own versions of the apps without needing to like have a tutorial for every single one because it's actually fairly straightforward to implement these things yourself you just kind of go down the list and you copy the code in and you're good to go after you know 10 or 20 minutes or whatever it takes you I'll be yeah that's gonna do it for me let's go ahead and let's jump into some code because I feel like that's probably the best way to see what I'm talking about because it probably doesn't make a lot of sense right now so let's go ahead and let's do some coding okay so the first thing we're gonna do is head over to google and we're gonna search for stimulus reflex and we're going to skip the github link this time and instead we're going to go down to these Doc's stimulus reflex comm website because this is a little more useful than the github and then we're gonna scroll down so let me just fullscreen we're gonna scroll down until we find this live demo section and then you'll click on stimulus reflex Expo which should take you to this demos page and then here you'll see a whole bunch of different applications that are built with stimulus reflex so there's like this book search one so this is you this uses the open library API so I can search for like Lord of the Rings and it'll return a whole bunch of books that are related to that and you can see there's no refresh required so I could say like the Lord of the Flies instead and it's showing all of the different books with information similar to this and anytime you have one of these applications you can come down here and you can you know expand this code and you can see exactly how this is built using stimulus so they have the ER B they have the JavaScript and then there's the Ruby specific code and it shows you which files to create and where for each of these so you also have like this chat application you can see there's been people in here that post messages every once in awhile so there's like three different chat windows and this also has the code down here so you could build a multi chat window application if you wanted there's this calendar you can see this you know there's some posts in here I could come in here and edit this to like 9:00 p.m. and say some more stuff hit save and it'll update and you know anyone else that's watching will also see that and then there's more code down there but the one we're gonna look at today is a very small example it's this reverse text one you can see here there's only three lines of ER B and there's only five lines of Ruby code so we're going to be using this and we're gonna be adding a little bit to it not too much I really just want to sort of outline how stimulus works but the basic gist of this application is anything you type into this input gets reversed over there so you can see this entire string got reversed including the arrow that I put at the end so we're gonna be doing something similar to this but also adding in like an ability to count how many words you typed in you know if you're frequently writing blog posts you might do that or you might need that ability and you know sometimes you've wondered to yourself how did they build these applications like you go to Google and you search for a word counter you just click on one like this one that I've used while I was writing my own blog post maybe you have like a twenty word limit that you like and then you type some stuff in here and it calculates it and you think to yourself well how do they do that well this is a little overkill but it is one way you could do this using rails the other thing that we're gonna look at is using rails bytes so this is a new application built by Chris from go rails and it has a whole bunch of templates which are something that we've covered on the channel before so hopefully you're familiar with it but if not the basic gist is it'll be one line of code that you can run inside your terminal a short little command and it will do whatever the title of the template is hopefully so in this case we're going to be using the stimulus reflex template or we could we're gonna be doing it by hand but you could use the stimulus reflex template and we're also gonna be using the bootstrap one so let's open up this stimulus reflex template and take a look so here's your command you could just click copy go paste this into your application and be done with it but then there's also the source and you always want to look at the source code just to make sure that they're doing what they're actually saying that the templates gonna do now of course this was written by Chris so you're probably safe but always better safe than sorry right so before we do this I do want to point out that similar to I think the view j/s tutorial on this channel you can type rails space - and then capital T to get a list of the web Packer commands and one of the rails web Packer commands is to install stimulus so that is a third option for you if you didn't want to use a template or if you didn't want to just run these commands yourself but we're gonna run these ourselves because we're here to learn so we can start by doing a bundle add stimulus underscore reflex and that's going to add stimulus reflex into our gem file so if we come over to our application and open up the jump file and let me just punch up the size a little bit and if we scroll down to the bottom we should see stimulus reflex at the bottom here so that looks good next thing we do is we run in bundle command which is going to do the bundle install and then we can do a rails stimulus reflex : install command and if you come to the stimulus page let me just fullscreen this there's a whole bunch of stuff that they explained in here you know the commands you can use the code that's all that good stuff we're not going to be doing that we're going to be building this like from scratch because it's only two files and it's sort of how I like to learn is by building it myself rather than using generators but down here you can see that there is a generator for stimulus reflex if that's what you would like so if you're building a more advanced application you would probably want to look into using like the rails G stimulus reflex commands just wanted to point that out but we are now good to go so let's go ahead and let's generate our pages controller so we'll say rails G controller pages and then we'll give it a home action and I'll hit enter on that then we can come over to our config and our routes dot RB will change this get to a root and this / to a hash so that looks good the next thing I'd like to do is actually add in bootstrap and for that we're going to come back to the rails bytes website and let's go back to home and let's scroll down to the bootstrap template right here you could also search for it so if I fullscreen this and I come over to I think explore templates there's a search button right here and then you could search for bootstrap so we'll just go ahead and we'll use bootstrap and here you can see these are the commands that's going to run which is going to look very similar to the bootstrap tutorial that I've covered or that yeah both the bootstrap tutorial and the template that I've covered on this channel because I seemingly cover bootstrap on a weekly basis at this point so you just add it with yarn you add the jQuery popper bootstrap you inject it into the config so you have your aliases right here this one actually also adds in a window down jQuery alias so that's nice it then injects the stylesheet pack tag into your application that HTML data RB file and it injects the import statements into your JavaScript packs so that seems like a lot of work let's just go ahead and click copy to clipboard we'll come down here to the word counter application make sure you're in the right directory paste it in so I just right clicked and then I hit enter and this will do all of that setup for us without needing to basically you know type out all of this code or copy it into the files ourselves so that's sort of the power of the templates had a mosquito on me so now if we go ahead and we say rails s to start the server and then we'll open up a new tab I'll just move it over here and then we'll say localhost port 3000 we should hopefully see something that looks vaguely like bootstrap on the page then we can come over to our app views pages home dot HTML that ye or B so here you have this and then if we do like a Jumbotron and then we could probably wrap all this inside the Jumbotron you'll see that the Jumbotrons here which is usually like universal language for bootstrap is in the application I'm going to get rid of this Jumbotron real quick because we're going to be starting from scratch okay so let's come to the stimulus Expo so what's the first thing they have here inside of this app views reef reverse text demo dot HTML data RB file they have this input ID so let's go ahead and let's just start there so I'm gonna come down here and it's gonna we're gonna do like a input with an ID equal to data - entry a type equal to text and a data - reflex equal to KI up and then - angle bracket reverse text reflex hash perform which looks similar to how our controllers work right you have the controller name and then the action of that controller so that's pretty neat but then we also have a bit more after that so they also put in a placeholder that says type something dah dah dah and then a class equal to form - control form - control - LG and then ad - in line - block with a call for and then at the bottom here there's just a span with a class equal to ml - 3 and then they say inside of that just do the @ value close the Ruby code and then close the span ok so that looks good so let's come over here let's refresh the page ok so we have an input you can see every time I type something in the console is happening but there's nothing appearing here and the reason for that is we still have to do the actual Ruby portion of this logic we have our er B but now we need our Ruby and for this it's an app reflexes reverse text so let's go over to app reflexes and there's no reverse text in here of course but we can create this reflex either by running a command or by just doing reverse underscore text underscore reflex dot RB ok so that opens that up and then in here it's just a class of reverse text reflex and then application reflex and and then it just def perform and and we just say at value is equal to elements value dot reverse and once we save this and you know robocop does whatever robocop does we can then refresh the application and we can type something into the box and you can see it is reversing the text exactly like the demo here no refreshing required you know I can delete this say something else you can see that it's reversing it perfectly just but let's take this a little bit further maybe we want to do like a word count so you know maybe you're on Google one day you're writing your blog you look up a word counter you go to a word counter dotnet you paste in whatever words whatever words you'd like and you're just trying to make sure that your blog doesn't have any sentences that are greater than like 20 words because that's the best for SEO or whatever so then you see all forwards cool and then you're wondering yourself well how do they do this right because you know it's your programmer you have a basic idea of how you would do something like this but it seems hard well it's actually not that difficult to do something like this and to prove it we're gonna be doing a word counter and we're also going to be reversing the text and it's really nothing special required to do any of this with stimulus so let's come over to our home page first and we're gonna fullscreen this and we're going to actually just largely get rid of this and start from scratch so let's first create a div with a class of container and then let's also give this a style of text-align:center and in here we can do a h1 and we'll just say your text contains and then we'll close the h1 then we'll do a P tag you can close the P tag already and then in here it will do some oops let's get rid of this period we'll do some Ruby code will say PluralEyes the at word underscore count comma word and this will allow us to say like if it's zero words this will say zero words if it's one word this will say one word and if it's two or more words it'll say two or more words so it's just pluralizing whatever word you pass in here as an argument we can then do a a char just to give it a little bit of style set the back end developer and then inside of this will create a class of row and then we'll just create two text areas so the first text area is going to be an ID equal to data - entry a type equal to text it's gonna have rows equal to 8 a Data - reflex equal to key up let's just what are we going to call this we could call it calc you later reflux calculate then we'll say it has a place holder equal to type something again and then we'll give it a class equal to form - control form - control - LG D - in line - block and a call - six and then we'll hit enter and then we'll just say at words inside of some Ruby code and then we'll close off this text area okay so let's go ahead and let's just save this real quick and let's refresh the page so you can see here we have our box and when I type something nothing is happening you can see the console freaks out so every time I type a letter it's doing something but the word counts not updating nothing's getting reversed and also we have like too many spaces here so let's add let's address the spaces first those are coming because we've tabbed this down so these spaces right here and let me backspace as well as these spaces I guess we got rid of all of them but basically you want to make sure that there's no extra spaces in here and then when you type stuff you don't have those intro spaces so that's great let's now create the box where we'll put in the reversed text so you could copy this so here we'll say text area with an ID equal to let's just call it data exit why not a type equal to text actually you know what let's just copy this whole thing is it's basically the same thing so let me paste this in and fullscreen this so it's a data exit with a type equal to text it has rows equal to 8 a data reflux for I guess key up it doesn't actually need a data reflux because it's just going to respond whenever this one has anything happen to it and then the place holder is like your reversed text I thought that and then you have the class here which is largely the same oops largely the same so it's a form control form control large inline-block column 6 but of course we don't want at words here we want the reversed words here right so we're just gonna say at reversed and that's largely it for the home HTML that er be file let's now create another reflex so inside of a reflexes folder let's right-click say new file and then we'll call this calculator underscore reflex dot RB and then in here we want to say class calc oops class calc you later reflex stimulus reflex : : reflex and then I'm gonna hit escape so it doesn't autocomplete and I'm going to create an action call it calculates oops calc you late and so what do we have we have the at word underscore count which is equal to element value again but this time let's do a split and we could either split it with the empty string but then if you have something like a beginners - guide I'm pretty sure it's only going to count this as one word maybe you want to count this as two words or something so what we can do instead is we could use a regular expression and it's not going to be a one that's too scary we're just going to do inside of these two slashes and I do a slash going in the opposite direction capital W plus and then at the end we just say dot count and that'll get you your words all right that'll get you your word count you then need your words which is just equal to element value again and then we need to reverse those words so we'll say a traversed is equal to element and then again value I'll just call reverse once we do that I'll hit f11 to exit full screen and we'll refresh this page I'll say please reverse this sentence and tell me how many words it contains Thanks wait that was three sentences so you can see here we're typing it in here you're getting immediate feedback with the new calculations over here and you can see that we have 18 words up top and it's all done with what this was maybe 10 lines if you count the whitespace and the frozen string literal comment and then another 9 lines inside of the home dot HTML dot e or B file so really not a lot and it's really cool using you know rails bites and stimulus reflex which uses cable-ready so it's a whole bunch of different components being put together but it really doesn't feel like it you know for 20 lines of code you get you know your own little calculator widget and maybe you want to come back over here and now apply the same train of thought to I don't know like your chat application maybe you can go off and build like the next great slack or something but yeah that's gonna do it for me let's go ahead and let's cut to the outro video ok so that's gonna do it for this week's 20 and 20 challenge I guess last week's because this one's a little late again but hopefully this was of some value to you guys and you can like go off and build your own stimulus applications like there's that Twitter clone that's all over YouTube right now you know the chat applications for everyone asking how you do chat applications with more than one chatroom they have a demo with three chat rooms which I think I showed in the video so you can check that out maybe you can like build a bookstore for someone you know they have like a bookstore but they need a website so you build the bookstore website or something using like know the API or your own implementation or whatever but hopefully this helped if it did please remember to like it if it didn't help please remember to dislike it so other people know not to watch it and you know there's ten more weeks of this I guess technically nine because we're in week 11 I'm just really slow but uh if you want to see more of this consider subscribing hopefully I can stay up to date with the remaining nine weeks apologies again you know life happens I got hired last week first week of work it's 90 degrees etc all my excuses but yeah that's gonna do it for me thank you so much for watching and have a wonderful day [Music]

Channel: Deanin

Views: 2,895

Keywords: deanin, deanin rails, stimulus, stimulus reflex, railsbytes, rails bytes, ruby on rails, rails, rails 6, deanin rails 6, ruby on rails 6, rails 6 tutorial, ruby on rails 6 tutorial, rails template, rails templates, ruby on rails templates, rails 6 templates, templates in rails 6, stimulus reflex tutorial, stimulusreflex, stimulus reflex rails, bootstrap, bootstrap 4, bootstrap 4 rails, rails 6 bootstrap, rails 6 bootstrap 4, create fast apps, railsbytes templates, rails 6 dean

Id: hxqkTy2SB78

Length: 22min 27sec (1347 seconds)

Published: Tue May 26 2020