#112 Stimulus Javascript Framework


Used at Basecamp for some time, and recently open sourced to the public, Stimulus is a small Javascript Framework used to manipulate existing DOM elements on the page. This episode, we will dive into interacting with Stimulus and setting it up in a new Ruby on Rails application.
rails javascript javascript framework 21:59

Early Bird Pro Subscription Pricing!

From now until Mar 01, 2018, save on the Pro Membership!
Get the Pro Membership for $9.00 USD per month while you maintain an active subscription.

  • Student & Teacher
  • $9.00 / month
  • Valid School Email Required
  • Same Access as Pro
  • Subscribe Now
  • Pro Membership

    Early Bird until Mar 01, 2018

  • $9.00 $15.00 / month
  • Access to Pro Episodes
  • Invite to Slack Channel
  • Priority Episode Suggestions
  • Ad Free
  • Subscribe Now
  • Teams
  • starts at $75.00 / month
  • 5 Users Minimum
  • $15.00 / user / month
  • Same Access as Pro
  • Subscribe to Teams
there are turning to ah to add a turn around and learned lessons that would dilute huge stimulus which is a modest of us would bring more to the beach team elder your de how'd it supposedly a beautifully with trouble links and it's actually written by the people at base camp so you know that it's gonna work with the bills application and in some ways this reminds me of react with its components and also the state management without a lot of pain sakes their react comes with what they are really like about this is said to jobs with stays with the jobs get your age you know self say is what the actual be in so you know i'm headed to bed then they come on again that within your job script or should and is gonna stay within dates you melt good and then the necessary jobs go to interact with the controller object will be within its own controller j s well so in this episode rehabilitate just taking a test them put it then clicking a button instead of doing the normal call back they you would do when you have a button and then uh-huh deck with stimulus never formed some kind of function maybe we're just readily out for a console be hello it has been getting that information from our client side there were given look at the swinging big time from a particular time zone then to do this to a different time zone they will see it automatically update then we went to look at the state to see what the previous times and was in a while back to their previous time zone so to start as soften and create a new wells application and then create one oil and rails five one for not specifying it like this because actually have rails five today then sold them wanna make sure the news and the rails five one four so we can call knew that is gonna call this template minimum good dead dash as well pack to a club that within this project in one says is completed i'll change my direct rate to the template for then i'll add the stimulus package with your head in stimulus and so within our application for under the java scrip packs within the application j s while we're going to edit sub come here to nationalize is stimulus package and so we have the import application from stimulus in that we're going to imported be on a load from the stimulus what that covers they would you create a constant application and then call application that starred in there we ever contents which is requiring the files that in with j s v controllers for so under the packs and then create a new folder called controllers it's ago whenever we get in age of sweet controller for stimulus is gonna go right into their they've been automatically get picked up a web that glover we will first need that in the dose with pack back into or layouts while so room layouts under the application i h t m l that your be possibly just going to get the java scrip pack pack application and so off screen had created a walk on patrol or with the index action and then to study uses says need to break down around for one of my components sell for screen aid gift bag or did they predated the controller attribute and with and here we're just gonna call this hello we then close the bell i get here is what if we told they control or stimulus is going to listed as can expect a hello controller de j s well within our jobs before we can then circling some objects so would say if we have and pub opposite though he created a target we would call the target hello their wing it has in some kind of variable name and this name is will will be able to then preference within our jobs when it access this and that actually solo call this name and we're just kinda make this a type of tax we may create a button in the button is going to have something similar to the target then set of being a target or an object interact with were going to have this as an action and this will be easy trigger some kind of method within our control or so we can call click a man called the hello they were gonna call the great which the greed is a myth that there will create the edges give this a message in there we came close honor by the one of the things with the actions is that we really don't need this quick to a while because we are working with the button and this also works for things like a link abiding oriented type of submit with forums he automatically have the action cement in the tunnel so have an action or they implied to get have a date action then you also have some things here is one of the u k n n it so whenever it changes you would need to change when the employer pays like your text area but if you need to listen to whenever this and that changes thing you're able to do something like that i think you would just wanted to something like hello and then something like that name change one for a matinee get into that too much because when the ceo by the seller actions with the button whenever we click it so will create a new file on our our java scrip packs controller and i'm just gonna call this the hello control or die j s morgan added to their initial set up with the hollow controller the first thing that we want to do is we want to import in the controller from stimulus we then export eat the fall classic status bar controller in there with him here is we're we're in a putter object and all the stuff round so you're h t mal whenever we click the button greed when they call this function so with the greek wishes for some bright to or console log which is going to write hello there were going to dinner plate the user's name that the type then so we want to call on tool function and in this case it's gonna be a name so we can create a gander and boarded a call this name because that's all we could end up here and it's not gonna take it any predators or verbal we do what do we turn this bad part is that this is good to be in a ray of all the different hard it's a you have set up with a net hello controller that we want to find the one that is the name then we went to get its value and just make sure that this is loaded and just get up but the console log hello from the hello controller burn itself we get to an application now you see that we have our hello from the web at her and that saved our application j s well in that we have our hello from the yellow controller which is coming from our hello controller so we know that this is be unloaded and if everything is set correctly if we'd had been a name and then click the greed which is then see it posted here so next what say we would go they display time or where you can change the different time zone then you can see what time it is in that location in the one it to be updating as you change it then also just displays of text with the times of the you have selected so again if we change our time zone they even see that it changes the time and it starts coming up santa gifts or without the term we're in the music up with different packages sword on to do your bed there were going at the moment library no we're also going to at the moment times i'm library to so we can interact with the time zones and and in our jobs with application that tears fall when it said the required moment moment and this will require the moment library in allowances are interacting with time there will also need to get in the times in that's gonna be the require moment best friend zoned and instead of just calling mama time zone and moment kinds on we need to load in the times and they get so we're just going to pull in the package that has all of the time today it up already filled out there ready for us to use so that's under the builds and then mama time zone with data so then in our welcome index file that has been creating other day of panic and i'm gonna call this the day the controller and this time and she's been a colleague time and and skin it created each one tag it is just going to be a way wall and a discussion on this display time we they need to create our drop down list for all of the time zones but luckily what else has a method called time zones lack and then swallow was cities like that all of the time zones we do have to pass in some parameters in here that we need to select which time zones work when you use and will sit down script don't really play nice with their differ with the time zones but luckily wells also provides us with the pc info that we get the time zone and all day with the os is sort this just so we have a bit more of a half medical west know we're passing some options in our case i wanna say that the include blake is going to be false that we get that since i'm at each you know options because we're we're back to our stimulus park so would integrate they did that to be invested that should be it is going have a couple of different things one we have worked hard to and this is going to be the kind that time zone there will also would have an action and reaction is gonna be whenever this changes that we want to call a method that we needed to learn it because we need to be able to preference would value was selected because this is a conflict select or a text area we don't have to include the change we can if you want to in this case and to say that we been here and we didn't say what our time controller we would all be that that changed zone and so whatever we make a change in our time zones whack it's gonna call this method we had made a beach to check and within your this is is going to be your kind to display there we create a h three decades to me tag is going to be our timezone to display it so to interact with each to each three cats we need to have a bigger target and in this case i would call this one the kind died this point on him and for the h three tag at others would be displayed time zone so now we have a new controller time and then we have a couple items that we can interact with we have our timezone select you know we have a public targets with the display time and then the other two are to be displayed time zone and we have heard the full text editor so on are are at java script packs controllers are going to create the kind controller die j s file and his skin is set to sell with their standard format maybe it started so the first thing that we want to do is because we have a time zone by the fault was gone it and get that text in a display it in our age three tag so with stimulus we do have a constructor method called in this alliance with in here we would they want to call something that would sit in edgewise is it would run that meant that this case and assume it called the start render we didn't create this render method star runner method like he'd just for us display in our blog with the times and that is so we need to get our timezone from our select so let's create a gander called time zone and we're going to return this bad targets got fined and our target them we want to find a busy time zone and we want to return the value of this object which is going to be the strength of our time zone so then enter console walk we had just called the start time zone and then whenever we initial eyes are refreshed the page we would expect to see the timezone was a dinar console blog simply go back for application we can see that in our console log we have our times and displayed and if we change it doesn't do anything yet except that we get the message because we're we have our view to trigger the change times a method that site yet created so now that we have access to work times on the bill and change or display time and the display time is gonna be an object we're we're goodness at the dinner h t m l and we need to call the moment and moment is just the java scrip library for handling time and we want a display in the time zone investment is saying sue the moment as time zone then we can call this that time zone in this way we're passing in the timezone it's a moment so this way to display the correct time in the time zone that we just call format this is passing as a center for reading for the tax that too important here now for this display time when you create a man and getter we're we're getting the time zone in this time and disconnect lloyd be displayed time very similar to the times and we're just going to return the display time except instead of calling the value we actually were would turn the entire element some tuscany get rid of the diet value so now whenever we call this a display time we should be returning back the object or the element r h to tank that we do something similar for display timezone we're we're just gonna call this display time zone and it's going to return or h three element so when he called the side display time zone am we wanna set the inner each team melli get in this time we wanna send it to the start time underscores on so go mad trepidation out and if we bring fresh we now see our time and we see the times on that was selected pseudo whenever we change our timezone we want to update this information with our time so that we had selected so now we need creator method change zone instead of trying to bring right and we call this information with our new time zone when he does call are rendered get something called the side rendered well they call this winter method again then they should update the time zone so if we go back for application of refreshed now we can select a different time zones you see in the walk that it's operating and saying our new time zone then if we go in because someone like detroit means he had chosen a time to see america detroit then also displays a federal law so now we just need a creator cat or so that our time will be updating automatically it said the easiest way that found to do this is a we want easy said interval the set and of all we're going to just call a function and they were going to within this function going to call the star runner and we want to update everyone second or everyone tells a millisecond ths o'meara zed we don't have access to those witches or controller within this said venerable so i need a greedy variables that typically when i had to do something like this i'll just call that eagles venice then i'll just reference that render saddam back to replicate should know if we refresh you'll see that it's destroying our time and it's after manning selleck of real it's like a different time zone so let's say if we slide to indiana you'll see that updates you know what's up the good the idiom this time so far we looked at interacting with stimulus or when the thing so we may need to do is to capture the state he may wanna capture the save for many reasons as if you're getting something from the server side comment that you would to interact with that data coming in the you also need to keep in mind as the current state of the page as it is right now maybe he maybe keep track of the time so that you're using then instead of just relying on the time so that selected we can create some stage management with adding in some additional attributes and warming controller basically the way that the state manage their works is creating a center so we're gonna just said a set time zone has prompted book need to take in the value we may call this a day huh and we set the day that it's been said it within our day of control or his kids and just because time zone the times of their revenue said is the value and then in our render we can call this onset time zone and we wanna said the sequel to the the start time underscores on we go back to our application and refreshed the nazi that but nor did the controller time we now have the data time and then the event all time underscores on the net said to our current time zone we change our time zones you'll see that it updated toward different time zone so now that we mess around with the state management thus create a button that will set the previous time zone so we can create a bad mood the data action were calling their time and then the method he said previous time zone and ideally with this is going to do is say it's gonna look at the previously said timezone so whacked org and had to create a state where we keep track of what the previous like it when someone is and we clicked this button who then we get state day that we then change the selected times and then change the displayed they get to the previous time zones time so to get started we're going to do is create or met that these had previous time zone we then cannot rely on whenever the record is called to set the time zone because that's what i'm afraid to date each time instead we're going to set the time zone here in our initial wiser so we're sending the initial stage they get to whatever the current times and is but the fall so yeah that we have our current time zones what did we need another day that should be for the previous times and submit a copy out the set time zone then and it is safe he said previous time zone there we didn't have this set to the previous time zone it's in now whenever we change our time zone we would call the sunset previous time zone we won this edited this had been down that time zone and this is going to reference to our state management times and that should be that we had said in the controller we thank all the best at set times and people do this guy time underscores on this will set the kinds and they get to read to our new one though we have now so basically we're just swapping the previous time zone to the existing one day where we sending the existing want to whatever is selected now and in order for this to work instead of calling david died timezone yes to call get it this will get the timezone they go into an application a refreshing the page we have our africa times and selected in the of weeks like a different time zone maybe the american new york we have our time zone sent to america new york in our previous time zone said to the previous one so now whenever we click on the previous time zone would you know what it did take the state previous times of and then set it to our current time zone so within our previous times on method we can call this diet so what time zone it would imagine create this because our rental time so slight object is just returning the value so gordon had to create something like copy the cell it does cause like timezone name given to this value they don't we have these like object that we can interact with only one set the value equal to the stargate didn't get in the center said a colleague times and we want to get our previous time zone finally we call the steinbrenner to update our view so back in our application now we can see that we have our africa times and selected by people in any of these like a different times of my global kentucky you see that the current time zone is evil more kentucky in our previous times and is the africa one so it's about ten thirty peeled and will if we say their previous time zone you should expect to see the select go back to the african time zone then also we would want to see this information up it the so clicking on the previous time zone yeah i'll say that it is like the back to the africa one and then we have our information i've been here sit out in assorted different want this case for this like tokyo and now you see that the previous times on is global now we have our time zone cool to tokyo so you could flip flop they would never you hit the previous to set it back this really does have is good for this episode so getting the previous times and again see that now what's what's back to our previous on some selected and what stimulus becomes a bit more stable because it has been to space camp using it so far and what they get a lot actually the feedback and i'm sure it'll change quite a bed so i'll probably have a follow up upside down the road was it becomes a bit more stable but for now that should be good enough to get you started that's all for this episode they keep watching