Con la iniciativa Symfony UX, la comunidad de Symfony quiere acercar los postulados del "The Majestic Monolith" de David Heinemeier, y de cómo están siendo aplicados en el entorno de Ruby on Rails, al suyo propio.
Ya en un post anterior os comentamos cómo Symfony pretendía acercar el ecosistema javascript y los componentes al propio framework y a su motor de plantillas Twig, pero esto sigue avanzando. Pero antes vamos a situarnos dentro de la iniciativa Symfony UX, dónde estamos, hacia dónde vamos y por qué.
La iniciativa Symfony UX
En un artículo de diciembre del 2020, Titouan Galopin, presentaba a la comunidad la iniciativa Symfony UX, como un puente entre el backend y el frontend, un puente que nos permita desarrollar una aplicación completa desde el propio framework sin la necesidad de tener sistemas desacoplados.
Como ya os he comentado antes, esta perspectiva nacida en el seno de Ruby on Rails, es algo que el propio Fabien Potencier viene predicando en algunas de sus últimas charlas de las Symfony Live (Boring is the new hype): "Si ya tenemos una herramienta con la que hacer algo, para qué añadir otra... Aprendamos a hacerla con lo que tenemos".
Working on updating the #Symfony book: PHP 8 (native annotations), Symfony 5.2 (lots of small changes), EasyAdmin 3, everything on PostgreSQL to ease the learning curve (moved Redis and RabbitMQ in two new chapters).
— Fabien Potencier (@fabpot) January 12, 2021
Justo esta idea la podemos comprobar con los cambios introducidos en la nueva versión de su último libro Symfony 5: La Vía Rápida, en el que se pasa de utilizar herramientas como Redis o RabbitMQ, a funcionalidades propias de PostgreSQL.
Por lo que podemos suponer que la tendencia es que los grandes frameworks como Ruby on Rails, Symfony o incluso Laravel haciendo uso de herramientas como Laravel Livewire o InertiaJS, busquen centralizar el desarrollo "moderno" dentro de sus ecosistemas, sin perder compatibilidad con los grandes frameworks frontend como son ReactJS y VueJS.
Hotwire: HTML over the wire
Dentro del mundo de los frameworks de desarrollo, podemos decir que Ruby on Rails es la vanguardia. Respaldado por la gente de Basecamp, David Heinemeier y los suyos, no paran de sorprendernos introduciendo novedades o componentes en este framework, terminando por ir siempre un paso más allá de los demás. Así fue con la tecnología de Turbolinks, de cuya idea han nacido proyectos ya mencionados como InertiaJS o Laravel Livewire, y del que ha nacido el proyecto Hotwire.
Hotwire es un ecosistema con el que la gente de Basecamp y Hey pretende plantear un enfoque alternativo a la hora de desarrollar aplicaciones web modernas utilizando el menor código Javascript posible, enviando código HTML en vez de datos en formato JSON a través de lo que ellos llaman el cable, o como lo escriben en la lengua anglosajona "over the wire".
Para conseguir esto, Hotwire hace uso de tres herramientas:
- Stimulus: Un framework javascript "modesto".
- Turbo: La tecnología núcleo de Hotwire que nos permite "actualizar" la información de nuestra interface mediante Websockets.
- Strada: La estandarización de la web llevada a funciones nativas para el desarrollo de aplicaciones móviles híbridas.
Symfony y Stimulus JS
La primera tecnología dentro del ecosistema de Hotwire que ha adoptado Symfony, a través de Symfony UX, es Stimulus.
Gracias al proyecto Symfony UX Stimulus Bridge, Symfony integra Stimulus en nuestras aplicaciones Symfony y nos permite hacer uso de controllers Stimulus de terceros, o bien, controllers creados por nosotros mismos.
Con Stimulus podremos crear, lo que se conoce en el ámbito de Stimulus como controllers, utilizando código javascript, que más tarde podremos integrar en nuestras plantillas Twig (DOM) haciendo uso del framework StimulusJS.
Cómo integrar Stimulus JS con Encore en nuestro proyecto Symfony
Para integrar Stimulus en nuestra aplicación Symfony 5.2 o superior, basta con añadir a nuestro proyecto las dependencias:
composer require symfony/webpack-encore-bundle
yarn add @symfony/stimulus-bridge stimulus --dev
Una vez añadidas las dependencias, Symfony y Webpack ya estarán configurados y listos para que desarrolles tus primeros controllers Stimulus en tu aplicación.
Si te interesa saber más...
- Página oficial del proyecto Hotwire
- Página oficial de Stimulus
- Documentación oficial de Stimulus
- Repositorio Github de Stimulus Bridge
- Repositorio Github de Webpack Encore Bundle
- Curso de Stimulus en Symfonycasts
- Tutorial de Symfony UX por OverSeas Media
