آشنایی با SPA و MPA و تفاوت های آن ها

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

اگر شما هم می خواهید برنامه ی تحت وب خود را راه اندازی کنید، حتما از اطرافیان شنیده اید که دو الگوی طراحی کلی برای برنامه های تحت وب وجود دارند:

• SPA یا single-page application (برنامه های تک صفحه ای)
• MPA یا multi-page application (برنامه های چند صفحه ای)

شما باید برای طراحی برنامه های وب خود نکته ی مهمی را در نظر داشته باشید؛ محتوایی که ارائه می کنید چیست؟ محتوای وب سایت شما مهم ترین بخش وب سایت شما است و در واقع محتواست که تعیین می کند کاربری روی سایت شما کلیک کند یا خیر. حالا با مشخص شدن محتوای خود می توانید به بررسی SPA و MPA بپردازید

Single-Page Application

برنامه های SPA یا تک صفحه ای برنامه های تحت وبی هستند که در مرورگر کار می کنند اما نیازی به refresh شدن و بارگذاری دوباره ی صفحات ندارند. در این نوع برنامه ها محتوای سایت بدون refresh شدن صفحه تغییر کرده و بارگذاری می شود. مثال های معروف این نوع برنامه های Gmail و Google Maps و Facebook و GitHub و Instagram (در صورتی که با مرورگر موبایل وارد آن شوید نه برنامه ی اندرویدی اش). SPA ها معمولا سعی می کنند تا با هدف گرفتن UX بهترین و طبیعی ترین تجربه ی کاربری را برای کاربر فراهم کنند به طوری که صفحات reload و یا wait time نداشته باشند. این برنامه ها تمام محتوای سایت شما را با استفاده از JavaScript  بارگذاری می کنند بنابراین شدیدا به JavaScript  وابسته هستند.

این دست از برنامه های markup و داده ها را به طور جداگانه دریافت می کنند و در مرورگر به نمایش در می آورند. این کار به لطف فریم ورک های پیشرفته ی جاوا اسکریپت مانند AngularJS و Ember.js و Vue.js و ... امکان پذیر شده است.

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

• SPA ها بسیار سریع هستند؛ از آن جا که منابع برنامه (HTML و CSS و Script ها) تنها یک بار بارگذاری می شوند، داده های اصلی تنها چیزی هستند که بین سرور و کاربر رد و بدل می شود.
• توسعه ی آن ها بسیار راحت است چرا که برای render شدن صفحات نیازی به نوشتن کد در سمت سرور ندارید بلکه در اکثر اوقات می توانید با استفاده از file://URI توسعه را شروع کنید و نیازی به هیچ سروری ندارید.
• debug کردن این برنامه ها در Chrome بسیار ساده است چرا که می توانید فعالیت شبکه را به راحتی زیر نظر بگیرید و عناصر و داده های بستر این شبکه را بررسی کنید.
• ساخت برنامه های موبایلی آسان تر می شود چرا که توسعه دهندگان می توانند از همان کدهای وب سایت برای ساخت برنامه های موبایلی استفاده کند.
• SPA ها می توانند به راحتی داده ها را cache کنند؛ برنامه های SPA تنها یک درخواست ارسال می کنند، داده ها را ذخیره می کنند و در آخر می توانند از همین داده ها حتی به صورت آفلاین هم استفاده کنند.

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

• بهینه سازی SEO برای برنامه های SPA سخت است چرا که داده هایش بر اساس درخواست های AJAX بارگذاری می شوند. البته از سال 2017 به بعد این مسئله بسیار راحت تر شده است. یکی از راه های ساده ی آن render کردن صفحه (ساختن صفحه) در سمت سرور به جای مرورگر کاربر است؛ این نوع از rendering به نام  isomorphic rendering یا Server Side Rendering شناخته می شود.
• دانلود کردن صفحه کمی کُندتر است چرا که برای دانلود صفحه، فریم ورک های سنگین سمت کاربر نیز باید بارگذاری شوند.
• وابستگی شدید به جاوا اسکریپت؛ اگر کاربران جاوا اسکریپت مرورگرشان را غیرفعال کنند نمی توانند از سایت شما استفاده کنند. البته این مشکل را می توان تا حد زیادی با استفاده از Server Side Rendering حل کرد اما کارتان سخت خواهد شد. از آن جا که می توان صفحه را در سرور render و cache کرد نیازی به جاوا اسکریپت (حداقل در بارگذاری صفحات) ندارید.
• SPA در مقایسه با MPA امنیت کمتری دارد چرا که بیشتر در معرض حملات XSS قرار دارد و هکر ها می توانند اسکریپت های سمت کاربر را به سایت تزریق کنند.
• Memory leak در جاوا اسکریپت می تواند سیستم های بسیار قوی را نیز از پا در آورد.

ممکن است شنیده باشید که دکمه های back و forward در این گونه برنامه ها کار نمی کنند؛ این مشکل مربوط به گذشته است و در حال حاضر با استفاده از history API این دکمه ها به راحتی کار می کنند.

Multi-Page Application

برنامه های چند صفحه ای (MPA) در واقع همان وب سایت های رایج دنیای وب هستند که برای ایجاد تغییرات در صفحه نیاز به بارگذاری دوباره و refresh کردن صفحه دارند. این دست از برنامه ها معمولا بسیار بزرگ تر از SPA ها هستند و چندین لایه ی UI دارند. خوشبختانه در سال های اخیر ظهور تکنولوژی AJAX باعث شده است که بسیاری از تغییرات صفحه بدون refresh شدن و بارگذاری مجدد ممکن شود و نیازی به نگرانی در این مورد نیست.

مزایای استفاده از MPA ها:

• معمولا استفاده از آن ها برای کاربران راحت تر است چرا که واضح تر هستند؛ منوهای مختصر و مفید و صفحات جدا شده و مشخص از ویژگی های اصلی این برنامه ها هستند.
• بهینه سازی SEO در این برنامه ها بسیار راحت تر از SPA است. از آن جایی که می توان هر صفحه از این برنامه ها را به یک keyword اختصاص داد، شانس اینکه رتبه ی شما در keyword خاصی افزایش پیدا کند بسیار بیشتر از SPA ها است.

معایب استفاده از MPA ها:

• توسعه ی front-end و back-end به شدت به هم نزدیک و وابسته هستند. این مسئله کار تیمی بین توسعه دهندگان front-end و back-end را سخت تر می کند.
• توسعه ی این برنامه ها کمی پیچیده تر است؛ توسعه دهندگان باید هم برای front-end و هم برای back-end از فریم ورک های خاص استفاده کنند (البته در صورت دلخواه) بنابراین توسعه ی این برنامه ها زمان بیشتری نیز می برد.

در نهایت SPA یا MPA؟

جواب این سوال به شما بستگی دارد؛ اگر می دانید محتوای و وب سایت شما به دسته بندی های متعدد نیاز دارد (مانند فروشگاه آنلاین یا وب سایت های دانلود نرم افزار و ...) از MPA ها استفاده کنید اما اگر مطمئن هستید که برنامه ی شما برای SPA ها مناسب است می توانید به سراغ SPA ها بروید.

اگر برنامه ی شما بین این دو مورد قرار دارد می توانید از hybrid application ها استفاده کنید؛ این برنامه ها سعی می کنند SPA و MPA را ترکیب کرده تا مزایای هر دو را در یک جا جمع کنند و در عین حال معایب شان را نیز دور بریزند. در واقع این دست از برنامه ها یک SPA هستند که URL anchor و synthetic page دارند و سعی می کنند تمرکزشان را روی عملکرد قرار دهند.