Finding a front-end for Symfony

My graduation thesis focused on finding a standalone front-end that fit perfectly with Symfony. The company had decided to move to an API-first architecture, removing Twig from the equation. During my research, I conducted a survey with Symfony Slack community to find out what kind of front-end tools were tried and tested by the community.

With a whopping 195 replies, the survey was extremely helpful for my research, so I’d like to give back by sharing the insights that resulted from the survey.

The data mostly speaks for itself, but there are some additional notes for each graph.

First, some general statistics

Most of the respondents were back-enders, but quite a significant amount of full-stack devs.
Most developers have between 3 to 5 years of experience with Symfony, but there are some 10-year veterans.
Mostly fours and fives, impressive, most impressive.
Most of the community uses Symfony for a REST API and a front-end with Twig

Up next, let’s focus on those using a separate front-end stack with Symfony as backend

What are the reasons for using a standalone front-end over Twig?

  • A separation of concerns
  • The API created can be used by other platforms besides the front-end (like an app)
  • Single Page Application is preferred over Twig
  • The ability to hire dedicated front-end developers from a significantly larger hiring pool
  • To scale and deploy the back-end and front-end separately

The general consensus seemed to be that the ability to develop the back-end and front-end separately was the major advantage. Using a separate stack for your front-end also provided more flexibility due to the wide variety of front-end frameworks available.

What front-end tools are used in combination with Symfony?

As expected, REST API is still in the lead by a stretch
Front-end components are rather popular, and are becoming the standard when building a modern front-end
ES6 has overtaken “Plain JavaScript” and Typescript also has solid backing
In front-end community, React is in the lead by a stretch, but among the Symfony community, there’s a large backing of VueJS. VueJS and React were both popular due to their flexibility and great view management.
As expected, SASS has the lead for styling. Bootstrap is quite popular, because of it helps with building application layouts.
Webpack has a slight advantage over NPM, with the older tools like Gulp and Grunt losing ground.
Well. This one kinda speaks for itself. UI testing is not popular, but the three major tools are about equal in popularity.

The perfect stack

As expected, there is no one perfect stack that fits with Symfony. You need to figure out what works with your development workflow and application.

However, if you were to base a front-end workflow on the most popular tools according to this survey, this would be the stack:

The stack would be centered around the framework React with components build using JavaScript’s ES6 and SASS. The stack would be build using Webpack and would not include UI testing. The communication would be based on REST API.

Hopefully, this gave some interesting insights into the front-end stacks behind Symfony applications. If you are looking for some more quantitive data about the tools used by JavaScript developers, I can’t recommend the State of JavaScript enough. With over 28,000 respondents and a clear analysis, it is the best starting point for picking a front-end stack.

Lastly, a major thanks to everyone from the Symfony slack that responded to the survey and helped me out with my thesis!

Like what you read? Give Tijn Renders a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.