 My talk is about StimulusJS, small JavaScript framework I came across sometime back. I am the CTO and co-founder of this company called Good Karma. We are building a product for the wellness industry and it's a CRM plus marketing product. So in this world of this modern world of microservices and micro-friendings, I am still outdated. I am building a monolith app. I am handling a big team of two people. So that's one reason to keep this monolith. And we are not in this world of mobile applications. We are still building a mobile optimized app to keep things simple for us to maintain. That way we can iterate product faster and also to keep things less so that we don't have to handle too many things because we don't have a big team. But what we realized was I cannot completely ignore JavaScript. I can render as many things from the front end or from the back end as much as I can but I still need a lot of JavaScript. I cannot avoid it completely. For example, I don't know sorry about the quality. It may not be very clear but you can figure out it's auto-complete. I need this in the application then I have to have JavaScript. I cannot do it from completely using a server-side app. So these are all the options that's available, all the big names. But they just hijacked my friend end. All of them, if I have to adopt any of the frameworks, I would change the way I am doing things now. Which I am not very sure whether I need it now because it changes the way I work. It changes the way I have architected my product. So that doesn't work for me and this solves too many big problems. What I just need is to actually add small small JavaScript throughout my application. That's all what I need. I don't need a lot of things. What these kinds of things provide. So if I adopt any of the framework, I might be using only a part of it. Which may not be the right way to do it. The other option is to go back to jQuery. But I don't think I need to explain why I don't want to go back to that. Because most of the problems that we had when jQuery was introduced, those doesn't exist now because of the change in the web has come up. The main problem with jQuery is the spaghetti code. It is difficult to manage your code and then what happens when, because of all this event driven way of how JavaScript works. It's difficult to know what happens when. So what I need is very simple. I need to sprinkle JavaScript in my application. And what should I do? That is when I came across stimulus. Stimulus is from Basecamp. Basecamp is the same company who built the Ruby on Rails framework. And then what they do at Basecamp is they use a framework. And once they are comfortable with that, they open source it. And then make it available for public. And that's how the source evolved. And that's how stimulus also came. So one thing is guaranteed. It is tested, well tested at Basecamp when it comes out. This is the definition of stimulus that they have given in their website. And it has very modest ambitions. And it just adds behavior to your HTML. That's all it does. And it doesn't change the way you work. So this is a sample code. What it does is when you type in anything and press create, it greets you back. And what you see on the left side is a HTML. And what you see on the right side is a JavaScript. So you sprinkle whichever elements you want to tell that, this is the behavior I want to add. And then you create that behavior in a controller. That's a JavaScript file that you create. And that makes it multirized. And it has mainly four elements. One is a controller. Controllers, actions, targets, and data maps. We look into each of these now. So this is, controllers is where everything starts. And this is JavaScript class that you create. And when you create a controller, you give it with the data attribute, data controller, and the class name. So stimulus follows convention over configuration. So when you say gallery, it assumes that the control class name is gallery controller. And gallery controller is the file name that you follow. And then next is action. So what we show is that when you press something, it has to do something. And you can add that again, that via data attribute, data action. And then see again naming over the convention is the class or the controller name. And what action did you have to call? That's a function name in your controller. And then the targets. Targets are your HTML elements where something has to happen. This is a way where if something, if you want to say, okay, if this, if I type in something here, then result has to come to another element that the other element is your target. You can have multiple targets. That also follows the conventions. You can mention multiple targets in your controller. And then everything is, you can, the target name is the target, the word target, that is how you identify them. For example, the example given, query target will be the target, is how you access the target, which is mentioned in the HTML. And the last part is the data map. If you want to pass some data to your controller, you can use data maps. For example, if you want to fetch something from server, and you have to pass in the URL to the controller, you can pass it via data maps. And this is a complete example of the autocomplete that I have created. This autocomplete is somewhat existing in the same way in my code. So it's like a production code. Okay. And so just summarizing it again, controller is the, you are saying there is an autocomplete controller. And when something is typed on the input element, it has to invoke the search method within your controller. And we have a target, that is where the data is typed, the textbox where you are putting the element. And you need to show the results somewhere else. Those are different targets. Okay. And you refer this in your controller and they say, whatever you're getting from the server side as a result, that will add it to the DOM. Okay. So it's very simple thing. It uses a JAX to get the data. And apart from this, this data maps and the URL and actions, there are life cycle events that can be triggered. If you want to have something happening when you render the controller itself, you can give it in the connect. So it gives you three life cycle methods. One is initialize, connect and disconnect. I think the namings are very straightforward. And if you don't want to have something on an event, then you can configure this in your life cycle methods. And you can install stimulus using any of these standard dependency management options like Webpack or available. Or you can even use it without any build systems. I've used it along with Webpack as well as without any build system. You can just get the stimulus and add it to your dependency as a dependency starts working. And it supports all modern browsers because what it uses is plain JavaScript in the back and it doesn't have any other dependencies. And if you need to support non-modern browsers, old files are available. But I've not tested with the old files. But I've seen that it works consistently across all browsers. There is nothing new here because it uses just plain JavaScript. The main advantage I got with stimulus is that it suppresses suppression of concerns. For each behavior that you want to add, you will have separate controllers. And that makes it easier for you to maintain. Which is very different from how you are managing a jQuery code. And it makes it readable also by just looking at the HTML which controller gets executed at what point of time. It makes it very clear. And it follows and keeps on mentioning about this convention of a configuration because the naming are standard. And if you follow a certain naming convention, it just works this way. A few examples where I've used it. For example, this is another place. All the auto-config I've already shown. The last two bits about where it... Sorry about that. So the checked-in section and the bottom part that keeps on changing depending upon... So in our application, we have a system to check-in. So the woman someone checks in, it has to get updated on the website. So each check-in and it also shows you checked in the last. So there are different areas that gets affected the moment someone checks in. And all these are done through stimulus as of now. So without page refresh and just with Ajax, this data gets updated. And I'm not using an API to DOM conversion here. These are server rendered pages. These sections are actually rendered by the server. And same way for each membership application. So some of the members, they don't renew on time and they may take extra classes after the renewal. So those status that you see as active, expired and expiring, those also gets updated depending upon who the member is. And these are updated depending upon that. And then here also I'm using stimulus for that. So these are just some examples I'm showing to make... Just to convey that, okay, where I've used a stimulus extension CD. Just coming back to the initial discussion about the comparison with other frameworks. In my opinion, these are two different kinds of applications. So most of the... If you take a React Native React app or an Angular framework, the apps that you create, those are independent apps from your backend. So you spit out APIs and the Angular consume the same. So those are independent apps. So in those cases, the standard, the normal frameworks that you see like React or a backbone or Angular make sense. But in my case or in situations where you want to stick to server-side rendered apps, then those might be overkill. And that is where... So it doesn't make sense actually to compare these two kinds of frameworks because those solve two different types of problems. So I would say this is what I have learned from this that if you want to create a JavaScript app per se as a frontend, then you use any of these frameworks. If you want to use server-side rendered apps, still want to use JavaScript for adding certain behaviors, then use frameworks like stimulus. I don't have any other comparison. I have not found any other frameworks which are similar to stimulus yet, so I don't have any other comparison in this backend. And just one thing well, and that is what is amazing, that is just add behavior to a stimulus. That's all it does. It doesn't do anything else. And that's it. It's an open source thing. You can go to stimulus.js.org. The entire details are available there. And you can see they also explain why they started with stimulus. So that gives you some background of why it was open. And that's it.