نژاد متفاوت متا فریم ورک – مجله Smashing

چشم انداز فعلی ابزارهای وب به طور فزاینده ای پیچیده تر از همیشه شده است. ما کتابخانه‌هایی مانند Solid، Vue، Svelte، Angular، React و موارد دیگر داریم که به‌روزرسانی‌های UI (رابط کاربری) را به شیوه‌ای ارگونومیک مدیریت می‌کنند. موضوع مهم‌تری که بر روی توسعه‌دهندگان تاثیر می‌گذارد، تعادل و مبادله بهترین شیوه‌های عملکرد و قابلیت استفاده است.

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

با در نظر گرفتن این تغییرات در ایدئولوژی، فراچارچوب ها در اطراف کتابخانه های اصلی به روش های منحصر به فردی تکامل یافته اند. برای کپسوله کردن پارادایم هایی که در آنها UI ارائه می شود و ایجاد قابلیت همکاری یکپارچه بین کد سرور و کد مرورگر ما، شیوه های جدید در حال ظهور است.

در حالی که ایده اولیه داشتن یک چارچوب “متا” این بود که مجموعه های مختلفی از ابزارها را به هم بچسبانند تا تجربیات روانی ایجاد کنند، ایجاد یکپارچگی بدون اتخاذ سطحی از تصمیم گیری ها دشوار است. بنابراین چارچوب‌هایی مانند QwikCity، SvelteKit، Redwood، و Next.js تمام راه را به قلمروی مورد نظر خود رساندند و راه‌آهن سختی را برای اطمینان از مجموعه‌ای از قراردادهای تعریف‌شده فراهم کردند.

در همین حال، سایرین مانند Nuxt، Remix، و Analog با انتزاع سطحی تری از ادغام های خود باقی ماندند، و امکان ترکیبی از ابزارهای خود و استفاده آسان تر از منابع جامعه را فراهم کردند (Vite نمونه خوبی از ابزاری است که به طور سطحی توسط همه استفاده می شود. آنها).

این نه تنها قفل فروشنده کمتری را برای توسعه دهندگان ایجاد می کند، بلکه امکان استفاده مجدد از پیکربندی را در برخی موارد فراهم می کند زیرا چنین تصمیماتی به نفع انتزاعات قوی تر از نظرات حذف می شوند. SolidStart یک گام بزرگ فراتر از آن برداشته است که به قلمرو بی طرفانه. هسته خود حدود 1500 خط کد است و بزرگترین بخش های عملکرد با ترکیبی از ابزارهای یکپارچه ارائه شده است.

ماژول ها بر روی یکپارچه ها

انگیزه پشت جداسازی کامل معماری این است که به توسعه دهنده مصرف کننده قدرت داده شود تا چارچوب را انتخاب کند و آن را مطابق میل خود بسازد. ممکن است یک توسعه دهنده بخواهد از Solid و SSR استفاده کند، اما بیایید تصور کنیم که کدهای قدیمی وابستگی شدیدی به روتر TanStack دارند، در حالی که SolidStart و اکثر پروژه های Solid به جای آن Solid-Router دارند. با معماری جدا شده، ایجاد یک لایه پذیرش یا ادغام افزایشی امکان پذیر می شود تا همه چیز مطابق با بهترین منافع تیم کار کند.

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

به عنوان مثال، از آنجایی که هر دو بر پایه Nitro هستند، جوامع Analog و SolidStart اکنون می توانند دانش را با یکدیگر به اشتراک بگذارند. فراتر از آن، چون همه آنها در Nitro و Vite هستند، Nuxt، Analog و SolidStart می توانند در پلتفرم های یکسانی مستقر شوند و جزئیات پیاده سازی را به اشتراک بگذارند تا هر اکوسیستم با هم رشد کنند. جامعه با این رویکرد برنده می شود و توسعه دهندگان کتابخانه/چارچوب نیز برنده می شوند. این یک رادیکال است الگو و رویکرد جدید به اشتراک گذاشتن وزن نگهداری متا چارچوب (یکی از ترسناک ترین مسئولیت های نگهبانان).

SolidStart دقیقا چیست؟

SolidStart از پنج ستون اساسی ساخته شده است:

1. جامد: کتابخانه view که انتزاعات رندر را ارائه می کند.
2. وایت (در Vinxi): باندلر برای بهینه سازی کد برای اجرا در زمان های مختلف اجرا.
3. نیترو (در Vinxi): وب سرور آگنوستیک ایجاد شده توسط تیم Nuxt و بر اساس h3 با Rollup.
4. وینکسی: ارکستراتور، چه چیزی تعیین می کند که زمان اجرا و کد هر کدام کجا باشد.
5. سرووال: سریال‌ساز داده‌ای که داده‌ها را از سرور به مرورگر و برگشت پیوند می‌دهد.

1. جامد

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

از JSX استفاده می کند و سینتکسی دارد که بسیار شبیه به React است، اما در زیر هود، به شیوه ای کاملاً متفاوت عمل می کند. نزدیک‌تر کردن توسعه‌دهنده به DOM و در عین حال ارگونومی مورد نیاز برای بهره‌وری در محیط توسعه‌دهنده را فراهم می‌کند. با اندازه تنها 3 کیلوبایت بسته نرم افزاری، اغلب حتی برای سایت های اغلب ایستا یک انتخاب است. به عنوان مثال، بسیاری از افراد از Solid استفاده می کنند تا در صورت نیاز، تعامل را به وب سایت های Astro مبتنی بر محتوای خود بیاورند.

Solid همچنین اولیه های درجه یک، اجزای داخلی Control Flow، مدیریت حالت با کیفیت بالا و پشتیبانی کامل از TypeScript را ارائه می کند. جامد یک پانچ را در یک بسته کوچک کارآمد بسته بندی می کند.

2. Vite

مسلماً بهترین باندلر در اکوسیستم جاوا اسکریپت، Vite تعادل مناسبی بین پیکربندی اعلامی و قابل تنظیم دارد. این به طور کامل بر اساس TypeScript است، که گسترش آن را توسط کتابخانه یا فریم ورک مصرف کننده آسان می کند، و پایگاه کاربری به اندازه کافی بزرگ دارد که تطبیق پذیری آن را تضمین می کند. Vite با کار می کند و تبدیل شده است ابزار واقعی برای بسیاری از چارچوب هامانند Astro، Vue، Preact، Elm، Lit، Svelte، Nuxt، Analog، Remix و بسیاری دیگر.

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

3. نیترو

یک چارچوب به خودی خود، Nitro در TypeScript نوشته شده است و کاملاً آگنوستیک و برای هر کسی باز است متا چارچوب برای استفاده به عنوان پایه این مجموعه قدرتمندی از ابزارها و APIها را برای مدیریت حافظه پنهان، مسیرها و تکان دادن درختان فراهم می کند. این یک پایه سریع برای هر پروژه مبتنی بر جاوا اسکریپت است تا سرور خود را بر روی آن بسازد. Nitro بسیار مقیاس پذیر است، به راحتی در خطوط لوله DevOps و CI/CD ادغام می شود، بر امنیت متمرکز است، قوی است، و دارای مجموعه ای غنی از آداپتورها است که آن را در اکثر، اگر نه همه، پلتفرم های فروشنده اصلی قابل استقرار می کند.

Nitro را به عنوان یک پسوند پیچ ​​و مهره ای در نظر بگیرید که ساخت وایت را آسان تر و انعطاف پذیرتر می کند. اکثر نگرانی‌های سطح زمان اجرا را که باید در Vite حل شوند، حل می‌کند.

4. وینکسی

Vinxi یک SDK (کیت توسعه نرم افزار) است که به ارمغان می آورد مجموعه ای قدرتمند از ابزارهای مبتنی بر پیکربندی برای ایجاد برنامه های فول استک Nitro را در زیر هود می سازد تا یک وب سرور ایجاد کند و از Vite برای اجزای بسته بندی استفاده می کند. این برنامه از Bun App API الهام گرفته شده است و از طریق یک رابط بسیار شفاف کار می کند تا با تنظیم روترها برای هر زمان اجرا، یک برنامه را نمونه سازی کند.

مثلا:

import { createApp } from "vinxi";
import solid from "vite-plugin-solid";

const resources = {
    name: "public",
    mode: "static",
    dir: "./public",
};

const spa = {
    name: "client",
    mode: "build",
    handler: "./app/client.tsx",
    target: "browser",
    plugins: () => [solid({ ssr: true })],
    base: "/_build"
}

const server = {
    name: "ssr",
    mode: "handler",
    handler: "./app/server.tsx",
    target: "server",
    plugins: () => [solid({ ssr: true })],
}

export default createApp({
    routers: [resources, spa, server],
});

همانطور که مسیرهای منبع به عنوان یک سطل کار می کنند، با تعریف mode: "static" نیازی به تعریف کنترلر نیست. روتر شما همچنین می تواند به صورت ایستا ساخته شود (mode: “build”) و زمان اجرا مرورگر را هدف قرار می دهد، یا می تواند روی سرور باشد و هر درخواست را از طریق نقطه ورودی آن رسیدگی کند. handler: "./app/server.tsx".

Vinxi از مجموعه مناسبی از APIهای Nitro و Vite استفاده می کند تا منابع شما در معرض زمان اجرا اشتباه قرار نگیرند و به این ترتیب استقرار به آرامی کار می کند برای ارائه دهندگان پلت فرم تعریف شده

5. سرووال

هنگامی که روترها تنظیم شدند و برنامه می‌تواند ناوبری را انجام دهد (ناوبری سخت از طریق کنترل کننده “ssr” و ناوبری نرم از طریق کنترل کننده “مشتری”)، وقت آن است که آنها را به هم متصل کنید. این قسمتی است که هسته SolidStart در آن قرار می گیرد. API هایی را ارائه می کند که ارگونومی را به آن ها ارائه می دهد واکشی و جهش درخواست ها.

همه این APIها توسط یک کتابخانه آگنوستیک دیگر به نام Seroval تغذیه می شوند. برای ارسال داده ها بین سرور و کلاینت به شیوه ای امن، همه آن ها باید سریال شوند. Seroval خود را به روشی بیش از حد ساده تعریف می کند: “Stringify JS Values”. با این حال، این تعریف به این واقعیت اشاره نمی کند که این کار را به شکلی بسیار قدرتمند و سریع انجام می دهد.

به لطف Seroval، SolidStart قادر است به طور ایمن و کارآمد از آن عبور کند مرز سریال سازی سریال‌سازی منابع مسلماً مهم‌ترین ویژگی یک چارچوب فول استک است – بدون آن، پل بک‌اند و فرانت‌اند به سادگی کار نمی‌کنند.

علاوه بر سریال سازی منابع، SolidStart نیز می تواند استفاده کند اقدامات سرور مستقیم از مستندات، اینگونه است که عملکردهای سرور برای ما جستجو می کنند (توجه داشته باشید "use server" دستورالعملی که به وینکسی اجازه می دهد کد را در جای درست قرار دهد.

import { action, redirect } from "@solidjs/router";
 
const isAdmin = action(async (formData: FormData) => {
  "use server";
  await new Promise((resolve, reject) => setTimeout(resolve, 1000));
  const username = formData.get("username");
  if (username === "admin") throw redirect("/admin");
  return new Error("Invalid username");
});
 
export function MyComponent() {
  return (
    <form action={isAdmin} method="post">
      <label for="username">Username:</label>
      <input type="text" name="username" />
      <input type="submit" value="submit" />
    </form>
  );
}

همه چیز با هم می آید

پس از این خرابی، ممکن است همه چیز هنوز کمی در هوا باشد. بنابراین، بیایید حلقه را با مونتاژ قطعات ببندیم:

امیدواریم این تمرین کوچک جدا کردن چهارچوب و کنار هم قرار دادن قطعات جالب و آموزنده باشد. در نظرات زیر یا در زیر به من اطلاع دهید ایکس اگر این به شما در درک بهتر یا حتی انتخاب ابزارهای پروژه بعدی کمک کرده است.

ملاحظات نهایی

این مقاله بدون کمک فنی افراد عالی من در تیم Solid ممکن نبود: دیو دی بیاس، الکسیس مونسایاک، الکس لور، دانیل آفونسو، و نیکیل صراف. از نظرات، بینش‌های شما و به طور کلی اینکه مرا باهوش‌تر به نظر می‌رسانید، متشکرم!

(il)