Stimulus: скромный Javascript framework

Релиз данного фреймворка состоялся 30 Января 2018г. (v1.0.0). Stimulus отличается от современных Javascript фреймворков, призывая к еще большему разделению между содержимым и его поведением в HTML:

Stimulus - javascript framework со скромными амбициями. В отличии от других javascript фреймворков, Stimulus не собирается управлять всем вашим front-end. Задачей Stimulus является "улучшение" вашего HTML, путем автоматического маппинга HTML элементов и Javascript объектов.

В документации поясняется, что разделение между поведением и содержимым HTML достигается путем использования data-controller HTML аттрибутов.

Вот небольшой пример как это выглядит в HTML:

<div data-controller="hello">
  <input type="text">
  <button data-action="click->hello#greet">Greet</button>
</div>

А вот так это выглядит в Javascript:

// src/controllers/hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  greet() {
    console.log("Hello, Stimulus!", this.element)
  }
}

Аттрибут data-action="click->hello#greet" отвечает за поведение кнопки "Greet". Строится он так:

  • click - имя события
  • hello - идентификатор (имя) контроллера
  • gree - имя метода в контроллере

Мы можем использовать аттрибут data-target для того, чтобы иметь возможность взаимодествовать с HTML элементом:

<div data-controller="hello">
  <input data-target="hello.name" type="text">
  <button data-action="click->hello#greet">Greet</button>
</div>

Значение в аттрибуте data-target состроит из имен контроллера и html элемента. Так это будет выглядеть в контроллере:

// src/controllers/hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "name" ]

  greet() {
    const element = this.nameTarget
    const name = element.value
    console.log(`Hello, ${name}!`)
  }
}

Можно так же добавить немного Javascript магии:

// src/controllers/hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "name" ]

  greet() {
    console.log(`Hello, ${this.name}!`)
  }

  get name() {
    return this.nameTarget.value
  }
}

Эти примеры взяты из Hello Stimulus документации. Так же Stimulus "изкоробки" работает с Turbolinks, который так же очень полезен для ускорения ваших проэктов.

Если вас заинтересовал данный фреймворк, вам следует ознакомиться с инструкцией по установке и Stimulus Starter разделами документации.

Stimulus и Laravel - как интегрировать?

Если вы решите интегрировать Stimulus в Laravel, то вам поможет этот демо пример. Установка Stimulus+Turbolinks довольно проста:

yarn add stimulus turbolinks
yarn add --dev babel-plugin-transform-class-properties

Теперь добавьте следующие строки в ваш .bablerc файл:

{
  "plugins": ["transform-class-properties"],
  "presets": [
    ["env", { "modules": false }]
  ]
}

Далее, создайте папку resources/assets/js/controllers и обновите ваш app.js чтобы он выглядел так:

var Turbolinks = require("turbolinks")
Turbolinks.start()

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))

И последнее замечание:

Turbolinks нужно подключать в теге <head>, так как тег <body> перезаписывается когда вы переходите на другую страницу, поэтому скрипт turbolinks нужно подключать за пределами тега <body>.

Вам осталось только добавить ваш app.js в тег <head> и все готово:

<head>
  <!-- ... -->
  <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css" />
  <script src="{{ mix('js/app.js') }}"></script>
</head>

Удачи!

Опубликовано:

Категории: Статьи