طراحی یک برنامه وب پویا با Astro

به عنوان یک فریم متا ، Astro.js رویکرد متفاوتی را برای توسعه برنامه های وب اتخاذ می کند. از اینجا با چند تصمیم طراحی مهم شروع کنید.

astro.js از محبوب ترین متا-فریم برای توسعه دهندگان جاوا اسکریپت ، و به همین دلیل خوب است. Astro ساختار برنامه های وب را برای حداکثر اثر با حداقل تلاش ، نسبتاً آسان می کند. با این وجود می توان سر خود را در مورد نحوه عملکرد Astro دشوار کرد ، اما به دلیل شیوه های شکسته شدن از سنتی تر چارچوب های Javascript Front-End .

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

برنامه نسخه ی نمایشی

برنامه کار کردن یک روش کلاسیک برای کشف یک پشته فناوری جدید است و می بینید که چگونه نیازهای توسعه استاندارد را کنترل می کند. لیست انجام کارهای آنلاین به یک مجموعه ویژگی کوچک نیاز دارد اما به شما امکان می دهد تمام عناصر اساسی لیست داده ها و انجام عملیات CRUD را کشف کنید. پس از پایین آمدن این اصول ، آسمان محدودیت اضافه کردن ویژگی های جدید است. در مورد اضافه کردن ستون های کشیدن و رها کردن و پیمایش نامحدود ، یا تحویل لیست کارهای خود به عنوان فید RSS چطور؟ مشکلی نیست که شما بفهمید که پشته فناوری چگونه کار می کند.

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

اسپا ، MPA یا چیزی در وسط؟

چند ملاحظات برای طراحی برنامه انجام کارها با استفاده از ASTRO وجود دارد. یک نکته تصمیم فوری این است که آیا شما می خواهید یک برنامه تک صفحه ای (SPA) یا برنامه MUTI-PAGE (MPA) داشته باشید. نوع برنامه ای که شما انتخاب می کنید چگونه برنامه داده های خود را در مشتری بارگذاری می کند.

ویژگی مشخص کننده SPA این است که بیشتر (اگر نه همه) تعامل توسط مشتری صدور درخواست API در پس زمینه و به روز کردن UI بر این اساس انجام می شود. ایده یک برنامه تک صفحه ای این است که شما هر آنچه را که لازم دارید ، از جمله JavaScript را بارگیری می کنید ، و سپس کار را از آنجا انجام می دهید. نتیجه در اصل یک مشتری ضخیم یا چربی در مرورگر است.

MPA بیشتر در سنت وب ۱.۰ است: مجموعه ای از صفحات استاتیک مرتبط با لینک های لینک. در حالی که اسپا مدرن تر و پویا تر است ، MPA ها می توانند قابل اطمینان تر باشند. در حالی که این دو سبک اغلب در برابر یکدیگر قرار می گیرند ، حقیقت بسیاری از برنامه های مدرن این سبک ها را می آمیزند. در حالت ایده آل ، ما می خواهیم نقاط قوت را به حداکثر برسانیم و نقاط ضعف هر یک را به حداقل برسانیم. معمول است که هرچه بیشتر محتوا را از نظر آماری بارگیری کنید ، و سپس عناصر پویا را در جایی که تأثیر می گذارد استفاده کنید. در هر دو مورد ، شما می خواهید بهترین روش ها را برای سبکی که استفاده می کنید اعمال کنید.

این ایده است ، به هر حال. اما هرکسی که برای کدگذاری یک برنامه ترکیبی برنامه ریزی کرده است می تواند به شما بگوید که سریع کار می کند! ASTRO از جزایر معماری برای ایجاد فرمت ترکیبی استفاده می کند. جزایر اساساً طرح برنامه را به قسمتهای گسسته تقسیم می کنند ، که می توانند با استفاده از بهترین روشها برای نوع داده شده ، بارگیری شوند.

با استفاده از برنامه کارها به عنوان نمونه ما ، منطقی است که هرگونه محتوای فریم و فریم را به گونه ای ارائه دهیم که از حداکثر سرعت و دوست داشتن سئو پشتیبانی کند. سپس ، برای لیست پویا برای انجام کارهای ، چند گزینه داریم. ما می توانیم از یک چارچوب واکنشی مانند React در حالت کامل آبگرم استفاده کنیم ، در این صورت ما دارایی های مشتری را از طریق آن ارسال می کنیم و سپس داده ها را از یک API سرور بارگذاری می کنیم. گزینه دیگر استفاده از همان مؤلفه است و آن را قبل از ارائه بر روی سرور ، نوعی زمین متوسط ​​بین SPA و MPA است. گزینه دیگر در کل استفاده از JavaScript ساده یا HTMX برای ایجاد و ارائه لیست است.

صرف نظر از سبکی که انتخاب می کنید ، آسترو بخش عمده ای از تفکر مقدم را برای شما انجام می دهد. این شما را با تصمیم گیری در مورد چگونگی ارائه بخش هایی از UI ، به شما امکان می دهد ، سپس به شما امکان می دهد از همان فرآیند برای ساخت API های سمت سرور خود استفاده کنید.

ارائه استاتیک یا سرور در سمت؟

Astro هم صفحات و اجزای برنامه وب را ارائه می دهد. در حالت استاتیک ، محتوا قبل از زمان روی سرور ارائه می شود و برای حداکثر کارآیی در تحویل و نمایش در مشتری بسته بندی می شود. در ارائه سمت سرور (SSR) محتوا در صورت درخواست به صورت زنده ارائه می شود. (رندر استاتیک گاهی اوقات SSG یا نسل سمت سرور نامیده می شود تا آن را با SSR در تضاد قرار دهد.)

Astro به دلیل توانایی خود در تولید نماهای جلویی با استفاده از چارچوب های واکنشی مانند React شناخته شده است ، اما همچنین می تواند نیازهای عقب مانند نقاط پایانی API را برطرف کند. در هر دو مورد ، سوال استاتیک در مقابل SSR بازی می شود. یک نقطه پایانی یا صفحه تولید شده در واقع یک فایل کدگذاری شده سخت است که در زمان اجرا ایجاد می شود و برای هر درخواست همان محتوا را ارائه می دهد.

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

به یک صفحه یا نقطه پایانی می گویید که از ارائه پویا با نحو زیر استفاده کنید:

export const prerender = false;

تنظیم هدف استقرار

به خاطر داشته باشید که وقتی در حالت DEV کار می کنید ، لزوماً اثر بارگذاری استاتیک را نمی بینید زیرا سرویس Dev-Mode به طور مداوم در حال بارگیری مجدد تغییرات شما است. به همین دلیل مهم است که ذکر کنید adaptter

آداپتورهای

ممکن است در ابتدا پیچیده به نظر برسند و شما را مجبور می کنند در میان تلاش برای ساختن برنامه خود با نگرانی دیگری روبرو شوید. اما آداپتورها می توانند مسئله استقرار را تا حد زیادی ساده کنند. ( sveltekit چارچوبی دیگر است که از آداپتورها استفاده می کند.)

Astro شامل چندین هدف استقرار در ارائه دهندگان آداپتور خود ، از جمله NetLify ، Vercel و Node. اگر در مورد آن فکر کنید ، فقط اجزای SSR به آداپتور نیاز دارند. اگر یک مؤلفه SSG باشد ، در نهایت به یک دارایی استاتیک تبدیل می شود-یا یک صفحه HTML بسته بندی شده یا یک پرونده JavaScript در مورد نقاط پایانی.

آداپتورهای

مسیری واضح و روشن برای استقرار و انعطاف پذیری در اهداف را فراهم می کنند ، مشابه انعطاف پذیری Astro به شما می دهد وقتی انتخاب یک چارچوب جلویی .

مسیریابی

مانند Next.js ، Astro مسیریابی مبتنی بر پرونده را فراهم می کند. این خوب است زیرا نقشه برداری URL شما به سادگی توسط جایی که پرونده های خود را قرار می دهید و آنچه را که آنها را نامگذاری می کنید تعریف می شود. البته Astro همچنین از سایر موارد مورد نیاز مانند پارامترهای مسیر پشتیبانی می کند.

در Astro ، فهرست /src/pages مسیرهای شما را نگه می دارد. بنابراین صفحه اصلی فرود فهرست شما به این صورت تعریف می شود:

/src/pages/index.astro

در حالی که URL /test در:

زندگی می کند

/src/pages/text.astro

به طور مشابه ، مسیرهای نقطه پایانی شما یک کنوانسیون مشابه را دنبال می کنند. شما می توانید یک نقطه پایانی /data.json را تعریف کنید:

/src/pages/data.json.ts

توجه داشته باشید که پسوند .ts در URL از بین می رود. Astro از .astro در مقابل .ts استفاده می کند تا بگوید آیا می خواهید یک صفحه وب یا یک نقطه پایانی باشد. Astro همچنین خوشحال است که اگر دوست دارید JavaScript Undyped خود را از موارد زیر استفاده کنید:

/src/pages/data.json.js

گاهی اوقات ، من JavaScript بدون نسخه را دوست دارم. بنابراین از من شکایت کنید.

htmx در قسمت جلویی

خوانندگان معمولی می دانند که من طرفدار htmx هستم. من حتی تا آنجا پیش می روم که پیش بینی کنم که در بعضی از موارد به مشخصات HTML اضافه شود. من قبلاً کاوش کرده ام با استفاده از آسترو با چارچوب های جلویی مانند Svelte و React . این بار ، من علاقه مند هستم ببینم که هنگام ترکیب با HTMX چگونه کار می کند.

این باید روشی مرتب برای نگاهی به HTMX و چندین قدرت Astro مانند صفحات SSG و نقاط پایانی SSR باشد. البته ، React ، Svelte یا Vue نیز می توانند بسیار خوب کار کنند. بخش جالب HTMX این است که بخش اعظمی از تعامل مورد نیاز ما را فراهم می کند ، مانند درخواست های AJAX و به روزرسانی های نمای جزئی ، بدون قدم در خارج از HTML.

همراه با قابلیت های سمت سرور و استقرار ASTRO ، HTMX باید برای انجام هر کاری که لازم داریم ، پایه خوبی به ما بدهد. امیدوارم ، ما می توانیم سعی کنیم چیزی پیچیده تر نیز مانند پیمایش بی نهایت اضافه کنیم. هفته آینده را برای مقاله بعدی در این سری بررسی کنید.