WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.136 --> 00:00:03.046 align:middle I want to talk about Stimulus. 00:00:03.346 --> 00:00:09.356 align:middle Stimulus is a small, but delightful JavaScript library that I love. 00:00:09.626 --> 00:00:12.396 align:middle And Symfony has first-class support for it. 00:00:12.996 --> 00:00:16.536 align:middle It's also heavily used by the Ruby on Rails community. 00:00:17.526 --> 00:00:21.166 align:middle So there are kind of two philosophies in web development. 00:00:21.716 --> 00:00:25.246 align:middle The first is where you return HTML from your site 00:00:25.516 --> 00:00:28.336 align:middle like we've been doing on our homepage and browse page. 00:00:28.986 --> 00:00:32.406 align:middle And then you add JavaScript behavior to that HTML. 00:00:33.586 --> 00:00:37.796 align:middle The second philosophy is to use a front-end JavaScript framework 00:00:38.056 --> 00:00:40.836 align:middle to build all of your HTML and JavaScript. 00:00:41.506 --> 00:00:43.706 align:middle That's a single page application. 00:00:44.636 --> 00:00:49.446 align:middle The right solution depends on your app, but I strongly like the first approach. 00:00:49.906 --> 00:00:55.606 align:middle And by using Stimulus - as well as another tool we'll talk about in a few minutes called Turbo - 00:00:55.906 --> 00:01:02.396 align:middle we can create highly-interactive apps that look and feel as responsive as a single page app. 00:01:03.296 --> 00:01:07.666 align:middle We have an entire tutorial on Stimulus, but let's get a taste. 00:01:08.596 --> 00:01:11.596 align:middle You can already see how it works in the example on their docs. 00:01:12.236 --> 00:01:15.606 align:middle You create a small JavaScript class called a controller... 00:01:15.906 --> 00:01:20.616 align:middle and then attach that controller to one or more elements on the page. 00:01:21.316 --> 00:01:22.506 align:middle And that's it! 00:01:23.026 --> 00:01:28.356 align:middle Stimulus allows you to attach event listeners - like click events - and has other goodies. 00:01:29.196 --> 00:01:33.956 align:middle In our app, when we installed Encore, it gave us a controllers/ directory. 00:01:34.116 --> 00:01:37.376 align:middle This is where our Stimulus controllers will live. 00:01:37.376 --> 00:01:41.776 align:middle And in app.js, we import bootstrap.js. 00:01:42.436 --> 00:01:47.266 align:middle This is not a file that you'll need to look at much, but it's super useful. 00:01:47.866 --> 00:01:53.396 align:middle This starts up Stimulus - yes, it's already installed - and registers everything 00:01:53.396 --> 00:01:56.546 align:middle in the controllers/ directory as a Stimulus controller. 00:01:57.186 --> 00:02:00.306 align:middle This means that if you want to create a new Stimulus controller, 00:02:00.756 --> 00:02:04.506 align:middle all you need to do is add a file to this controllers/ directory! 00:02:05.026 --> 00:02:09.206 align:middle And we get one Stimulus controller out-of-the box called hello_controller.js. 00:02:09.876 --> 00:02:13.836 align:middle All Stimulus controllers follow the naming practice of something 00:02:13.946 --> 00:02:18.596 align:middle "underscore" controller.js or something dash controller.js. 00:02:19.146 --> 00:02:25.046 align:middle The part before _controller - so hello - becomes the controller's name. 00:02:26.086 --> 00:02:27.786 align:middle Let's attach this to an element. 00:02:28.696 --> 00:02:31.886 align:middle Open up templates/vinyl/homepage.html.twig. 00:02:32.956 --> 00:02:33.706 align:middle Let's see... 00:02:33.706 --> 00:02:37.756 align:middle on the main part of the page, I'm going to add a div... 00:02:38.136 --> 00:02:44.276 align:middle and then to attach the controller to this element, add data-controller="hello". 00:02:46.616 --> 00:02:47.846 align:middle Let's try it! 00:02:49.146 --> 00:02:50.346 align:middle Refresh and... 00:02:51.046 --> 00:02:52.746 align:middle yes! It worked! 00:02:52.986 --> 00:02:56.826 align:middle Stimulus saw this element, instantiated the controller... 00:02:57.306 --> 00:03:00.256 align:middle and then our code changed the content of the element. 00:03:01.506 --> 00:03:07.296 align:middle The element that this controller is attached to is available as this.element. 00:03:08.076 --> 00:03:11.246 align:middle So... this is already really nice... 00:03:11.536 --> 00:03:15.276 align:middle because we get to work inside of a neat JavaScript object... 00:03:15.386 --> 00:03:17.876 align:middle which is tied to a specific element. 00:03:18.426 --> 00:03:24.116 align:middle But let me show you the coolest part of Stimulus: what makes it such a game changer. 00:03:25.136 --> 00:03:28.236 align:middle Inspect element in your browser tools near the element. 00:03:28.386 --> 00:03:32.656 align:middle I'm going to modify the parent element's HTML. 00:03:34.136 --> 00:03:36.796 align:middle Right above this - though it doesn't matter where - 00:03:37.146 --> 00:03:41.526 align:middle add another element with data-controller="hello". 00:03:44.776 --> 00:03:46.726 align:middle And... boom! 00:03:47.046 --> 00:03:48.546 align:middle We see the message! 00:03:48.866 --> 00:03:51.516 align:middle This is the killer feature of Stimulus: 00:03:52.226 --> 00:03:57.996 align:middle you can add these data-controller elements onto the page whenever you want. 00:03:58.696 --> 00:04:01.736 align:middle For example, if you make an Ajax call... 00:04:01.976 --> 00:04:09.406 align:middle which adds fresh HTML to your page, Stimulus will notice that and execute any controllers 00:04:09.406 --> 00:04:12.506 align:middle that the new HTML should be attached to. 00:04:13.316 --> 00:04:18.576 align:middle If you've ever had problems where you add HTML to your page via Ajax... 00:04:18.726 --> 00:04:22.426 align:middle but that new HTML's JavaScript is broken 00:04:22.776 --> 00:04:27.726 align:middle because it's missing some event listeners, well, Stimulus just solved that. 00:04:29.026 --> 00:04:34.046 align:middle When you use Stimulus inside of Symfony, we get a few helper functions to make life easier. 00:04:34.496 --> 00:04:38.746 align:middle So instead of writing data-controller="hello" by hand, 00:04:39.106 --> 00:04:42.456 align:middle we can say {{ stimulus_controller('hello') }}. 00:04:43.626 --> 00:04:48.446 align:middle But that's just a shortcut to render that attribute exactly like it was before. 00:04:49.396 --> 00:04:54.846 align:middle Ok, now that we have the basics of Stimulus, let's use it to do something real, 00:04:55.306 --> 00:04:59.186 align:middle like make an Ajax request when we click this play icon. 00:04:59.706 --> 00:05:00.706 align:middle That's next.