Symfony UX: Stimulus

Symfony UX is all about helping you build better JavaScript interfaces faster.

The first piece of UX is Stimulus: a JavaScript library built around the idea that your server should return HTML. Stimulus gives you the ability to add JavaScript to any part of your page in an object-oriented way that you will love:

• Installing Stimulus & the Stimulus Bridge
• Stimulus controller basics & "instances"
• Adding targets and using actions
• Replacing a select element with a JS-powered color selector
• Managing "state"
• Stimulus values API
• Free Stimulus libraries! stimulus-use and stimulus-components
• The UX PHP packages: building chart.js in PHP!
• Using React, Vue or some other frontend framework
• Laziness: loading controllers lazily

By the end, you'll be able to build anything on your site with Stimulus. And once you have, you'll be ready to give your app a SPA (single page app) feel with Turbo!

• Symfony UX
• Setting up Webpack Encore
• encore watch & Code Splitting
• Stimulus Controllers
• Magic with Events, Properties & HTML from Ajax
• Targets: Finding Elements
• Actions: Listening to Events
• Bootstrapping a "Color Selector" Form Element
• Actions & currentTarget
• Element.dataset
• State in your Controller
• The Values API
• On Value Change Callback
• Search Suggestions
• Ajax with fetch(), Polyfills & async/await
• HTML-Returning Ajax Endpoint
• Stimulus Behaviors: stimulus-use
• Form Submit Confirmation Controller
• Making a Configurable, Reusable Controller
• Multi Controller Communication
• Listening to An Event From Another Controller
• Ajax-Powered HTML Updates & a CSS Transition
• Symfony UX & Chart.js
• stimulus-bridge: How UX Packages Work
• Extending a UX Controller
• React (or Vue) ❤️ Stimulus
• Pass Server Data Directly to React Props
• Webpack Bundle Analyzer
• Async/Dynamic import()
• Magic: Lazy-Loading UX Controllers
• Making your Custom Controllers Lazy
• Product CRUD
• Opening a Modal
• Loading a Form into the Modal
• Ajax-Submitting an Entire Form
• Correcting the Form Action & Preventing Default
• Ajax Form Response Status Codes
• Ajax Element Reloading Controller
• Dispatching an Event from modal-form
• Reusing the "Reload Content" Controller
• CSS Transitions with useTransition
• CSS Transition Classes
• Free 3rd Party Controllers!
• Using the autocomplete-controller
• Autocomplete with Transitions
• useTransition in a Neat, Reusable Module