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

Stimulus یکی از ساده‌ترین فریمورک‌های جاوااسکریپتی است که توسط Basecamp درست شده است، تیمی که فریمورک Rails را عرضه کردند.

در بسیاری از نگاه‌ها این فریمورک با دیگر فریمورک‌های مدرن امروزی سازگاری ندارد و روند مخالفی را پیش می‌برد. در حالیکه ممکن است نام‌ها و مفاهیم مشابهی را مشاهده کنید، اما Stimulus راه متفاوتی را پیش می‌رود. قصد داریم به صورت مختصر در رابطه با این تفاوت‌ها صحبت کنیم و بعد از آن اولین اپلیکیشن خودمان را براساس Stimulus می‌سازیم.

DOM: مکانی برای توضیح دادن

مفهوم اصلی بسیاری از فریمورک‌های مدرن بیان می‌کنند که همواره مفهوم «state» را از DOM جدا ساخته‌اند اما این واقعیت ندارد. به این طریق DOM تنها، مانند مشتری خواهد بود که داده برای وی به نمایش در‌می‌آید.

Stimulus این مفهوم را تغییر داد و بجای اینکار از قدرت خود DOM برای پابرجا کردن State استفاده کرد.

در نهایت این موضوع دلیل همان مفهومی است که گفته می‌شود Stimulus بهترین مورد برای تولید HTML است. با استفاده از Stimulus شما قالب HTML را مشاهده نمی‌کنید. بجای این شما خاصیت data-* را مشاهده می‌کنید، که اپلیکیشن‌های HTML را به جاوااسکریپت متصل می‌سازد.

در نهایت این موضوع بدان مفهوم است که دیگر حلقه‌هایی از map و each را که ممکن است در ری‌اکت و… ببینید، مشاهده نمی‌کنید.

Stimulus کار رندرینگ ‌HTML را انجام نمی‌دهد مگر اینکه خودتان به صراحت آن قابلیت را درست کنید.

بنابراین… Stimulus چه‌کاری می‌کند؟

خب، Stimulus قالب‌ها را رندر نمی‌کند. بیشتر از این، Stimulus ایجاد شده است تا بتواند تعاملات و رویدادهایی را که از قسمت فرانت‌اند دریافت می‌کند را در قسمت بک‌اند کنترل نماید. برای اینکارStimulus، مفاهیمی مانند targets، controllers و actions را در نظر می‌گیرد.

اما بگذارید قبل از اینکه زیاد از مبحث دور شویم، روش نصب و پیاده‌سازی این فریمورک را بگوییم.

نصب کردن

نصب کردن این فریمورک با این فرض جلو می‌رود که شما روی کامپیوتر خود nodejs را نصب کرده‌اید. در غیر اینصورت برای نصب می‌توانید به وبسایت nodejs.org مراجعه کنید.

در ابتدای کار یک فایل HTML ساده را مثل زیر پیاده‌سازی می‌کنیم:

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

بعد از این یک پوشه ایجاد کنید و نام آن را src بگذارید. داخل این پوشه دو فایل با نام‌های controllers و index.js ایجاد کنید.

ما برای ساخت اپلیکیشن جاوااسکریپتی از Webpack استفاده می‌کنیم، جدای از آن Stimulus از ویژگی‌های حرفه‌ای بهره می‌برد که ممکن است مرورگرها آن را پشتیبانی نکنند.

در قسمت روت پروژه، یک فایل جی‌سان با نام package.json ایجاد کنید و کدهای زیر را در آن قرار دهید:

{
    "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 نام‌گذاری کنید، بعد از این کدهای زیر را در آن قرار دهید:

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/env"],
                        plugins: ["transform-class-properties"]
                    }
                }
            }
        ]
    }
};

این قطعه کد به وب‌پک اطلاع می‌دهد که کدهای جاوااسکریپتی را از طریق env اجرا کند.

آخرین قدم برای اینکه از ساخت اپلیکیشن Stimulusمان مطمئن شویم این است که فایل index.js را با کدهای زیر پر کنیم:

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

این کد دقیقا بخشی از مستندات مربوط به این فریمورک است. این قطعه کد به ما اجازه می‌دهد تا در روند ساخت اپلیکیشن از ساختارهای اسمی مرسومی استفاده کنیم.

اگر از فایل index.js استفاده کنید پس نام‌گذاری فایل‌ها در Stimulus بسیار مهم خواهد بود. حال که همه چیزهای ابتدایی پیاده‌سازی شدند نیاز است که وب‌پک را اجرا کنیم و از اینکه صحیح کار می‌کند مطمئن شویم. برای اینکار در پوشه روت دستور زیر را اجرا کنید:

npx webpack src/index.js dist/bundle.js –watch

قسمت npx این دستور، راهی مناسب برای اجرا کردن باینری‌های است که در دایرکتور node_modules قرار گرفته‌اند. این دستور تغییرات فایل‌های جاوااسکریپتی شما را نگاه می‌کند و اپلیکیشن را براساس تغییرات شما مجددا می‌سازد.

تا زمانی که خطایی در قسمت کنسول مشاهده نکنید، پس مسیر را درست رفته‌اید.

کنترلرها

اگر با فریمورک‌هایی مانند ریلز یا لاراول آشنایی داشته باشید، پس مفهوم کنترلر را می‌توانید به سادگی درک کنید. فکر کردن به کنترلرها در Stimulus مانند یک کلاس جاوااسکریپت است که حاوی متدها و داده‌های مختلفی هستند و می‌توانند با همدیگر کار کنند.

معمولا ممکن است یک کنترلر شبیه زیر باشد:

<div data-controller="refreshable">
<!-- more soon... -->
</div>
// src/controllers/refreshable_controller.js
import { Controller } from "stimulus"
 
export default class extends Controller {
}

نکاتی وجود دارد که باید در رابطه با این کنترلرها گفته شود. اول از همه کنترلر از هر دو بخش جاوااسکریپت و HTML تشکیل می‌شود. خاصیت data-controller چیزی است که به جاوااسکریپت می‌گوید یک نمونه جدید را ایجاد کن!

یکی دیگر از موارد جذابی که باید به آن اشاره کنیم این است که نام کلاس در خود کنترلر پیدا نمی‌شود. این اتفاق به دلیل وجود خط application.load(definitionsFromContext(context)) در فایل index.js می‌افتد. این قطعه کد، کدهای اپلیکیشن را اجرا می‌کند و برای نام کلاس‌ها از نام فایل‌ها استفاده می‌کند. ممکن است در ابتدای کار این مورد کمی سخت و عجیب باشد اما در استفاده‌های طولانی منطقی‌تر می‌شود.

اکشن‌ها

می‌توان یک اکشن را اینگونه تعریف کرد که: یک روش است که می‌خواهید بعد از یک رویداد از طرف کاربر اجرا شود. برای بازسازی کنترلر خودمان، می‌خواهیم وقتی روی دکمه‌ای کلیک شد قسمت منحصر به فردی از محتوا نوسازی یا رفرش شود. در این قسمت اکشن ما refresh نام می‌گیرد.

// src/controllers/refreshable_controller.js
import { Controller } from "stimulus"
 
export default class extends Controller {
  refresh(){
    console.log("refresh!")
  }
}

اما داشتن این اکشن تنها در قسمت کنترلر نمی‌تواند کاری را برای ما انجام دهد. نیاز است که آن را به فایل HTML متصل کنیم.

<div data-controller="refreshable">
  <button data-action="refreshable#refresh">Refresh</button>
</div>

وقتی کاربر روی دکمه کلیک کرد، اکشن مربوطه در کنترل نوسازی می‌شود.

حال چگونه می‌توانیم از این اکشن برای انجام کاری در صفحه استفاده کنیم؟

تارگت‌ها یا اهداف

Stimulus همچنین از مفهومی به نام target استفاده می‌کند که با استفاده از آن می‌شود المان‌های مهم داخل یک صفحه را به همدیگر متصل کنیم. ما از این برای مدیریت المانی که محتوا در آن قرار دارد و می‌خواهیم آن را نوسازی کنیم، استفاده می‌کنیم.

<div data-controller="refreshable">
  <button data-action="refreshable#refresh">Refresh</button>
  <article data-target="refreshable.content"></article>
</div>
// src/controllers/refreshable_controller.js
import { Controller } from "stimulus"
 
export default class extends Controller {
 
  static targets = [ "content" ]
 
  refresh(){
    this.contentTarget.innerHTML = "Refresh!"
  }
}

در این مثال ما سه مفهوم از Stimulus را نمایش دادیم. یک کنترلر refreshable، یک اکشن refresh و یک تارگت content.

اگر نگاه دقیق‌تری به این فریمورک بیاندازید متوجه می‌شوید که می‌توانید به صورت مستقیم با DOM ارتباط برقرار کنید. این درست چیزی‌ست که Stimulus را از دیگر فریمورک‌ها جدا می‌سازد.

اگر از نسخه‌های دیگر جاوااسکریپت یا فریمورک‌ها و کتابخانه‌های آن استفاده کنید، باز مشاهده می‌کنید که می توانید این متد نوسازی را پیاده‌سازی نمایید. برای مثال در جی‌کوئری به شکل زیر می‌توانید عمل کنید:

// src/controllers/refreshable_controller.js
import { Controller } from "stimulus"
import $ from 'jquery'; // requires adding jQuery to package.json
 
export default class extends Controller {
 
  static targets = [ "content" ]
 
  refresh(){
    let target = this.contentTarget;
    $.get("/content", function(content){
      $(target).html(content)
    })
  }
 
}

اگر از ابزارهای دیگری نیز استفاده کنید، Stimulus هیچ محدودیتی برای شما ایجاد نمی‌کند.

در پایان

حال توانستیم یک اپلیکیشن ساده را با استفاده از Stimulus ایجاد کنیم! توسعه‌دهندگان این فریمورک به ما یا دادند که می‌شود هر قاعده و تمرینی را مطمئنا زیر پا گذاشت و به صورت دیگری اندیشید. گاهی نیز می‌توانیم بهترین رویکردها را کنار بگذاریم و به چیزی اکتفا کنیم که به خوبی برای‌مان کار می‌کند.

منبع