تخفیف پائیز سال ۱۳۹۹ تاپایان: پنجشنبه ۸ آبان ۱۳۹۹
بزن بریم فروشگاه
سایت های تک صفحه ای یا spa چیست

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

: ۱۳۹۵ بار
نوشته شده : 29 روز پیش
 برای مشاهده ی ویدیو این پست در IGTV آواسام اینجا کلیک کنید

 

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

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

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

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

معنی 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 یا تک صفحه ای میتوانید از آنها بهره بگیرید ولی سه مورد معرفی شده در این مقاله بهترین و محبوب ترین آنهاست.

 

نحوه ی ارتباط فرانت اند با بک اند در سایت های تک صفحه ای یا spa 

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

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

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

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

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

 

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

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

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

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

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

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

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

سخن آخر :‌

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

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

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

در نهایت پیشنهاد میکنیم ویدیو آموزشی مهندس نیکزاد در IGTV اینستاگرام رسمی آواسام را تماشا کنید.

 


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

مهندس عباس نیک زاد


برای نوشتن نظر وارد شوید ورود
یا به عنوان یک میهمان نظر خود را بنویسید :
    1. اگر سوال شما طولانی است و نیاز به پشتیبانی خوبی دارد در پروفایل خود تیکت باز کنید تیم پشتیبان ما پاسخ میدهد
    2. سعی کنید نظر خود را بیش از چند جمله بنویسید
    3. نظرات شامل توهین و تهمت و نامرتبط تائید نخواهد شد

علی / 29 روز پیش

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

برای دریافت جدید ترین آموزش ها ما را در فضای مجازی دنبال کنید
دوره ی آموزش پروژه محور ساخت کافه بازار دوره ی آموزش پروژه محور ساخت فروشگاه دیجیکالا آموزش لاراول دوره ی آموزش ویو جی اس
x
تبلیغات از درون سایت خودمون :)
X
دوره های پیشنهادی برای شما