I love Symfony UX. And last week during Symfony World Online, I had the pleasure to talk about it and reveal several new things that we're super excited about!
Note
To get all the details, we've made the Symfony UX: New Components, Live Twig & More Updates available for anyone to watch free.
But first, What is Symfony UX? anyways? I've come to this short definition. It's (1) a Stimulus integration with your app & (2) a plugin system for extra Stimulus controllers to solve common problems, like rendering charts, cropping images and more.
18 months after Symfony UX was still released, we're adding new UX packages to solve new problems. In fact, we've just released four new components:
- symfony/ux-react: render React components (and pass props) from Twig
- symfony/ux-autocomplete: transform
ChoiceTypeandEntityTypeinto Ajax-powered autocomplete fields - symfony/ux-notify: send native browser notifications from PHP via Notifier
- symfony/ux-typed: a delightful library that... types!
But, as much as I love Symfony UX, I think we've done a poor job talking about and promoting it. After all, JavaScript tools are meant to be seen and played with!
Enter: ux.symfony.com
To solve this, we've just launched https://ux.symfony.com: a playground for
touching and sampling each UX component. See what it feels like to work inside
a <turbo-frame> or send real-time page updates with Turbo! Try out the
Ajax-powered autocomplete component, see a React component rendered in Twig
or try the Image Cropper in real life.
One of the most interesting sections is about Live Components: a "Swiss army
knife" library that allows you to create highly-interactive interfaces with zero
JavaScript. We've already released several demos that show the power of this
component, including rendering CollectionType forms (with add/remove buttons),
"dependent form fields" and real-time form validation entirely by writing
PHP and Twig: no custom JavaScript needed.
The new ux.symfony.com site itself is also open source and written using all of the UX tools. It's another great way to see real code behind solving real problems.
Have fun!
Hello,
that's incredible news, the webpage looks amazing!
A minor bug report: Go to https://ux.symfony.com/, click Swup Integration, click the back button in the browser and then click Swup Integration again. The "/swup" slug just shortly appears in the URL and is gone again, the Swup Integration page is not shown at all (only the first time, before the browser's Back button).
Why this focus on a frontend framework that pretty much no one is using? The whole world is using React, Angular, Vue and Svelte, but Symfony is insisting on providing Stimulus as the framework of choice. Can you please elaborate why this choice was made rather than any of the three vastly more popular ones? I'm not counting Svelte in that question as it's a somewhat smaller framework in terms of users.
Hey @Ondřej Frei!
Ah, thanks - I'll check into that! We are "mixing" Turbo and Swup on that page (which normally makes no sense because they are technologies that do the same thing), so that might be causing an issue. If so, we can change to Swup only for that one page :).
Cheers!
Hey @Jeroen van den Broek!
That's a fair question :). React, Vue, etc are definitely hugely popular. But it's not accurate to say that the whole world is using them. For example, GitHub, StackOverflow, most news sites, etc are primarily "traditional" or "multipage apps" (MPAs) not SPAs. And there's a renewed debate about when and where an SPA is appropriate vs an MPA.
But, more importantly, it's Symfony! So you can do whatever you want. Symfony already has the tools needed for SPA's: you build an API (e.g. with API Platform) then build your frontend using the tooling from your library of choice (e.g. Svelte, React, etc). In this case, I wouldn't even use Webpack Encore: I would go "full in" on the tooling and project structure of your frontend framework (you could still do this in a mono repo if you'd like, however).
For the traditional apps (MPAs), which still (and will continue to) represent a large percentage of the projects, Symfony didn't really offer anything besides Webpack Encore. Stimulus is used by Hey.com and Basecamp (and the Ruby on Rails community in general) and fits beautifully into the MPA model. It's not the only tool that does this: it's a growing area. For example, GitHub itself has its own similar JavaScript tool: https://github.github.io/catalyst/
Anyways, I think this is a valid question to ask and get answered. The tl;dr is that (A) many apps are built as "multi-page apps" and will continue to be and that (B) Symfony should provide the tools necessary for both SPAs and MPAs (but SPA tooling is mostly already handled by the JS frameworks themselves).
Cheers!
@Jeroen as a full stack web developer, or if you work with limited resources (human too), Symfony UX try to power you with a very effective way to develop frontend features with less time & efford.
There are a lot of situations that product owner wants a cool user interface, and often as a web developer, you are involved with time consuming code related with browser side interactive or real time effects.
Hotwire (Stimulus) is a very cleaver approach to solve this kind of problems, check it out https://hotwired.dev
This is 🔥🔥🔥
I love this ! no secret => I go to watch SymfonyCast tutorials (all about Symfony UX).