همه چیز درباره «برنامه تک صفحه‌ای»

تاریخ انتشار: ۳ خرداد ۱۳۹۳

بعضی سایت‌ها با استفاده بیش از حد Ajax در بخش‌های خود به جای به ارمغان آوردن راحتی برای کاربران مانع آن می‌شدند. استفاده از این تکنولوژی بسیار راحت است و روش‌های متعددی نیز دارد. یکی از روش‌های استفاده از Ajax برای بارگذاری محتوا در سایت بدون بارگذاری مجدد صفحه این بود که یک محتوا را از سمت سرور گرفته و آن را در محتوا سایت خود بارگذاری کنیم به طور مثال می‌خواهیم جدولی شامل لیست اسامی افراد داشته باشیم این جدول و تمام تگ‌های مرتبط با table را سمت سرور ایجاد کرده و سپس با اولین درخواست آن محتوا را کامل در اختیار گرفته و آن را در صفحه قرار می‌دهیم. بزرگترین مشکل این حالت این بود که به فرض یک برنامه چند لایه‌ای ساده داریم و لایه Presentation ما همیشه به لایه Business وابسته است به طور مثال اگر بخواهیم طراحی را عوض کرده و در طراحی جدید بخش لیست کاربران به جای جدول از لیست استفاده کنیم چون جدول از سوی یک بخش از لایه Business ایجاد می‌شود مجبوریم تغییراتی در کد اساسی ایجاد نماییم. روش دیگر استفاده از یک ساختار منسجم برای داده‌ها بود به طور مثال XML یا JSON که این ساختار به ما کمک می‌کرد که داده خروجی از سرور همیشه یک حالت مشخص را داشته باشد تا ما زمانی که قصد ایجاد تغییری در لایه طراحی خود داشته باشیم دیگر به مشکل تغییر در کدهای پایه نخوریم. داده‌های خروجی حال با هر فرمتی توسط جاوا اسکریپت پردازش و محتوا HTML مورد نظر به صورت داینامیک ایجاد شده و همان لحظه در محتوا سایت قرار می‌گیرد. بزرگترین مشکل این حالت عدم وجود یک ساختار منجسم برای چگونگی نحوه پردازش داده‌های خام سمت سرور بود که در توسعه‌های بعدی کمی کار را مشکل می‌کرد.

 در سال ۲۰۰۳ درباره شکل گیری برنامه‌های تک صفحه‌ای بحث‌هایی انجام شد تا در سال ۲۰۰۵, Steve Yen تعریفی مشخص از برنامه تک صفحه‌ای یا همان Single Page Application کرد. اگر بخواهیم SPA را خیلی ساده تشریح کنیم باید بگوییم فرض کنید که تمام عملیات در سایت شما در یک صفحه انجام شده و از کوچکترین وظیفه تا بزرگترین با استفاده از Ajax انجام شده و کاربر به هیچ وجه شاهد بارگذاری مجدد صفحه نخواهد بود. اما بیاییم یک تعریف بهتر از این مفهوم انجام دهیم:

برنامه تک صفحه‌ای که آن را به اختصار از Single Page Application نیز SPA می‌خوانند به برنامه‌های تحت وب و یا وبگاه‌هایی گفته می‌شود که تنها دارای یک صفحه هستند. به واقع در این روش تمامی کدهای مورد نیاز (سمت کاربر) در یک صفحه نوشته می‌شود. در این برنامه‌ها دیگر نیازی به بارگذاری مجدد برای انجام برخی امور نیست و کدهای مورد نیاز یا در بارگذاری اولیه و یا در زمان نیاز با استفاده از ای جکس بارگذاری می‌شوند.


ویکی پدیا

با روی کار آمدن مفهوم SPA کتابخانه‌هایی به وجود آمدند که در عین امکانات فوق‌العاده به ما قابلیت پیاده‌سازی هر چه راحت‌تر SPA را می‌دادند. این کتابخانه در پیاده‌سازی انواع معماری‌ها در لایه JS نظیر MVC,MVVM,MVP کمک می‌کنند. یکی از مزایا استفاده از این کتابخانه‌ها ساختار بخشیدن به لایه جاوا اسکریپت و راحت‌تر ساختن مسیر توسعه بوده است. برای پیاده‌سازی SPA و معماری بخشیدن به لایه JS کتابخانه‌های متعددی به وجود آمدند که معروف‌ترین آن‌ها BackboneJS,AngularJS,EmberJS است. این کتابخانه‌ها را می‌توان RESTful JSON interface نیز نامید که از API موجود استفاده می‌کند. فارغ از خود کتابخانه‌ها ساختاری که ما برای پیاده‌سازی کامل SPA به آن نیاز داریم این است که تمام عملیات بدون بارگذاری مجدد صفحه انجام گردد یعنی حتی عملیات‌های حذف، افرودن، ویرایش و… برای انجام این عملیات‌ها لازم است تا داده‌ها از http methods هایی غیر از GET استفاده کنند. یعنی همان UPDATE,POST و …

داده‌های تزریقی به این فریم‌ورک‌ها JSON بوده و از ویژگی آن‌ها استفاده از انواع http methods ها برای تبادل اطلاعات استفاده می‌شود. ساختار عموما در حالت Ajax و از طریق یک آدرس اطلاعات تبادل می‌شود.

RESTful گزینه‌ای است که تمامی ویژگی‌ها اعم از http methods ها٬ تبادل داده بر پایه آدرس و تبادل داده‌ها با فرمت JSON  را مهیا می‌سازد. درباره مفهوم REST به صورت کامل در پست آینده صحبت خواهیم کرد.

نکته‌ای که در SPA بسیار مهم است این است که ما باید در نظر داشته باشیم تمام عملیات سمت کلاینک بدون بارگذاری مجدد صفحه انجام گردد بنابر این ما نیازمند یک طراحی دو طرفه هم سمت کلاینت و هم سمت سرور هستیم.

در صورت علاقه‌مندی به مسائل پیرامون طراحی رابط کاربری و اصول تجربه کاربری به بلاگ تاتس از برنده مراجعه نمایید.

احمد کریم‌پور، برنامه‌نویس و توسعه‌دهنده نرم‌افزار

درباره این مطلب دیدگاهی بنویسید...

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *