Introduction to Stimulus in Wagtail CMS

Speaker 1: Uh okay, so I'm going to give um a brief overview of what stimulus is all about So Stimulus is an open source JavaScript framework. It allows developers to be able to create interactive and data-driven web applications focused on the data-driven. So it is lightweight. in the sense that um it focuses on enhancing the user experience without complex built configurations So setting up simulus in your projects, either a new project or an existing project, is very easy because you don't have to like starts um installing complicated um

Speaker 1: dependencies or all that so if you'd like to test out stimulus what i advise you to do is um You clone the stimulus starter repo, which is here. I'll drop the link after uh the session. You clone the stimulus starter repo. So once you've cloned the repo, it comes with all the uh pre-configured files and it also comes with a file that folder that contains those files called stimulus starter So once you've cloned it, you see the inside of that folder, then you need to install the various dependent So you can use YAN or NPM. It depends on the package manager you are comfortable with. So once you do a Mian

Speaker 1: or HPM install It will install all the dependencies for you. And then you start off the server by running npm or yan starts and it defaults to local host 9000. So that is like the process, the basic process on how to start up um similar starter on your own PC. This is if you want to test out how it works, you want to probably maybe build simple controllers and get used to how the frameworks framework works. So it uses data attributes for interactivity. Stimulus is all about HTML first approach, which is why it uses data attributes in order to attach itself to the DOM and then manipulate the HTML element

Speaker 1: There are four major concepts in stimulus. These are like the most important things you need to know in stimulus. They are the controller, the targets, the value, and the actions. So in order to further explain this concept, I'm going to build uh we are going to build uh a simple increment button So for the front-end developers on this core, I'm sure you've built something like that before. But then if not if you've not built something like that before, I'm sure that you've used it So probably maybe when you're shopping online and you want to like um increase the quantity of the product you are trying to buy So the button that you click and then it increases the number.

Speaker 1: That is the increment button. So that's what we are trying to build right now. So I will explain the the first concept, which is the controller, and then I've opened up my code editor and we'll try to like build up something. So the controller, just like the way your class attributes connect your HTML to your CSS That is the way that data controller and stimulus connect the HTML to your JavaScript. So the data controller attribute takes in a value which is called the identifier. That identifier is what reference your stimulus class in um that's what reference your stimulus class in your

Speaker 1: file So I'm going to show you an example. Remember we are building an increment button with these four concepts. So when I say the data controller, this is what I mean This is the data controller. It's a data attribute and it takes in the value of an identifier. This W increment. Is an identifier. So remember that I said the identifier reference the stimulus class in your file. This increment here is referencing this this class here this increment

Speaker 1: controller so the data controller is what links this your HTML file with your um TypeScript file or JavaScript file, this all links it together and gives you the ability to be able to manipulate the DOM, which is what everything inside of the scope of this element, which is the button and the paragraph. So we are building an increment button Sorry, we are building yeah, we are building an increment button. So everything here Inside of the scope of the data controller. So that means whatever we put inside of here, we can use it to what

Speaker 1: manipulate the elements. We can manipulate any of them. So let me show you the way it looks and they create demo. So this is the button. This is the button. This is the paragraph tag and it's zero right now because we've not written any of the codes for it. So the next concept is the target So the target is usually an element that is affected whenever an action, whenever an event occurs, an actionable event occurs

Speaker 1: So in the example of the increment button that we are building, we want to click on the button and we want the paragraph to be affected, which is we want this paragraph here this number. We want it to increase by whichever number. It could be one, it could be two, but we want it to increase. So whenever we click on the button The paragraph is the one that is being affected. So any element that is being affected by an actionable um event that is what the target in stimulus So if you want to um write the targets for stimulus, the format is you write the data. Then the identifier, which is W

Speaker 1: increment, and then the target So it takes the value can be anything. You can decide to name it whatever you want, but it should be something unique or rather something that is related to what you are doing. So we can say count because we want to increase the count of this paragraph element. So if you want to assess this target, you want to assess it inside of your controller class you have to call the static keyword

Speaker 1: So this static keywords gives you the ability to be able to um access your elements Could be static values, could be static target, could be static class. So count. Could be more than one. You can have more than one target in inside the controller, just like you can have more than one controller class inside of an element And we have the declare keyword. The declare keyword is used to set the type of that is used to set the type of either the target or the value or the class inside of this controller.

Speaker 1: And target. So remember it's an HTML element, right? So now we've accessed the the target so we can do with it what whatever we want, can we can manipulate it. We can change probably the style, we can increase the test content, we can do with it whatever we want. Now, since we've been able to access it inside of a class-based instance Then the next is the the values. So values are like something they are values are like very important in um stimulus So they are a way for you to manipulate to

Speaker 1: manage the state of your um controller of your elements. So let's say in this case that we are building um the increment button. At the first instance that you load up the website, this the value for the increments, this button here is zero. It's going to be zero. So but when you click on the button, the state changes because the value has got actually increased. So that value attribute gives you the ability to be able to manage the state of your controller. So if you want to um write out

Speaker 1: So this is the format for writing out the data value. So the first is always the data, followed by the identifier. then the name, the the unique name that you want to call your value, followed by value. Then it takes in an argument um takes in a value. So the value could be anything, but in this case we want it to be zero because we want it to display inside of this um paragraph. So I can decide to remove this and then we'll replace it later. So if you want to access the value inside of your class controller class, you still use the static keyword. But this time around, you are using values instead of targets.

Speaker 1: And it's an object instead of an array. So increments So you can have you can have um defaults inside of values. So defaults are like The default state that you want your uh element or your controller-based elements that has a data controller. It's like the state that you want it to be when you load up your. your website or when you load up when you load it up in the DOM. So we can decide to set the default here to zero. I decide to set the default here to zero

Speaker 1: and then remove remove this from here and it's still going to work. Because it's it is the default, even when you've not uh created that attribute inside of the element, it's it's still going to work. Right? Why I keep making this mistake. Then we give it a type, which is number. So increment value. Long

Speaker 1: And the last is some action. So an action calls a method whenever an event occurs. So when we click on the button and then it affects that paragraph targets, we are calling a method on a click event. So when we click on the button, when we click on the button, it's affecting a target, which is a paragraph, yes, and then it's calling a method. So a method could be a function or yeah, it is a function actually just like the way when you're uh writing in javascript probably maybe you have uh a button and then you had an event listener of click sweep So that click event is calling a function.

Speaker 1: That's the same thing that the data action and stimulus actually do. So we are adding this data action to the button because it's it's but is the button that we are clicking. So this is the syntax for acting it's data action. And then it takes in three arguments So the first is the event that happens, the event that you want to happen, which is the click event. Simulus has a default event for data action for buttons. So the default event is click. So you can decide to have this. Click event here or you can decide to remove it and it's still going to work.

Speaker 1: Then the next argument is your identifier, which is the W increment And followed by the methods, the methods that you want to call when that event occurs. So I'm going to call it increment. Increment conch conch So remember that the method is called what increment. So we are going to write the method here

Speaker 1: Let's do something simple. Let me console dot log i I can actually decide to use a debugger here, but I'm more used to consuming drop like. So let's wait for the build Okay. All right.

Speaker 1: So when I click on the button, you see that I shows up here because once we click on the button, we are calling the method. We are calling that increment method or that click event, which is a high. So since we are building an increment I have to assess the text contents of the target element. So we can use these dots a little bit because stimulus uses a class-based approach. And target for test contents

Speaker 1: Okay , maybe it's kind of funny So every time we click on that button, we want to increase the count by one. So we click, it increases, we uh we click again, it increases, three, four, five, six. Now we've successfully built

Speaker 1: an increment button, but there's something else I'd like to talk about, which is the lifecycle method. So the lifecycle method uh allows you like this connect method, for example, allows you to be able to access the the DOM When it's access the DOM, yes, when it's um the stimulus controller, which is the data controller, is connected to the element So remember that we have a default count here, which is zero, but we are still using this zero from the paragraph. So I want to remove it And then I'm going to set the same thing that I did here.

Speaker 1: That's what I'm still going to do there. But this time around, remember that the this paragraph here has there's nothing inside of fix you get. But once we load up the the DOM, we uh reload the page, you find out that this actually like changes the test content of the of the target element to the increment count value which is default to zero. See it it's zero. So I can decide to change it to another number. Let's see twenty.

Speaker 1: I'm still going to show 20. So whenever I click it increases and yeah, that is it. So the next section. Uh why stimulus in Wactail? So as you can see from the example I just gave, stimulus is like it's very simple and straightforward to learn So since we want it uh a lot of people to be able to contribute to stimulus, uh to be able to contribute to stimulus in work too So this is like the best approach for them. Since it's used a data attributes-based approach, everybody is going to like learn that same um manner of coding, you understand?

Speaker 1: So it's not difficult to learn on like React or View that would like take you a long time Then it provides a consistent way to add behavior to DOM elements without compromising the Django templates. Remember that stimulus is an HTML first framework It's focused on making uh it's focused on enhancing the user experience, you understand, which is why they are using data attributes in order to be able to attach self to the thumb and give you the ability to be able to manipulate the HTML elements. So if you want to use stimulus inside of the Django you just have to like attach the data attributes which is the data controller inside the

Speaker 1: attributes in Django and then you you are connected to um to the stimulus. Then also it's it's more secure actually like compared to inline scripts or Windows groups. Like uh it reduces the use of scripts and Windows Globus. So using um inline scripts and Windows Globus actually like slows down the performance of the of the application and at the same time it's it's not as secure as using um stimulus data attribute approach Then also it face unknown bugs that might have occurred due to Windows Global. So there was an implementation I did, the button long running implementation. So in the

Speaker 1: In the image section, in bakery demo here, when you are uploading a duplicate image, there's a button that shows up, which is the update button. This button here, which is this update button. So using the previous approach, the button long running approach It was using uh Windows Globus to init the function button long running. It selected the class button long running and then added the JavaScript JavaScript to that M class, but you because of the fact that it was using um Windows Globus

Speaker 1: Some of some bugs occurred, which was something that we noticed after the switch from Windows Globe, which is the button long running to stimulus, actually happened. So it was after that switch that we actually noticed. Notice that yes, this place is supposed to exhibit that uh behavior of the button log running, which is when you click on the button, it has a spinner and then disables the button for some few seconds Okay, so that's the body long grain behavior. So this was not working before until we switched the body long grain to stimulus. So the thoughts process for stimulus conversion.

Speaker 1: So before you start writing the coding, when you want to convert uh a U-High component to stimulus. I mean it it's not all about coding. You don't just jump right into s writing codes. You have to like understand the implementation, which is the previous implementation. You have to understand what it's doing. what the code is all about, you understand? You have to find out where the code is in the bakery demo. You have to test it out, look at it, like just basically understand what the code is doing Then if the previous code worked with data attributes, find out where they've been used in the code base, like the init dismissible That's used to dismiss what's new in WagTail

Speaker 1: and in the help section insidebar. So that one uses a data attribute approach. So you have to like find out where they have been used in the code base because stimulus uses a data attribute approach, yes. So which means that you definitely need to attach those data attributes to where the HTML files are or if it's Python that was used to create the widget. You have to find out where that Python file is because you still need to attach the stimulus data controller attributes inside of it. Then find out from the implementation if you should use stimulus class targets or values. So like from that body long running example, so we use stimulus class.

Speaker 1: which is when the button long running is active. The previous implementation just uh it's the previous implementation use the class uh button long running active that when you click on that button that class is being added to the button you understand so you have to find that if such a situation is actually happened, then you have to use a stimulus class based approach, which is the static classes, the way we do it for the static target. They also have to find that if that's uh That implementation needs a target, like for the button log running, it actually like uses a target sometimes. So the target was an emphasized element So you have to find out such situations if it needs a target, if it changes from one state to another, and we definitely know that the stimulus

Speaker 1: bontilong run it would use stimulus sorry the body long running would use um values because the previous state it was not disabled it was not disabled there was no spinner but when you clicked on it the state changed you understand so you definitely know that you have to use stimulus um values there. So yeah, if it's an actionable implementation, like performing an action, find out which action. And if there is a target that that action affects just like in the button log running you click on the button it changes the the text content of the emphasized element It could be saved. The test content before could be saved and then when you click on it, it changes to saving. So you have to like notice all those things.

Speaker 1: You understand? before you start writing out the code so that it will be easier for you. You can just probably take a pen or paper and then note those things down. So that when you start coding them out in TypeScript, it will be easy then convert the implementation to type script for stimulus. So we are using TypeScript because Stimulus has um a first class um a first class um It's it supports TypeScript and when you are using TypeScript it's you have um less probability of making errors because of the type checking Then I'm going to explain this implementation I did before, I think last week, W slog. So this is where it's being used in the code base

Speaker 1: It's used in the page edits under the promotes tab here So what what it does is that once you enter a test here And then you move out of focus on this impute element. It slogifies it in the sense that it had these dashes. to it you understand so the previous implementation before use a jQuery approach and the function was being called globally which is something that we are trying to avoid because Calling all the functions globally, like actually add more complexity to the code. So as you can see from here, it's using a blur

Speaker 1: event. It's an actionable uh It's an actionable controller in such a way that when you move away from the element, which is the inpute element, this function is actually being run, which is this. value clean for slog the cleanforce log is a util is the one that actually adds that dash it's it's a regist uses registers function so it's the one that actually adds that um dash to the impute value So you can see the previous implementation HTML here. It has the name, area, attribute, the mass length, the required Now see the the the

Speaker 1: stimulus based um approach. So what we did was we um checked found out if the um implementation would actually need to use stimulus um values we should find that yes it's it's using stimulus value because there's a previous state and there is an after state So the values that we added there is the allow unicode. The allow unicode is to check if the value has a unicode value. And then it allows it, which is its default force, or it does not allow sorry does not allow it, which is its default force, or it allows it So then remember it's an actionable element, which means you have to

Speaker 1: um you need to have a method that is going to be called when that event occurs which is this logify method here. So what this logify method does is that this dot element dot value is grabbing the instance like the instance of that um element that the data controller is on. So it's grabbing the value of the element and then it's It runs this utility, which is this claim for slow. Then the first argument here is this dot value. trim So it's getting the value of the element, yeah, and then it's streaming it, streaming the spaces at the front and at the back of the value. Then remember the static values that we called before allow Unicode value.

Speaker 1: So these Unicode logs taking the value, this dot allow unicode value. So it could be false, it could be true. Now see the resulting HTML. You can see that it's it's way simpler. We have the data controller which is the W slug. the data action which is or the action the event that happens the blow event then the identifier name w blow then the method that is being called when that event happens, which is the solify method here. So uh if you are interested in contributing to the stimulus and what they will first of all uh you set up your code base

Speaker 1: if you are a new contributor during the process of the setup you might run into some issues so you can come to the new contributors channel and ask questions there and there are a lot of people that will be excited to answer your questions. Then from there on you can decide to get involved by picking up an issue in work too. So like there are a lot of issues um on stimulus that has been created recently and most of them are beginner friendly like this replace mouse drug with stimulus it's an issue that is very easy So you can decide to like you can check out all these issues. Can check out these issues See if you are interested in it or you feel it's something that you can do and then you start working on it.

Speaker 1: So you can also follow me on Twitter. This is my Twitter Andle. And this is the link to the slides. Let me post it here. In case you need the links to these issues later on. So thank you so much for listening. If you have any questions, please ask. Thank you.

Speaker 2: Thank you. Thank you, Loveth.

Speaker 1: Thanks, Devo.

Speaker 2: I have a quick question for you. That's okay. It's something that I actually never got to try myself, so maybe you know. Um you know when you have um an action in stimulus, you give it the event name and then the controller and then the method.

Speaker 1: Can you

Speaker 2: can you use that outside of the controller like for example let's say that um I have a counter displayed in uh left of the page and then I have a button to increment in the right of the page Am I allowed to create an action on a controller from outside of the controller?

Speaker 1: Okay. Stimulus uses uh yeah, something called a scope in Stimulus. So any element that has the data controller attributes, all the children of that element can be manipulated using stimulus. But once the element is outside of that scope. Let's say we have a div and that div has um five children. But once you move away from that div that has the data controller, you are not able to use um stimulus on any of them.

Speaker 2: Thanks, Kutuna.

Speaker 1: So any other question?

Speaker 3: Do you have time to walk through one of the test files? Like what's the strategy for for the tests and for example the the one you just uh um You just showed us the code for doing. Can you show us the test code for that?

Speaker 1: Yeah, yeah. I I actually forgot about that. So let me do that now. I mean I I wrote the test for that before, but let me remove everything. Okay, so we use um jest for testing and stimulus So uh first of all, we need to know how the HTML actually looks like for the controller, which is this. So what you just need to do is you can copy it

Speaker 1: So you access the document dot body dot in our HTML because we want we are trying to mock um the DOM element inside of this test environment. So this is it. Now we have added this uh this element, this whole element inside of the document, which means we can We are able to query select all any of the elements later. So once you've done this Increment

Speaker 1: button

Speaker 1: This

Speaker 2: love is frozen. Oh is it me. Oh damn I'll give her a couple of minutes and if she's not back around, I'll talk you through one of the test cases we worked on together.

Speaker 3: Oh, we're waiting. I had another one.

Speaker 2: Can't hear you since I 'm muted.

Speaker 3: Uh sorry. The when we when she was demoing the console was logging all the um JavaScript events. How how how did that get set up? Is that something that that our uh um ragtail infrastructure currently does or did she turn that on somehow?

Speaker 2: Yeah exactly. She turned it uh we turned it on um in the stimulus configuration. It's the the stimulus debugger. I'll show you that now while we wait for Loth to be back and uh give you a bit more of a tour of the

Speaker 3: Yeah, that looked so helpful.

Speaker 2: Just pinning up a bit which files I have opened. So we're inside the what is client subfolder, which is all things JavaScript and CSS, and we have SRC, and then in there we have controllers. That's all the stimulus things. In the index file we have a definition of all of our controllers and if I check where this is used I see our stimulus initialization function. Then if I check that I see

Speaker 2: that we have debug mode turned on right there So it doesn't log in um live Wagtail instances, but if it will log if you're um if you're a dev contributing to Wagtail Um and then your question about uh about the testing, so I'll get back to my list of controllers. For each of them, we follow the same convention as we we have with React code where The the actual code of the widgets is written in TypeScript and then we have a separate . test file for unit tests. and a separate .

Speaker 2: stories file for storybook visual testing, which I don't think I'll demo right now. So if we look at the. test file I forget how much how much Love had said before she dropped off, but um we have this describe block, so that's uh coming from um testing every called gest which defines the the structure of our test cases so always at the top is the name of the controller that we're testing And then I think right before she dropped off, she mentioned that we have to mock the the DOM. So we have to mock the HTML of the page that we're going to test. So in this case, before each of our test cases for stimulus, we always set the document body to contain this form

Speaker 2: element which has one element inside it that uses our controller. So here the controller is called auto field. And this controller is a relatively simple one, similar to the one she was demoing with the increment, where there's a single action. So here the action hooks into the change event. and on that auto-field controller calls its submit function just like she would call the um increment function on the click event in her example Then if we look at uh the specifics of the code a bit more, something else we have to do before before every um

Speaker 2: test case is to start stimulus. Feels a bit silly to mention, but you know, it's needed. And as well as start it, we have to register the um controller. So I I don't recall her demoing that earlier today in Wagtail itself and outside as well, whenever you make a controller with stimulus you always have to register it so that you know stimulus knows what's loaded on the page right now. And then we can write the actual test case. So I'll just uh skip over those bits for now and show you what's left. Um here our test case is as simple as we know what's what event

Speaker 2: is um gonna be uh firing our our submit method so we're gonna simulate that event on the elements we want to use and there's there's literally nothing specific to stimulus here we're just using And they are JavaScript DOM APIs that allow you to interact with the elements on the page regardless of which framework they are built with. And um so in this specific test case, what matters to us is that this request submit function has been called And we also check what it's been called with because that's the specifics of how this controller works.

Speaker 2: Back to the increments you'd do something like uh oh I want to select my my button element and um For the button element, I want to simulate a click event. And then whenever there is a click, you'll want to inspect the DOM and check, oh yes, the value has been updated. So yeah, practically cool that there's nothing too specific to stimulus once you actually uh register the controllers. It's just you know vanilla JavaScript testing. It can be verbals, but at least there is no framework to learn. Does that help? Do you have other questions?

Speaker 3: No, that was that was great.

Speaker 2: Um

Speaker 4: and I guess at the moment we're still in the process of um really implementing stimulus in WhiteTalcore. But I guess I I believe the idea was also that we would give Entry points for plugin maintainers. Is there anything in place already? How would you register your own controller or it's just too early at the moment? Ah

Speaker 2: that's a good question, Loik. Um I'll have to look at the code to check. I I believe that right now it's still too early. But essentially we made sure that what we've built so far is built in a way that will allow this when the time is right. It's really more about you know documenting how to do it. So this in its stimulus function right now you can call it with any stimulus controllers definition, but in Wackel itself we only call it with um the ones we've built ourselves. Um oh the red is back Oh we can't hear you you're muted

Speaker 1: My wifi disconnected and I never noticed.

Speaker 2: Oh no.

Speaker 3: Oh no.

Speaker 2: You were probably wondering why we were so silent.

Speaker 1: Yeah. Oh my goodness.

Speaker 2: I just um we just talked through an example of how to write tests with the auto field controller. And um Loic was asking um whether we already support people creating their own controllers and the short answer is no unfortunately. But I don't think we're far off at all. It's just felt safer to try it out proper first before we um have other people use this.

Speaker 1: Yeah

Speaker 3: Well, it looks fantastic. I'm excited.

Speaker 2: Cynthia had also asked Loveth about um the debugger in uh console log that shows the controllers and um which actions have been triggered. I just mentioned how it's set up in in um stimulus. Do you want to say anything else about that?

Speaker 1: Do you mean when the control I stance gets initialized in the console?

Speaker 2: Yeah, and I think you can view whenever there's an action that's created as well.

Speaker 1: Uh yes, let me see. Mm-hmm. Come in, let me share my screen. Yeah,

Speaker 2: begin to know if you if you end up ended up using this a lot or whether it's just, you know, like now and then.

Speaker 1: Are you talking about this?

Speaker 2: Yep

Speaker 1: Oh okay, yeah. Yeah, I mean I mean when I first started um contributing to stimulus I had a lot of issues So I never actually realized when the controller instance got connected to the DOM or whether it was working or not. So this is like a way for you to know How many controllers are working on this page? So as you can see from here, one, two, three. There are three controllers that are on this page. The first is this keep link when you click on the tab and then you can see the the the focus move to this um button element That is the first controller that is on this page. The next is the increment button, which is what we created during this call, while the other is the upgrade,

Speaker 1: which is this one here So it's it lets you know um anytime that a controller um is connected to the DOM in a particular page and when I click here you see that it it it actually also lets you know that okay hey you've just clicked here this controller you've you've called the method on this button you've called the controller method which is the the data action method on this button, which is this increment here, and this is the identifier. So it's actually a pretty important thing if you are not actually sure about the fact that um your code has been added properly inside of the the WackTales code base if it's not been linked properly. So you can come here to check if it's If it's if it has been connected to the DOM, then if it hasn't, then you have to like go through what you've done to see if you made any error

Speaker 1: somewhere.

Speaker 2: I see there are lots of questions in the in the chat. Abraham Jude, I think quite a bit of presentation today was about what stimulus is all about, if I'm honest. So I think it would be better for you to see um the recording which we'll share uh hopefully hopefully by the end of the day um and if not tomorrow. Do you want to take um Suiashi's question, Lovet?

Speaker 1: Uh uh okay, so I think I don't remember exactly the version that stimulus got introduced into Waghill. But if you are using the the current version, like everything should work. And then you don't need to install any dependency for stimulus. You don't need to install anything because everything has already been installed. Like everything is already inside of the code base you understand so what you just need to do is you just need to um if you create a new controller you just need to add it to the index or type script inside of the um controllers folder and it will be connected so you don't need to install anything again you understand like everything has been fixed and be set up to like

Speaker 1: to work

Speaker 2: Yeah, I believe the version is folder too, so it would make sense that it fails in older versions. If I recall, we had been discussing stimulus from more than a year ago as a solution for our needs. And then it's only as part of the preparation steps for this internship that we actually merged Stimulus as a framework into the um the CMS. Okay. Should we leave it there?

Speaker 1: Yeah, I I think so.

Speaker 2: Thank you again, Navice.

Speaker 1: Alright, thank you, Tebu. Thanks, guys.

Speaker 3: Thanks for everybody. Really, really appreciate the intro.

Speaker 4: Bye bye.

Speaker 2: Yeah, bye.

Speaker 1: Bye. Hope you took a screenshot. Oh, he has left. Um Pat you did take a screenshot. Yay. Okay Uh okay, yeah, um see yeah I sh okay The I think the challenge that we actually like trying to fix with stimulus is because there are a lot of um window globals and then A line scripts inside of the code base. And what this actually like does is the fact that it's it's It reduces the it increases a lot of complexities inside of the code and it's like very difficult

Speaker 1: to improve It's very difficult to maintain and improve over time, just like the issue we are experiencing now in editor. js. So and yeah, it's also difficult to uh maintain over time, so which is why we are trying to introduce a simpler and lightweight framework that is going to sort out these issues. So when we use stimulus, we are only working with data attributes We are working in the attributes in the sense that everybody is going to be coding the same way because the the class-based instance, the static values, the static class the static targets and it's going to be exactly the same method. It's just that it's probably the functions or the methods that you are creating inside of that class

Speaker 1: is going to be doing different things. But but that's just like basically the only thing that is going to be different for all stimulus controllers. You understand, but the data attributes that you are going to be adding to the HTML element is just basically going to follow the same format. So doing this would actually make it easier for developers to improve the code over time you understand so what I just need to do is I just need to locate the simulus controller file locate the metal make some changes to it. So I don't have to start initializing anything everywhere you get. So it actually like makes it easier for everybody, both the maintenance and the people that are coming in to contribute. So that sounds like your question.

Speaker 1: Alright, okay, no problem. So I'm leaving the call now. Um bye guys. Thanks.