وب اپلیکیشن تک صفحه ای (SPA) چیست؟ + مزایا و معایب آن

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

 وب اپلیکیشن تک صفحه ای چیست؟

اپلیکیشن تک صفحه ای (Single-Page App) یا همان SPA به نرم افزاری گفته می شود که هنگام استفاده و کار با مرورگر به بارگذاری مجدد (Reloading) نیاز نخواهد داشت. برای مثال اپلیکیشن هایی که در طول روز از آنها استفاده می کنید نظیر فیسبوک، گوگل Map، جیمیل، توییتر، گوگل درایو و حتی گیت هاب را می توان به عنوان اپلیکیشن تک صفحه ای قلمداد کرد.

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

به طور کلی سه واژه اختصاری مربوط به اپلیکیشن در این مقاله مشاهده خواهید کرد که عبارتند از:

• SPA: اپلیکیشن های تک صفحه ای که در بالا راجع به آن صحبت شد.
• MPA: اپلیکیشن های چند صفحه ای (Multi-Pages App) ؛ اپلیکیشن های قدیمی که با کلیک کاربران بر روی لینک ها، صفحات جدید بارگذاری خواهند شد.
• PWA: وب اپلیکیشن های پیش رونده (Progressive Web App)؛ وبسایتی که بر اساس جاوا اسکریپت یا فریم ورک های دیگر آن ساخته می شود و فعالیتی شبیه به اپلیکیشن دارد. برای مثال می توان آن وبسایت را به عنوان یک اپلیکیشن به گوشی موبایل اضافه کرد.

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

سرعت بالا از مهم ترین مزیت های اپلیکیشن های تک صفحه ای به شمار می رود. در حقیقت بیشتر ریسورس های مورد نیاز یک اپلیکیشن تک صفحه ای (HTML + CSS + Scripts) در شروع کار لود شده و در حین کار به بارگذاری مجدد (ریلودینگ) نیاز نخواهند بود. تنها چیزی که در این میان تغییر می کند، تبادل دیتا بین اپلیکیشن و سرور خواهد بود.

به طور کلی، این اپلیکیشن به کوئری های کاربران با سرعت بالایی پاسخ می دهد و نیازی به تعامل مداوم بین کاربر-سرور (Client-Server) نخواهد داشت. تحقیقات کمپانی گوگل و شرکت آمازون نشان داده است که اگر زمان بارگیری صفحات اپلیکیشن های یک کمپانی بیشتر از 2 صدم ثانیه باشد به آن کسب و کار آسیب وارد خواهد شد یا اینکه هزینه های بیشتری روی دست صاحبان آن خواهد گذاشت.

برای مثال، کمپانی آمازون در تحقیقات خود به این نتیجه رسیده است که 1 ثانیه تاخیر در لودینگ صفحات حدود 1% از کل مبلغ فروش سالیانه (فروش سالانه 1.6 میلیارد دلار) خرج بر روی دست این کمپانی گذاشته است.

ساخت چنین اپلیکیشن هایی از دیدگاه یک برنامه نویس بسیار ساده و بهینه شده است. به گونه ای که برای رندر کردن صفحات بر روی سرور نیازی به کدنویسی نیست و حتی برای شروع فرآیند توسعه به سرور احتیاجی نخواهد بود. در حقیقت می توان کار را از یک فایل شروع کرد، علاوه بر این برنامه نویس برای طراحی وب اپلیکیشن یا اپلیکیشن های بومی موبایل می تواند دوباره از همان کدهای سمت سرور (Backend Server-Side) و API های کاربردی استفاده کند.

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

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

فرآیند کشینگ (Caching) نیز در این نوع اپلیکیشن ها بسیار کاربردی است به گونه ای که نرم افزار مربوطه فقط یک درخواست ارسال کرده و تمام داده های منتقل شده را ذخیره خواهد کرد و می توان از آنها در صورت نیاز استفاده کرد. این امر به ویژه در زمانی که ارتباط کاربر در وضعیت ضعیفی قرار دارد از اهمیت بالایی برخوردار خواهد بود چرا که کاربران در این شرایط نیز می توانند از اپلیکیشن استفاده کنند. برنامه نویسان می توانند به راحتی اپلیکیشن های تک صفحه ای را به وب اپلیکیشن های پیش رونده تبدیل کنند؛ به عبارت دیگر توسعه دهندگان می توانند Local Caching ارائه کرده و و قابلیت استفاده آفلاین را در اختیار کاربران قرار دهند.

معایب اپلیکیشن های تک صفحه ای

اپلیکیشن های SPA علیرغم تمام مزایایی که برای برنامه نویسان به ارمغان می آورند، معایبی نیز دارند که در ادامه آنها را مورد بررسی قرار خواهیم داد:

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

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

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

• نکته دیگری که باید در مورد توسعه یا استفاده از SPA به خاطر داشته باشید مقوله امنیت است. در حقیقت با توجه به تزریق اسکریپت از طریق درگاه (XSS) و این موضوع که صفحات جدیدی بارگذاری نخواهند شد، هکرها می توانند به وبسایت نفوذ کرده و اسکریپت های جدید را به به سمت کاربر (Client-Side) تزریق کنند. بنابراین باید پروتکل های امنیتی را در هنگام توسعه اپلیکیشن های تک صفحه ای رعایت کنید.

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

سئو و اپلیکیشن های تک صفحه ای

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

استفاده از SPA در صورتی که به بهینه سازی موتورهای جستجوگر نیاز ندارید، کار عاقلانه ای به نظر می رسد. برای مثال اگر دسترسی به نرم افزار فقط از بخش لاگین انجام شود می توان از اپلیکیشن های تک صفحه ای استفاده کرد. در طرف دیگر اگر صاحب یک وبلاگ هستید، آنگاه موتورهای جستجو برای ایندکس کردن وبسایت SPA شما با مشکل روبرو خواهند شد. این موضوع به خاطر این است که URL صفحات تغییر نمی کند؛ در حقیقت هرکدام از صفحات معمولاً آدرس URL مختص به خود را نخواهند داشت.

بنابراین اگر نمی خواهید درگیر مشکلات URL شوید باید از فریم ورکی استفاده کنید که از قابلیت رندرینگ سمت سرور (SSR) پشتیبانی کند. علاوه بر این شما نباید از ویندوزهای iFrame و URLهای استاتیک استفاده کنید، شما همچنین برای افزایش سرعت صفحات باید اسکریپت های درون آنها را بهینه سازی کنید.

صفحات اپلیکیشن SPA باید دارای HTML5 باشند تا خزنده های گوگل بتوانند به راحتی صفحات آن را مورد بررسی قرار دهند. شما همچنین باید به پیام های ارسال شده از طرف سرور نظیر ارور 404 و 200 توجه ویژه ای داشته باشید.

مزایای SPA برای کاربران

سرعت بارگذاری و امکان استفاده آفلاین مهم ترین مزیت SPA برای کاربران محسوب می شود. اپلیکیشن های تک صفحه ای یک تجربه کاربری خطی (Linear) را به کاربران ارائه می دهد، به این معنی که کاربر می تواند به راحتی مسیر مناسب برای محتوای مورد نظر را در وبسایت پیدا کند. برای مثال اپلیکیشن SPA کمپانی Saucony یک نقطه آغاز، میانه و انتهای مشخص دارد و توسعه دهندگان با استفاده از اصول طراحی UI/UX، پارالکس اسکرولینگ و ترنزیشن (Parallax Scrolling and Transition) نقشه سفر مشتری را دلپذیر خواهند کرد.

برنامه های تک صفحه ای در دستگاه های موبایل نیز عملکرد مطلوبی دارند؛ در حقیقت کاربران اغلب اوقات به اسکرول کردن صفحات برنامه (نظیر Wall Facebook) نیاز دارند به گونه ای که نیازی به کلیک کردن بر روی لینک ها را نخواهند داشت.

مزایای SPA برای کسب و کار

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

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