چند سالی میشه که به عنوان یک فول استک برای وب برنامه نویسی میکنم. از لاراول به عنوان بک اند پروژه هام و از Vue.js برای پیاده سازی فرانت اند استفاده میکنم. استفاده از Vue.js کمک خیلی زیادی برای پیاده سازی SPA ها به من کرده و باوجود اینکه آبم با جاوااسکریپت توی یک جوی نمیره ولی تونستم به خوبی ازش استفاده کنم. ولی ارتباط با بک اند بوسیله api و axios و ... دردسرهای خودش رو داره. حدودا چندماه پیش بود که وقتی پروژه جدید لاراول رو ایجاد کردم و میخواستم از Jetstream برای پیاده سازی ساز و کار ورود و مدیریت کاربران استفاده کنم متوجه یک اسم عجیب و غریب در فایل package.json شدم. Inertia.js یک کتابخانه جاوااسکریپت که به معنی واقعی کلمه به عنوان یک مبدل یا بقول مستندات خودشون چسب بین بک اند و فرانت اند عمل میکنه.
در این مطلب قصد دارم کتابخانه Inertia.js رو معرفی کنم و در مورد سادگی استفاده از اون و همچنین قابلیت های فوق العادش صحبت کنم. خبری از آموزش و کد نویسی نیست ولی باید آشنایی کلی با مفاهیم وب، SPA، فرانت اند و بک اند، فراخونی api ها و ... داشته باشین تا این مطلب به دردتون بخوره.
خود من از وقتی با لاراول آشنا شدم و البته قبل از اون شیوه کارم به این شکل بود که اطلاعات مورد نیاز رو از پایگاه داده دریافت میکردم، پردازش لازم رو انجام میدادم و در نهایت به وسیله فایل های ویو به کاربر نمایششون میدادم. این ساز و کار رو تمام برنامه نویسان چه با لاراول، چه با Ruby on Rails و چه با Django میدونن و ازش استفاده میکنن. به مراحلی که گفتم تعریف route ها رو هم اضافه کنید. ولی وقتی صحبت از SPA میشه شرایط از یه جایی به بعد یه مقدار فرق میکنه، در واقع اطلاعاتی که از دیتابیس دریافت شده رو از طریق کنترلر باید تبدیل به یک رشته json کنیم تا توسط درخواست ajax که از طرف SPA اومده قابل دریافت باشه. درون خود فریم ورک جاواسکریپتی که برای پیاده سازی ساز و کار SPA ازش استفاده کردیم هم باید در ابتدا route های مورد نیازمون رو تعریف کنیم و بوسیله axios یا کتابخونه های مشابه درخواست ها رو برای بک اند بفرستیم و پاسخ رو دریافت کنیم. Inertia.js به ما کمک میکنه که این دو بخش رو بهم دیگه بچسبونیم. کافیه اطلاعات دریافتی از دیتابیس رو در کنترلر پردازش کنید و بقیه رو به Inertia.js بسپارید تا داخل کامپوننت جاوااسکریپت اطلاعات رو بهتون تحویل بده. لازم نیست route ها رو دوباره تعریف کنید، لازم نیست نگران تبدیل اطلاعات به json باشید، لازم نیست نگران اعتبارسنجی کاربر باشید، خطاهای ولیدیشن به خوبی پردازش میشن و لازم نیست حتی نگران بروزرسانی state ها باشید. تمام پیچیدگی ها رو به Inertia.js بسپرید.
پیچیدگی های SPA: یکی از مشکلات برنامه نویسها برای پیاده سازی SPA ها پیچیدگی مواجه شدن با مدیریت state ها، تعریف route ها، اعتبارسنجی کاربران و ... است که همه اونها توسط Inertia.js مدیریت میشه.
پیاده سازی api ها: وقتی از Inertia.js استفاده میکنید نیازی نیست نگران REST یا GraphQL باشید. Inertia.js بهتون کمک میکنه به همون شکل سنتی اطلاعات رو از طریق فریم ورک بک اند برای فرانت ارسال کنید. به راحتی با استفاده از کامپوننت <inertia-link> به جای <a> میتونید یک درخواست عادی رو به یک درخواست ajax تبدیل کنید و تمام. بقیه کارها رو به Inertia.js بسپرید.
مشکلات مرورگرها: وقتی از Inertia.js استفاده میکنید خیلی از مشکلاتی که هنگام پیاده سازی SPA ها با مرورگر دارید بوسیله سرویس های داخلی Inertia.js حل میشه. مشکلاتی مثل:
استفاده از فرم ها: به جای استفاده از فرم های معمولی که باعث میشن صفحه به طور کامل بارگزاری بشه می تونید از فرم های Inertia.js استفاده کنید. به سادگی اطلاعات مورد نیاز رو درون فرم ذخیره میکنید و Inertia.js وظیفه ارسال اطلاعات به سرور رو بر عهده میگیره. از قابلیت های فوق العاده ای هم برخورداره مثل مدیریت خطاها، دریافت نتیجه ارسال اطلاعات به صورت onSuccess و و همچنین اطلاع از میزان ارسال اطلاعات بوسیله form.progress و form.progress.percentage
ورود کاربر و بررسی سطوح دسترسی: وقتی از Inertia.js استفاده میکنید لازم نیست ساز و کار جداگانه ای برای ورود کاربر پیاده سازی کنید. دقیقا همون ساز و کاری که به همراه فریم ورک بک اند اومده به راحتی قابل استفاده است. در واقع چون از طریق کنترلرها مستقیما با Inertia.js در ارتباط هستید همون ساز و کار session ها برای مدیریت ورود کاربران استفاده میشه. همینطور در خصوص مدیریت سطح دسترسی کاربران میتونید عملیات مجاز توسط کاربر رو به شکل props به کامپوننت ارسال کنید و اونجا ازش استفاده کنید.
خوشبختانه Inertia.js چندین فریم ورک رو به عنوان بک اند و فرانت اند پشتیبانی میکنه. از بین فریم ورک های بک اند Inertia.js به طور رسمی از لاراول و Ruby on Rails پشتیبانی میکنه و از بین فریم ورک های فرانت اند هم در حال حاضر Vue2، Vue3، React.js و Svelte رو پیشتبانی میکنه. البته چندین کتابخونه هم به طور غیر رسمی برای کار با Django، CakePHP، Symfony و Adonis ارائه شده که میتونید از اونها استفاده کنید.
در این مطلب سعی کردم فقط Inertia.js رو بهتون معرفی کنم. حتم دارم مثل من در افزایش سرعت پیاده سازی برنامه هاتون تاثیر زیادی داره. به زودی حتما مطلب دیگه ای مینوسم و سعی میکنم به بهترین شکل در خصوص روش پیاده سازی یک پروژه با بک اند لاراول و فرانت اند Vue.js بوسیله Inertia.js و استفاده از قابلیت های اون براتون صحبت کنم.
