Why Symfony Live Components?

Symfony Live Components are an extremely powerful yet incredibly simple way to establish communication between front and backend and create 'react like' interaction without the overhead of another programming language like React or having to go decoupled.

  • Symfony Live Components are in keep with Drupal, they use twig and PHP and Symfony.
  • They are as fast (or faster) than any react component.
  • I have yet to come across things you can build with React and cannot build with Symfony Live Components

Key features of Symfony Live components are:

  • Execute PHP methods (#[LiveAction]) triggered from the frontend.
  • Data binding (#[LiveProp])
  • Emitting events from front to back and vice versa.

I think Symfony Live Components should be considered as the way forward to modernize Drupal UX and UI.

Problems to solve

Symfony Live Components require webpack / encore and seems to be incompatible with the JS dependencies in Drupal. At least I haven't found a way to integrate Symfony Live Components in Drupal.

Proposed resolution

First find a way to make it possible to use Symfony Live Components in Drupal.

Comments

nuez created an issue. See original summary.

nuez’s picture

nuez
Primary language Dutch
Location Madrid, Spain
commented
Issue summary: View changes
ghost of drupal past’s picture

ghost of drupal past
he/him
commented
Related issues: +#3404409: [Plan] Gradually replace Drupal's AJAX system with HTMX
fjgarlin’s picture

fjgarlin commented

I’ve seen this in action and it’s really powerful yet simple to implement and easy to understand, so at the very least trying to solve the problem of the dependencies would unlock POCs and further proposals.

Most of the logic can be accomplished via twig + PHP code.

+1 fwiw

quietone’s picture

quietone commented
Version: 11.1.x-dev » 11.x-dev
mxh’s picture

mxh commented

Some time ago I integrated Webpack Encore into Drupal. Maybe it still works with current D10. Here's the Readme of that module. Not sure whether it's helpful regarding the JS dependencies but maybe so I thought I just post a reference to the module here.

d34dman’s picture

d34dman commented

Is this issue about creating an example of how to use Symfony Live Component in a Drupal project? (Probably a demo or a contrib module?)

Or is this a feature request to implement/replace some interactive components in core with Symfony Live components?

This might be an interesting proposal for ai initiative where we need chat streaming and such.

pdureau’s picture

pdureau commented

it’s really powerful yet simple to implement and easy to understand,

It doesn't look that simple to implement because the definition is in PHP, which is not a front-dev friendly format. It would be better to target PHP free theming instead.

Avoiding PHP is also the guarantee than theming will not introduce performance or security issues.

Also, the example they are showing in documentation is very "business" ("product", "search") which is disturbing :

#[AsLiveComponent]
class ProductSearch

https://symfony.com/bundles/ux-live-component/current/index.html

With SDC, we have a format:

  • front-dev friendly with only YAML, Markdown, Twig, JS & CSS
  • focused on UI components with UI logic
mxh’s picture

mxh commented

Avoiding PHP is also the guarantee than theming will not introduce performance or security issues.

{{ user.field_name.value|raw }}

pdureau’s picture

pdureau commented

{{ user.field_name.value|raw }}

I was talking about component definition, so PHP VS YAML. As far as I know, Symfony Live Components still use Twig.

mxh’s picture

mxh commented

In #8 your first sentence was about definition, directly followed by "It would be better to target PHP free theming instead." with the followed sentence "Avoiding PHP is also the guarantee than theming will not introduce performance or security issues."

... yeah I might've got your argument wrong. Also for the definition format "YAML vs PHP" I disagree with the security argument.

hugronaphor’s picture

hugronaphor commented

I don't think "Symfony Live Components" has to live in Drupal core especially that as it looks HTMX approach has been embraced and approved: #3404409: [Plan] Gradually replace Drupal's AJAX system with HTMX

As a contrib - why not
Also, we have Livewire port for Drupal as alternative - https://wire.cornel.co

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.