Solving the modern applications dilemma with Symfony UX
Titouan Galopin
It's been almost two years since Fabien and I annouced how Symfony is bridging communities together through initiatives like Symfony UX.
Since then, the work has never stopped, from unparalleled interactivity with real-time Twig updates to plug-and-play autocomplete and native browser notifications.
Ryan Weaver even created ux.symfony.com to showcase how these components can be used and what they do.
Symfony UX is steadily becoming an important part of how we can build modern applications with Symfony. I'm happy about how the community contributed to make it even better than I anticipated.
This trend is amazing. In this blog post, I would like to talk about the next steps of Symfony UX: UX React and UX Vue.
The "SPA or traditional" dilemma
Nowadays, everyone starting a Symfony application faces the same dilemma: should I start my application traditionally (using Twig, HTML and forms) or should I opt for something like a Single Page Application (for example a standalone React application talking to a Symfony API).
Single Page Applications give the possibility to create highly interactive applications but introduce complexity by duplicating multiple parts of the code on frontend and backend (routing, access control, authentication, ...).
Traditional applications are extremely quick to develop but tend to lack the UX capabilities of modern applications (drag and drop, upload progress bars, custom interactive sections, ...).
This dilemma is both engaging (it's difficult to change once decided) and has big consequences in terms of maintenance, development time, difficulties to hire, ...
There must be a better way.
Developing hybrid applications with Symfony UX
When Symfony Flex was introduced in Symfony 4.0, it came from a simple idea: install only what we strictly need at first. There will be time later to add new packages when we need them.
What if we could do the same for an application User Interface? What if we could use Twig, HTML and forms at the beginning, as it's the simplest way to develop an application, and only when we actually need high interactivity we could add React or Vue?
This is what Symfony UX now achieves.
This summer, we launched two new components: UX React (#329 by @tgalopin) and UX Vue (#426 by @t-richard).
Both allow you to render a JavaScript component directly from your Twig templates, easily passing data from your backend to your frontend:
1 2 3 4 5
<div {{ react_component('PackageSearch', {
packages: packagesData
}) }}>
Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
</div>This new Symfony UX capability is crucial: instead of developing a standalone React/Vue application from scratch, you can install - with a single command - all the tools required to start your React/Vue application whenever you want: now or in the future.
This makes it easy to create interactive JavaScript components only for specific parts of your application, while continuing to rely on Twig and HTML for the rest. You can profit from the React/Vue ecosystems without adding unecessary complexity to your application.
And if you combine then with UX Turbo to handle routing and page transitions, your application's JavaScript will be reduced to the strict minimum: building a great User Experience!
What's next?
UX React and UX Vue bring new opportunities to Symfony. They allow us to connect two ecosystems together: you can now use React and Vue packages in your application in a few minutes.
This trend makes the future bright for Symfony UX. Step by step, foundations are being layed so that we can create even more impressive packages.
What's next? Fully integrated upload system? Native CDN management? React/Vue toolkit libraries integration? There are so many ideas to implement, it's exciting!
Want to contribute? Join us on Slack in the UX channel and let's grow Symfony UX together!
Help the Symfony project!
As with any Open-Source project, contributing code or documentation is the most common way to help, but we also have a wide range of sponsoring opportunities.
Comments
Comments are closed.
To ensure that comments stay relevant, they are closed for old posts.
Just the Slack link is broken.
I've been working with Vue SPA's for quite a bit now, but I do have older / smaller projects, which are traditional. SPA is magnitudes better to use and develop, the only thing I really miss is the Form component.
Have you ever thought about developing helpers for this?
1, Serialize the form view
2, Provide components for it in React / Vue, kind of like form themes
For example, Vue component:
And of course the component would behave the same way form themes do. Handles input, choices etc.
This would make it really easy to build and handle forms with SPAs, including backend validation, which is kind of a chore :)