Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

SymfonyCasts

Symfony UX: Stimulus

via SymfonyCasts

Overview

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!

Syllabus

  • 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

Taught by

Ryan Weaver

Reviews

Start your review of Symfony UX: Stimulus

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.