Modern UIs with UX, a little JS & Zero Node

Ready to build a highly-interactive, modern UI? Me too! But hold up, do we really need to install Node & Webpack to pull this off? Not anymore! With PHP, Twig, and just a pinch of JavaScript magic, we can create something truly special.

In this talk, we'll embark on a journey using the new Symfony UX experience, one *without* Node and Webpack. We'll conquer common UI challenges like modals, notifications, and filterable tables, wielding the power of Turbo & Stimulus while writing minimal JavaScript.

For the grand finale, we'll tackle the most interactive situations using only PHP & Twig, thanks to the LiveComponents. With *huge* changes over the past few months, this is finally ready for the big leagues.

Transcript

1. @weaverryan With your friend Ryan Weaver Modern UIs with UX, a little JS & Zero Node
2. > Member of the Symfony docs team > Husband of the talented and beloved @leannapelham symfonycasts.com twitter.com/weaverryan Howdy there!! I’m Ryan! > Author person at SymfonyCasts.com
3. Your new Build System: Your browser Part 1 @weaverryan
4. @weaverryan
5. export default class { constructor(name) { this.name = name; } quack() { console.log(`${this.name} says: Quack!`); } } public/duck.js
6. import Duck from './duck.js'; const duck = new Duck('Waddles'); duck.quack(); public/app.js This just works!
7. All browsers now support import, ES6 class syntax, etc** ** Ok, not IE11, but that is less than 0.5%!
8. So then… why do I need ANY tools?
9. Two Problems 1) Versioned Filenames 2) Importing 3rd Party Packages <link href="/assets/app.1234.css"> import 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/+esm';
10. Hello AssetMapper (Experimental in 6.3) Part 2 @weaverryan
11. Asset Mapper Part #1 of 2: Exposing & Versioning Assets @weaverryan
12. <img src="{{ asset('images/duck.png') }}"> <!-- renders as --> <img src="/assets/images/duck-3c16d9220694.png"> If my photo updates, my fi lename will update automatically!"
13. How… did that work? /assets/* is served by an internal Symfony listener dev: prod: Run php bin/console asset-map:compile to physically write all fi les into the public/assets/ directory /assets/images/duck-3c16d9220694.png
14. Asset Mapper Part #2 of 2: Importmap @weaverryan
15. How can we use 3rd party packages? @weaverryan
16. import { Alert } from 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/+esm'; const alert = new Alert(element); This works Yikes!
17. ???
19. Now this works ✅ import { Alert } from 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/+esm'; import { Alert } from 'bootstrap'; const alert = new Alert(element);
20. return [ 'app' => [ 'path' => 'app.js', ], 'bootstrap' => [ 'url' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/+esm', ], ]; importmap.php
21. {% block javascripts %} {{ importmap() }} {% endblock %} base.html.twig <script type="importmap">{ "imports": { "app": "/assets/app-4e986c1a2318dd050b1d47db8d856278.js", "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/+esm" } }</script>
22. import hljs from 'highlight.js/lib/core';
23. What about CSS? @weaverryan
24. /* assets/styles/app.css */ body { background: skyblue; } .quack { background-image: url('../images/duck.png'); } {% block stylesheets %} <link rel="stylesheet" href="{{ asset('styles/app.css') }}"> {% endblock %}
25. 3rd Party CSS? @weaverryan
28. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" > Not as smooth, but documented Or download into assets/vendor/, include & commit.
29. Sass? Tailwind? ✅ (see docs about building) JSX, Vue, TypeScript? ❌ (actually, yes, but a build system may be better) Production Ready? ✅ (and performant) Works on all browsers? ✅ (except for ancient browsers, like IE 11)
30. Does it combine and minify the assets?
31. No! By Design! Yay!
32. gzip/compress Assets Do it on your web server / Cloud fl are Combining Assets Not needed** Use an HTTP/2 powered web server / Cloud fl are ** not combining can even *help* performance: if a single fi le is changed, users will only need to download that one fi le.
33. Part 3 Turbo: You're Handier Than I Thought @weaverryan
34. Create rich frontends while minimizing the need for custom JavaScript Goal ✅ Asset Mapper: Ciao node! s Turbo + Sprinkle of Stimulus square Live Components
35. https://bit.ly/30-days-hotwire
36. Need: Even MORE demos on ux.symfony.com @weaverryan
37. @weaverryan Part 4 Symfony UX: 2.8 & 2.9
38. Symfony UX 2.8 @weaverryan
39. Two New Components symfony/ux-translator symfony/ux-svelte import { trans, NUM_OF_APPLES } from '../translator'; trans(NUM_OF_APPLES, { apples: 2 })
40. Live Components * Smart Rendering System 
 * Communication between components: emit() 
 * First class data serializing & invalid data handling 
 
 * … lot's more!
41. New Demos: ux.symfony.com/live-components @weaverryan
43. HTML Twig Syntax {% component Alert { type: 'success', closeable: allowClose } %} {% block body %}Quack!{% endblock %} {% endcomponent %}
44. HTML Twig Syntax <twig:Alert type="success" :closeable="allowClose" > Quack! </twig:Alert>
45. Symfony UX 2.9 @weaverryan
46. UX 2.9 StimulusBundle AssetMapper Support! {{ stimulus_* }} functions moved out of WebpackEncoreBundle and into StimulusBundle.
47. Yes, this means you can use Chart.js, LiveComponents, Autocomplete, etc entirely by writing PHP (no node!)
49. #[AsLiveComponent()] class DonutChart { use DefaultActionTrait; #[LiveProp(writable: true)] public int $slices = 5; public function __construct( private ChartBuilderInterface $chartBuilder, ) { } public function getChart(): Chart { $chart = $this->chartBuilder->createChart('doughnut'); $chart->setData(...); return $chart; } }
50. <div {{ attributes }} > How many slices? <input data-model="slices"> {{ render_chart(this.chart) }} </div>
52. We've come a long way… @weaverryan
53. Symfony Cat Barcelona 2016
54. That's no longer a given! @weaverryan
55. Browsers Importmaps, import, ES6 features HTTP/2 Requests download in parallel AssetMapper Asset versioning + Extra DX
56. RIP Build Systems? React, Vue, Next.js, etc Tailwind / Sass TypeScript use their tools to build use its tools to build best served using their build system / a build system
57. Hotwire: HTML over the Wire Alternative Path HTML in templates , 0 Node , low custom JS
58. AssetMapper ❌ build system / node Symfonycasts tutorial coming this month!
59. Turbo Remove full page reloads & more* https://bit.ly/30-days-hotwire SymfonyCasts.com/turbo ❌
60. Stimulus A sprinkle of custom JavaScript SymfonyCasts.com/stimulus 🧁
61. LiveComponents Swiss-Army Knife: Make your Twig templates reload live on the site. 🗡 Symfonycasts tutorial coming soon!
62. Thank you! @weaverryan Symfony UX ux.symfony.com Turbo Tutorial symfonycasts.com/screencast/turbo Stimulus Tutorial symfonycasts.com/screencast/stimulus