سایت های تک صفحه ای یا spa چیست

سایت های تک صفحه ای یا spa چیست

بروزرسانی : 5 ماه پیش

سایت های تک صفحه ای یا spa چیست

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

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

 

سایت تک صفحه ای یا single page application چیست ؟‌

 

معنی spa اپلیکیشن تک صفحه ای هست که برگرفته از سه کلمه ی single page application است.

سایت های spa به این شکل است که تمام عناصر HTML یکبار فراخوانی میشود و سپس توسط تکنولوژی Ajax تغییرات با سرور تبادل میشود و همین علت باعث میشود هیچ فراخوانی کلی در مرورگر کاربر اتفاق نیوفتد و کاربر فکر میکند که در حال کار با یک اپلیکیشن نصب شده در سیستم عامل خود است.

 

اگر حوصله یا وقت کافی برای خواندن مقاله بصورت متنی را ندارید میتوانید از ویدیو زیر استفاده کنید : 

 

فریمورک ها و ابزارها برای ساخت سایت SPA

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

سایت تک صفحه ای یا single page application با vue.js یا react.js یا angular.js

 

ابزار ها و فریمورک هایی که در زیر معرفی شده است برای ساخت سایت های spa یا تک صفحه به کار برده میشود : 

  1. vue.js
  2. react.js
  3. angular.js

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

مثال هایی را در زیر آورده ایم برای هر کدام از ابزارهای بالا تا بصورت واقعی تست کنید : 

سایت کافه بازار = vue.js

اسنپ مارکت = react.js

نسخه ی وب تلگرام = angular.js

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

 

ارتباط بین front-end با back-end در سایت SPA

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

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

سایت تک صفحه ای با استفاده از api و json

 

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

این شکل استاندارد پیاده سازی سایت های تک صفحه ای یا spa هست اما شما میتوانید بدون پیاده سازی هرگونه وب سرویس یا api هم ارتباط را انجام دهید ولی شیوه ی غیرحرفه ای تر میباشد.

 

دام یا DOM چیست ؟

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

عبارت DOM مخفف سه کلمه ی Document Object Model هست و هنگام لود شدن یک سایت توسط مرورگر ساخته میشود و در حقیقت تمامی تگ های HTML موجود در صفحه را بصورت درخت وار دسته بندی میکند.

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

فرض کنید یک صفحه ی html بارگزاری شده است و هم اکنون در صفحه ی جاری بدون اینکه صفحه دوباره بارگزاری شود یا هر گونه درخواست و ارسالی به سمت سرور انجام بگیرد ، یک قسمتی را تغییر دهید. این تغییر میتواند چیزهایی مثل تغییر رنگ ، تغییر متن یا هر چیز دیگری باشد که این کار توسط زبان جاوااسکریپت و با استفاده از DOM انجام میگیرد.

برای درک بهتر ساختار DOM به تصویر زیر دقت کنید : 

DOM چیست و چه کاربردی دارد
 

سخن آخر :‌

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

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

سایت های بزرگ و همچنین استارتاپ های بسیاری به سمت طراحی spa حرکت کرده اند و اگر وب اپلیکیشن شما از ابتدا برمبنای spa باشد نتیجه ی بهتری را در برخواهد داشت.

 

لینک کوتاه این مقاله : https://avasam.ir/post/192
این سیستم برپایه ی علاقه مندی شما یک دوره ی مناسب به شما پیشنهاد میدهد
مرا بسوی بهترین دوره ی آموزشی که برای من مناسب است هدایت کن 🤖

دوره های آموزشی مرتبط با این مقاله :

برای استفاده ی دیگران و حمایت از ما در جامعه های زیر به اشتراک بگذارید

.:: نظرهای کاربران ::.
علی / 3 سال پیش

ویدیو و مقاله ی بسیار عالی برای طراحی سایت های تک صفحه ای بود من با vuejs دارم کار میکنم مرسی

دوره ی آموزش پروژه محور ساخت کافه بازار دوره ی آموزش پروژه محور ساخت فروشگاه دیجیکالا آموزش لاراول دوره ی آموزش ویو جی اس