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.

Transcript

1. With your friend Ryan Weaver Hands on with LiveComponents, AssetMapper, Stimulus & Turbo @weaverryan
2. > 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
3. Complexity Solution Unlearning @weaverryan
4. Rounding Corners with Images
5. Complexity
6. Solution .button { border: 1px solid #000; border-radius: 3px; }
7. Unlearning
8. 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
9. Solution? Node & npm Webpack Automate the corner images!
10. Faster Automatic Rounded Images esbuild Vite
11. Solution?
13. HTTP/2
17. Unlearning
18. Combining fi les to limit requests JavaScript build system & rewriting our code Node, node_modules
19. #NoBuild
20. Asset Mapper @weaverryan
21. Asset Mapper 2 Features @weaverryan
22. 1) Asset Paths assets/images/greetings.png <img src="{{ asset('images/greeting.png') }}"> <img src="/assets/greetings-f7b9ce04a887a6851d1f58.png">
23. 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
24. // assets/app.js import JSConfetti from 'js-confetti'; const jsConfetti = new JSConfetti(); jsConfetti.addConfetti(); 2) Importmap
25. New in 6.4 CSS Support import '../styles/app.css'; // assets/app.js import('../styles/lazy.css'); import 'bootstrap/dist/css/bootstrap.min.css';
26. CSS Support
27. Build it if you need it ✅ Sass symfonycasts/sass-bundle ✅ Tailwind symfonycasts/tailwind-bundle ✅ TypeScript sensiolabs/typescript-bundle
28. Experimental stable: LTS @weaverryan
29. Stimulus WebpackEncoreBundle StimulusBundle @weaverryan
30. Turbo 8 Morphing View Transitions Strada (beta)
33. Demo? @weaverryan
34. 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
35. It takes a village @weaverryan
36. @hotwired/turbo @hotwired/stimulus symfony/ux 100+ contributors 100+ contributors 100+ contributors 864 commits this year! @weaverryan
37. Jakub Caban Tomas Norkūnas Bart Vanderstukken Matheo Daninos Jacob Tobiasz Maelan Le Borgne Nicolas Rigaud Jonathan Scheiber
38. Kevin Bond Twig/Live Component co-creator, testing tools, zenstruck
39. Simon André 1 million di ff erent things all over the place
41. Thank you! 30 days of LAST Stack https://symfonycasts.com/last-stack Free & Public through Jan 15th! @weaverryan