Ediciones ENI Editorial | líder en informática
Symfony UX Stimulus
Introducción
Hemos visto con el uso de Webpack Encore que, para agregar interactividad y animaciones a sus páginas web, es necesario utilizar frameworks de JavaScript, como Vue.js, React o Angular (los más conocidos). Estas son las herramientas (frameworks) que manejan todos los eventos en la parte del Front End.
Si usted es un desarrollador de Back End (probablemente un desarrollador de PHP), es posible que no tenga ganas de invertir tiempo en el desarrollo y aprendizaje de estos frameworks, especialmente si va a usarlos muy poco. Además, la carga de estos frameworks resulta bastante pesada cuando, al final, solo se utiliza una décima parte de sus funcionalidades.
Aquí es donde el ecosistema Symfony UX puede resultar útil.
Oirá hablar de diferentes términos, como Symfony UX, HotWire, Turbo, Stimulus, Strada...
Vamos a aclarar las opciones explicando estos conceptos uno por uno.
Symfony UX
1. Principio de Symfony UX
El principio es el siguiente: ¿cómo integrar elementos de JavaScript sin tener que codificar en JavaScript?
Es posible gracias a Symfony UX.
Symfony UX es una biblioteca de componentes JavaScript y un framework destinado a Symfony. El framework le permite importar en Symfony el componente que desee.
No es necesario escribir una sola línea en JavaScript para utilizarlos. Todo el código se gestionará en PHP.
Un pequeño inconveniente, sin embargo: si desea personalizar un componente, deberá escribir JavaScript, pero esto no es en absoluto obligatorio.
Symfony UX es un poco el equivalente de Symfony Flex para los paquetes de PHP.
Para obtener una lista de los componentes disponibles en Symfony UX, consulte la página de Symfony: https://symfony.com/doc/current/frontend/ux.html#ux-packages-list
Observará al final de la página que también se pueden utilizar componentes externos a Symfony en los siguientes enlaces:
2. ¿Cómo funciona Symfony UX para instalar los paquetes?
Cuando instale un nuevo componente de Symfony UX, es Symfony Flex (una herramienta para instalar paquetes que llamamos dependencias) quien actualizará el archivo packages.json.
Este archivo contiene las declaraciones de todos los paquetes JavaScript de su aplicación.
Luego usará npm install...
Symfony Stimulus
1. ¿Cómo usar Stimulus para utilizar un componente?
Para utilizar Stimulus y aplicar un componente, primero es importante comprender que Stimulus es un framework de JavaScript ligero (30 KB) y eficiente. Simplemente, conecta objetos JavaScript (controladores) a diferentes elementos en una página HTML utilizando atributos de datos (data-attributs) en las etiquetas HTML.
Cuando Stimulus detecta un atributo de este tipo en un elemento HTML, establece una conexión con la clase correspondiente en JavaScript, crea una nueva instancia de esta clase y la conecta al elemento concerniente.
Por lo tanto, Stimulus es ideal cuando necesita agregar puntualmente algunos elementos JavaScript a su página HTML.
2. ¿Cómo utilizar Stimulus para aplicar un componente?
Vaya a la página del componente Chart.js: https://symfony.com/bundles/ux-chartjs/current/index.html
Encontrará al final de la página un ejemplo de utilización.
Observe como el controlador ChartBuilderInterface $chartBuilder se inyecta en la acción del controlador de la página.
Vamos a hacer lo mismo en la acción hello() de nuestro controlador TestController. Observaremos también que es necesario hacer un use en los espacios de nombres: ChartbuilderInterface y Chart.
He aquí el contenido de nuestro controlador testController:
<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Cookie;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
use Symfony\UX\Chartjs\Model\Chart;
class TestController extends AbstractController
{
#[Route('/test', name: 'app_test',methods: ['GET', 'HEAD'] )]
public function index(Request $request): Response
{
return $this->render('test/index.html.twig');
}
#[Route('/hello/{edad}/{nombre}/{apellido}'...HotWire y Turbo
1. Introducción
El principio es reducir el número de cargas de una página para optimizar al máximo el tiempo de visualización.
Volvamos al esquema de la sección La relación cliente-servidor del capítulo Las herramientas.
Cuando usted hace clic en un enlace, se envía una solicitud al servidor, el cual la procesa y devuelve una página HTML + CSS correspondiente a la solicitud.
Este sistema tiene como inconveniente que cada respuesta a la solicitud debe cargarse completamente. Sin embargo, puede suceder que esta respuesta solo incluya una pequeña parte de la página.
Por ejemplo, si un botón en una página solicita simplemente mostrar el nombre del usuario, el enlace enviará una solicitud que devolverá toda la página inicial, pero con el nombre del usuario añadido.
Esta página es prácticamente idéntica a la página inicial; la única diferencia es el texto que muestra el nombre del usuario. Como resultado, se recarga toda la página, aunque la información solicitada sea muy breve. Esto es contraproducente.
Para evitarlo, se ha buscado una solución para enviar por la red solo la información necesaria, que luego puede ser procesada e insertada en cualquier lugar de una página sin necesidad de recargarla por completo.
Una de las soluciones consiste en utilizar lo que se llama una API (Application Programming Interface). Una API es una solución que permite a las aplicaciones en diferentes servidores comunicarse entre sí e intercambiar datos.
Estos datos suelen presentarse en un formato particular llamado JSON (JavaScript Object Notation). Como ya habrá deducido, estos datos luego serán procesados por la página que realizó la solicitud mediante un programa JavaScript, que los insertará donde el desarrollador lo desee.
He aquí un ejemplo de archivo JSON:
[
{ ...