امروز : پنجشنبه، 14 اسفند 99

برنامه های SPA یا تک صفحه ای

تعداد بازدید: 30

یک برنامه تک صفحه ای (SPA) یک رویکرد طراحی وب سایت است که در آن محتوای هر صفحه جدید از بارگذاری صفحات HTML جدید ارائه نمی شود بلکه از طریق توانایی جاوا اسکریپت برای دستکاری عناصر DOM در صفحه موجود ، به صورت پویا تولید می شود.

در معماری صفحات وب سنتی ، یک صفحه index.html ممکن است به سایر صفحات HTML در سرور که مرورگر از ابتدا بارگیری و نمایش می دهد ، پیوند دهد.

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

علاوه بر این ، HTML5 History HTML به ما امکان می دهد بدون تغییر مجدد صفحه ، URL صفحه را تغییر دهیم و به ما امکان ایجاد URL های جداگانه برای نمایش های مختلف را می دهد.

پس از ورود به SPA ، برنامه می تواند به صورت پویا محتوا را از طریق درخواست های AJAX یا شبکه های وب از سرور واکشی کند.

این به مرورگر اجازه می دهد هنگام درخواست سرور در پس زمینه ، صفحه فعلی را برای بازگرداندن محتوای اضافی یا "صفحات" جدید کاملاً باز نگه دارد.

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

در حقیقت ، پرس و جوهای سرور می توانند هر نوع داده را واکشی کنند ، که اغلب به صورت بارهای JSON ، رشته ها یا حتی عناصر HTML است که از قبل برای ارائه آماده شده اند.

مقایسه وب سایت های استاتیک در برابر SPA ها

برای ارائه مثالی از رویکرد SPA در عمل در مقایسه با یک رویکرد سنتی ، در پنجره سمت چپ یک iframe با رویکرد صفحه سنتی HTML وارد می کنیم و در سمت راست صفحه ای با همان محتوا ارائه می دهیم که به صورت پویا با بسته بندی ما ارائه می شود برنامه JavaScript با HTML و CSS برای ارائه عناصر صفحه مورد نیاز است.
محتوای جدید در سمت راست به محض کلیک شدن ارائه می شود ، در حالی که محتوای سمت چپ به واکشی HTML و بارگیری مجدد در مرورگر نیاز دارد.

عالی است ، نیازی به بارگیری مجدد صفحه نیست!

چه موقع از یک برنامه تک صفحه ای استفاده کنید و چه وقت نه؟

اول ، اگر دوست دارید یک تعامل غنی بین کاربر و برنامه خود داشته باشید ، SPA تقریباً یک ضرورت است.

برنامه هایی مانند Google Maps از این روش استفاده گسترده ای می کنند تا هنگام پیمایش از یک مکان به مکان دیگر ، تغییرات مشاهده در زمان واقعی را ایجاد کنند یا برای مشاهده عکس های یک مکان خاص ، روی نشانگرهای مکان کلیک کنید.

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

چه موقع از استفاده از SPA خودداری کنید؟

اگر محتوای شما کاملاً استاتیک باشد ، معرفی SPA باعث کاهش زمان بارگذاری برای کاربر می شود و قبل از مشاهده هرگونه محتوایی ، کاربر را مجبور به بارگیری و اجرای بار JavaScript می کند.

دوم ، می توان با نمایش ساده محتوای HTML استاتیک در صورت درخواست ، دسترسی کاربران با مرورگرهای قدیمی تر و یا کندتر شدن ارتباطات اینترنتی را بهبود بخشید.

سرانجام ، اگر رباتها قادر به مشاهده هر یک از عناوین یا مطالب نباشند ، عدم نمایش هرگونه محتوای HTML می تواند به رتبه بندی SEO آسیب برساند.

رویکرد ارائه سمت سرور که در بالا مورد بحث قرار گرفت می تواند وضعیت بارگذاری را بهبود بخشد و همچنین خوانایی اساسی را بدون فعال کردن JavaScript برای کاربران فراهم کند.

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

سید خلیل حسینی


  • برنامه نویس فول استک پی اچ پی و لاراول
  • پلاگین نویسی وردپرس