As we head into 2025, I've been thinking about how much I wanted to contribute to Symfony UX over the past year, but didn't quite get around to it. To compensate, I've decided to share my insights and experiences explaining Symfony UX components and tools through late 2024 in an X posts series. Here, I've distilled those thoughts into a single article to provide a clear picture of what Symfony UX is, why it's valuable, and how its components can make developers' lives easier.
What is Symfony UX?
Symfony UX bridges the gap between Symfony developers and the world of front-end development. It provides tools and concepts, including Asset Mapper, Twig Components, Stimulus, and Live Components, that streamline front-end tasks and make them more accessible to backend-focused devs.
With Symfony UX, we can create richer, more dynamic user experiences without the need for extensive front-end expertise. Let's take a closer look at some of the key features and components.
The Asset Mapper
The Asset Mapper is one of the most important tools in Symfony UX. But what exactly is it?
This component helps you manage front-end assets such as JavaScript, CSS, and images directly within your Symfony project, removing the complexity of traditional build processes. It simplifies the integration of assets and ensures that they're properly linked and served in your application.
How does it work without Node.js? Symfony UX leverages tools that are delivered as binaries, ready to use without the need for additional software. For example, the sensiolabs/AssetMapperTypeScriptBundle downloads the binary responsible for compiling TypeScript files into JavaScript, configures the process (via the asset-map:compile command), and... done! The same goes for SCSS and other tools.
Until you need to embed React, Vue, Svelte, or similar components, ask yourself: Do you really need a bundling tool for your Symfony project? If you're looking for an easier way to make your application more dynamic, consider using Hotwire-the core of Symfony UX!
Why use the Asset Mapper?
While the Asset Mapper has its limitations, such as less flexibility compared to standalone build tools, its advantages make it an excellent choice for many Symfony developers.
My thoughts and experiences: While exploring the Asset Mapper, I realized how much it reduces the entry barrier for backend developers who’ve traditionally shied away from frontend tools. Its simplicity aligns perfectly with the ethos of Symfony - empowering developers to focus on functionality without unnecessary complexity.
Twig Components. A new way to think about layouts
Twig Components revolutionized the way we approach rendering in Symfony. Essentially, a Twig Component is a service configured to render a specific template, bringing Symfony closer to modern front-end practices.
As you might imagine, until now, if we wanted to render something in the middle of a Twig-based page with some data, we could do so in at least two ways:
Pass all the necessary data from the controller down to our element.
Call {{ render(controller(...)) }}
The first way could be tedious; the second was, in a sense, something we could call a Twig component. However, it has its disadvantages. It's treated as a separate request, so any data we want to put into our rendered controller has to be passed explicitly as a query parameter. Not sexy at all.
But for years we've been using this approach in some places in Sylius because we had no better way to handle it. As you can see in the screenshots, it's easier to pass data to components because we can pass whole objects, while controllers can only take scalar or array data as query parameters.
Twig Components vs. Rendered Controllers
Previously, rendering dynamic content in Twig required either passing all data from the controller or using rendered controllers. While functional, these approaches could be cumbersome or limited in certain scenarios. Twig Components simplify this process by allowing developers to:
This shift makes Symfony templates more maintainable and aligns better with front-end standards. Additionally, Twig Components enable creating custom design systems by mapping HTML elements to reusable components.
Additional features exclusive to Twig Components
Moreover, we can create our custom design systems, for example, for every Bootstrap component, we might create a corresponding Twig Component! Instead of writing <button class="btn btn-primary">, we can create <twig:Button type="primary">.
Simple Twig Components (like our button) can be easily created with anonymous components. This feature allows us to tell Twig to map <twig:MyComponent> directly to a template, without creating a special service. For example, instead of writing:
<button class="btn btn-primary">Submit</button>you can define:
<twig:Button type="primary">Submit</twig:Button>This approach enhances consistency and reusability across projects.
Code Example: Here’s how you can define a custom Twig Component:
<twig:Alert type="info" />This simple syntax encapsulates functionality and style, making your templates easier to read and maintain.
My thoughts and experiences: Incorporating Twig Components into my workflow felt like unlocking a new level of productivity. It changed the way I thought about templates and encouraged a modular mindset. The ability to pass whole objects instead of just arrays was a game changer, especially for complex data structures.
Stimulus. Bridging backend and frontend
Stimulus is another jewel in the Symfony UX toolkit. It's a lightweight JavaScript framework designed to add dynamic behavior to your application with minimal code and no complex build processes.
Below is a sample code that we can find on both the React and Stimulus pages. As you can imagine, your Symfony application already exists. Without rewriting your entire application to React, you can simply add Stimulus to your page.
For example, in Sylius, we use Stimulus to display form errors dynamically. By leveraging lifecycle events like initialize and connect, we can handle DOM changes efficiently, whether during a full-page reload or through AJAX updates.
How does Symfony UX use it? Stimulus is the heart of Symfony UX. You can find it in almost any Symfony UX package! The main goal of Stimulus in Symfony UX is to provide binding, so once we mark a div with data-controller="symfony--ux-chartjs--chart", it will initialize Chart.js in it.
Moreover, Symfony UX takes this integration to a higher level. Instead of writing the data-controller="..." manually, it provides Twig functions like render_chart(...). So, rendering a chart is as simple as you might see on the example below.
Benefits of Stimulus:
Code Example: Here’s a snippet showcasing Stimulus lifecycle events:
initialize() {
console.log('Initializing the Stimulus controller!');
// Declare a mutation observer
}
connect() {
console.log('Stimulus controller connected!');
// Check for the first time when mounted
}And using the stimulus_controller helper in Twig:
{{ stimulus_controller('CompoundFormErrors') }}
While it may not replace more comprehensive frameworks like React or Vue for complex front-end needs, Stimulus is perfect for improving UX in Symfony projects without a dedicated front-end team.
My thoughts and experiences: Stimulus impressed me with its balance of simplicity and power. It's especially appealing to backend developers like me who want to improve UX without diving into the complexities of modern frontend frameworks. Its seamless integration with Symfony makes it an obvious choice for many scenarios.
Live Components. Real-time interaction made easy
Live Components take dynamic user interfaces to the next level. They enable real-time interaction without the need to write custom JavaScript. In Sylius, for example, we use Live Components to perform tasks such as
Code example: Previously, dynamically updating statistics required about 160 lines of JavaScript. Now, with Live Components, it's reduced to 0 lines of custom JS, using pre-built functionality instead. This functionality allows developers to build feature-rich interfaces using only PHP and Symfony UX tools.
My thoughts and experiences: Live Components blew me away with its ability to create real-time interactions using only PHP. I used them extensively while working on the Sylius 2.0 admin panel and the results were both efficient and elegant. These components truly democratize frontend capabilities for backend developers.
Lessons learned and what’s next
Reflecting on this journey, Symfony UX has proven to be an invaluable addition to the Symfony ecosystem. It provides backend developers with the tools to create dynamic and usable interfaces without having to dive deep into frontend technologies.
As I shared my knowledge through daily posts on X, I realized how much Symfony UX simplifies the development process. It's not just about the tools, but how they inspire a more structured and modern approach to building applications.
In the future, I plan to learn more about Symfony UX and share those insights on my blog. For now, if you're interested in learning more, I encourage you to check out these resources:
I hope this article inspires you to explore Symfony UX and its potential to simplify and enhance your projects. Let me know your thoughts or questions in the comments below!