Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hands on with LiveComponents, AssetMapper, Stim...

weaverryan
December 08, 2023

Hands on with LiveComponents, AssetMapper, Stimulus & Turbo

Symfony UX is celebrating its 3 (!) year anniversary! And a lot has changed. Gone are the days of needing a big build system... or a ton of complex custom JavaScript to get that single-page-app experience. LAST stack - LiveComponents, AssetMapper, Stimulus and Turbo - offers an alternative that makes writing frontend code fun & productive again.

In this talk, we'll walk through the experience of building a modern web app with LAST stack. We'll see the latest changes to AssetMapper in 6.4 and see a bunch of real-world examples: building dynamic forms with zero JavaScript, modals, dynamic tables and more. Most importantly: we'll do this fast and *love* the experience.

weaverryan

December 08, 2023
Tweet

More Decks by weaverryan

Other Decks in Technology

Transcript

  1. > Member of the Symfony core team > Husband of

    the beloved @leannapelham symfonycasts.com twitter.com/weaverryan Howdy there!! I’m Ryan! > Father to Beckett… he's here!!! > Author person at SymfonyCasts.com (and occasional Mickey Mouse) > Hobbies: thinking about modals
  2. JavaScript's Rounded Corners __proto__ inheritance No import/export syntax HTTP/1.1 No

    3rd party package system avoid OO 10k line fi les CDN's & global variables combine fi les minimize requests
  3. Combining fi les to limit requests JavaScript build system &

    rewriting our code Node, node_modules
  4. 2) Importmap <script type="importmap"> { "imports": { "app": "/assets/app-bd158fb0cda965d22ba27e0b1ce53b58.js", "js-confetti":

    "/assets/vendor/js-confetti/index-1241…js" } } </script> New in 6.4 3rd party packages downloaded locally
  5. // assets/app.js import JSConfetti from 'js-confetti'; const jsConfetti = new

    JSConfetti(); jsConfetti.addConfetti(); 2) Importmap
  6. Build it if you need it ✅ Sass symfonycasts/sass-bundle ✅

    Tailwind symfonycasts/tailwind-bundle ✅ TypeScript sensiolabs/typescript-bundle
  7. 30 Days of LAST Stack Dec 1 - 31 AJAX

    SPA Toast Noti fi cations Modals Tailwind Popovers View Transitions Data Tables Reusable Twig Components Dynamic Forms https://symfonycasts.com/last-stack #NoBuild
  8. Jakub Caban Tomas Norkūnas Bart Vanderstukken Matheo Daninos Jacob Tobiasz

    Maelan Le Borgne Nicolas Rigaud Jonathan Scheiber