اساساً یک سیستم ساخت، Astro یک رویکرد جدید امیدوارکننده برای جاوا اسکریپت جلویی دارد. و با React، Svelte، Vue و دیگر فریمورک های محبوب کار می کند.
Astro یک رویکرد جدید به شور فعلی در جاوا اسکریپت است: کاهش عملکرد بیشتر از قسمت های جلویی واکنشی. این توسط همان تیمی که ابزار ساخت Snowpack را ایجاد کرده است، توسعه داده شده است.
تلاش‌های متعددی برای بهبود عملکرد با اجتناب از واکشی اولیه و راه‌اندازی گران‌قیمتی که فریم‌ورک‌های React مانند را تحت تأثیر قرار داده است، صورت گرفته است. این مشکل بدنام هیدراتاسیون است که اینجا شرح داده شده است.
Astro رویکردی جالب و بدیع دارد. این یک سیستم ساخت است که به شما امکان می‌دهد از هر فریم ورکی که می‌خواهید استفاده کنید (React، Svelte، Vue، و غیره)، و سپس کار پیدا کردن مکان‌هایی را انجام می‌دهد که بارگذاری تنبل می‌تواند به بهترین شکل مورد استفاده قرار گیرد. شما می توانید این را به عنوان نوعی تقسیم کد هوشمند در برنامه شما در زمان بسته در نظر بگیرید.
بنابراین می‌توانید از همان چارچوب آشنای که اکنون استفاده می‌کنید استفاده کنید، اما مزایای عملکردی بالقوه بسیار زیادی را نیز به دست آورید.
معماری جزایر
معماری وب که Astro برای ارائه پیشنهاد می‌کند، گاهی معماری جزیره‌ها نامیده می‌شود. ایده اصلی این است که جزایر اجزای تعاملی و وابسته به جاوا اسکریپت شما هستند که توسط نشانه گذاری خالص HTML/CSS احاطه شده اند.
با حکاکی کردن برنامه به این روش، می‌توانید تمام HTML را مستقیماً به مرورگر ارسال کنید، بنابراین کاربر چیزی برای تعامل دارد، در حالی که بخش‌های وابسته به جاوا اسکریپت را می‌توان فقط در صورت نیاز بارگیری کرد. حتی می‌توانید به Astro بگویید که جاوا اسکریپت را تا زمانی که یک مؤلفه برای کاربر قابل مشاهده باشد، به تعویق بیاندازد، همانطور که در زیر می‌بینید.
کار با Astro
بیایید با استفاده از جعبه شنی آنلاین آشنایی با Astro را آغاز کنیم. برای باز کردن آن اینجا کلیک کنید.
این URL یک صفحه ساده به نام Page.astro را با مهر زمانی نمایش می دهد. توجه داشته باشید که چگونه صفحه (فهرست ۱) به دو بخش تقسیم می شود. بخش اول که با خط تیره اول (---) مشخص می شود، حاوی کدهایی است که در زمان ساخت بر روی سرور اجرا می شود، نه در زمان اجرا. بخش دوم که با خط تیره دوم مشخص می شود، حاوی نشانه گذاری است که در زمان اجرا تحویل داده می شود.
فهرست ۱. Simple Astro sandbox
---
import {format} from 'date-fns';
// Welcome to Astro!
// Write JavaScript & TypeScript here, in the "component script."
// This will run during the build, but never in the final output.
// Use these variables in the HTML template below.
//
// Full Syntax:
// https://docs.astro.build/core-concepts/astro-components/
const builtAt: Date = new Date();
const builtAtFormatted = format(builtAt, 'MMMM dd, yyyy -- H:mm:ss.SSS');
---
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Astro Playground</title>
<style>
header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 15vh;
font-family: Arial;
}
.note {
margin: 0;
padding: 1rem;
border-radius: 8px;
background: #E4E5E6;
border: 1px solid #BBB;
}
</style>
</head>
<body>
<header>
<img width="60" height="80" src="https://bestofjs.org/logos/astro.svg" alt="Astro logo">
<h1>Hello, Astro!</h1>
<p class="note">
<strong>RENDERED AT:</strong><br/>
{builtAtFormatted}
</p>
</header>
</body>
</html>
توجه کنید که چگونه {builtAtFormatter} برای ارجاع به متغیر زمان ساخت در نشانه گذاری استفاده می شود.
یک جزء در Astro اضافه کنید
حالا بیایید یک جزء اضافه کنیم. همانطور که در تصویر ۱ دیده می شود، روی نماد مثبت در نوار فایل در بالا کلیک کنید.
تصویر ۱. یک جزء اضافه کنید
شما جزء جدید یک نام پیش‌فرض (Component1.astro) و محتوا، همانطور که در فهرست ۲ مشاهده می‌شود، دریافت می‌کند.
فهرست ۲. Component1.astro
---
const name = "Component"
---
<h1>Hello {name}</h1>
در اینجا دوباره یک انتساب و نمایش متغیر ساده داریم. بیایید از مؤلفه در صفحه اصلی استفاده کنیم.
به Page.astro برگردید. توجه داشته باشید که سیستم به طور مفید وارد بخش جاوا اسکریپت شده است:
import Component from '@/Component.astro';
می‌توانید با وارد کردن
استفاده از فریم ورک با Astro
ابرقدرت Astro پشتیبانی آن از انواع چارچوب های دیگر است. این کار را با استفاده از موتورهای رندر آنها در طول فرآیند ساخت و کامپایل کردن آنها به جزایر جزء انجام می دهد. بیایید ببینیم این چگونه کار می کند.
اگر این پیوند را باز کنید، یک Astro خواهید دید برنامه ای که یک جزء Svelte را اجرا می کند. (در اینجا مثالی است که چندین موتور رندر را نشان می دهد.) p>
اولین چیزی که در نسخه آزمایشی Svelte پیوند داده شده در بالا به آن توجه می شود، فایل astro.config.mjs است. این محتویات این فایل چیزی شبیه فهرست ۳ خواهد بود.
فهرست ۳. رندر Svelte را فعال کنید
export default /** @type {import('astro').AstroUserConfig} */ ({
// Enable the Svelte renderer to support Svelte components.
renderers: ['@astrojs/renderer-svelte'],
});
فهرست ۳ به شما نشان می دهد که چگونه Svelte را فعال کنید، بنابراین موتور اجزای Svelte را درک می کند. اکنون می توانیم یک فایل Svelte را مستقیماً به فایل Astro وارد کنیم. برای مثال، بیایید این خط را به /pages/index.astro:
اضافه کنیم
import Counter from '../components/Counter.svelte
اکنون می‌توانیم همانطور که در فهرست ۴ نشان داده شده است، از شمارنده Svelte در Astro استفاده کنیم.
فهرست ۴. استفاده از یک جزء Svelte در Astro
<Counter client:visible>
<h1>Hello, Svelte!</h1>
</Counter>
اگرچه این یک استفاده معمولی Svelte است، توجه داشته باشید که یک ویژگی خاص Astro در Counter وجود دارد: client:visible. این بدان معنی است که مؤلفه در مشتری بارگذاری نمی شود مگر اینکه در صفحه قابل مشاهده باشد. بنابراین با حداقل تلاش مقداری بارگذاری تنبل دانه ای حاصل می شود.
در زمان نوشتن، Astro از Svelte، React، Vue، Solid، Preact و Lit پشتیبانی می‌کند. روند استفاده از آنها دقیقاً مانند Svelte است. در واقع، می‌توانید چندین موتور رندر را فعال کنید و از آنها در کنار هم در برنامه Astro خود استفاده کنید.
علاوه بر ادغام، Astro همچنین چندین موضوعات و مبتدیان موجود است.
تنظیم دقیق هیدراتاسیون جزئی با Astro
دستورالعمل client:visible را در عمل مشاهده کرده‌اید. موارد دیگری نیز موجود است. در هر مورد، دستورالعمل ابتدا به Astro می‌گوید که به جای انجام رندر سرور و ارسال HTML، کامپوننت را با جاوا اسکریپت همراه خود روی کلاینت رندر کند. سپس به Astro می‌گوید که چگونه اجزا را هیدراته کنید.
دستورالعمل های مشتری Astro
دستورالعمل‌های مشتری Astro نحوه هیدراته شدن اجزا در صفحه را کنترل می‌کنند.
requestIdleCallback()استفاده می کند.IntersectionObserverاستفاده می کند). برای محتوای پایین صفحه مفید است.matchMediaاستفاده می کند). برای جابه‌جایی نوار کناری یا سایر عناصری که فقط باید در دستگاه‌های تلفن همراه یا دسک‌تاپ نمایش داده شوند مفید است."Svelte") می گیرد.
رویکرد زمان ساخت
از آنجایی که Astro اساساً یک ابزار ساخت است، کنترل کاملی بر آنچه در نهایت به مرورگر کاربر ارسال می شود دارد. این بدان معناست که علاوه بر انجام کارهای هوشمندانه با جاوا اسکریپت با بارگذاری تنبل، Astro می تواند در مورد نحوه ارائه دارایی های دیگر مانند CSS نیز هوشمند باشد.
علاوه بر این، هدف Astro این است که تا حد ممکن جاوا اسکریپت را به HTML مستقیم تقطیر کند، به این معنی که داده‌های کمتر از طریق سیم، ریزش مرورگر کمتر و زمان تعاملی سریع‌تر است.
به طور کلی، اگرچه Astro مسلماً بیشتر به سمت سایت‌های ثابت طراحی شده است، اما یک رویکرد امیدوارکننده و نوآورانه است—و یک بسیار پروژه فعال، با نزدیک به ۱۶ هزار ستاره در GitHub.
پست های مرتبط
معرفی Astro: بارگیری تنبل هوشمندانه برای جاوا اسکریپت
معرفی Astro: بارگیری تنبل هوشمندانه برای جاوا اسکریپت
معرفی Astro: بارگیری تنبل هوشمندانه برای جاوا اسکریپت