Stimulus, activa tus sencillas páginas HTML

September 15, 2018

Hace tiempo que los desarrolladores web dejaron de lado aquellos proyectos formados por un fichero Html y varios ficheros con una serie de scripts creados con un lenguaje un poco más complejo como PHP y ASP, y se plantaron delante de la difícil tesitura de seleccionar un framework a partir del cual crear el front-end de sus proyectos.

De un tiempo a esta parte, las herramientas que nos ofrecen frameworks como Angular o React, hacen que el desarrollador se pueda olvidar de tareas complejas de configuración y ejecución y se centre en lo que realmente importa, crear la interfaz de usuario y gestionar sus interacciones.

Pero quizá, para muchos proyectos, el aprendizaje y posterior implementación de sus componentes a partir de cualquiera de estas herramientas supone un alto coste y un trabajo innecesario, ya que no va a aportar ninguna mejora. Para este tipo de casos, en los que necesitamos cierto trabajo dinámico en páginas html muy sencillas, disponemos de Stimulus.

Stimulus es un framework Javascript muy sencillo que parte con la premisa de conectar elementos HTML con objetos Javascript de manera automática. En ningún momento tendremos que modificar nuestro frontend para adaptarlo al framework, ya que es el propio framework el que se adapta a lo que nosotros estamos creando.

El trabajo es muy sencillo y automáticamente se encarga de monitorizar nuestras páginas en busca del atributo data-controller. Trabaja de la misma manera que una directiva Html y nos permite indicar varios valores en su interior (como lo haríamos con el atributo class, por ejemplo). En este caso, en vez de agregar diferentes estilos Css, lo que conseguimos es asociar componentes Html a controladores de Stimulus.

Aparte de esta conexión tan genérica a través de data-controller, también disponemos de la directiva data-action mediante la cual vamos a poder indicar cómo vamos a capturar los diferentes eventos de nuestras páginas o data-target, mediante la cual podremos identificar los diferentes elementos con los que posteriormente trabajaremos dentro de nuestros controladores.

Implementando una página Html con Stimulus logramos una clara separación entre el contenido y el comportamiento de dicho contenido, es decir, la vista de la lógica, uno de los pasos fundamentales en el patrón MVC. Sólo que en este caso, abstraemos bastante esta separación y su uso es tremendamente sencillo.

Hola Mundo

Vamos a demostrar con un ejemplo muy sencillo cómo podemos beneficiarnos de las ventajas de Stimulus en nuestros proyectos.

El primer paso será importar la librería para poder usarla dentro de la página que estamos creando. Por su sencillez, hemos preferido importarla directamente desde su propia url dentro de la cabecera de la página, pero podemos utilizar otro tipo de herramientas como webpack.

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
 <script src="app.js"></script>
<head>
<body>
 <div>
     <input type="text">
     <button>Saludar</button>
 </div>
</body>
</html>

Nuestra página web define un campo de texto y un botón, mediante los cuales vamos a poder interactuar con el usuario.

El siguiente paso es definir nuestro primer controlador. Los controladores no son más que clases Javascript donde vamos a definir el comportamiento de ciertos bloques dentro de nuestro código Html. Los controladores pueden definir funciones que aplicaremos sobre elementos del DOM, pueden definir variables para modificar el contenido de ciertos elementos… pero siempre, sin abandonar el ámbito que hemos creado.

Este ámbito lo especificamos a nivel de nuestra vista a través del atributo data-controller, el cual define qué controladores van a estar manejando cada uno de los ámbitos dentro de nuestro fichero. En el ejemplo anterior, vamos a crear un controlador sobre la etiqueta div.

Lo primero, modificamos el Html:

<div data-controller="saludoController">
   <input type="text">
   <button>Saludar</button>
</div>

El siguiente paso es definir dentro de nuestro script Javascript el controlador y las funciones asociadas. Un controlador es una clase que extiende de la clase Controller del framework y podemos definirlo de la siguiente manera, sobre la instancia que generemos de nuestra aplicación.

app.js

(function() {
   const application = Stimulus.Application.start()
   application.register("saludoController", class extends Stimulus.Controller {
       connect() {
           console.log("¡Hola Mundo!")
       }
   })
})()

La primera línea de nuestro script define la aplicación con la que vamos a trabajar, mientras que la segunda sentencia se encarga de registrar el controlador con el que vamos a trabajar.

Dentro de este controlador, se implementa el método connect, el cual se va a ejecutar en el momento que encontremos dentro del código html asociado el ámbito en el que está trabajando este controlador, en nuestro caso, cuando se muestre el div dentro del navegador.

Si probamos a abrir nuestro fichero html dentro de cualquier navegador, deberíamos observar, dentro de la consola, el mensaje que hemos definido. Pero esto es únicamente el principio, podemos alcanzar objetivos mayores.

Como hemos comentado al principio, el framework nos permite especificar qué eventos vamos a capturar dentro de nuestra vista y qué métodos van a responder a cada uno de ellos. En nuestro ejemplo vamos a interactuar con el botón que tenemos creado, para ello, lo primero que vamos a implementar es el método que va a capturar dicho evento dentro del controlador:

(function() {
   const application = Stimulus.Application.start()
   application.register("saludoController", class extends Stimulus.Controller {
       connect() {
           console.log("¡Hola Mundo!")
       }

       saludar(){
           console.log("Saludo al usuario")
       }
   })
})()

Una vez definida la función con las sentencias que queremos ejecutar, dentro de nuestra vista, debemos usar el atributo data-action para poder concretar qué controlador y qué método responden a cada uno de los eventos. En nuestro caso, el evento click será lanzado para ser capturado por el controlador saludoController y, dentro del mismo, por el método saludar.

Podemos llevarlo a cabo de la siguiente manera:

<div data-controller="saludoController">
   <input type="text">
   <button data-action="click->saludoController#saludar">Saludar</button>
</div>

Si refrescamos la página y probamos a pulsar el botón, obtendremos el mensaje dentro de la consola.

Para completar este pequeño ejemplo de inicio, vamos a ver cómo podemos enlazar ciertos elementos de nuestra vista con variables definidas dentro de nuestro controlador, para así poder interactuar con ellas en “tiempo real”. Para llegar a conseguir este objetivo, vamos a usar la directiva data-target.

Primero modificamos nuestro html:

<div data-controller="saludoController">
   <input type="text" data-target="saludoController.nombre">
   <button data-action="click->saludoController#saludar">Saludar</button>
</div>

Como valor del atributo data-target debemos especificar con qué controlador estamos trabajando (saludoController) y cuál es el nombre (nombre) con el que, posteriormente podremos acceder al elemento input.

Dentro del controlador, podemos utilizar el método this.targets.find() para recuperar el primer elemento, dentro de nuestra vista que coincida con el valor que pasamos por parámetro a dicho método. Podemos modificar nuestro controlador de la siguiente manera:

saludar(){
   const element = this.targets.find("nombre")
   const nombre = element.value
   console.log(`Hola ${nombre}`)
}

De esta manera conseguimos que al pulsar el botón se recoja el valor escrito dentro del campo de texto y complete el saludo que estamos lanzando.

Podemos mejorar la implementación de nuestro controlador, definiendo de manera independiente el método que se encarga de obtener el valor del campo de texto.

saludar(){   
   console.log(`Hola ${this.nombre}`)
}

get nombre(){
   return this.targets.find("nombre").value
}

De esta manera sencilla podemos conseguir una interacción muy potente con cada uno de los elementos definidos dentro de una página Html sin tener la dependencia tan estricta que muchas veces nos imponen los frameworks Javascript más modernos.

Este ejemplo es algo muy sencillo para que se pueda ver la sencillez de la librería. Las posibilidades de las que dispone son bastante amplias, desde la aplicación de cualquier evento, hasta el control del estado de nuestros controlador de manera eficiente.

Si buscas aplicar métodos reactivos a tu sencilla página html sin duda, Stimulus es tu framework.


Perpetrado por Mario Girón, desarrollador Full Stack y formador Senior
Puedes seguirme en: Twitter | Linkedin | Github