Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Stimulus
Webdesign

Stimulus: Un Marco de JavaScript para los amantes de HTML

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Richter Domagas (you can also view the original English article)

Stimulus es un "marco de JavaScript modesto", construido por la gente de Basecamp que le trajo Rails.

Es, en muchos sentidos, lo contrario de otros marcos modernos disponibles hoy en día. Y se pueden ver algunos conceptos similares, Stimulus es muy diferente en algunos aspectos fundamentales. Nosotros discutiros esas diferencias brevemente y luego construir nuestra primera aplicación con unas Stimulus.

El DOM: ¿Un lugar para el estado?

Los conceptos de núcleo de muchos marcos modernos se encuentran en la separación de "estado" de "DOM". De esta forma, DOM actúa solamente como un cliente a los datos que representa.

Stimulus cambia este concepto en su cabeza y en su lugar se basa en el DOM para mantener estado.

Lo que esto significa en última instancia es que el mejor es Stimulus adecuado para aplicaciones que servir HTML (en lugar de por ejemplo, la integración con una JSON API).

Con unas Stimulus, no verás las plantillas HTML. En cambio, verá data-* atributos que conectan el HTML a la aplicación JavaScript.

Esto también significa no ver las cosas como each ni map lazos como se puede ver en Handlebars ni React.

Stimulus no mantiene el trabajo de renderizado HTML a menos que usted explícitamente crea esa funcionalidad.

Así que... ¿Qué hace?

Así que el Stimulus no renderiza plantillas. Más bien está construido para conectar acciones y eventos que usted toma en la parte delantera de una aplicación a los controladores en el extremo posterior.

Stimulus utiliza tres conceptos para lograr esto: targets, controllers y actions.

Pero antes de llegar demasiado lejos, vamos a seguir adelante y levantarse Stimulus y ejecutándose en tu computadora!

Programa de instalación

Esta configuración se supone que ya ha instalado una versión reciente de investigación en su computadora. Dirígete a nodejs.org si no ha hecho esto.

Usaremos un archivo index.html estática básica que inicialmente se verá así:

Nota: Realmente no cubre cualquier estilo ni construir procesos para el CSS en este tutorial.

A continuación, cree una carpeta llamada src. Dentro de src, crear otra carpeta llamada controllers y un archivo index.js sola.

Usaremos Webpack para construir nuestra aplicación de JavaScript, como Stimulus utiliza algunas características avanzadas de JavaScript que no funciona directamente en navegadores.

Crear un archivo en la raíz de su proyecto denominado package.json que tiene el siguiente contenido:

Nota: estas versiones cambiará en el futuro, y se recomienda permanecer actualizado con la última versión de cualquier herramienta tanto como sea posible.

También puede generar este archivo usando npm init e instalar dependencias uno por uno usando npm install [package-name].

Este archivo incluye todo que lo necesario para crear una estructura compatible con el explorador de la aplicación del Stimulus. De la raíz de la aplicación, ejecutar npm install. Esto instalará estas dependencias en el directorio node_modules dentro de su aplicación.

A continuación, vamos a crear un archivo de configuración Webpack sabe lo que queremos hacer con nuestros archivos cuando nos salvar. En el mismo directoria raíz de donde la package.json se encuentra, crea un archivo llamado webpack.config.js y añadir estos contenidos:

Este archivo dice esencialmente Webpack para compilar nuestro JavaScript usando el preset de env. Tenemos la programación de etapa-0 disponible en nuestros módulos de nodo, y también hemos añadido el enchufar requiere de propiedades de la clase de transformación.

El último paso para estar listo para la aplicación de unas Stimulus es para completar nuestro archivo index.js con el siguiente contenido:

Este código viene directamente de los Stimulus docs. Realiza magia para usar una estructura convencional de la nomenclatura al crear el código de la aplicación.

El nombramiento de archivos realmente importa al Stimulus si utilizas este código index.js (este matiz es algo Rails desarrolladores encontrarán a familiar).

Ahora que estamos todos para arriba, asegurémonos de que nuestro Webpack construirá obras. Desde el directoria raíz, ejecute el siguiente comando:

La porción de la npx de este comando es una manera conveniente de ejecutar binarios que se encuentran en el directorio node_modules. Este comando va a ver cambios a los archivos de JavaScript y reconstruir tu aplicación al hacer esos cambios.

Como no ve errores en tu consola, eres bueno para ir!

Controllers

Si estás familiarizado con Rails o Laravel, el concepto de controllers podría ser fácil de adoptar para usted.

Pensar en un regulador en el caso de Stimulus como una clase de JavaScript que contiene algunos métodos y datos que funcionan en conjunto.

Un controller de este aspecto en unas Stimulus:

Hay algunos puntos importantes a destacar en este controller. En primer lugar, el controller es HTML y JavaScript. El data-controller es lo que dice el JavaScript para crear una nueva instancia de la clase.

Otra característica interesante a notar es el hecho del que el nombre de clase no se encuentra en cualquier lugar en la propia clase controller. Esto sucede debido a la application.load(definitionsFromContext(context)) de la línea en el archivo index.js. Esta línea carga el código de aplicación y los nombres de archivo utilizan para infer nombres de clase. Esto puede ser confuso al principio, pero una vez que empiece a usar esta convención regularmente, se convierte en mucho más fluida.

Actions

Una action es lo que parece: un procedimiento que desea tomar lugar después de un evento particular de un usuario. Para nuestro refresh controller, queremos realizar una refresh de una zona particular de contenido cuando se hace clic en un botón. En este caso, nuestra acción podría llamarse refresh.

Pero sólo tener este método de acción disponible en nuestro controller no hace nada. Queremos conectar a nuestro HTML.

Cuando el usuario hace clic en el botón en este HTML, funcionaría la refresh action en el controller.

Ahora, ¿cómo podemos usar esta acción para hacer algo en la página?

Targets

Stimulus también utiliza un concepto llamado “Targets” para conectar a elementos importantes de la página. Usaremos esto para manejar un elemento contenedor que contiene el contenido que desea refresh.

En este ejemplo, tenemos todos los tres conceptos de estímulo representado. Un refreshable controller, una refresh action y un content target.

Si usted está mirando de cerca, verás algo en este código que puede coger con la guardia baja: directa manipulación del DOM. Ésta es una manera del que unas Stimulus es diferente de otros marcos. Manipulación directa de elementos DOM no sólo es posible, se recomienda.

Esto también significa que si está bien versados en jQuery o JavaScript vainilla y navegador APIs, usted puede tomar ventaja de ese conocimiento! Por ejemplo, una versión potenciada de jQuery del método de refresh podría tener este aspecto:

Stimulus no hay manera si desea utilizar otras herramientas que ya conocen.

¡Eso es todo para este curso intensivo!

¡Ahora tienes suficiente información para empezar a construir aplicaciones más mantenibles con Stimulus! Los desarrolladores que crearon Stimulus nos recuerdan que las reglas y las tendencias pueden ser rotas, y a veces podemos romper con las "mejores prácticas" y hacer algo que funcione para nosotros.

¡Submarinismo en Stimulus!

Más lectura

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.