Stimulus — это «скромный JavaScript-фреймворк», созданный ребятами из Basecamp, которые принесли вам Rails.
Это во многом противоположность другим современным системам, доступным сегодня. Хотя вы можете увидеть некоторые похожие концепции и названия, Стимул сильно отличается в некоторых фундаментальных отношениях. Мы кратко обсудим эти различия, а затем создадим наше первое приложение на Stimulus.
ДОМ: место для государства?
Основные понятия многих современных структур лежат в отделении «состояния» от «DOM». Таким образом, DOM действует только как клиент для данных, которые он представляет.
Стимул переворачивает эту концепцию с ног на голову и вместо этого полагается на DOM для удержания состояния.
В конечном итоге это означает, что Stimulus лучше всего подходит для приложений, которые обслуживают HTML (а не, например, для интеграции с JSON API).
С Stimulus вы не увидите шаблоны HTML. Вместо этого вы увидите атрибуты data-* которые соединяют HTML с приложением JavaScript.
Это также означает, что вы не увидите такие вещи, как each или петли map как вы могли бы видеть в Handlebars или React.
Стимул не выполняет работу по визуализации HTML, если вы явно не создадите эту функциональность.
Итак … Что это делает?
Так что Стимул не рендерит шаблоны. Скорее, он построен для соединения действий и событий, которые вы выполняете во внешнем интерфейсе приложения, с контроллерами во внутреннем интерфейсе.
Стимул использует три концепции для достижения этой цели : цели, контроллеры и действия.
Но прежде чем мы зайдем слишком далеко, давайте продолжим и запустим Stimulus на свой компьютер!
Настроить
Эта настройка предполагает, что вы уже установили на свой компьютер последнюю версию NodeJS. Зайдите на nodejs.org, если вы еще этого не сделали.
Мы будем использовать базовый статический файл index.html , который изначально будет выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
|
<!doctype html>
<html>
<head>
<link rel=»stylesheet» href=»./dist/bundle.css»>
</head>
<body>
<!— application code will go here —>
<script src=»./dist/bundle.js»></script>
</body>
</html>
|
Примечание . В этом руководстве мы не будем описывать процессы стилизации и сборки для CSS.
Затем создайте папку с именем src . Внутри src создайте еще одну папку с именем controllers и один файл index.js .
Мы будем использовать Webpack для создания нашего приложения JavaScript, поскольку Stimulus использует некоторые расширенные функции JavaScript, которые не будут работать непосредственно в браузерах.
Создайте файл в корне вашего проекта с именем package.json который имеет следующее содержимое:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
{
«name»: «wdstimulus»,
«version»: «1.0.0»,
«description»: «Stimulus Introduction»,
«scripts»: {},
«author»: «Your Name»,
«license»: «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»
}
}
|
Примечание : эти версии будут меняться в будущем, и мы рекомендуем оставаться в курсе последних версий любого инструмента, насколько это практически возможно.
Вы также можете сгенерировать этот файл с помощью npm init и установить зависимости один за другим с помощью npm install [package-name] .
Этот файл включает в себя все, что нам нужно для создания совместимой с браузером сборки нашего приложения Stimulus. В корне приложения запустите npm install . Это установит эти зависимости в каталоге node_modules внутри вашего приложения.
Далее мы создадим файл конфигурации, чтобы Webpack знал, что мы хотим, чтобы он делал с нашими файлами, когда мы их сохраняем. В том же корневом каталоге, где находится package.json , webpack.config.js файл с именем webpack.config.js и добавьте следующее содержимое:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: ‘babel-loader’,
options: {
presets: [«@babel/env»],
plugins: [«transform-class-properties»]
}
}
}
]
}
};
|
Этот файл, по сути, говорит Webpack о необходимости компилировать наш JavaScript с использованием предустановки env . У нас есть предустановка stage-0, доступная в наших модулях узла, и мы также добавили необходимый плагин transform-class-properties .
Последний шаг, который нужно подготовить для приложения Stimulus, — это заполнить наш файл index.js следующим содержанием:
|
1
2
3
4
5
6
|
import { Application } from «stimulus»
import { definitionsFromContext } from «stimulus/webpack-helpers»
const application = Application.start()
const context = require.context(«./controllers», true, /\.js$/)
application.load(definitionsFromContext(context))
|
Этот код взят непосредственно из документов Stimulus. Он выполняет некоторую магию, чтобы позволить нам использовать обычную структуру именования при создании кода нашего приложения.
Наименование ваших файлов действительно имеет значение для Stimulus, если вы используете этот код index.js (этот нюанс — то, что разработчики Rails найдут знакомым).
Теперь, когда мы все настроили, давайте удостоверимся, что наша сборка Webpack работает. Из корневого каталога выполните следующую команду:
|
1
|
npx webpack src/index.js dist/bundle.js —watch
|
Часть этой команды npx — это удобный способ запуска двоичных файлов, которые находятся в каталоге node_modules . Эта команда будет наблюдать за изменениями в ваших файлах JavaScript и перестраивать ваше приложение по мере внесения этих изменений.
Пока вы не видите ошибок в своей консоли, вы готовы!
Контроллеры
Если вы знакомы с Rails или Laravel, вам может быть легко принять концепцию контроллеров.
Думайте о контроллере в случае Stimulus как о классе JavaScript, который содержит некоторые методы и данные, которые работают вместе.
Контроллер может выглядеть следующим образом в Стимул:
|
1
2
3
|
<div data-controller=»refreshable»>
<!— more soon… —>
</div>
|
|
1
2
3
4
5
|
// src/controllers/refreshable_controller.js
import { Controller } from «stimulus»
export default class extends Controller {
}
|
Есть несколько важных моментов, которые стоит отметить об этом контроллере. Во-первых, контроллером является как HTML, так и JavaScript. Атрибут data-controller указывает JavaScript для создания нового экземпляра класса.
Еще одна интересная характеристика, на которую следует обратить внимание, это то, что имя класса не найдено нигде в самом классе контроллера. Это происходит из-за строки application.load(definitionsFromContext(context)) в файле index.js . Эта строка загружает код приложения и использует имена файлов, чтобы вывести имена классов. Поначалу это может сбивать с толку, но как только вы начнете регулярно использовать это соглашение, оно станет намного более плавным.
действия
Действие — это то, на что это похоже: процедура, которую вы хотите выполнить после определенного события от пользователя. Для нашего контроллера обновлений мы хотим выполнить обновление определенной области содержимого при нажатии кнопки. В этом случае наше действие можно назвать refresh .
|
1
2
3
4
5
6
7
8
|
// src/controllers/refreshable_controller.js
import { Controller } from «stimulus»
export default class extends Controller {
refresh(){
console.log(«refresh!»)
}
}
|
Но просто наличие этого метода действия в нашем контроллере ничего не делает. Нам нужно подключить его к нашему HTML.
|
1
2
3
|
<div data-controller=»refreshable»>
<button data-action=»refreshable#refresh»>Refresh</button>
</div>
|
Когда пользователь нажимает кнопку в этом HTML, он запускает действие обновления в контроллере.
Теперь, как мы можем использовать это действие, чтобы сделать что-то на странице?
Цели
Стимул также использует концепцию под названием «Цели» для подключения к важным элементам на странице. Мы будем использовать это для управления элементом контейнера, который содержит контент, который мы хотим обновить.
|
1
2
3
4
|
<div data-controller=»refreshable»>
<button data-action=»refreshable#refresh»>Refresh</button>
<article data-target=»refreshable.content»></article>
</div>
|
|
01
02
03
04
05
06
07
08
09
10
11
12
|
// src/controllers/refreshable_controller.js
import { Controller } from «stimulus»
export default class extends Controller {
static targets = [ «content» ]
refresh(){
this.contentTarget.innerHTML = «Refresh!»
}
}
|
В этом примере представлены все три понятия стимула. refreshable контроллер, действие refresh и цель content .
Если вы посмотрите внимательно, вы увидите в этом коде что-то, что может застать вас врасплох: прямое манипулирование DOM. Это один из способов, которыми Стимул отличается от других рамок. Прямое манипулирование элементами DOM не только возможно, но и поощряется.
Это также означает, что если вы хорошо разбираетесь в jQuery или ванильном JavaScript и браузерных API, вы можете воспользоваться этими знаниями! Например, версия метода refresh на основе jQuery может выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
// src/controllers/refreshable_controller.js
import { Controller } from «stimulus»
import $ from ‘jquery’;
export default class extends Controller {
static targets = [ «content» ]
refresh(){
let target = this.contentTarget;
$.get(«/content», function(content){
$(target).html(content)
})
}
}
|
Стимул не мешает, если вы хотите использовать другие инструменты, с которыми вы уже знакомы.
Вот и все для этого ускоренного курса!
Теперь у вас достаточно информации, чтобы начать создавать более удобные в обслуживании приложения с помощью Stimulus! Разработчики, создавшие Стимул, напоминают нам, что правила и тенденции могут быть нарушены, и иногда мы можем отказаться от «лучших практик» и просто сделать то, что работает для нас.
Наслаждайтесь погружением в Стимул!
Дальнейшее чтение
Изучите JavaScript: полное руководство
Мы создали полное руководство, которое поможет вам изучить JavaScript , независимо от того, начинаете ли вы как веб-разработчик или хотите изучать более сложные темы.