Acceder al contenido principal

Stimulus: El framework javascript modesto para tus proyectos Symfony

Volver a Blog

Stimulus: El framework javascript modesto para tus proyectos Symfony

23 Sep 021
Symfony Stimulus JS
Manuel Aguilar

Symfony , Javascript , UX ,

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 2020Titouan 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.

 

Diapositiva de presentación de Fabien Potencier sobre Symfony UX
Symfony UX por Fabien Potencier 

 

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".

 

 

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:

Webpack Encore Bundle

composer require symfony/webpack-encore-bundle

Stimulus Bridge y Stimulus

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...

 

 

Comentarios

Añadir nuevo comentario