INERTIA.JS چیست؟

Inertia.js که با شعار “The Modern Monolith” اعلام شد، ادعا می کند که با رویکرد جدید خود برخی از مشکلات موجود در فرآیند توسعه SPA (برنامه تک صفحه ای) را حل کرده است.

SPA چیست؟

رویکرد اساسی در SPA که به عنوان مخفف برنامه تک صفحه ای استفاده می شود. این است که بسته html، CSS و جاوا اسکریپت را با یک بار دانلود به کاربر ارائه دهد و جریان داده ای را که در استفاده مورد نیاز خواهد بود، از سرور در صورت نیاز، در پس زمینه انجام دهد. در این رویکرد، کاربر یک تجربه بدون وقفه از استفاده از برنامه دارد، زیرا در هنگام تعامل با کاربر، صفحه بارگذاری کامل وجود ندارد. یک SPA با طراحی خوب، هنگامی که با نشانه های بصری مناسب استفاده می شود، تجربه کاربر را به سطح بعدی می برد، در حالی که نیاز به پهنای باند اینترنت کاهش می یابد، زیرا فقط سرور برای انتقال داده های خام ارتباط برقرار می کند. این نیز بار سرور را کاهش می دهد.

اگر با فرآیندهای توسعه برنامه های تحت وب آشنایی دارید، می دانید که در برنامه های SPA، ماژول های Backend و Frontend به طور کلی از یکدیگر انتزاع می شوند. در این رویکرد، توسعه کلاسیک مبتنی بر وضعیت جلسه کنار گذاشته می‌شود و یک ارتباط بدون حالت مبتنی بر توکن API بین frontend و Backend ارائه می‌شود. در این مورد، دو مشکل اصلی ایجاد می شود. اولین مورد مدیریت جلسه کاربر و دیگری نگهداری مسیر و نقاط پایانی است.

این امکان وجود دارد که مشکل جلسه کاربر را با یک ابزار مدیریت وضعیت مناسب برای چارچوب مورد استفاده برای frontend حل کنید. در اولین ورود، توکن api از سرور گرفته شده و به عنوان متغیر حالت ذخیره می شود. درخواست های بعدی به سرور با استفاده از این توکن انجام می شود. اگر خطایی در رابطه با توکن از سرور برگردانده شد، توکن از حالت حذف می شود و از کاربر خواسته می شود دوباره وارد شود.

نقاط پایانی مسیر و API موضوعی است که باید به دقت مورد بررسی قرار گیرد. اگر روش SPA ترجیح داده شود، مسیریابی در سمت جلو مطابق با درک کلاسیک انجام می شود. الگوهای مسیر مشخص می شود و با توجه به این الگوها، اجزای مربوطه بارگذاری و به کاربر ارائه می شود. پس از بارگذاری این مؤلفه ها، در صورت لزوم با روش های داخلی خود، با درخواست از سرور، جریان داده را آغاز می کنند. مسیرهای API در backend برای کشش داده و درخواست‌های ارسال به سرور ایجاد می‌شوند. در این صورت، می‌توان در مورد نیاز توسعه‌دهندگان به حفظ مسیر هم برای فرانت‌اند و هم برای بک‌اند صحبت کرد.

Inertia برای چه مواردی استفاده می شود؟

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

Inertia از چه فریم‌ورک‌ هایی پشتیبانی می کند؟

در زمان نگارش این مقاله، Inertia از فریم ورک های Laravel و Rails برای بک اند پشتیبانی می کرد، در حالی که React، Vue.js و Svelte برای فرانت اند. امکان تهیه آداپتورهای جدید و گسترش این لیست در طول فرآیند توسعه با Community وجود دارد.

Inertia چگونه کار می کند؟

اینرسی مدیریت مسیر را تا حد زیادی پشت سر می گذارد. در انجام این کار، از یک روش بسیار هوشمندانه استفاده می شود:

اگر برای اولین بار با یک آدرس در برنامه SPA تماس می گیرید، بک اند کل بسته html، css و js را آماده کرده و برای شما ارسال می کند. البته آداپتورهای باطن اینرسی هستند که این کار را در باطن انجام می دهند. در حین انجام این کار، اطلاعات مربوط به اینکه کدام کامپوننت باید در مسیری که متناظر با آدرسی که نوشته اید نصب شود و داده هایی که قرار است به این کامپوننت ها منتقل شوند به صورت یک بسته برای مشتری ارسال می شود. مؤلفه های اینرسی در سمت کلاینت، مؤلفه های front-end لازم را در اینجا ایجاد می کنند و داده های ارسال شده از سرور را به این مؤلفه ها منتقل می کنند.
اگر روی پیوندی در برنامه کلیک کنید، مؤلفه جلویی اینرسی در این کلیک دخالت می‌کند و درخواست صفحه کامل را به یک درخواست XHR تبدیل می‌کند تا به آدرس هدف ارسال شود. در حین انجام این کار، برخی از اطلاعات لازم در مورد برنامه فعلی را به عنوان اطلاعات هدر به این درخواست اضافه می کند.
اگر Inertia هدرهای خاصی را در درخواست مشاهده کند، backend به جای ارسال بسته متشکل از HTML، CSS و جاوا اسکریپت، فقط نام مؤلفه صفحه را که باید بارگذاری شود و اطلاعاتی که باید به این مؤلفه به عنوان json منتقل شود، ارسال می کند.
اینرسی داده های دریافت شده در پاسخ به درخواست را در قسمت جلویی پردازش می کند و مؤلفه صفحه مورد نیاز بارگذاری می شود و بسته داده به این مؤلفه منتقل می شود.

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

می توانید برنامه آزمایشی را در صفحه رسمی InertiaJS در آدرس زیر پیدا کنید:

دمو

INERTIA.JS چیست؟