Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Introducción al framework Stimulus

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Existen muchos frameworks para JavaScript disponibles. A veces incluso comienzo a pensar que yo soy la única persona que aún no ha creado un framework. Algunas soluciones, como Angular, son grandes y complejas, mientras que otras como Backbone (que es más bien una biblioteca en vez de un framework) son bastante simples y solamente proporcionan un puñado de herramientas para acelerar el proceso de desarrollo.

En el artículo de hoy me gustaría presentarte un nuevo framework llamado Stimulus. Fue creado por un equipo de Basecamp liderado por David Heinemeier Hansson, un popular desarrollador que fue el padre de Ruby on Rails.

Stimulus es un pequeño framework que nunca tuvo la intención de convertirse en algo grande. Tiene su propia filosofía y actitud hacia el desarrollo front-end, lo que podría agradar o desagradar a algunos programadores. Stimulus es joven, pero la versión 1 ya ha sido liberada, por lo que debería ser seguro usarlo en producción. He jugado un poco con este framework y verdaderamente me gustó su simplicidad y elegancia. ¡Espero que tú también lo disfrutes!.

En esta publicación discutiremos los fundamentos de Stimulus al crear una aplicación de una sola página con carga de datos asíncrona, eventos, persistencia de estado y otras cosas comunes.

Puedes obtener el código fuente en GitHub.

Introducción a Stimulus

Stimulus fue creado por desarrolladores en Basecamp. En vez de crear aplicaciones de JavaScript de una sola página, ellos decidieron elegir un majestic monolith impulsado por Turbolinks y un poco de JavaScript. El código de JavaScript evolucionó para convertirse en un pequeño y modesto framework que no requiere que pases horas y horas aprendiendo todos sus conceptos y limitaciones.

Stimulus está destinado principalmente a unirse a elementos DOM existentes y trabajar con ellos de alguna manera. Sin embargo, también es posible representar dinámicamente los contenidos. En general, éste framework es bastante diferente de otras soluciones populares ya que, por ejemplo, logra la persistencia de estado en HTML, no en objetos de JavaScript. Algunos desarrolladores pueden encontrarlo inconveniente, pero dale una oportunidad a Stimulus, ya que realmente te puede sorprender.

El framework solamente tiene tres conceptos principales que debes recordar y son:

  • Controllers (controladores): clases de JS con algunos métodos y devoluciones de llamadas que se conectan al DOM. La conexión ocurre cuando un atributo "mágico" data-controller aparece en la página. La documentación explica que este atributo es un puente entre HTML y JavaScript, de la misma manera en la que las clases sirven como puentes entre HTML y CSS. Un controlador puede conectarse a múltiples elementos, y un elemento puede ser alimentado por múltiples controladores.
  • Actions (acciones): métodos que pueden invocarse en eventos específicos. Éstas se definen en atributos data-action especiales.
  • Targets (objetivos): elementos importantes a los que se puede acceder y manipular fácilmente. Se especifican con la ayuda de atributos data-target.

Como puedes ver, los atributos mencionados anteriormente te permiten separar contenido de la lógica del comportamiento de una manera muy simple y natural. Más adelante en este artículo veremos todos estos conceptos en acción y nos daremos cuenta de lo sencillo que es leer un documento en HTML y comprender lo que está pasando.

Arrancando una aplicación con Stimulus

Stimulus puede instalarse fácilmente como un paquete NPM o cargarse directamente usando la etiqueta script como se explica en los documentos. También toma en cuenta que, de forma predeterminada, este framework se integra con el administrador de contenidos Webpack, que es compatible con herramientas como la autocarga de controladores. Eres libre de usar cualquier otro sistema de compilación, pero en este caso se necesitará más trabajo.

La forma más rápida de comenzar con Stimulus es utilizando este proyecto de inicio que ya tiene al servidor web Express y Babel conectados. También depende de Yarn, así que asegúrate de instalarlo. Para clonar el proyecto e instalar todas sus dependencias, ejecuta:

Si prefieres no instalar nada localmente, puedes volver a mezclar este proyecto en Glitch y codificar todo directamente en tu navegador.

Perfecto ¡estamos listos y podemos pasar a la siguiente sección!.

Un poco de marcado

Supongamos que estamos creando una pequeña aplicación de una sola página que presenta una lista de empleados y carga información como sus nombres, fotos, puestos, salarios, cumpleaños, etcétera.

Comencemos con la lista de empleados. Todo el marcado que vamos a escribir debe colocarse dentro del archivo public/index.html, que ya tiene un HTML mínimo. Por ahora codificaremos a todos nuestros empleados estáticamente de la siguiente forma:

¡Bien! ahora vamos a añadir una pizca de magia de Stimulus.

Creando un controlador

Tal como lo explica la documentación oficial, el objetivo principal de Stimulus es conectar objetos JavaScript (llamados controladores) a los elementos DOM. Los controladores entonces darán vida a la página. Como convención, los nombres de los controladores deben terminar con un sufijo _controller (lo que debe ser muy familiar para los desarrolladores que usan Rails).

Ya hay un directorio para controladores disponible llamado src/controllers. Dentro de éste encontrarás un archivo hello_controller.js que define a una clase vacía:

Cambiemos el nombre de este archivo a employees_controller.js. No necesitamos requerirlo de forma específica, ya que los controladores se cargan automáticamente gracias a las siguientes líneas de código en el archivo src/index.js:

El siguiente paso es conectar nuestro controlador al DOM. Para lograrlo, configura un atributo data-controller y asígnale un identificador (que en nuestro caso es employees):

¡Eso es todo! ahora el controlador está conectado al DOM.

Devoluciones de llamadas del ciclo de vida

Un aspecto importante que debes saber sobre los controladores es que tienen tres devoluciones de llamadas en su ciclo de vida que se ejecutan bajo condiciones específicas:

  • initialize: esta devolución de llamada ocurre solamente una vez, cuando el controlador es instanciado.
  • connect: se ejecuta cada vez que conectamos el controlador al elemento DOM. Dado que un controlador puede estar conectado a múltiples elementos en la página, esta devolución de llamada puede ejecutarse varias veces.
  • disconnect: como probablemente has adivinado, esta devolución de llamada se ejecuta cada vez que el controlador se desconecta del elemento DOM.

Nada complejo, ¿verdad? aprovechemos las devoluciones de llamada initialize() y connect() para asegurarnos de que nuestro controlador verdaderamente funcione:

A continuación arranca el servidor ejecutando lo siguiente:

Navega a http://localhost:9000. Abre la consola de tu navegador y asegúrate de que aparezcan ambos mensajes. ¡Esto significa que todo funciona según lo esperado!.

Añadiendo eventos

El siguiente concepto central de Stimulus son los eventos. Los eventos se usan para responder a varias acciones de los usuarios en la página: hacer clic, colocar el cursor encima de un objeto, enfocarse en algo, etc. Stimulus no intenta reinventar la rueda, y su sistema de eventos se basa en eventos de JS genéricos.

Por ejemplo, vamos a vincular un evento clic a nuestros empleados. Cada vez que ocurra este evento quiero invocar al aún inexistente método choose() del employees_controller:

Probablemente puedes comprender lo que ocurre aquí por tu cuenta.

  • data-action es el atributo especial que une a un evento con el elemento y explica qué acción debe invocarse.
  • click, desde luego, es el nombre del evento.
  • employees es el identificador de nuestro controlador.
  • choose es el nombre del método que nos gustaría invocar.

Dado que click es el evento más común, este se puede omitir sin problemas:

En este caso, click será usado implícitamente.

A continuación vamos a codificar el método choose(). No quiero que la acción predeterminada ocurra (que es, obviamente, abrir una nueva página especificada en el atributo href), así que vamos a prevenirlo:

e es el objeto especial del evento que contiene información completa sobre el evento desencadenado. Por cierto, toma en cuenta que this devuelve al controlador en sí, ¡no un enlace individual!. Para obtener acceso al elemento que actúa como objetivo del evento, usa e.target.

Vuelve a cargar la página, haz clic en un elemento de la lista ¡y observa el resultado!.

Trabajando con el estado

Ahora que hemos vinculado un manejador de eventos click a los empleados, me gustaría almacenar a la persona seleccionada en este momento. ¿Por qué? al almacenar esta información podemos evitar que el mismo empleado sea elegido la segunda vez. Esto también nos permitirá evitar cargar la misma información varias veces en el futuro.

Stimulus nos indica que debemos mantener el estado en la Data API, lo que parece bastante razonable. En primer lugar proporcionemos algunos ids arbitrarios a cada empleado usando el atributo data-id:

A continuación necesitamos obtener el id y mantenerlo. El uso de la Data API es muy común con Stimulus, por lo que se proporciona un objeto this.data especial para cada controlador. Con su ayuda podemos ejecutar los siguientes métodos:

  • this.data.get('name'): obtiene el valor a través de su atributo.
  • this.data.set('name', value): establece el valor dentro de algún atributo.
  • this.data.has('name'): verifica si el atributo existe (devuelve un valor booleano).

Desafortunadamente, estos accesos directos no están disponibles para los objetivos de los eventos click, por lo que debemos seguir con getAttribute() en esos casos:

Pero podemos hacerlo aún mejor creando un getter y un setter para currentEmployee:

Observa cómo estamos usando el getter this.currentEmployee y asegurándonos de que el id proporcionado no sea el mismo que el que ya está almacenado.

Ahora puedes volver a escribir el método choose() de la siguiente manera:

Vuelve a cargar la página para asegurate de que todo funcione todavía. Aún no vas a notar cambios visuales, pero con la ayuda de la herramienta de inspección notarás que ul tiene el atributo data-employees-current-employee con un valor que cambia al hacer clic en los vínculos. La parte employees en el nombre del atributo es el identificador del controlador y ha sido agregado automáticamente.

Ahora vamos a continuar y resaltemos al empleado seleccionado actualmente.

Usando objetivos

Cuando se seleccione a un empleado, me gustaría asignar una clase .chosen al elemento correspondiente. Desde luego, pudimos haber resuelto esta tarea usando algunas funciones selectoras de JS, pero Stimulus proporciona una solución más simple.

Te presento a los objetivos, que te permiten marcar uno o más elementos importantes en la página. De esa forma, estos elementos pueden ser fácilmente accesibles y manipularse según sea necesario. Para crear un objetivo, agrega un atributo data-target con el valor {controller}.{target_name} (que se conoce como descriptor de objetivos):

Ahora informa a Stimulus acerca de estos nuevos objetivos definiendo un nuevo valor estático:

Y ahora ¿cómo podemos acceder a los objetivos? es tan simple como decir this.employeeTarget (para obtener el primer elemento) o this.employeeTargets (para obtener todos los elementos):

¡Estupendo! ¿cómo pueden ayudarnos estos objetivos ahora? bueno, podemos usarlos para añadir y eliminar clases CSS con facilidad en base a algunos criterios:

La idea es simple: recorremos un arreglo de objetivos con un ciclo y por cada objetivo compara su data-id con aquél que está almacenado dentro de this.currentEmployee. Si coincide, se le asigna la clase .chosen al elemento. De lo contrario esta clase es eliminada. En vez de eso, también puedes extraer la condición if (this.currentEmployee !== id) { del setter y usarla en el método chosen():

¡Todo va bien! por último, vamos a proporcionar un estilo muy simple a la clase .chosen dentro de public/main.css:

Vuelve a cargar la página una vez más, haz clic en una persona y asegúrate de que ésta sea resaltada apropiadamente.

Cargando datos asíncronamente

Nuestra siguiente tarea es cargar información sobre el empleado elegido. En una aplicación del mundo real, tendrías que configurar un proveedor de hospedaje, un back-end basado en algo como Django o Rails, y una API endpoint que responda con JSON y que contenga toda la información necesaria. Pero vamos a hacer las cosas un poco más simples y a concentrarnos solamente en el lado del cliente. Crea un directorio employees dentro de la carpeta public. A continuación, agrega cuatro archivos que contengan datos para cada empleado individual:

1.json

2.json

3.json

4.json

Todas las fotos fueron tomadas del archivo de fotografías libre llamado Burst de Shopify.

¡Nuestros datos están listos y esperando ser cargados! para hacer esto vamos a codificar un método loadInfoFor() separado.

Este método recibe el id de un empleado y envía una solicitud de recuperación asíncrona al URI dado. También hay dos promesas: una para obtener el cuerpo y otra para mostrar la información cargada (vamos a añadir el método correspondiente en un momento).

Utiliza este nuevo método dentro de choose():

Antes de codificar el método displayInfo(), necesitamos un elemento en el que podamos representar los datos. ¿Por qué no aprovechamos los objetivos una vez más?

Define el objetivo:

Y ahora utilízalo para mostrar toda la información:

Desde luego, tienes la libertad de usar un motor de plantillas como Handlebars, pero para este sencillo caso su uso probablemente sería exagerado.

Ahora vuelve a cargar la página y elige a uno de los empleados. Su biografía e imagen deberán cargarse casi instantáneamente, ¡lo que significa que nuestra aplicación funciona correctamente!

Lista de empleados dinámica

Usando el enfoque descrito anteriormente, podemos ir más allá y cargar la lista de empleados sobre la marcha en lugar de codificarla de forma estática.

Prepara los datos dentro del archivo public/employees.json:

Ahora modifica el archivo public/index.html eliminando la lista codificada estáticamente y añadiendo un atributo data-employees-url (toma en cuenta que debemos proporcionar el nombre del controlador, de lo contrario la Data API no funcionará):

Tan pronto como el controlador esté vinculado al DOM, éste deberá enviar una solicitud de recuperación para construir una lista de empleados. Esto significa que la devolución de llamada connect() es el lugar perfecto para hacer esto:

Propongo que creemos un método loadFrom() más genérico que acepte un URL desde el que podamos cargar datos y una devolución de llamada para mostrar esta información:

Modifica el método choose() para aprovechar loadFrom():

displayInfo() también puede simplificarse, ya que JSON ahora está siendo analizado dentro de loadFrom():

Elimina loadInfoFor() y codifica el método displayEmployees():

¡Eso es todo! ahora estamos mostrando nuestra lista de empleados dinámicamente en base a los datos devueltos por el servidor.

Conclusión

En este artículo hemos cubierto un modesto framework de JavaScript llamado Stimulus. Hemos visto cómo crear una nueva aplicación, añadir un controlador con varias acciones y devoluciones de llamadas y hemos introducido eventos y acciones. Además, hemos cargado datos asíncronamente con la ayuda de solicitudes de recuperación.

En general eso es todo en cuanto a los fundamentos de Stimulus. Éste realmente no espera que tengas conocimientos arcanos para crear aplicaciones web. Desde luego, el framework probablemente tendrá algunas características nuevas en el futuro, pero los desarrolladores no planean convertirlo en un enorme monstruo con cientos de herramientas.

Si quieres encontrar más ejemplos del uso de Stimulus, también puedes consultar este pequeño manual. Y si estás buscando recursos adicionales de JavaScript para estudiar o usarlos en tu trabajo, revisa lo que tenemos disponible en Envato Market.

¿Te gustó Stimulus? ¿te interesaría intentar crear una aplicación para el mundo real basada en este framework? ¡comparte tus pensamientos en los comentarios!

Como siempre, te agradezco que te hayas quedado conmigo y hasta la próxima vez.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.