عملی با SolidJS

نگاهی دست اول به رویکرد ساده و قدرتمند به جاوا اسکریپت فعال جلویی داشته باشید که به سرعت Solid را به محبوبیت تبدیل می کند.

SolidJS یک رویکرد منحصربه‌فرد برای جاوا اسکریپت واکنش‌گرای front-end است. این مجموعه فشرده ای از “اولیه های” واکنشی را فراهم می کند و از آنها برای پشتیبانی از عملکردهای مرتبه بالاتر استفاده می کند. این تا حدودی شبیه AngularJS و استفاده آن از ReactiveX است، اما تجربه کاملا متفاوتی است. SolidJS بیشتر شبیه به سادگی AlpineJS است، اما مجموعه‌ای از قابلیت‌های جاه‌طلبانه‌تر را ارائه می‌کند.

SolidJS به تازگی نسخه ۱.۰ خود را منتشر کرده است. . بیایید نگاهی بیندازیم.

راه اندازی SolidJS

ابتدا، یک پروژه شروع ساده راه اندازی کنید. در دستگاه محلی خود، از دستورات موجود در فهرست ۱ برای شروع چیزی جدید استفاده کنید (این به دنبال اسناد SolidJS است).

فهرست ۱. ایجاد یک پروژه SolidJS جدید

> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

اکنون شما یک برنامه ساده SolidJS در حال اجرا دارید. اگر به http://localhost:3000 بروید، صفحه فرود را خواهید دید.

توجه داشته باشید که سرور توسعه دهنده از به روز رسانی های همزمان (از جمله Hot Module Replacement، HMR) پشتیبانی می کند. بنابراین با ایجاد تغییرات در فایل‌ها، آنها به‌طور خودکار آنچه در مرورگر نمایش داده می‌شود، به‌روزرسانی می‌کنند.

در حال واکشی یک API راه دور با createResource

اجازه دهید با createResource Solid شروع کنیم. این یک لایه ساده در بالای createSignal است، که اولیه واکنشی Solid است که ارتباط ناهمزمان با APIهای راه دور را مدیریت می کند. ما از اینجا شروع می کنیم زیرا این ویژگی یک لولای کلیدی در پشتیبانی Solid از رندر Suspense/Concurrent است و در ابتدا می تواند کمی مبهم به نظر برسد.

به نوعی، createResource لایه میانی معماری Solid است.

پوشه جدید ایجاد شده را در IDE خود باز کنید و فایل App.jsx را باز کنید. این فایل به عنوان گره ریشه با فراخوانی به روش render() Solid در index.jsx بارگذاری می شود.

تغییراتی را که من در فهرست ۲ نظر داده‌ام انجام دهید.

فهرست ۲. اصلاح App.jsx

import logo from "./logo.svg";
import styles from "./App.module.css";
import { createResource } from "solid-js";  // Import the createResource function from solid

// The next line sets up the actual async function that will do the request.  It is a simple wrapper around a fetch call that returns a promise - the promise returned by the call to
// fetch.json(). This function is used by the call to createResource below
const fetchJokes = async (id) => (await fetch(`https://official-joke-api.appspot.com/jokes/programming/ten`)).json();

function App() {
  const [jokes] = createResource(fetchJokes);  // Here we use createResource to associate from the fetchJokes promise to the results: the jokes variable

  return (
    <div class={styles.App}>
              <!-- The line below uses the built-in loading state that Solid has provided on the jokes variable, initialized above with a call to createResource -->
      <span>{jokes.loading && "Loading..."}</span>
      <div>
                <!-- This line below simply outputs the contents of the jokes var. This will not happen until jokes.loading == true. >
        <jokes() -->
        <pre>{JSON.stringify(jokes(), null, 2)}</pre>
      </div>
      <header class={styles.header}>
        <img src={logo} class={styles.logo} alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a class={styles.link} href="https://github.com/ryansolid/solid" target="_blank" rel="noopener noreferrer">
          Learn Solid
        </a>
      </header>
    </div>
  );
}

export default App;

نظرات فهرست ۲ باید به شما نشان دهد که اینجا چه خبر است. نتیجه این کد خروجی یک آرایه JSON است که شامل مجموعه ای از ۱۰ جوک برنامه نویسی تصادفی است.

تکرار با >برای<

حالا بیایید آن JSON را بگیریم و روی آن تکرار کنیم و خروجی مفیدتری ایجاد کنیم.

ابتدا، مولفه For را با افزودن آن به واردات وارد کنید:

import { createResource, For } from "solid-js";

بعد، تماس JSON.stringify را با Listing 3 جایگزین کنید.

فهرست ۳. تکرار روی آرایه

<ul>
  <For each={jokes()}>{(joke) =>
    <li>{joke.id}: {joke.setup}</li>
  }</For>
</ul>

فهرست ۳ به شما نگاهی به مؤلفه For در حال کار می‌دهد. شبیه سایر فریم ورک های واکنشی است. شما به آن می گویید که روی چه مجموعه ای تکرار شود (یعنی jokes()، به خاطر بسپارید که یک فراخوانی متد است، نه یک مرجع)، و سپس یک تابع ناشناس تعریف کنید که آرگومان آن متغیر تکرار است، شوخی.

ما در اینجا از این برای خروجی یک لیست نامرتب استفاده می کنیم که شناسه و تنظیمات هر جوک را نشان می دهد.

مدیریت رویدادها در SolidJS

در مرحله بعدی نگاهی به خط پانچ برای هر جوک خواهیم داشت. برای این کار، به یک کنترل کننده رویداد onClick نیاز دارید که هشداری حاوی خط پانچ را نمایش دهد.

فهرست ۴ نحوه اضافه کردن کنترل کننده را نشان می دهد.

فهرست ۴. onClick handler

<li onClick={()=>{alert(joke.punchline)}}>
  {joke.id}: {joke.setup}
</li>

به اندازه کافی ساده است. لیست ۴ بسیار معمولی برای چارچوب های واکنشی است. حالا وقتی روی “برنامه نویسان دوست دارند کجا بنشینند؟” کلیک می کنم. من پاسخ، “فو بار” را دریافت می کنم. این خیلی بد است که خنده دار است.

ساخت متغیرهای واکنشی با createSignal

حالا تصور کنید که می‌خواهید قابلیت جابه‌جایی بین نمایش جوک‌های برنامه‌نویسی و همه جوک‌ها را اضافه کنید. API راه دور با وجود یا عدم وجود “برنامه نویسی” در قسمت ماقبل آخر مسیر URL (…/jokes/programming/ten vsus …/jokes/ten) این کار را انجام می دهد.

بنابراین بیایید یک چک باکس به بالای صفحه اضافه کنیم تا کاربر این مورد را تغییر دهد. اولین کاری که ما انجام خواهیم داد ایجاد یک “سیگنال” است. این بنیادی ترین واکنش اولیه اولیه در SolidJS است. این به شما امکان می دهد یک متغیر، یک تنظیم کننده و یک مقدار پیش فرض اختیاری را مشخص کنید. این نحو از نحو useState در React الهام گرفته شده است.

بالای تماس createResource، این خط را اضافه کنید:

const [jokeType, setJokeType] = createSignal("");

این یک سیگنال جدید به نام jokeType با مقدار اولیه یک رشته خالی ایجاد می کند. مقادیر سیگنال به عنوان یک تابع قابل دسترسی هستند: jokeType().

اکنون عنصر چک باکس نشان داده شده در فهرست ۵ را در سر قسمت اصلی وارد کنید.

فهرست ۵. یک چک باکس واکنشی

Programming Only: <input type="checkbox" checked={jokeType()=="programming/"}
        onInput={()=>{setJokeType(jokeType()==''?'programming/':'')}}> </input>

فهرست ۵ عمدتاً HTML معمولی است. ویژگی های بررسی شده و onInput دارای محتوای خاص Solid هستند. بررسی شده از یک نشانه برای بررسی مقدار سیگنال jokeType() در برابر "programming/" استفاده می کند. به این معنا که اگر مقدار jokeType "programming/" باشد، کادر علامت زده می‌شود.

onInput رویداد ورودی را در کادر تأیید کنترل می‌کند. هنگامی که فعال می شود، مقدار jokeType را تغییر می دهیم تا بین یک رشته خالی و "programming/" جابجا شود. ما قصد داریم از این مقدار در حال تغییر در URL واکشی جوک استفاده کنیم.

استفاده از سیگنال در منبع

ابتدا، باید سیگنال را به عنوان آرگومان به تماس createResource ارسال کنید. Solid به اندازه کافی هوشمند است که این را تشخیص دهد و منبع را به صورت واکنشی سیم کشی می کند. فراخوانی جدید برای createResource به این صورت است:

const [jokes] = createResource(jokeType, fetchJokes); 

(با تشکر از رایان کارنیاتو برای توضیح این موضوع.)

توجه کنید که jokeType مستقیماً ارسال می شود (نه فراخوانی تابع، بلکه خود تابع). این به این دلیل است که سیگنال واقعی به createResource ارسال می‌شود و به آن اجازه می‌دهد تا واکنش‌پذیر باشد.

عملکرد جدید واکشی جوک در فهرست ۶ مشاهده می شود.

فهرست ۶. منبع واکنشی با آرگومان سیگنال

const fetchJokes = async (jokeType) => {
  return (await fetch(`https://official-joke-api.appspot.com/jokes/${jokeType}ten`)).json();
}

توجه کنید که سیگنال jokeType یک متغیر مستقیم در آرگومان فهرست ۶ است. URL واکشی از مقدار jokeType استفاده می کند. هنگامی که سیگنال از طریق کادر انتخاب تغییر می کند، Solid متوجه می شود و به طور خودکار لیست جوک ها را دوباره واکشی می کند.

افکت های محاسبه شده با createEffect

کتابخانه‌های واکنش‌گرا شامل توانایی بسته‌بندی متغیرهای واکنش‌پذیر ساده (مانند createSignal در SolidJS، یا useState در React) در چیزی است که به عنوان اثر شناخته می‌شود (مثلاً useEffect در React). Solid createEffect را برای این منظور فراهم می کند. ایده اصلی این است که شما از یک افکت برای مدیریت اعمال غیر خالص (معروف به عوارض جانبی) استفاده می کنید. چنین اقداماتی معمولاً به معنای تغییر مستقیم بخشی از UI در نتیجه تغییرات در متغیرهایی است که به آنها وابسته هستند.

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

فرض کنید وقتی کاربر نوع جوک را تغییر می‌دهد می‌خواستید وارد شوید. این یک مثال ساختگی برای ارتباط با ماهیت است. فهرست ۷ نشان می دهد که چگونه می توانید آن را انجام دهید.

فهرست ۷. مثال createEffect

  createEffect(() => {
    console.log('Joke Type is now: ', jokeType())
  })

اکنون با تغییر سیگنال، کنسول خروجی خواهد داشت. توجه داشته باشید که این افکت در ابتدا با تنظیم isgnal اجرا می شود.

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