Stimulus: فریمورکی جاوااسکریپتی برای افزودن قابلیت‌های جدید به HTML

Stimulus: فریمورکی جاوااسکریپتی برای افزودن قابلیت‌های جدید به HTML

Stimulus یک فریمورک جاوااسکریپتی است که ادعای آنچنانی هم ندارد به طوری که هدف این فریمورک این نیست که پیاده‌سازی تمام فرانت‌اند را دست بگیرد؛ در واقع، اصلاً به رِندِر HTML مربوط نمی‌شود بلکه در عوض، هدف از طراحی آن این است که با یک سری امکانات، کد HTML شما را ارتقاء دهد.

نیاز به توضیح نیست که با استفاده از ابزاری تحت عنوان Turbolink و یکسری امکانات نظیر Ajax، می‌توان وب اپلیکیشن‌هایی سریع‌تر داشت. خبر خوب اینکه Stimulus به خوبی با Turbolink اصطلاحاً مَچ می‌شود به طوری که تمام اینها کمک می‌کنند تا یک اپلیکیشن سریع و کاربردی با کمترین هزینه را پیاده‌سازی کرد.

Stimulus چه‌طور کار می‌کند؟
کد HTML را با اتریبیوت‌های controller ،target و action به صورت زیر بنویسید:

<!--HTML from anywhere-->
<div data-controller="hello">
  <input data-target="hello.name" type="text">

  <button data-action="click->hello#greet">
    Greet
  </button>

  <span data-target="hello.output">
  </span>
</div>

حال یک کنترلر مناسب برای کدهای HTML خود بنویسید؛ و این در حالی است که Stimulus به صورت خودکار آن را در نظر خواهد گرفت:

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

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

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}

نمونهٔ اجرایی کدهای را می‌توانید در تصویر فوق ببینید. Stimulus یک ابزار #اپن‌سورس تحت لیسانس MIT است که سورس آن در گیت‌هاب در دسترس است.