Una introducción a Stimulus.js

 

 

 

  • ¡Registro!
  • SmashingConf Friburgo 2024

  • Índice
    1. Terminología
  • ¡Pasemos al estímulo!
    1. La repetitiva
    2. Objetivos duplicados
    3. Tipos de eventos
    4. Utiliza varios controladores en el mismo elemento
    5. Pasar datos a su objeto
    6. Inicializar, Conectado, Desconectado
    7. Heredar funcionalidad
  • Utilizándolo en producción
    1. paquete web
    2. Convenciones de nombres de archivos
    3. Mantener menos JavaScript
    4. HTML primero, luego JavaScript
  • Conclusión
    1. Otras lecturas
  • En este artículo, Mike Rogers le presentará Stimulus, un modesto marco de JavaScript que complementa su HTML existente. Al final, comprenderá la premisa de Stimulus y por qué es una herramienta útil para tener en su mochila.

     

    La web se mueve bastante rápido y elegir un enfoque para su interfaz que parezca sensato dentro de un año es complicado. Mi mayor temor como desarrollador es retomar un proyecto que no se ha tocado durante un tiempo y encontrar que la documentación para cualquier enfoque que usaron no existe o no se encuentra fácilmente en línea.

    Hace aproximadamente un año, comencé a usar Stimulus y me sentí muy feliz con el código que estaba enviando. Es una biblioteca de ~30 kb que fomenta pequeñas cantidades reutilizables de JavaScript dentro de su aplicación, organizadas de tal manera que deja pequeñas pistas en su HTML accesible sobre dónde encontrar el JavaScript al que está conectado. Hace que comprender cómo interactuará una parte de JavaScript con su página sea casi como leer un pseudocódigo.

     

    Stimulus fue creado por el equipo de Basecamp (recientemente lanzaron el servicio de correo electrónico HEY ) para ayudar a mantener el JavaScript que escriben para sus aplicaciones web. Históricamente, Basecamp ha sido bastante bueno en el mantenimiento de sus proyectos de código abierto, por lo que estoy bastante seguro de que Stimulus ha sido probado exhaustivamente y se mantendrá durante los próximos años.

    Stimulus me ha permitido crear aplicaciones de una manera que se siente reutilizable y accesible. Si bien no creo que Stimulus se apodere de la web como lo han hecho React y Vue, creo que es una herramienta que vale la pena aprender.

    Terminología

    Como todos los marcos, Stimulus tiene términos preferidos para describir ciertas cosas. Afortunadamente (y una de las principales razones por las que me ha gustado Stimulus), solo hay dos que necesitarás conocer:

    • Controlador
      Esto se refiere a instancias de clases de JavaScript que son los componentes básicos de su aplicación. Es seguro decir que cuando hablamos de controladores de estímulo, estamos hablando de clases de JavaScript.
    • Identificador
      Este es el nombre que usaremos para hacer referencia a nuestro controlador en nuestro HTML usando un atributo de datos que es común a las bases de código de Stimulus.

    ¡Pasemos al estímulo!

    En los siguientes ejemplos, usaré código que puede colocar en el navegador para comenzar de inmediato a través de la biblioteca distribuida a través de unpkg.com . Más adelante, cubriré el enfoque del paquete web, que es muy recomendable ya que permite una mejor organización de su código y es el enfoque utilizado en el Manual de estímulo.

    La repetitiva

    Vea la pluma [The Boilerplate - Stimulus] (https://codepen.io/smashingmag/pen/abdjXvP) de Mike Rogers .

    Una vez que comprenda la esencia del fragmento anterior, tendrá el conocimiento necesario para sentirse cómodo al elegir un proyecto que utilice Stimulus.

    Bastante impresionante, ¿verdad? ¡Pasemos a lo que está haciendo todo!

    application.start

    Esta línea le dice a Stimulus que agregue oyentes a la página. Si lo llama solo una vez en la parte superior de su página antes de agregar cualquier código de Stimulus, devolverá una instancia del controlador principal de Stimulus que incluye el método registerque se utiliza para informar a Stimulus sobre las clases a las que le gustaría conectarse. él.

    Controladores

    El data-controlleratributo conecta nuestro elemento HTML a una instancia de nuestra clase JavaScript. En este caso, utilizamos el identificador "contador" para conectar una instancia de la CounterControllerclase JavaScript a nuestro divelemento. Le contamos a Stimulus sobre la conexión entre este identificador y el controlador a través del application.registermétodo.

     

    Stimulus monitoreará continuamente su página para saber cuándo se agregan y eliminan elementos con este atributo. Cuando se agrega una nueva parte de HTML a la página con un data-controlleratributo, inicializará una nueva instancia de la clase de controlador relevante y luego conectará el elemento HTML. Si elimina ese elemento de la página, llamará al disconnectmétodo en la clase del controlador.

    Comportamiento

    Stimulus utiliza un atributo de datos data-actionpara definir claramente qué función del controlador se ejecutará. Usando la sintaxis, event-controller#functioncualquiera que lea el HTML podrá ver lo que hace. Esto es especialmente útil ya que reduce el riesgo de código inesperado de otros archivos, lo que facilita la navegación por el código base. Cuando vi por primera vez el enfoque que fomenta Stimulus, me sentí casi como leer un pseudocódigo.

    En el ejemplo anterior, cuando el botón activa el evento "clic", se pasará a la addOnefunción dentro de nuestro controlador "contador".

    Objetivos

    Los objetivos son una forma de definir explícitamente qué elementos estarán disponibles para su controlador. Históricamente he usado una combinación de ID, nombres de clases CSS y atributos de datos para lograr esto, por lo que tener un solo "Esta es la manera de hacerlo" que sea tan explícito hace que el código sea mucho más consistente.

    Esto requiere definir los nombres de sus objetivos dentro de su clase de controlador a través de la targetsfunción y agregar el nombre a un elemento a través del archivo data-target.

    Una vez que haya configurado esas dos piezas, su elemento estará disponible en su controlador. En este caso, configuré el objetivo con el nombre "salida" y se puede acceder a él this.outputTargetdesde las funciones de nuestro controlador.

    Objetivos duplicados

    Consulte el bolígrafo [Objetivos duplicados: estímulo] (https://codepen.io/smashingmag/pen/ExPprPG) de Mike Rogers .

    Si tiene varios objetivos con el mismo nombre, puede acceder a ellos utilizando la versión plural del método de destino; en este caso, cuando llamo this.outputTargets, devolverá una matriz que contiene mis dos divs con el atributo data-target="hello.output".

    Tipos de eventos

    Escuchas cualquiera de los eventos que comúnmente podrías adjuntar mediante el método JavaScript addEventListener . Entonces, por ejemplo, podría escuchar cuando se hace clic en un botón, se envía un formulario o se cambia una entrada.

    Consulte Pen [Tipos de eventos: estímulo] (https://codepen.io/smashingmag/pen/wvMxNGJ) de Mike Rogers .

    Para escuchar windoweventos document(como cambiar el tamaño o que el usuario se desconecte), deberá agregar "@window" o "@document" al eventtipo (por ejemplo, resize@window-console#logEventllamará a la función logEvent) en el consolecontrolador cuando se cambie el tamaño de la ventana. .

     

    Existe una forma abreviada de adjuntar eventos comunes , donde puede omitir el tipo de evento y tiene una acción predeterminada para el tipo de elemento. Sin embargo, desaconsejo encarecidamente el uso de la taquigrafía de eventos, ya que aumenta la cantidad de suposiciones que alguien que esté menos familiarizado con Stimulus debe hacer sobre su código.

    Utiliza varios controladores en el mismo elemento

    Muy a menudo es posible que desee dividir dos piezas de lógica en clases separadas, pero que aparezcan cerca una de la otra dentro del HTML. Stimulus le permite conectar elementos a múltiples clases colocando referencias a ambas dentro de su HTML.

    Consulte el lápiz [Múltiples controladores: estímulo] (https://codepen.io/smashingmag/pen/XWXBOjy) de Mike Rogers .

    En el ejemplo anterior, configuré un basketobjeto que solo se ocupa de contar la cantidad total de artículos en la canasta, pero también agregué un childobjeto que muestra la cantidad de bolsas por artículo.

    Pasar datos a su objeto

    Consulte el lápiz [Passing Data - Stimulus](https://codepen.io/smashingmag/pen/mdVjvOP) de Mike Rogers .

    Stimulus proporciona los métodos this.data.gety this.data.setdentro de la clase de controlador, esto le permitirá cambiar los atributos de datos que están dentro del mismo espacio de nombres que el identificador. Con esto quiero decir que si desea pasar datos a su controlador de estímulo desde su HTML, simplemente agregue un atributo como data-[identifier]-a-variablea su elemento HTML.

    Al llamar this.data.set, actualizará el valor en su HTML para que pueda ver el cambio de valor cuando inspeccione el elemento utilizando las herramientas de desarrollo de su navegador.

    Usar atributos de datos con espacios de nombres es una forma realmente buena de ayudar a dejar realmente claro qué atributo de datos es para qué fragmento de código.

    Inicializar, Conectado, Desconectado

    A medida que su aplicación crezca, probablemente necesitará conectarse a 'eventos del ciclo de vida' para establecer valores predeterminados, recuperar datos o manejar la comunicación en tiempo real. Stimulus tiene tres métodos integrados que se llaman durante todo el ciclo de vida de una clase Stimulus.

    Vea el bolígrafo [Inicializar, Conectar, Desconectar - Estímulo] (https://codepen.io/smashingmag/pen/ZEQjwBj) de Mike Rogers .

    Cuando Stimulus ve un elemento con un data-controlleratributo coincidente, creará una nueva versión de su controlador y llamará a la initializefunción. Esto generalmente se ejecutará cuando cargue la página por primera vez, pero también se ejecutará si agrega nuevo HTML a su página (por ejemplo, a través de AJAX) que contenga una referencia a su controlador. No se ejecutará cuando mueva un elemento a una nueva posición dentro de su DOM.

    Una vez inicializada una clase, Stimulus la conectará al elemento HTML y llamará a la connectfunción. También lo llamará connectsi mueve un elemento dentro de su DOM. Entonces, si tomara un elemento, lo eliminara de un elemento y luego lo agregara en otro lugar, notaría que solo connectse llamará.

    La disconnectfunción se ejecutará cuando elimine un elemento de su página, por lo que, por ejemplo, si reemplazara el cuerpo de su HTML, podría eliminar cualquier código que deba volver a ejecutarse si el elemento no está en el mismo posición. Por ejemplo, si tuviera un editor WYSIWYG elegante que agregue mucho HTML adicional a un elemento, podría revertirlo a su estado original cuando disconnectse llamó.

     

    Heredar funcionalidad

    En ocasiones, es posible que desees compartir una pequeña funcionalidad común entre tus controladores Stimulus. Lo bueno de Stimulus es que (bajo el capó) estás conectando clases de JavaScript un tanto básicas a elementos HTML, por lo que compartir la funcionalidad debería resultarte familiar.

    Consulte Pen [Heredar funcionalidad - Estímulo] (https://codepen.io/smashingmag/pen/JjGBxbq) de Mike Rogers .

    En este ejemplo, configuro una clase principal llamada ParentController, que luego se extiende con una clase secundaria llamada ChildController. Esto me permitió heredar métodos de ParentControllerasí no tener que duplicar el código dentro de mi archivo ChildController.

    Utilizándolo en producción

    Arriba demostré algunos ejemplos bastante independientes de cómo usar Stimulus, que deberían darle una idea de lo que puede lograr. También pensé que debería mencionar cómo lo uso en producción y cómo me ha funcionado.

    paquete web

    Si estás usando Webpack, ¡te espera un placer! Stimulus fue creado totalmente para usarse con Webpack. Su documentación incluso tiene un bonito kit de inicio para Webpack . Le permitirá dividir sus controladores en archivos separados y Stimulus decidirá el nombre correcto para usar como identificador.

    No es necesario utilizar el paquete web si desea utilizar Stimulus, pero mejora mucho la experiencia. Personalmente, Stimulus fue la biblioteca que me ayudó a presentarme a Webpack y a sentir realmente el valor que ofrecía.

    Convenciones de nombres de archivos

    Mencioné en la introducción de este artículo que disfruté usando Stimulus porque me sentí organizado. Esto realmente se vuelve evidente cuando lo combina con Webpack, que permite la carga y el registro automáticos de controladores.

    Una vez que haya configurado Stimulus en Webpack, lo alentará a nombrar sus archivos como [identifier]_controller.js, donde el identificador es lo que pasará a su data-controlleratributo HTML.

    A medida que su proyecto crezca, es posible que también desee mover sus controladores Stimulus a subcarpetas. De una manera mágica, Stimulus convertirá los guiones bajos en guiones y carpetas con barras diagonales en dos guiones, que luego se convertirán en su identificador. Entonces, por ejemplo, el nombre del archivo chat/conversation_item_controller.jstendrá el identificador chat--conversation-item.

    Mantener menos JavaScript

    Una de mis citas favoritas es "El mejor código es no tener ningún código". Intento aplicar este enfoque a todos mis proyectos.

    Los navegadores web están evolucionando mucho, estoy bastante convencido de que la mayoría de las cosas que necesito para escribir JavaScript hoy se estandarizarán y se integrarán en el navegador dentro de los próximos 5 años. Un buen ejemplo de esto es el elemento de detalles , cuando comencé en el desarrollo era muy común tener que codificar manualmente esa funcionalidad usando jQuery.

     

    Como resultado de esto, si puedo escribir HTML accesible con un poco de JavaScript para satisfacer mis necesidades, con la mentalidad de "Esto funciona hoy, pero en 5 años quiero reemplazarlo fácilmente", seré un feliz. desarrollador. Esto es mucho más factible cuando se ha escrito menos código para empezar, algo a lo que Stimulus se presta.

    HTML primero, luego JavaScript

    Un aspecto que realmente me gusta del enfoque que fomenta Stimulus es que puedo concentrarme en enviar HTML a mis usuarios, que luego se mejora un poco con JavaScript.

    Siempre he sido partidario de utilizar los primeros milisegundos de atención de un usuario para obtener lo que tengo para compartir con él, frente a él. Luego, preocuparse por configurar la capa de interacción mientras el usuario puede comenzar a procesar lo que está viendo.

    Además, si JavaScript fallara por cualquier motivo, el usuario aún puede ver el contenido e interactuar con él sin JavaScript. Por ejemplo, en lugar de enviar un formulario a través de AJAX, se enviará mediante una solicitud de formulario tradicional que recarga la página.

    Conclusión

    Me encanta crear sitios que necesitan solo pequeñas dosis de JavaScript mantenible para mejorar la experiencia del usuario; a veces es bueno crear algo que parezca más simple. Tener algo liviano es genial, realmente me encanta que sin demasiada carga cognitiva, está bastante claro cómo organizar los archivos y configurar pequeñas rutas de navegación que dan pistas sobre cómo se ejecutará JavaScript con un fragmento de HTML.

    Realmente disfruté trabajando con Stimulus. No hay mucho que hacer, por lo que la curva de aprendizaje es bastante suave. Estoy bastante seguro de que si pasara mi código a otra persona, serían desarrolladores felices. Recomiendo encarecidamente probarlo, aunque sea por pura curiosidad.

    El elefante en la habitación es cómo se compara con React y Vue, pero en mi opinión, son herramientas diferentes para un requisito diferente. En mi caso, a menudo renderizo HTML desde mi servidor y agrego un poco de JavaScript para mejorar la experiencia. Si estuviera haciendo algo más complejo, consideraría un enfoque diferente (o retrasaría los requisitos para ayudar a que mi código se sintiera simple).

    Otras lecturas

    • Página de inicio de Stimulus
      Tienen un manual fantástico que profundiza mucho más en los conceptos que he descrito anteriormente.
    • Repositorio Stimulus GitHub
      He aprendido mucho sobre cómo funciona Stimulus explorando su código.
    • Stimulus Cheatsheet
      El manual resumido en una sola página.
    • Foro de estímulo
      Ver a otras personas trabajando con Stimulus me ha hecho sentir realmente como si lo estuvieran utilizando en la naturaleza.

    (sh, ra, yk, il)Explora más en

    • javascript
    • Marcos
    • Herramientas
    • Generadores





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Una introducción a Stimulus.js

    Una introducción a Stimulus.js

    ¡Registro! SmashingConf Friburgo 2024 Índice Terminología

    programar

    es

    https://aprendeprogramando.es/static/images/programar-una-introduccion-a-stimulus-1046-0.jpg

    2024-05-21

     

    Una introducción a Stimulus.js
    Una introducción a Stimulus.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20