Symfony UX 2.0: What's new from the design initiative

Online since 2005, Symfony is an open-source framework that has positioned itself among the favorites of developers. It is made up of PHP components designed to develop robust and high-performance web applications in an agile way. It speeds up the tasks of the developers so that the process is effective. It has several tools, such as the celebrated Symfony UX.

What is Symfony UX?

Symfony UX is an initiative of this framework in which it provides a bridge between Symfony and the frontend of the application. It is very versatile since it is not linked to any framework, so it can be used with React, Vue, or Angular since it is based on the HTML standard.

It is made up of three main components:

• Symfony and Stimulus integration, giving a new organization for the JS code.
• Automatically update Symfony Flex and Webpack dependencies, so we automatically keep dependencies up to date in both contexts.
• Packages in the core of UX that allow developing interfaces quickly.

Symfony UX 2.0: what's new in this initiative

Recently, on his official page, Ryan Weaver, a member of the Symfony team and developer of the framework, commented on the changes in Symfony UX, saying “Symfony UX is an initiative and set of libraries centered around the Stimulus JavaScript library. And I am pleased to announce several new releases: Version 2.0 of all symfony/UX libraries, Version 3.0 of @symfony/stimulus-bridge, and Version 2.0 of @symfony/stimulus-testing.”

There are 3 big changes with the new releases of Symfony UX

Support changed from spur to @hotwired/stimulus

Ryan Weaver himself commented on the four big changes to the tool, starting with perhaps the biggest of all: support for stimulus was removed and replaced with @hotwired/stimulus (i.e. version 3 of the library) “This difference will not be noticeable in your applications, except that you will need to adjust the import {Controller} of the "stimulus" lines in your code."

Removed support for IE11

Ryan continues, “Version 3 of Stimulus removed support for IE11. We did the same thing in our Symfony UX libraries and introduced a new build system. The result is smaller final JavaScript sizes. If you need to continue to support IE 11, use Stimulus 2 and the earlier version of the UX libraries."

Data- Attributes changed to values ​​API

The UX packages that allowed adding data attributes by setting a few things have been replaced using the Stimulus Values ​​API, a slight improvement. The code looked like this:

{# Code for the old, 1.x version #}
<img
    src="{{ asset('image/small.png') }}"
    {{ stimulus_controller('symfony/ux-lazy-image/lazy-image') }}
    data-hd-src="{{ asset('image/large.png') }}"
/>

And now it should be updated to look like this:

{# Code for the new, 2.x version #}
<img
    src="{{ asset('image/small.png') }}"
    {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
        src: asset('image/large.png')
    }) }}
/>

These changes have improved the user experience of Symfony UX and continue to position it as one of the best tools when it comes to designing the interface of an application or a web page.

Advantages of Symfony to create web pages and applications

Symfony stands out against other popular frameworks. It is flexible and offers projects that work better and for longer. Beginning developers also benefit from Symfony, as it is easy to get started and requires twice less memory than other frameworks.

Creating functionalities (plug-ins) and keeping them in your interface to be used in other different projects represents a great advantage that allows developers and companies to save time and resources.

At Rootstack, our developers have solved several problems for our international customers with Symfony. To become part of this talented and multicultural team, click here and take the first step towards a bright future.

We recommend you on video