Share
Stimulus es un "marco de JavaScript modesto", creado por la gente de Basecamp que te trajo Rails.
Es, en muchos sentidos, lo opuesto a otros marcos modernos disponibles en la actualidad. Si bien puedes ver algunos conceptos y nombres similares, el estímulo es muy diferente en algunos aspectos fundamentales. Discutiremos esas diferencias brevemente y luego construiremos nuestra primera aplicación con Stimulus..
Los conceptos centrales de muchos marcos modernos se encuentran en la separación de "estado" del "DOM". De esta manera, el DOM actúa solo como un cliente para los datos que representa.
El estímulo invierte este concepto en su cabeza y, en cambio, confía en el DOM para mantener el estado.
Lo que esto significa en última instancia es que Stimulus es más adecuado para las aplicaciones que sirven HTML (en lugar de, por ejemplo, integrarse con una API JSON).
Con Stimulus, no verás plantillas HTML. En cambio, verás datos-* Atributos que conectan el HTML a la aplicación JavaScript..
Esto también significa que no verás cosas como cada o mapa Bucles como puede ver en Manillares o Reaccionar.
El estímulo no tiene el trabajo de representar HTML a menos que crees explícitamente esa funcionalidad.
Así que el estímulo no rinde plantillas. Más bien, está diseñado para conectar las acciones y los eventos que toma en el extremo frontal de una aplicación a los controladores en el extremo posterior..
El estímulo utiliza tres conceptos para lograr esto: objetivos, controladores, y comportamiento.
Pero antes de que lleguemos demasiado lejos, sigamos adelante y pongamos a funcionar el Estímulo en tu computadora!
Esta configuración asume que ya ha instalado una versión reciente de NodeJS en su computadora. Dirígete a nodejs.org si aún no lo has hecho.
Estaremos usando una estática básica index.html archivo que inicialmente se verá así:
Nota: En este tutorial, no cubriremos ningún proceso de creación o diseño del CSS..
A continuación, crea una carpeta llamada src. Dentro de src, crear otra carpeta llamada controladores y una sola index.js expediente.
Usaremos Webpack para construir nuestra aplicación de JavaScript, ya que Stimulus usa algunas características avanzadas de JavaScript que no funcionarán directamente en los navegadores..
Crea un archivo en la raíz de tu proyecto llamado paquete.json que tiene los siguientes contenidos:
"nombre": "wdstimulus", "versión": "1.0.0", "descripción": "Introducción al estímulo", "scripts": , "autor": "Su nombre", "licencia": "ISC "," devDependencies ": " @ babel / core ":" ^ 7.0.0-beta.39 "," @ babel / preset-env ":" ^ 7.0.0-beta.39 "," babel-loader " : "^ 8.0.0-beta.0", "babel-preset-stage-0": "^ 6.24.1", "estímulo": "^ 1.0.0", "webpack": "^ 3.10.0"
Nota: estas versiones cambiarán en el futuro y le recomendamos que se mantenga actualizado con la última versión de cualquier herramienta tanto como sea práctico..
También puedes generar este archivo usando npm init e instalación de dependencias una por una usando npm install [nombre-paquete].
Este archivo incluye todo lo que necesitamos para crear una compilación compatible con el navegador de nuestra aplicación de estímulo. Desde la raíz de la aplicación, ejecute npm instalar. Esto instalará estas dependencias en el nodo_módulos directorio dentro de su aplicación.
A continuación, crearemos un archivo de configuración para que Webpack sepa lo que queremos que haga con nuestros archivos cuando los guardemos. En el mismo directorio raíz donde el paquete.json Se encuentra, creó un archivo llamado webpack.config.js, y añadir estos contenidos:
module.exports = module: rules: [test: /\.js$/, exclude: / (node_modules) /, use: loader: 'babel-loader', opciones: presets: ["@ babel / env "], complementos: [" transform-class-properties "];
Este archivo básicamente le dice a Webpack que compile nuestro JavaScript usando el ajuste preestablecido de env. Tenemos el preset de etapa 0 disponible en nuestros módulos de nodos, y también hemos agregado el complemento de propiedades de clase de transformación requerido.
El último paso para estar listo para una aplicación de estímulo es completar nuestra index.js Archivo con los siguientes contenidos:
Accentsconagua
importar Aplicación desde "estímulo" importar definicionesFromContext desde "estímulo / webpack-helpers" const application = Application.start () const context = require.context ("./ controllers", true, /\.js$/) aplicación.load (definicionesFromContext (contexto))Este código viene directamente de los documentos de estímulo. Realiza algo de magia para permitirnos usar una estructura de nombres convencional al crear nuestro código de aplicación.
La denominación de tus archivos realmente importa a Stimulus si usas esto index.js Código (este matiz es algo que los desarrolladores de Rails encontrarán familiar).
Ahora que estamos todos configurados, asegurémonos de que nuestra compilación Webpack funcione. Desde el directorio raíz, ejecute el siguiente comando:
npx webpack src / index.js dist / bundle.js --watch
los npx Una parte de este comando es una forma conveniente de ejecutar binarios que se encuentran en el nodo_módulos directorio. Este comando observará los cambios en sus archivos JavaScript y reconstruirá su aplicación a medida que realiza esos cambios..
Mientras no veas errores en tu consola, estás listo para continuar.!
Si está familiarizado con Rails o Laravel, el concepto de controladores podría ser fácil de adoptar para usted..
Piense en un controlador en el caso de Stimulus como una clase de JavaScript que contiene algunos métodos y datos que trabajan juntos.
Un controlador podría tener este aspecto en Estímulo:
// src / controllers / refreshable_controller.js importar Controlador de la clase predeterminada de exportación "estímulo" extiende el Controlador
Hay algunos puntos importantes a tener en cuenta sobre este controlador. Primero, el controlador es HTML y JavaScript. los controlador de datos atributo es lo que le dice a JavaScript que cree una nueva instancia de la clase.
Otra característica interesante a tener en cuenta es el hecho de que el nombre de la clase no se encuentra en ninguna parte de la clase del controlador. Esto sucede debido a la línea aplicación.load (definicionesFromContext (contexto)) en el index.js expediente. Esta línea carga el código de la aplicación y utiliza los nombres de archivo para inferir nombres de clase Esto puede ser confuso al principio, pero una vez que comienza a usar esta convención regularmente, se vuelve mucho más fluido..
Un acción es lo que parece: un procedimiento que desea realizar después de un evento particular de un usuario. Para nuestro controlador de actualización, queremos realizar una actualización de un área particular de contenido cuando se hace clic en un botón. En este caso, nuestra acción podría ser llamada. refrescar.
// src / controllers / refreshable_controller.js importar controlador de "estímulo" exportar la clase predeterminada amplía el controlador refresh () console.log ("refresh!")Pero solo tener este método de acción disponible en nuestro controlador no hace nada. Necesitamos conectarlo a nuestro HTML..
Cuando el usuario hace clic en el botón en este HTML, ejecutará la acción de actualización en el controlador.
Ahora, ¿cómo podemos usar esta acción para hacer algo en la página??
El estímulo también utiliza un concepto llamado "Objetivos" para conectarse a elementos importantes en la página. Usaremos esto para administrar un elemento contenedor que contiene el contenido que queremos actualizar.
// src / controllers / refreshable_controller.js importar controlador de "estímulo" exportar la clase predeterminada amplía el controlador objetivos estáticos = ["contenido"] actualizar () this.contentTarget.innerHTML = "Actualizar!"
En este ejemplo, tenemos representados los tres conceptos de Estímulo. UNA refrescable controlador, un refrescar acción, y un contenido objetivo.
Si está observando detenidamente, verá algo en este código que podría sorprenderlo: Manipulación directa del DOM.. Esta es una de las formas en que Stimulus es diferente de otros marcos. La manipulación directa de los elementos DOM no solo es posible, sino que se recomienda.
Esto también significa que si usted está bien versado en jQuery o vanilla JavaScript y las API del navegador, ¡puede aprovechar ese conocimiento! Por ejemplo, una versión con jQuery del método de actualización podría tener este aspecto:
// src / controllers / refreshable_controller.js import Controller de "stimulus" import $ from 'jquery'; // requiere agregar jQuery a la clase predeterminada de exportación package.json extiende Controller static goals = ["content"] refresh () let target = this.contentTarget; $ .get ("/ content", function (content) $ (target) .html (content))El estímulo no se interpone en el camino si desea utilizar otras herramientas con las que ya está familiarizado.
¡Ahora tiene suficiente información para comenzar a crear más aplicaciones que se puedan mantener con Stimulus! Los desarrolladores que crearon Stimulus nos recuerdan que las reglas y las tendencias pueden romperse y, a veces, podemos romper con las "mejores prácticas" y simplemente hacer algo que nos funcione..
Disfruta buceando en el estímulo!
Hemos creado una guía completa para ayudarlo a aprender JavaScript, ya sea que esté comenzando a trabajar como desarrollador web o si desea explorar temas más avanzados..
