مقدمه

در دنیای وب امروز سرعت بارگذاری سایت یا نرم افزار یک پارامتر اساسی برای ماندگاری و جذب کاربر است. اما سوال اینجاست که با توجه به افزایش روز افزون سرعت اینترنت چرا باید نگران سرعت وبسایت یا اپلیکیشن خود باشیم؟

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

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

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

به عبارتی دیگر فشار کاری که قبلا کلا روی سرور بود بین سرور و سیستم کاربر تقسیم و از ارسال داده های تکراری خودداری شد و این باعث صرفه جویی در منابع و در نتیجه افزایش سرعت می شود.

Spa در برنامه نویسی چیست؟

یک اپلیکیشن ( ویکی پدیا ) با رویکرد تک صفحه ای یا Single Page Application که به اختصار به آن Spa در برنامه نویسی هم می گویند، یک اپلیکیشن تحت وب است که فقط و فقط برای یک بار از سمت سرور بارگذاری می شود و برای هر تعامل دیگر کاربر را به سمت سرور نمی فرستد بلکه تنها محتوای مورد نیاز را با استفاده از api جاوا اسکریپت مثل درخواست Ajax و Fetch تغییر می دهد.

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

بیاید به زبان ساده تر توضیح دهیم. چه دلیلی دارد در هر درخواست کدهای مرتبط با قالب پردازش و از سرور دریافت شود؟ این خود باعث درگیر کردن و استفاده منابع سرور و کاهش سرعت پاسخگویی است. مگر قالب در تمام سایت یا اپلیکیشن یکسان نیست؟ پس می توان تنها یک بار قالب را بارگذاری کنیم و فقط داده ها را متناسب با صفحه و شرایط تغییر دهیم. و این به معنی تک صفحه بودن است یعنی کلا سایت یک صفحه دارد که فقط محتوای آن تغییر می کند.

قطعا شما هم جدیدا به سایت هایی برخورد کردید که احساس می کنید فقط محتوای آن تغییر می کند مثل جیمیل.

نمونه سایت ها

نمونه از سایت های معروف با تکنولوژی تک صفحه ای یا همان SPA را در زیر میبینید:

از نمونه های موفق ایرانی اپلیکیشن تک صفحه ای می توان به موارد زیر اشاره کرد:

• پنل کاربری درگاه واسط زرین پال
• ای سمینار

نمونه های موفق خارجی هم که نیاز به معرفی ندارد

• سرویس جیمیل
• نقشه گوگل
• فیسبوک
• توییتر
• مدیریت وظیفه Trello
• گوگل درایو
• اینستاگرام وب

معماری اپلیکیشن تک صفحه ای و تفاوت آن با ساختار سنتی

در پاسخ به سوال «یک اپلیکیشن تک صفحه ای چطور کار می کند؟» می توان گفت که معماری اپلیکیشن تک صفحه ای خیلی ساده ست. این معماری از ترکیب بخش تکنولوژی سمت کلاینت و تکنولوژی های سمت سرور استفاده می کند. تصویر زیر را مشاهده کنید.

مراحل عملکرد اپلیکیشن تک صفحه ای به این شرح است(تصویر سمت راست):

• مرورگر برای دریافت فایل Html از سرور درخواستی را به سمت سرور می فرستد.
• سرور به سرعت با یک فایل Html ساده به همراه استایل ها و اسکریپت های لینک شده پاسخ را به سمت مروگر کاربر می فرستد.
• کاربر یک صفحه خالی و یا تصویر لودینگ در حین اجرای کدهای جاوا اسکریپت مشاهده می کند.
• اپلیکیشن داده ها را دریافت، بخش نمایش را می سازد و به داخل کد صفحه یا همان DOM تزریق می کند.
• اپلیکیشن برای استفاده آماده است و کاربر صفحه مد نظر را به طور کامل مشاهده می کند.

نکته: در مراحل بالا از در خواست دوم به بعد فقط مرحله 4 انجام می شود.(ولی می توان در حین هر درخواست عملیات لودینگ را به کاربر نمایش داد تا کاربر در اینترنت کم سرعت متوجه شود که قرار است داده لود شود  و این باعث ایجاد تجربه کاربری خوب در کاربر می شود)

اما مدل بارگذاری سنتی یا قدیمی را بررسی می کنیم(تصویر سمت چپ):

• مرورگر برای دریافت فایل Html از سرور درخواستی را به سمت سرور می فرستد.
• سرور تمام داده های مورد نیاز را دریافت و در قالب اپلیکیشن یا سایت رندر و فایل Htmlنهایی را برای مرورگر کاربر ارسال می کند.
• کاربر محتوای در دسترس را مشاهده می کند.
• پس از آن جاوا اسکریپت باید رویداد های خود را ثبت و در صورت نیاز DOM را به روز و کارهای دیگری که به آن محول شده را انجام دهد.
• اپلیکیشن قابل استفاده است.

نکته: در مراحل بالا در همه درخواست ها باید تمام مراحل بالا تکرار شود و این تکرار عملا سرعت اپلیکیشن را کند می کند.

چه موقع از اپلیکیشن تک صفحه ای استفاده کنیم

در پاسخ به سوال دیگر «چه موقع باید از اپلیکیشن تک صفحه ای استفاده کنم؟» می توان گفت که وقتی یک کسب و کار و یا سایت شخصی دارید که نیاز به یک پلتفرم پویا و حجم دیتای کم دارید، استفاده از اپلیکیشن تک صفحه ایده خوبی است.

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

مزایا و معایت Spa در برنامه نویسی

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

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

از طرف دیگر زمانی که برای اپلیکیشن وب خود در سمت سرور کد api نوشته اید بدون نوشتن مجدد کد اختصاصی موبایل می تواند از همین کد برای نوشتن اپلیکیشن موبایل(اندروید و آی او اس) استفاده کنید.

اپلیکیشن های تک صفحه ای به راحتی قابلیت تبدیل شدن به اپلیکیشن های پیش رونده یا Progressive Web Apps یا به اختصار PWA را دارند چون می تواند داده های خروجی از سرور را درون کش مرورگر ذخیره کند و در زمان قطع بودن اینترنت هم سایت در دسترس باشد.

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

یکی از ایراد هایی که می توان از SPA گرفت سنگینی اجرای جاوا اسکریپ روی دستگاه های ضعیف است. در این صورت کاربر تجربه خوبی از سایت یا اپلیکیشن ما نخواهد داشت و حتی ممکن است برخی از بازدید کنندگان جاوا اسکریپت خود را غیر فعال کرده باشند و شما هم برای هر بخش از سایت نیاز به جاوا اسکریپ برای ساختن آن بخش داشته دارید! و عملا سایت شما هیچ کارایی برای آن کاربر ندارد. البته میتوان در این صورت از کاربر خواست که جاوااسکریپ خود را فعال کند. مثل سایت Trello

ابزار ایجاد Spa در برنامه نویسی

در زمان نوشتن این مقاله فریم ورک های مختلفی برای ایجاد اپلیکیشن تک صفحه توسعه و ارائه شده ولی ما چند نمونه از بهترین های آن را به شما معرفی می کنیم. ابتدا باید این نکته را مدنظر قرار دهیم که ساخت این نوع اپلیکیشن شامل دو بخش فرانت اند و بک اند است که بخش فرانت اند شامل فریم ورک های جاوا اسکریپ و بخش بک اند هم با هر زبانی باید با استفاده از Rest Api با فرمت JSON داده ها را برای مرورگر بفرستد.

فریم ورک های بخش Front End

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

فریم ورک Angular

یک فریم ورک متن باز که توسط گوگل و جامعه متعدد توسعه دهندگان توسعه داده شده، مبتنی بر معماری MVC و MVVM طراحی شده است.

فریم ورک ReactJs

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

فریم ورک VueJs

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

زبان های برنامه نویسی سمت سرور

در بخش بک اند با هر زبان تحت وبی می توان خروجی Json را تولید کرد. از جمله زبان ها می توان به Java، PHP، Asp.Net، و حتی جاوا اسکریپت در سمت سرور اشاره کرد.