در این مقاله سعی دارم مدیریت وضعیت (state management) در سمت کلاینت رو شرح بدم ولی در ابتدا چند نکته رو باید ذکر کنم که
خب تصمیم دارم با یک مثال مقدمه این مقاله رو شروع کنم.
فرض کنید پکیج شوفاژ دیواری شما به مشکل خورده و مثلا ازش آب چکه میکنه، قاعدتا شما برنامه نویسید و مثل من بلد نیستید تعمیرش کنید و زنگ میزنید تعمیر کار بیاد و مشکل رو حل کنه، تعمیر کار محترم وقتی میاد جعبه ابزار بزرگی همراهش هست، یه بررسی میکنه در ادامه آچار مناسب رو از میون انبوهی از لوازم و اچارهای متنوع درون جعبه ابزارش انتخاب و شروع به کار میکنه ...
دوستان من، مدیریت وضعیت (state management) فقط و فقط 1 ابزار نیست ، معمولا همه اولین چیزی که میگن Reduxهستش
کمی دیدمون رو وسیع تر کنیم
کمی با دقت بیشتر تمرکز و فکر کنیم
جعبه ابزاری که در اختیار برنامه نویس های Front-End وجود داره ابزار های متنوع و زیادی برای مدیریت کردن وضعیت کاربران در اختیار برنامه نویس قرار میده و خیلی مهمه که با آگاهی ابزار مناسب برای هدف و کار مشخصی انتخاب بشه.
خب این جعبه ابزار بزرگ و متنوع از ابزراهای مختلف هستند ، من اون هارو به 4 بخش تقسیم بندی کردم که به ترتیب زیر هستند والبته هر کدوم شامل موارد متعددی هستند.
1) URL
2) Browser
3) Client Application
4) Server Application
فکر کنم متوجه شدید کلیت حرف من چی هست بریم در ادامه کمی بیشتر بشکافم مطلب رو براتون
1) مدیریت وضعیت در آدرس سایت (URL)
دوستان وضعیت کاربر در سایت ما میتونه در ادرس (url) نگداری بشه.
مثال وقتی ما یه لپ تاپ خیلی خفن توی دیجی کالا میبنیم و لینکش رو برای دوستمون ارسال میکنیم و میگیم برو ببین چی پیدا کردم، دقیقا ما داریم وضعیت خودمون رو برای دوستمون ارسال میکنیم در قالب لینک محصول
دوستمون وقتی روی لینک کلیک میکنه دقیقا همون صفحه ای که ما بودیم براش باز میشه و همون محصول که مد نظرمون بود رو میبینه و دقیقا در وضعیتی که ما قرار داشتیم قرار میگیره
خب برای همین مدیریت وضعیت در آدرس (URL) ما گزینه های زیادی داریم
یا میتونیم وضعیت رو در query params قرار بدیم
و یا در path params
و یا ترکیبی از هر دو.
کی و کجا استفاده کنیم
وقتی میخوایم وضعیت کاربر مستقل از دستگاه (کامپیوتر، موبایل و...) و مستقل از اکانتش باشه که بتونه یا اون رو بین دستگاه دیگه برا خودش به اشتراک بزاره و یا برای شخصی دیگه به اشتراک بزاره تا همون تجربه کاربری خودش رو در جای دیگه یا کسی دیگه تجربه کنه.
2) مدیریت وضعیت در مرورگر کاربر (Browser)
گاهی لازم هست وضعیت کاربر در مرورگر دستگاه کاربر ذخیره بشه تا در مراجعات بعدی با همون وضعیت اخرش سایت براش باز بشه
بهترین مثالی که میتونم بزنم هیمن سایت ویرگول هستش، شما وقتی لاگین میکنید به حساب کاربریتون اگه خارج بشید از سایت ویرگول یا حتی ببندید مرورگر رو در مراجعه بعدیتون لازم نیست دوباره از اول نام کاربری و پسورد رو وارد کنید و اصطلاحا لاگین کنید اطلاعات احراز هویت شما در مروگر شما ذخیره شده و هروقت لارم باشه ویرگول از همونا استفاده میکنه.
خب قطعا ما در مروگر چند ابزار برای نگهداری وضعیت داریم که عبارتند از
1. cookie
2. local storage
3. session storage
که بسته به نیازمون از یکی و یا همه موارد بالا استفاده میکنیم(دیگه فکر کنم لازم نباشه بیام و موارد بالا رو دونه دونه توضیح بدم و تفاوت هاشون رو بگم )
کی و کجا استفاده کنیم
همونطور که اول این بخش گفتم هر زمان که لازم باشه وضعیت کاربرمون با بارگزاری مجدد صفحه و یا بستن مرورگر و یا خارج شدن از دامین سایتمون از بین نره باید وضعیت کاربر رو، روی مرورگر کاربر ذخیره کنیم تا در مراجعات بعدیش بتونیم اخرین وضعیتش رو بازیابی کنیم.
3) مدیریت وضعیت در سطح اپلیکیشن سمت کاربر (Client Application)
گاهی پیش میاد کاربر در حین انجام عملیاتی در سایت یا شاید بهتر باشه بگیم web application
عملیاتی انجام میده و منجر به ایجاد وضعیتی میشه ولی این وضعیت دارای درجه اهمیت کمی هستش و نه قراره طی مراجعات بعدیش براش بازیابی بشه و یا مثلا برای کسی یا دستگاه دیگه ای ارسال بشه و فقط و فقط در اون زمان کار کردن با سایت داری اهمیت هستش برای کاربر، مثل باز یا بسته بودن سایدبار، باز یا بسته بودن باکس چت و یا محساباتی که از گام قبلی یک فرایند چند مرحله ای بدست امده و .....
در این حالت نه نگهداری وضعیت در ادرس و نه در مرورگر کار صحیحی نیست و بهترین گزینه نگهداری وضعیت در سطح اپلیکیشن بهترین انتخاب برای یک توسعه دهنده هستش، که برای این منظور متناسب با فریم ورک و زبان توسعه ابزار ها و انتخاب های متفاوتی برای توسعه دهنده ها وجود داره.
همونطور که در اول مقاله گفتم من بخاطر تسلط خودم بر فریم ورک انگولار مثالم رو با این فریم ورک میزنم.
در انگولار میشه از
define a variable in a class (تعریف یک متغییر در یک کلاس)
input/output
subjects (rxjs)
ngrx
...
یا مثلا در کتابخونه ری اکت از props , redux و ... استفاده میشه .
کی و کجا استفاده کنیم
هر زمان که از بین رفتن وضعیت کاربر دارای اهمیتی نباشه .
4) مدیریت وضعیت در سمت سرور (Server Application)
گاهی لازمه پا رو فراتر بگذاریم و وضعیت کاربر رو در سمت سرور و در دیتابیس ذخیره کنیم به عبارتی وضعیت کاربر برای حساب کاربریش ذخیره بشه، بهترین مثالی که میتونم بزنم همین سایت ویرگول هستش در این زمان که من دارم این مقاله رو مینویسم پیوسته در حال ذخیره کردن اخرین نوشته من هستش ، بله درسته محتوایی که من دارم تولید میکنم هم یه نوع وضعیت میتونه باشه و شاید من نتونم در زمانی مشخص نوشتنش رو تمام کنم و بخوام ادامش رو در یک سیستم و یا در گوشیم انجام بدم پس دیگه روش های قبلی که بررسی کردیم به درد نمیخوره و باید وضعیت من در سرور و دیتابیس ویرگول نگهداری بشه تا در مراجعه بعدیم که شاید یک دستگاه دیگه باشه بتونم ادامه مطلب قبلیم رو کامل کنم.
همممم زیاد مثال بالا به دلم ننشست ولی پاکش نکردم زیادم بد نبود، مثال بهتری که میتونم بزنم انتخاب قالب یا تم روز یا شب در یک سایت هستش شما وقتی مثلا تم شب یا تیره رو انتخاب میکنید دیگه قرار نیست در هر دستگاه و با هر مراجعه بعدی دوباره برید توی بخش تنظیمات حساب کاربریتون در اون سایت و تم مورد علاقتون رو انتخاب کنید.
در این روش توسعه دهنده Front-End تنها کاری که باید بکنه این هست که بر اساس نیاز بیزینس و پروژه دیتا یا وضعیت جمع اوری شده رو به سرور منقل کنه.
کلام آخر
از تمام این موارد برای حل اکثریت نیازهامون میشه استفاده کرد ولی هر ابزاری بهر کاری ساختند و استفاده نابجا شاید در کوتاه مدت مشکلات خودش رو در پروژه عیان نکنه ولی شک نکنید انتخاب اشتباه و به کاری گیری اشتباه یک ابزار در ادامه گریبان پروژه رو خواهد گرفت.
خب دوستان به انتهای این مطلب رسیدیم
امیدوارم براتون مفید بوده باشه
لطفا اگه نظری برای تکمیل تر شدن و بهبود این مقاله دارید با ایمیل و یا در لینکدین در ارتباط باشید باهام.
