معرفی Qwik: یک چارچوب جاوا اسکریپت فوق سریع

رویکرد نوآورانه Qwik برای تقسیم کد و بارگذاری تنبل راه جدیدی را برای جاوا اسکریپت جلویی ارائه می دهد. در اینجا یک تور سریع است.

Qwik بازنگری جسورانه ای در مورد نحوه عملکرد رابط های کاربری واکنشی است. فرض اصلی این است که چارچوب از ابتدا برای ارائه HTML با حداقل جاوا اسکریپت ساخته شده است – جاوا اسکریپت کافی برای معرفی تدریجی تعامل در صورت نیاز.

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

ایالت Qwik

Qwik هنوز در نسخه های اولیه است، اما از زمانی که نگاهی به آن داشتیم راه طولانی را پیموده است. اکنون یک نمونه کامل در StackBlitz وجود دارد، یک زمین بازی REPL و یک ابزار خط فرمان. Qwik همچنین برای پشتیبانی از یک سینتکس React مانند توسعه‌دهنده‌تر تکامل یافته است. زیر کاپوت هنوز یک موتور واکنشی پیشرفته و منحصر به فرد وجود دارد که مرزهای واکنشی را در امتداد حالت، الگوها و شنوندگان تعریف می کند.

قابلیت ادامه مجدد

Qwik از ترکیبی از ارائه هوشمندانه سمت سرور و سمت کلاینت استفاده می‌کند تا از مالیات مضاعفی که فریمورک‌های معاصر در دو بار انجام کار هیدراتاسیون، یک بار روی سرور و بار دیگر روی کلاینت از آن رنج می‌برند، جلوگیری کند.

به عنوان خالق Qwik Misko Hevery می نویسد:

ایده اصلی پشت Qwik این است که قابل ازسرگیری است. می تواند از جایی که سرور متوقف شده است ادامه یابد. کمترین مقدار کدی برای اجرا روی کلاینت وجود دارد.

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

>

جریان معمول در چارچوب‌های واکنشی با SSR (رندر سمت سرور) این است که ابتدا نسخه‌ای از برنامه را روی سرور تولید می‌کند، سپس آن را به مشتری ارسال می‌کند، که برنامه داربست‌دار را ارائه می‌کند. . در آن مرحله، برنامه سمت سرویس گیرنده کار را به دست می گیرد، اساساً باید همان برنامه را دوباره بوت استرپ کند تا یک کلاینت کارآمد را به هم متصل کند.

این فرآیند به عنوان هیدراتاسیون شناخته می شود. چندین راه هوشمندانه برای تلاش برای کارآمدتر کردن هیدراتاسیون وجود دارد، اما Qwik آنها را برای فرآیند جدیدی به نام resumability رها می‌کند.

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

زمان تعامل

معیاری که Qwik در تلاش است تا زمان تعامل (TTI) را افزایش دهد. این به مدت زمانی اشاره دارد که بین زمانی که کاربر درخواستی به یک صفحه وب می‌دهد تا زمانی که صفحه به تعامل کاربر پاسخ می‌دهد، سپری می‌شود.

از آنجایی که زمان بارگذاری (TTL) مدت زمانی را که مشتری طول می کشد تا تمام داده های مورد نیاز را به پایان برساند را ردیابی می کند (و بنابراین معیاری است که عمدتاً توسط اندازه فایل و سرعت شبکه تعیین می شود)، TTI یک واقعیت برجسته JS مدرن را در نظر می گیرد. Frameworks: پس از دانلود داده ها، مشتری باید کد جاوا اسکریپت مورد نیاز برای تعاملی کردن صفحه را باز کرده و اجرا کند.

کارهای زیادی روی یک موتور راکتیو انجام می شود. موتور باید همه آن نشانه‌گذاری (مانند JSX) را با متغیرها و عباراتی که بر اساس تغییر وضعیت نمایش داده می‌شود و نحوه رفتار آن بر اساس کد را تغییر می‌دهند، باز کند/تجزیه کند.

در انتهای دیگر طیف یک صفحه HTML مستقیم قرار دارد. هنگامی که مرورگر آن را در دست گرفت، صفحه آماده است تا حرکت کند. به همین دلیل است که Google’s PageSpeed ​​Insights به صفحه ای مانند Reddit.com ۳۲ اجازه می دهد. از ۱۰۰ امتیاز، در حالی که HTML خام امتیاز ۱۰۰ را کسب می کند.

بسته ها و شنوندگان

مانع فنی برای TTI سریع توسط هیوری به عنوان “مرگ در اثر بسته شدن” توصیف شده است. به طور خلاصه، این واقعیت که هر بسته باید جهان محصور کننده اطلاعات را حفظ کند به این معنی است که برنامه زمان اجرا یک کیک لایه ای از کدهای بارگیری شده مشتاقانه است.

راه حل استفاده شده توسط Qwik استفاده از شنونده رویداد جهانی است که با شنوندگان سریالی تعامل دارد. به عبارت دیگر، یک شنونده رویداد جهانی برای هماهنگ کردن شنوندگانی استفاده می‌شود که بر حسب تقاضا محقق می‌شوند، به جای اینکه شنوندگان بارگیری شوند و در بسته‌بندی شوند (بدون توجه به اینکه آیا واقعاً اجرا خواهند شد).

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

تقسیم کد، تنظیم دقیق

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

Qwik از ابتدا با سه عملکرد مجزا برای ایجاد حالت، الگو و شنونده ساخته شده است. این به چارچوب اجازه می‌دهد فقط آنچه را که برای کار مورد نیاز است بارگیری کند. می‌توانید در اینجا اطلاعات بیشتری درباره این جنبه کوچک بیاموزید.< /p>

سه مرز حالت، الگو و شنونده در یک زمان مستقیماً توسط توسعه دهندگان کدگذاری شده بودند. با تشکر از ابزار Optimizer جدید که سینتکس React مانند را به این مرزهای پشت صحنه تبدیل می کند. ، یک DX نسبتا آشنا دریافت می کنید. و Optimizer کار تبدیل کد واقعی به مجموعه‌ای از خرده‌های کوچک را انجام می‌دهد که می‌توانند در صورت لزوم برنامه را در قسمت‌های کوچک از سر بگیرند.

با بهینه‌ساز، الگوها و شنوندگان با علامت دلار نشان داده می‌شوند، در حالی که وضعیت توسط قلاب useStore مدیریت می‌شود. این نحو را در یک لحظه خواهید دید.

خروجی نهایی کد Qwik بر خلاف سایر فریمورک ها به نظر می رسد، اما استفاده از Qwik با بهینه ساز آن را با سایر فریم ورک ها برابر می کند. Qwik همچنین QwikCity را معرفی کرده است، مجموعه‌ای از ویژگی‌های درجه بالاتر مانند مسیریابی که ساخت برنامه‌های مقیاس کامل را آسان‌تر می‌کند.

کار با Qwik

اکنون که درک درستی از مفاهیم پشت سر Qwik دارید، بیایید احساسی برای کدنویسی با آن داشته باشیم. لیست ۱ یک جزء ساده را نشان می دهد که در Qwik نوشته شده است. (این مثال از سؤالات متداول Qwik است.)

فهرست ۱. جزء ساده Qwik

import { component$ } from '@builder.io/qwik';
export const App = component$(() => {
  console.log('render');
  return <p onClick$={() => console.log('hello')}>Hello Qwik</p>;
});

فهرست ۱ نشان می دهد که یک جزء در Qwik به عنوان یک تابع ناشناس تعریف می شود که از کتابخانه Qwik به تابع component$ منتقل می شود. هر زمان که علامت دلار $ را در Qwik می‌بینید، به Optimizer می‌داند که باید کارهایی را انجام دهد. بخش‌های امضا شده با دلار از برنامه جایی است که Qwik مرزهای بارگذاری تنبل ظریف خود را تعیین می‌کند.

onClick$ در فهرست ۱ نمونه دیگری از نحو خاص Qwik است. Qwik از برخی ترفندها برای بارگیری فقط جاوا اسکریپت لازم برای پشتیبانی از عملکرد در زمانی که واقعاً مورد نیاز است استفاده می کند.

کد موجود در فهرست ۱ توسط Optimizer به چند بخش تقسیم می شود، همانطور که در لیست ۲ نشان داده شده است.

فهرست ۲. جزء Qwik پس از کامپایل

// The app.js file itself
import { componentQrl, qrl } from "@builder.io/qwik";
const App = /*#__PURE__*/ 
componentQrl(qrl(()=>import('./app_component_akbu84a8zes.js'), "App_component_AkbU84a8zes"));
export { App };

// app_component_akbu84a8zes.js
import { jsx as _jsx } from "@builder.io/qwik/jsx-runtime";
import { qrl } from "@builder.io/qwik";
export const App_component_AkbU84a8zes = ()=>{
    console.log('render');
    return /*#__PURE__*/ _jsx("p", {
        onClick$: qrl(()=>import("./app_component_p_onclick_01pegc10cpw"), "App_component_p_onClick_01pEgC10cpw"),
        children: "Hello Qwik"
    });
};

// app_component_p_onclick_01pegc10cpw.js
export const App_component_p_onClick_01pEgC10cpw = ()=>console.log('hello');

در فهرست ۲ می‌توانید ببینید که Qwik به‌جای گنجاندن عملکرد مؤلفه واقعی، یک مرجع را با استفاده از تابع componentQrl() از کتابخانه، شامل می‌شود. این تابع یک تابع qrl() می گیرد که از یک تابع ناشناس برای وارد کردن فایل جزء تولید شده استفاده می کند. این ارتباط بین مؤلفه ها همگی تحت پوشش ها توسط Optimizer مدیریت می شود. نیازی نیست که برنامه‌نویس مستقیماً به آن فکر کند.

QRL مخفف Qwik URL است، که راهی است که Qwik به چیزی ارجاع می دهد که بارگذاری تنبلی دارد. اساساً، هر زمان که چارچوب نیاز به تعویق بارگیری چیزی داشته باشد، یک QRL را وارد می‌کند که توسط یک مصرف‌کننده خاص QRL پیچیده شده است (مانند یک جزء، وضعیت یا تابع الگو).

برای مثال، componentQRL می‌تواند در لحظه مناسب در کد موجود در مؤلفه فرزند بارگیری شود در حالی که والدین می‌توانند به سرعت طرح‌بندی آن را نمایش دهند. به طور مشابه با کنترل کننده onClick: زمانی که کلیک انجام می شود می توان آن را ارزیابی کرد.

Qwik CLI

ابزار خط فرمان از npm در دسترس است و دارای ویژگی های اساسی است که انتظار دارید از جمله ایجاد، حالت توسعه دهنده و ساخت تولید. Qwik CLI از Vite به عنوان ابزار ساخت استفاده می کند. می‌توانید یک برنامه جدید را با npm create qwik@latest راه‌اندازی کنید، که یک درخواست تعاملی راه‌اندازی می‌کند.

اگر یک برنامه ساده بسازید و ساخت تولید را اجرا کنید، یک فهرست راهنمای dist دریافت خواهید کرد که در آن می‌توانید همه بخش‌های جداگانه قابل بارگذاری با تنبلی برنامه را که قبلاً توضیح دادیم مشاهده کنید.

یک تنظیم Qwik

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