مدت زیادی از زمان پیدایش نرم افزارهای تحت وب می گذره. برای ایجاد این گونه نرم افزارها دو رویکرد متفاوت وجود داره. رویکرد اول ایجاد نرم افزارهای تحت وب چند صفحه ای (MPA) هست که از ابتدا همراه وب بوده و رویکرد دوم , طراحی نرم افزار تحت وب به صورت تک صفحه ای (SPA) هست که بسیار هم مرسوم هست.

تقریبا تمام نرم افزارهای تحت دسکتاپ به سمت وب و یا موبایل مهاجرت کردن. زمانی که وب ایجاد شد , نرم افزارهای تحت وب چیزی جز متن و لینک های متفاوت نبود اما به مرور زمان , با اضافه شدن امکانات و تکنولوژی های گسترده , مفهوم “وب اپلیکیشن” یا همون نرم افزار تحت وب شکل گرفت.

در این مقاله به بیان دو رویکرد متفاوت در طراحی این نرم افزارها می پردازم.

Multi Page web Applications (MPA)

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

این گونه بود که در سال ۱۹۹۶ امکان استفاده از iframe اضافه شد تا بتوان در یک صفحه , مطلبی را به صورت غیرهمزمان نمایش داد و چندین سال بعد مفهوم Ajax شکل گرفت. این مفهوم یک مقدار صفحات وب را پیچیده تر می کرد اما تجربه کاربری بهتر و دلنشین تری را در اختیار کاربر قرار می داد.

Single Page web Applications (SPA)

چند سال گذشت تا رویکرد SPA , انقلابی را در طراحی ایجاد کرد. این رویکرد , ترکیبی از MPA و Ajax است. به این صورت که بدنه و هسته صفحه توسط سرور ایجاد و رابط کاربری (UI) داخلی آن و تمامی المان های درون آن توسط جاوا اسکریپت مرورگر , کامپایل می شود. فریمورک هایی مثل AngularJS و KnockoutJS به صورت (MVVM (Model-View-ViewModel صفحات را نمایش می دهند.

حال باید دید مزایا و معایب این دو رویکرد نسبت به هم چگونه است؟

مزایای استفاده از SPA

• سرعت بارگذاری بیشتر
• تجربه کاربری بهتر , به این دلیل که اطلاعات در پس زمینه بارگذاری می شوند
• جدا شدن مسیر توسعه دهندگان front-end و back-end از یکدیگر
• آسان تر شدن توسعه نرم افزار تحت موبایل. به این صورت که از کدهای نوشته شده در سمت سرور می توان دوباره استفاده کرد

معایب استفاده از SPA

• فریمورک های نسبتا سنگین که باید در مرورگر کاربر بارگذاری شوند
• سئو! به این دلیل که صفحات وب شما توسط مرورگر ساخته می شوند , خزنده های موتورهای جست و جو نسخه متفاوتی از صفحه را می بینند(نسبت به آن چه که کاربر می بیند)

شاید بتوان از هر دو رویکرد تحت یک رویکرد “Hybrid” استفاده کرد. یک نرم افزار MPA که بعضی از بخش های آن به صورت SPA پیاده سازی شده اند! این روش اشتباهی نیست , اما با توجه به شرایط متفاوت , این امکان وجود دارد که شما از هیچدام از مزایای SPA و یا حتی MPA بهره ای نبرید!!!

چرا که:

• صفحات با سرعت کمی بارگذاری خواهند شد , چرا که هم منتظر ساختن صفحه توسط سرور خواهیم بود و هم منتظر بارگذاری فریمورک بر روی مرورگر کاربر!
• توسعه پیچیده تر چرا که در اون حالت شما به دو فریمورک نیاز خواهید داشت. یک فریمورک MVVM برای سمت کاربر و یک فریمورک MVC برای سمت سرور!
• امکان استفاده دوباره کدهای سمت سرور رو نخواهید داشت!

پس بهترین کار اینه که یکی از این دو رویکرد رو با توجه به شرایط پروژه خودمون انتخاب کنیم…

شما معمولا از کدوم رویکرد استفاده می کنید؟