How Symfony UX United Two Worlds
For many years Symfony applications had poor front-end side, with assets put directly into the public directory, without any modern toolset. Now, we have a Symfony UX. But what exactly is Symfony UX? How it revolutionized Symfony apps? Let’s take this journey together!
The beginning
In 2017 Symfony UX started forming, but it was not named Symfony UX those days. In 2017 Symfony created a core element of Symfony UX, which is Symfony Webpack Encore consisted of two packages: symfony/webpack-encore-bundle (back-end part) and @symfony/webpack-encore (front-end part). The goal of these two packages is to make integrating with Webpack easier. It does not do much, as it only provides better configuration experience and loads the right files in the Symfony application, but it is enough.
Borrowing is cool
Along the Encore, in the era of SPA, Symfony has chosen something different than typical front-end framework or library like Angular, Vue or React. What did Symfony pick? Stimulus. What is Stimulus? It is a JS framework with a pretty stable position in Ruby on Rails community. It does not offer the experience you might know from other frameworks, but it is better than nothing, and also is a pretty good entry point for moving away from Twig-based projects. You can read more about Stimulus by going to its official site.
Christmas gift
In December 2020, Symfony announced Symfony UX. But still, what is Symfony UX. Is it a new framework? Maybe new library? Nope. Symfony UX is a “code name” for a set of libraries solving the most common cases like drop zones, charts or lazy loading images. But how Chart.js from Symfony UX is different from the classic Chart.js? Under the hood it is the same Chart.js library. The only difference is how we install it, configure, and use it. Every of these steps is simplified and adjusted to Symfony’s “way of doing things”.
Finishing touches
18 months after our Christmas gift, ux.symfony.com has been announced, along with four new components. What is more important, one of these components was a component allowing to render React components. Another interesting one was Live Component, allowing to build independent Twig components wired with their own service class. What is it such exciting for me? No more passing data down to the right component, we can inject a repository to the service class and gather the data we need.
Booooring, show me the code 👨💻
This journey despite having no code example is a crucial part of a bigger adventure. I wanted to make sure you know what Symfony UX is, before we dive into more technical aspects. In the following days I am going to create two additional articles, one about Symfony UX in Symfony apps, and another one for Symfony UX embedded in Sylius. Despite Sylius technically is a Symfony, we need to make few additional steps to improve our front-end stack in Sylius 💃.
So, what I want you to remember:
- Symfony UX is not a thing itself, it is a set of packages integrating some JS libraries with Symfony
- Thanks to Symfony UX packages, we are able to render React, Vue and Twig components easier
- Symfony UX can be a great step in transition from Twig-based project to a SPA one
Thanks for reading, and see you in a more code-rich articles soon. As always, I am reminding that you can find me here:
- Twitter 👉🏼 https://twitter.com/jakub_tobiasz
- Mastodon 👉🏼 https://phpc.social/web/@jakubtobiasz
- GitHub 👉🏼 https://github.com/jakubtobiasz
