آشنایی با فریمورک Astro

Astro.js یک فریمورک مدرن جاوا اسکریپت برای توسعه وبسایت‌هاست که به برنامه نویسان این اجازه را می‌دهد تا بتوانند وبسایت‌های محتوا محور را به صورت سریع و البته آسان ایجاد کنند. در چند ماه اخیر این فریمورک در بین جامعه طراحان و توسعه دهندگان وبسایت به صورت مکرر استفاده شده و در رابطه با آن بحث‌هایی نیز شکل گرفته است که در نهایت تمام این موارد نشان از اهمیت بالای آن می‌دهند.

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

هدف و ماهیت کلی فریمورک Astro چیست؟

Astro را می‌توان در بین معماری‌های مختلف فریمورک در دسته‌بندی MPA قرار داد. منظور از MPA همان Multi-Page Application یا اپلیکیشن چند برگه‌ای یا چند صفحه‌ای است. این دست از فریمورک‌ها برای وبسایت‌ها و کاربری‌هایی مناسب است که قصد ارائه محتوا در صفحات مختلف را دارند، برعکس معماری SPA که در آن تلاش می‌شود همه چیز در یک صفحه (معماری تک صفحه‌ای) قرار بگیرد، در Astro شما امکان آن را پیدا خواهید کرد تا محتوای‌تان را در صفحات مختلف با لینک‌های متفاوت قرار دهید.

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

Astro فریمورکی است که به صورت Server-Rendering عمل می‌کند البته با این تفاوت که امکاناتی مانند Lazy Load Client-Side نیز دارد. بنابراین می‌توان جاوا اسکریپت در این فریمورک را نیز به این شیوه لود بکنید.

یکی از دلایلی که باعث می‌شود Astro یک فریمورک جاوا اسکریپتی منحصر به فرد باشد این است که می‌تواند از جاوا اسکریپت هم به عنوان زبان سرور و هم به عنوان زبان Runtime استفاده کند. از این جهت برنامه نویس‌های Full-Stack جاوا اسکریپت قطعا با مشاهده این فریمورک لذت خواهند برد.

همچنین همانطور که اشاره شد شما در Astro می‌توانید از ابزارهای مختلف به صورت بسیار ساده استفاده کنید. به این نوع معماری BYOT یا Bring Your Own Tech گفته می‌شود که در نهایت هدفش این است تا شما بتوانید کتابخانه‌ها و ابزارهای مختلف مورد نیازتان را در کنار این فریمورک استفاده کنید. برای انجام چنین کاری Astro یک CLI معرفی کرده است که با استفاده از آن به راحتی می‌توانید کتابخانه‌هایی مانند React و Vue را وارد پروژه خود کنید.

‌معماری Island

در این فریمورک معماری تحت عنوان Island وجود دارد که یک نوآوری در دنیای فرانت-اند به حساب می‌آید. برای اینکه به صورت بسیار ساده این معماری را توضیح دهیم بیایید اینگونه پیشفرض بگیریم که وبسایت‌های مختلف به صورت کلی به دو بخش محتوای استاتیک و داینامیک (در سطح Front-End) تقسیم می‌شوند. برای مثال به صفحه اصلی وبسایت راکت نگاه کنید، مطمئنا می‌توانید این بخش‌ها را از همدیگر جدا کنید.

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

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

برای مثال عنوان اصلی وبسایت، منوها، دکمه‌ها، تگ‌ها و... از جمله کامپوننت‌های مهمی هستند که باید ابتدا لود شوند تا کاربر نشانه‌هایی از وبسایت و بارگذاری آن را مشاهده کرده و مشغول پیمایش در آن‌ها باشد.

فریمورک Astro به صورت کلی از این معماری و الگوی آن بهره می‌گیرد و به همین دلیل است که در فرایند بارگذاری نیز بسیار سریع‌ عمل می‌کند.

جاوا اسکریپتی در کار نیست! (البته به صورت پیشفرض)

در فریمورک Astro به صورت پیشفرض هیچ کد جاوا اسکریپتی به مرورگر کاربر وبسایت شما ارسال نمی‌شود. بلکه تنها یک برگه به صورت Static ارسال خواهد شد که حاوی محتوا است. به همین دلیل است که این فریمورک Content-Focused است چون قصد ندارد وبسایت‌های بسیار سنگین با تعاملات کاربری بسیار زیاد را ایجاد کند.

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

چند ویژگی کلی

پشتیبانی از Markdown به صورت پیشفرض: از آنجایی که Astro یک فریمورک محتوا محور به حساب می‌آید به صورت پیشفرض از MD یا همان مارک-داون پشتیبانی می‌کند. به همین دلیل است که شما بدون نیاز به پلاگین خارجی می‌توانید به سادگی شروع به نوشتن محتوای خود بکنید.

ادغام پذیری: همانطور که گفته شد Astro به سادگی قابلیت ادغام با دیگر فریمورک‌ها و کتابخانه‌ها را دارد و از این جهت می‌توانید بدون مشکل با ابزارهای دیگر از این فریمورک استفاده کنید.

دیپلوی ساده: مجموعه‌ای از کانفیگ‌ها و مستندات در Astro ارائه شده تا شما بتوانید به سادگی وبسایتی که ساخته‌اید را در هاست‌های مختلف دیپلوی کنید. Github Pages، Netlify، Gitlab و... از جمله فضاهایی هستند که توسط Astro پشتیبانی می‌شوند.

در پایان

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