Events Add an event Speakers Talks Collections
 
RailsConf 2021
April 13, 2021, Online, USA
RailsConf 2021
Request Q&A
RailsConf 2021
From the conference
RailsConf 2021
Request Q&A
Video
Stimulating Events - Jesse Spevack
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Add to favorites
863
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About the talk

Stimulus JS bills itself as a framework with modest ambitions that fits nicely into the Rails as "omakase" paradigm. At its core, Stimulus gives Rails developers a new set of low effort, high impact tools that can add much more than the sheen of modernization to an everyday Rails application. Join me as I live code three Stimulus JS examples that will help you save time, impress your friends, and win new clients and opportunities. This will be great for JS newbies and experts alike along with anyone interested in the potential schadenfreude that watching me live code will likely elicit.

About speaker

Jesse Spevack
Staff Engineer at Ibotta, Inc.

I am a senior platform engineer at Ibotta, a cash back for shopping mobile app. Before getting into the tech world, I worked in public K-12 education for 11 years. I transitioned from education into technology by way of the Turing School of Software Design, a Denver based code school with a Ruby-centric curriculum.

View the profile
Share

Realcomp, I am so glad to connect with my rails brothers and sisters from all over the world. Thank you all for tuning in last year. We came together at. What would be the start of this pandemic? And the connections are made with folks helped sustain me. Since I'm hopeful that next year we will get to see each other in person until then. I hope you all are healthy and safe. A big thank you to browse, program committee and planning team. I can only imagine how challenging it is to put a conference like this together, but it's so important to all of us who these refs this conversation for me.

So thank you. Thank you for your dedication to this incredible Community. My name is Jesse Spivak. I use he him pronounce. I'm a Staff engineer and Ibotta, cash back for shopping app. Then wants to make every first rewarding. I've been at a bar for the past four years and it is the best job I've ever had. I learned, I've learned a ton during my time at about it, and they've always encouraged my growth. We have a great Team, which is the best part of Ibotta ever. And is not only sharp but also and more importantly, ever and is kind and giving we're growing. So please reach out. If you're

interested in learning more. I love to work with more folks from this community before working. And I bought a, I had a totally different career. I spent over ten years, in K-12, public, education, and made my way to Cody by way of the trees. I'm a huge believer in that program and their mission to open up, high for film. A technical careers to a diverse group of people. There are. Number of ways. You can help support Trane furnace. You can consider hiring one of the school's recent graduates, who will undoubtedly bring immediate value to your team. I bought a has hired over a dozen, turn

grass, and we are far stronger company for it. You can also pressure in your wisdom with current students, as a mentor or by hosting job shadowing day is finally, you can donate to turn which unlike many other Coast Schools in Thailand for profit. Play. I'm so proud of my developer. Origin. Story started the train. I'm very excited. Make my second speaking appearance. Ever else come last year. I talked about some of the big mistakes I made and what I learned for them. This year. I'm going to talk to you about stimulus before it began. Let's get one thing out of the way. See me. This is a toy

JavaScript framework. It's not meant to build commercially viable, web applications. Don't even try getting a scam. Say email app is what got me interested in stimulus and the promise of light wave client-side, code has me more or less worked with a disclaimer out of the way. Let's start with what is stimulus is a JavaScript framework that can help bring simple order, two clients. I code in your rails application is not interact view or angular. Can I find it much real zeier? And its focus on server side code convention, and conceptual compression. Some of the syntax is new, but

some of it is definitely inspired and feels very familiar. We're going to use stimulants to add a nice professional, modern Sheen to a simple drop-down menu. The example is contrived, in the sense that I'm not showing you production code. I'm not concern myself with testing, which insulation route and in the end. I drop down. It's not really going to solve any problems. Our goal here is to use the drop-down select HTML and JavaScript as a teaching tool. I hope that this will show you how easy it is. Do stimulants to add modern interaction to our HTML and rails. I hope that you walk away

with an exposure to the Core Concepts of stimulus controller. Lifecycle callback actions Target values, and I also want to eat together using some more advanced JavaScript to better encapsulate, the barcode. Okay? Enough for me, to talk to you about some meals. I want to write some code with you, to show you stimulus. We're going to start with a brand-new rails application. When is utility for CSS, library. And is someone with basically no designer CSS chops. I really like the first thing we're going to do is generate a new demo. Controller will use the

generator Define, a drop-down record for hanging with me here. I like to set up my terminal with three panes, one for my commands, one to run rail server and one to run the web server. You were going to really want the web active server running because it allows us to see our changes on localhost immediately as opposed to need you to compile. After each change. We can view our generator drop-down page and see the template HTML we get from rails was over and drop down and remove the template code, will replace it with some HTML. I put together ahead of time and

when you are, which is a premium HTML component, Library by the folks who made c o n c, s s I told you before design is definitely not my area of expertise, nor is it the subject of this talk? If anything, I hope this shows how is sociable stimulus makes modern looking and feeling web apps to folks who spend most of their time like me, find a synchronous boundaries in a back-end system. Also, I have his code up on GitHub, which I have I used to check out now. Let's open. We just got raided. And yeah, control. We're going to be building a drop down menu where

a user can choose a real, keynote speaker in a controller. Typically in real application. This might be accomplished by database query or some other service request down here is always a challenge for me. I appreciate it. Also forward to feedback. I undoubtedly get about my gym skills. Listen, Maybe. I like lots of keys all the time. Did you ever consider that? And now we can do our page with her speak? By opening the browser to Locos 3000 / 7000 generator generate controller. Step

out page, that is generated on the server side of our at, we'd like to use simulators to make the additional actually do some stuff. Let's copy the boilerplate. Biscotti the boiler first thing as controller code. We get in. Hello. Hello. Can forge as I like naming my controllers after Conan's, because it helps push me towards making reusable controllers. So, this isn't, for example, the still like, the keynote speaker controller. Encinas is the basic organizational, unit of a framework controllers. Are there are instances of JavaScript classes that we Define and

that get attached to chunks of our HTML. When I like about this is that we're getting some mandatory organizational structure for the JavaScript in a rails. Application to meet is a big step up from writing, Jake and a bunch of random places, which I've definitely done. It's often not quite the lift needed to use reactor view in our rails app, which in all cases is just Overkill. The controller is meant to govern the behavior of a chunk of HTML. And so, we need to rewire our controller to our HTML. This is important because where we Tire control was a spine or controller

scope. So if we put our controller in our application, layout for the trailer would have every view we create in a scope because every view are every a Mickey Mouse is nasty with her application layout. In this case, the drop-down by and list of select items are the issue, I don't care about, we will take the div that raps is HTML tags, and add a data attribute called Data controller. We will set the volume of the actually to be drop down and name of our new people. And this is the first time she repeated again. And again, we Define a data attribute in HTML assign a value.

Was that a console log important to be systematic console.log statement? To one of the stimulus lifecycle methods connect, which is called anytime. The controller is connected to the dawn. Open developer console in a web browser and we can see our message and this point or controller did not yet. You has not yet. Let users pick items. We want the item that a user is mousing over to be highlighted will also want to text in our button to change when the user selects an item. Finally clicking the button or cooking on the speaker from

the list, the open or closed the list of selectable items to achieve this, we have some Talent CSS classes, but to find Styles we would like to apply to the various HTML. Elements are page will be liberally using JavaScript to add and remove classes throughout this code. Stimulus versus refer to cff biological name. More reusable by making the styling. We apply Dynamic. And some pain is that can you pass into the controllers, sell printers? We do this by Annie new data attributes. The HTML do with our data controller Ashby's music

by the name of the controller, decided to reply to, this is another pattern in espanol, will be defining more and more data attributes that are prefix with data and our control as we continued after naming, the controller to come up with a logical name for class, not doing a great job, this year, highlighted a better choice, but sometimes I also like to not leave for the trash. The end with the word class and then a sign of value that corresponds with the actual CSS class, to be able to access a controller by name.

Now. What are these values to a static class is right, so you might say, highlighted text and then we choose our controller by controller bases. I'm not doing that here though. So do they say not as I do, I guess. Now we are ready to use action to find some Behavior. We'd like to see our page and action is a connection between a controller message element on a page in a dumb event listener. We'd like to change the style of the list items as a user cursor,

hovers over them. In this case. The action will specify the mouse enter Donavan should be routed to the drop-down controller and invoke the highway and function. I like this a lot because she is familiar to me from writing rods and reels. We have to Define our highlight list item function. Well, as some console log in, because this demo is nothing, if not a demonstration of Urban Development. Every action is going to us since the triggering event to a function specifies, Dennard Wilson, the mouse enter event into a highlight list item function. Object

object Target for HTML element. In this case. The target is our list item. That just had a cursor, enter its boundaries on the intertext of the first child element of our list item. This should print out the name of the speaker Mouse over in our console. As soon as we see this message, as we cross over all this, to speakers to fire desire Style. You want the background of the speaker to turn pink? Let's use this. Background pink class, which we have for my static class. Is there a voice back to the background pink

data after using molasses class to list item element, which is a target that dispatched the mouse and her? That now as are most enters a list item, this item passes at Mouse. Enter a been to our signals controller function as a CSS cost to the list item. Just Mouse over. The class is to find. I did ask you in our HTML friends. This is great. Princess looks like it's working in a let's do the same thing again for the font color and style. When we highlight one. Do you want to find to go from grey to wife, from normal? Wait to send text to dispute. His name is actually

in Spanish with the Dallas item. So to ask you, can we move our mess over all this useless. I am will get a pink background in the interest and tax return, white and gold. If you aren't thrilled by this, and you are probably a lot better, A JavaScript and I am This point, you're probably thinking. Wow, Jesse. You aren't that good at JavaScript. You just made a perfectly good list of keynote speakers pink. Okay, well to that, I say I was not built in a day.

What if we turn our attention to unhighlight in our list items, when the mouse leaves their boundaries, we can go back to our data, but I had that Mouse weave, Donavan should be routed to a drop-down controller and broke our unhighlight. It's going to be the inverse or a highway. I'm giving this a spin on a local host. Seems like our list items are highlighting and unhighlight inappropriately and I'm feeling more and more like a complete wizard. Let's see if I retain a conference for the remainder of this time. Now, it's handle the actual selection of speaker in our list.

Ideally when the user clicks on a list item to select the speaker. The list should vanish and the button text to change. I'm so active speaker to the name of the speaker. Just selected will just find another action using the data action action and will want, we want two users, click on the list, item to invoke, the selected item function. So I got to make sure things are wired correctly, shows that we are locking the name of the speaker. We are cooking on now. Let's work on taking the name. We are logging and putting it in the select button. Curious, what you

just another piece of stimulus, the Target or Target allows us to reference in for an HTML element in our controller. Just like an action will create a Target date of Target would use the Ashby name. Dana drop-down Target to tell stimulus that this target should be accessible controller. We use the volume speaker to say that when we call the speaker Target in our controller. We really mean this particular span and I'm out. Now, we will add the speaker, Target twist at Target. This will allow us reference this thing by

invoking this. Speaker, Target scope, McCall, text content, and set that equal to the intertext of the Target. That dispatch the clicker men. Here. The event is the quick around. Target is a list item. Containing the name of the speaker just clicked. And the inner text, is the speaker's name. Let me click on a list item. Text of the button will update to a list item. That was clicked. Now that we have a selection. We need to hide the drop-down list to do. So another

more easily referenced beletic, all this. List Target in or drop down controller and get the entire on order. But we have to remember to add this list to our targets, are now on our select item function behind all this started by adding this talking in class to it. Now, when we select the speaker, the drop-down disappears for. What if the user wants to change their selection with our current location? We can get rid of the list, but we can't get it back. We can fix this by adding a quick action to our body. So that clicking the button what either show or hide the list of options,

their own default Adventure hands because we're dealing with someone is the music artist really looking out for us. Instead, our data action Ashtabula needs to control our name in the function to call is Cliff down event. Now what I was taught a list function that can talk about it in class on our list Target. So he's trying to blame, this could either add or remove a drop-down list, which will make it look like it has expanded or collapsed. I noticed that the functionality of our total this one. And

so we can refactor. We can also add a call to this. Saga list and I connect function so that when the controller class is first and then she acted upon her page, getting loaded. The drop-down will be kidding. We want the user to have to click to open the drop-down now, or this mostly Works what to do about. These check marks next to the text in our list items, ideally opens at 4 list, item, the options drop down. By clicking the button and speakers already selected. We see a

checkmark next to the speaker's name, because we're fancy like that. And then we'll talk about it in class on the check, SVG, iPhone first, because I see is good policy when naming David Targets in stimulus. Now, we need a way to hide all the checkmarks because when the page first was user, when I had a chance, so I can speaker to do. So, we're going to do something a little different, but it feels offer past experience with the Target in the past. Use a singular to get a Target like this target to get the text inside the button. ArcheAge. How many check heart rate is, 114 on

speaker, with a stint with similar? All we have to do is pluralize Target and we get an array of our targets instead of this. Check Target will do this. Check targets plural, over the list of targets for trying to hide these checks band containing the checks to make sure we are grabbing. Now we can talk now, we can go hide checks in our connect function, that looks right to me. So for each check, Target you add the Vista in class. Our goal here is to show, check marks when using Celexa speaker. So we need to go into our selected item function, which is called when a user clicks

on the list item. We have to move over all the charges for each check. Target need to inspect the check Target Sumer, which is the span continue. The speaker's name is a check Target, sibling equals to text and let me know we should show the check because this is just like the item. If the charger still in text, it's not you for the text of the selected item. Then we know we should hide the check is, this is one of the other speaker options to clarify. We know the text of the selected item because we get it off, the click dumb about

Because we love our work. We will also have to turn her check marks white when we mess over them because we are nothing. If not cross people. Let's go into a highlight. Let's go, add a check. It says, if the check is not hidden meaning, if this is like the speaker and replace our p.m. Check for the white check, that way, it will show up nicely in our pink highlight. When are used when the user mouses over the list item and will do the exact opposite, and if a check is not hidden, then we want to make it pink. White. So what's the stock

of where we're at? We accomplished our goal of adding some nice-looking styles to a drop down, when you shoot a few of the main Concepts and Sammy has the controller, the action, the target. You can imagine our select item method including a post request that sends the selected speaker to a database, but we are not going to do that in this talk. Instead. Let's look kind of confusing. If I'm being honest, at least, it has been kind of confusing to try to explain it out loud to you all. And to me, that's a coat smell specifically over

our checks a few places, which I don't want, and they're probably ways. We could try out our code of it. But I think all this points to a larger refactor that I'd like to do with you all. I think our drop down cuz there's too much has too many different responsibilities and it's just not. Well, I like to propose that. We break our drop-down controller into will keep the logic for opening and closing list and setting the flight to speaker in the drop-down controller that will call that will handle anything.

Sprinkled highlighting and understanding whether or not the list item is a selected list items controllers to get on our list. Item element is going to be where I declare. My list. Item controller will use the data controller attribute instead of equal to list item. And I will tell simulace that everything within this. Deer tag should be within the scope of our new list item controller. SPD icon. What's a console log to watch next function to make sure we've connected controller correctly. Now, let's add some targets to make it easy to reference, the

important pieces of our list item, in our list out of control. First. You, add a data list. I will set that equal to item. What a day do list item Target Eagles, check on her span holding her, a speedy check icon, will also add to our Spanish speaker name. I will set that equal to text each of these targets to are standing on the drop-down controller to our class because it will be concerned with tiling on Tire drop down list. We can now add these classes dataclasses re-curl 832. Find it actions. There's a quick action that will call the selected

items and then Mouse enter and mouse, leave actions that will call the highlight and unhighlight something. All these functions are to find me to report to the drop-down controller instead to trigger a select function controller. Now, with all of this is working next step. I'm really excited for the difference. I think your guys to Because we to find the elements, we care about as targets. We can reference them, more directly instead of needing to get at them by way of first for last element, child first next, and white

balls bond for spam text that contains the speaker name. Finally, will apply the same white color to our check and this reads a lot nicer to me through this city. I know, I missed your text and it said the check will do the opposite for select. We're going to reach for the last piece of stimulus that we have yet to cover the value. Our goal here is for each list item to govern itself rather than rely on the drop-down controller to orchestrate all them together. This would be nice because it is annoying with one thing is simpler. You want you to list item to have a

state. I were selected or not selected. We are going to use the stimulus Value Store, this state to do, so will follow the pattern. I didn't see that came out. In this case. We're going to a be a tribute to the Dave where we to find our list item controller instead of equal to Falls. So this time controller now has a value or state called is selected. It is initially sent false stimulus. All Source Deer Valley types. We just need to specify the datatype of our new is selected items in our static values. Object in our list item controller will specify that. This is selective value is Napoleon

because I can either be is selected, true? Or is suck your balls. It can be selected or not. Now, instead of messing around with list, item text will just update. Our is selective Val, you want to list item is clicked on that the truth. Use values and Timmy has also come with some additional Powers. We can use call back whenever any of our guys, in this case, a free is. So I can call whenever we change that is selected value. Let's have some console. Are you here to see how that works?

On the list item is like a true statement because it has been clicked on. You want to show the check. Mark? We just need to remove the head of the class for my check Target since we're only dealing with one this item. There's only one check Target to worry about. We don't have to worry ourselves with a four Loop anymore. Also importantly The Exchange call Max called, when the controller's first exam. This is saying that the value of is selected has been initially set to exchanged. This works in our favor is the Callback function.

We just wrote will automatically High the checks on every list item not selected. This is way better than what we were doing on her. Drop down controller. We had to write a special hide, all the checks function. The pretty quickly. We got our list item Styles working on a list item, buy list item basis, but now we need to somehow create a line of communication between our sibling list item controllers on Artesia close at 1 list, item controller / list item on the page. It would be really nice. If one last item controller could announce to all of its siblings that it

has been selected. As far as I know. There isn't not cut too bad, but we can make our own custom events. I really like this. You trying to get one list item upon being quick to shower. Hey, I've been selected and the rest of the list items need to hear that event. And make sure that they set their own is selected. Value to be false Define. A customer event will create a detailed object with a value key will sign the intertext of a text Target on our list items to be that value. The

detail of our event is the name of the speaker that was just clicked. Then we'll make her custom event and will call that event a list items. Select event will call Window dispatcher, man, and pass in the event. We just created to get published in our HTML. We now want all our other list items to listen for this list items. So I could have been to do. So at a new data action will say that when we register a list items collected event. We should call the deselect method in a list out of control. And then we can you find this piece like the function for the console log to make

sure we haven't done. We will log the value of the selected item. That is just as fast event along with the value of the item that received the event. So we want a lot of both the list. Hey, I was selected as well as the least, understand that is not selected. Also, we have to remove the event from the parameters in the selective. And because we go on to Define an event constant, a few lines down and that would be able to see those items appear to be logging correctly. When these two values are the same and

me is the list item. That is also heard is own announcement, selected speaker on the event is different than the speaker name on the Texas item itself. We know we have to update our is selected state to be false because one of the ceiling list items. I want that just told us, it was selected whenever we updated value. We trigger the change, call back. So here setting is selected to be Falls. Will call me is supposed to change. This will also then go on to uncheck the list item, which is exactly what we want. Our list items are more or less

autonomous. They are much more efficient and we no longer have to move over any list. This is an improvement. Now, all that is left to do is clean up our drop-down controller. We still need the controller to hide and share, what we can do with this. Like I said, check, hi, check highlight and unhighlight functions for 4. When we click on the list in Utah, going to hit in class. Now, we prefer to use the list. I have selected event. What's a data action to our button that listens for that custom list items. I'm

an event occurs would like to trigger, is that selected function in the drop-down controller that starts now, that's a name of the speaker from the list item. So I put that into our speaker Target. This will change the text of our button from Smart speaker to whatever speaker is actually clicked on. How can I want to make sure we are hiding the list when the page loads? And now you have a reason. I appreciate you all for sticking with you because he's quite a bit. We looked at

how to create a Sim use controller. Used actions to call functions in our controllers. When specified Donovan's, get fired. We used targets to find important elements in our HTML. We use value sister State, UCF classes to apply Styles. We also use our own custom events to communicate between our stimulus controllers, which enabled us to better encapsulado code. I hope you're walking away with maybe a few and maybe that's what I discussed with my vs code for fish in sea. I'll be answering questions in simulate in the stimulating events

Discord Channel. I'm happy to talk about stimulus, Ibotta, and turning to come by and say, hi. I'm sending love to all my railsconf brothers and sisters, and I hope all of us to see each other in person and next year, for us,. Thank you again for joining me and enjoy the rest of this amazing conference. Thank you.

Cackle comments for the website

Buy this talk

Access to the talk “Stimulating Events - Jesse Spevack”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Ticket

Get access to all videos “RailsConf 2021”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “IT & Technology”?

You might be interested in videos from this event

November 9 - 17, 2020
Online
50
93
future of ux, behavioral science, design engineering, design systems, design thinking process, new product, partnership, product design, the global experience summit 2020, ux research

Similar talks

Vladimir Dementyev
Team Lead at Evil Martian
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Jamie Gaskins
Masters of Arts in Christian Apologetics at Trident Technical College
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Gannon McGibbon
Developer at Shopify
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Buy this video

Video
Access to the talk “Stimulating Events - Jesse Spevack”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
949 conferences
37757 speakers
14408 hours of content