Share
Stimulus est un “framework JavaScript modeste”, construit par les gens de Basecamp qui vous ont apporté Rails.
C'est, à bien des égards, l'opposé des autres cadres modernes disponibles aujourd'hui. Bien que vous puissiez voir des concepts et des noms similaires, Stimulus est très différent à certains égards fondamentaux. Nous allons discuter brièvement de ces différences, puis construire notre première application avec Stimulus.
Les concepts de base de nombreux cadres modernes consistent à séparer «État» du «DOM». De cette manière, le DOM agit uniquement en tant que client des données qu’il représente..
Stimulus renverse ce concept et se base plutôt sur le DOM pour maintenir l'état.
Cela signifie finalement que Stimulus convient le mieux aux applications qui utilisent HTML (plutôt que, par exemple, l'intégration à une API JSON).
Avec Stimulus, vous ne verrez pas les modèles HTML. Au lieu de cela, vous verrez Les données-* attributs qui connectent le code HTML à l'application JavaScript.
Cela signifie également que vous ne verrez pas des choses comme chaque ou carte des boucles comme vous pourriez le voir dans les guidons ou React.
Stimulus ne tient pas le travail de rendu HTML, sauf si vous créez explicitement cette fonctionnalité.
Donc, Stimulus ne rend pas les modèles. Il est plutôt conçu pour connecter les actions et les événements que vous effectuez sur le front-end d'une application aux contrôleurs situés sur le back-end..
Pour ce faire, Stimulus utilise trois concepts: cibles, contrôleurs, et actes.
Mais avant d’entrer trop loin, allons de l'avant et mettons Stimulus en marche sur votre ordinateur!
Cette installation suppose que vous avez déjà installé une version récente de NodeJS sur votre ordinateur. Rendez-vous sur nodejs.org si vous ne l'avez pas déjà fait.
Nous allons utiliser une base statique index.html fichier qui ressemblera initialement à ceci:
Remarque: Nous ne couvrirons aucun processus de création ni de style pour le CSS dans ce tutoriel.
Ensuite, créez un dossier appelé src. À l'intérieur de src, créer un autre dossier appelé contrôleurs et un seul index.js fichier.
Nous utiliserons Webpack pour créer notre application JavaScript, car Stimulus utilise certaines fonctionnalités avancées de JavaScript qui ne fonctionneront pas directement dans les navigateurs..
Créez un fichier à la racine de votre projet appelé package.json qui a le contenu suivant:
"name": "wdstimulus", "version": "1.0.0", "description": "Introduction au stimulus", "scripts": , "author": "Votre nom", "licence": "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", "stimulus": "^ 1.0.0", "webpack": "^ 3.10.0"
Remarque: ces versions changeront dans le futur, et nous vous recommandons de vous tenir au courant de la dernière version de tout outil autant que possible.
Vous pouvez également générer ce fichier en utilisant npm init et installer les dépendances une par une en utilisant npm install [nom du paquet].
Ce fichier contient tout ce dont nous avons besoin pour créer une version compatible avec le navigateur de notre application Stimulus. À partir de la racine de l'application, exécutez npm installer. Ceci installera ces dépendances dans le node_modules répertoire dans votre application.
Ensuite, nous allons créer un fichier de configuration afin que Webpack sache ce que nous voulons qu'il fasse avec nos fichiers lorsque nous les sauvegardons. Dans le même répertoire racine où le package.json est situé, créé un fichier appelé webpack.config.js, et ajoutez ces contenus:
module.exports = module: règles: [test: /\.js$/, exclure: / (node_modules) / / utiliser: loader: 'babel-loader', options: presets: ["@ babel / env "], plugins: [" transform-class-properties "];
Ce fichier indique essentiellement à Webpack de compiler notre code JavaScript en utilisant le préréglage env. Le préréglage stage-0 est disponible dans nos modules de nœud et nous avons également ajouté le plug-in de transformation-classe-propriétés requis..
La dernière étape pour être prêt pour une application Stimulus est de remplir notre index.js fichier avec le contenu suivant:
Accentsconagua
import Application de "stimulus" import definitionsFromContext de "stimulus / webpack-helpers" const application = Application.start () const context = require.context ("./ controllers", true, /\.js$/) application.load (definitionsFromContext (context))Ce code provient directement de la documentation Stimulus. Il effectue une certaine magie pour nous permettre d'utiliser une structure de nommage conventionnelle lors de la création de notre code d'application.
La dénomination de vos fichiers est réellement importante pour Stimulus si vous utilisez cette index.js code (cette nuance est quelque chose que les développeurs de Rails trouveront familier).
Maintenant que tout est configuré, assurons-nous que notre version de Webpack fonctionne. À partir du répertoire racine, exécutez la commande suivante:
npx webpack src / index.js dist / bundle.js --watch
le npx partie de cette commande est un moyen pratique d’exécuter des fichiers binaires situés dans le node_modules annuaire. Cette commande surveillera les modifications apportées à vos fichiers JavaScript et reconstruira votre application à mesure que vous apportez ces modifications..
Tant que vous ne voyez pas d'erreur dans votre console, vous êtes prêt à partir.!
Si vous connaissez Rails ou Laravel, le concept de contrôleur peut être facile à adopter pour vous..
Pensez à un contrôleur dans le cas de Stimulus comme une classe JavaScript contenant des méthodes et des données fonctionnant ensemble..
Un contrôleur pourrait ressembler à ceci dans Stimulus:
// src / controllers / refreshable_controller.js import Controller à partir de la classe d'exportation "stimulus" par défaut étend Controller
Il y a quelques points importants à noter à propos de ce contrôleur. Premièrement, le contrôleur est à la fois HTML et JavaScript. le contrôleur de données attribut est ce qui dit au JavaScript de créer une nouvelle instance de la classe.
Une autre caractéristique intéressante à noter est le fait que le nom de la classe ne se trouve nulle part dans la classe du contrôleur lui-même. Cela se produit à cause de la ligne application.load (definitionsFromContext (context)) dans le index.js fichier. Cette ligne charge le code de l’application et utilise les noms de fichier pour déduire noms de classe. Cela peut paraître déroutant au début, mais une fois que vous commencez à utiliser cette convention régulièrement, elle devient beaucoup plus fluide..
Un action C'est ce que cela ressemble: une procédure que vous souhaitez avoir après un événement particulier d'un utilisateur. Pour notre contrôleur d'actualisation, nous souhaitons actualiser une zone de contenu particulière lorsqu'un clic est effectué sur un bouton. Dans ce cas, notre action pourrait s'appeler rafraîchir.
// src / controllers / refreshable_controller.js import Controller de la classe d'exportation "stimulus" par défaut étend Controller refresh () console.log ("refresh!")Mais le fait d’avoir cette méthode d’action disponible dans notre contrôleur ne fait rien. Nous devons le connecter à notre code HTML.
Lorsque l'utilisateur clique sur le bouton dans ce code HTML, il exécute l'action d'actualisation dans le contrôleur..
Maintenant, comment pouvons-nous utiliser cette action pour faire quelque chose sur la page?
Stimulus utilise également un concept appelé «Cibles» pour se connecter aux éléments importants de la page. Nous allons l'utiliser pour gérer un élément conteneur qui contient le contenu que nous voulons actualiser..
// src / controllers / refreshable_controller.js import Controller de la classe d'exportation "stimulus" par défaut étend Controller Controller static tasks = ["content"] refresh () this.contentTarget.innerHTML = "Refresh!"
Dans cet exemple, les trois concepts de stimulus sont représentés. UNE rafraîchissable contrôleur, un rafraîchir action, et un contenu cible.
Si vous regardez de près, vous verrez quelque chose dans ce code qui pourrait vous prendre au dépourvu: manipulation directe du DOM. C'est une des raisons pour laquelle Stimulus est différent des autres frameworks. La manipulation directe des éléments DOM n'est pas seulement possible, elle est encouragée.
Cela signifie également que si vous connaissez bien JavaScript et les API de navigateur jQuery ou vanilla, vous pouvez en tirer parti! Par exemple, une version de la méthode d'actualisation basée sur jQuery pourrait ressembler à ceci:
// src / controllers / refreshable_controller.js import Contrôleur de "stimulus" import $ de 'jquery'; // nécessite l'ajout de jQuery à package.json. La classe d'exportation par défaut s'étend au contrôleur static target = ["content"]. refresh () let target = this.contentTarget; $ .get ("/ content", fonction (contenu) $ (cible) .html (contenu))Si vous voulez utiliser d'autres outils que vous connaissez déjà, les stimuli ne vous gênent pas.
Vous avez maintenant assez d’informations pour commencer à créer des applications plus maintenables avec Stimulus! Les développeurs qui ont créé Stimulus nous rappellent que les règles et les tendances peuvent être brisées, et que parfois nous pouvons rompre avec les «meilleures pratiques» et faire quelque chose qui fonctionne pour nous..
Profiter de plonger dans Stimulus!
Nous avons créé un guide complet pour vous aider à apprendre le JavaScript, que vous soyez débutant en tant que développeur Web ou que vous souhaitiez explorer des sujets plus avancés..
