ال optimistic update من أحد ال techniques ال tricky لتحسين تجربة المستخدم

لنفترض أننا شغالين على منصة تواصل اجتماعي مشابهة لفيسبوك أو لينكدان ، و عندنا مشكلة بسيطة و هى إن زرار اللايك بياخد نصف ثانية (مثلا) عشان يبعت ريكويست لل api و الريكويست ينجح ، بالتالي يتم تغيير شكل و لون الزرار

المشكلة هنا إن بعض اليوزرز هيلاحظوا إن الموضوع بياخد وقت ملحوظ و بعد كل ضغطة لايك هيكون واقف منتظرها تغير شكل الزرار عشان يتأكد إن اللايك اتعمل ف يقدر يكمل scroll بعدها

و البعض الآخر من اليوزرز هيضغط على الزرار اكتر من مرة لأنه شايف إن مفيش اى تفاعل من ناحية الزرار ف ممكن يكون مهنج مثلا

احنا بقا بنقدر نحل المشاكل دى ب technique بسيطة جدا اسمها optimistic update أو التحديث المتفائل (أو المستبشر) ، و من اسمه نقدر نفهم أنه بيتفائل بإن ال api request هينجح ف بيغير من شكل و لون الزرار لحظيا منغير ما ينتظر ال response ، بالتالي بمجرد ما اليوزر يضغط على الزرار هيلاقى الزرار شكله اتغير ف هيحس إن الأداء عالي و التطبيق سريع ف هيكمل scroll و يشوف البوست اللى بعده

طيب هنا احنا كننا بنفترض إن ال request هينجح و هو دا اللى المفروض يحصل بنسبة أكبر من ٩٩٪ ، و لكن لازم نعمل حساب إن الريكويست ممكن يفشل برضو ، فى الحالة دى بنرجع شكل الزرار كما كان و ننبه اليوزر إن فى خطأ حدث أثناء الإعجاب بالمنشور ، بالتالي اليوزر ممكن يتأكد من اتصاله بالانترنت و يجرب تاني

ممكن تلاحظ ال technique دى مستخدمة فى تطبيقات كتير بتستخدمها بشكل يومي ، و هى أكيد مش حاجة خاصة ب زرار اللايك فقط ولا منصات التواصل و لكنها كانت مجرد أمثلة ، ممكن مثال آخر يكون عن زرار ال add to cart/wishlist فى موقع e-commerce مثلا

لو بتخزن داتا بشكل local عند المستخدم و فجأة حبيت تغير من طريقة تخزينها لازم تاخد بالك من النقطة دى

لنفترض انك بتحفظ todo items فى ال local storage ب key و ليكن مثلا اسمه tasks ، و حبيت فى يوم من الأيام تخليها items ، تفتكر المفروض تعمل ايه ؟

لو فتحت الكود بتاعك و غيرت tasks إلى items فقط يبقى انت ناوي على مشاكل مع اليوزرز ، لأن كل يوزر منهم عنده تاسكات متخزنة بالفعل تحت اسم tasks ف لما فجأة الكود يبقى بيتعامل على اساس key اسمه items ، يبقى انا كا يوزر هسيب شوية تاسكات على الموقع بليل و اجى تاني يوم الاقى الموقع اتحدث و بيقول ملكش تاسكات عندنا !

بالتالي الحل دا مش هينفع ، و نحمد ربنا انها جات على قد كدا لأنك لو غيرت اسم property جوا object متخزن فى ال local storage سواء بشكل مباشر أو بداخل array of objects ممكن يوصل بيك الحال إلى undefined تتعرض قدام اليوزر أو ايرور يعطل الكود

طيب هنتعامل مع الموقف دا ازاى ؟

هتحتاج تكتب كود إضافي يعمل التعديل بشكل تلقائي عند كل مستخدم يدخل الموقع ، يعنى مثلا هياخد الداتا من ال localStorage tasks و يروح يحطها فى ال items و بعدها يحذف ال tasks ، ف لما الكود يطلب ال items هيلاقيها بدون مشاكل

أو ياخد الداتا و يloop عليها عشان يغير اسم property بداخل ال objects مثلا ، و يرجعها لل local تاني

طيب أفرض حبيت أعمل تعديل تاني على شكل الداتا ؟

حاليا هيكون عندك يوزرز لسا عندهم الداتا بصورتها الأولى اللى هى tasks مثلا و يوزرز عندهم الداتا بصورتها التانية اللى هى items ، و مطلوب نوصل بيهم الاتنين لصورة تالتة خالص

هنا مش هينفع نفس الكود يمشى مع كل المستخدمين و يوصل بيهم لنفس النتيجة المطلوبة ، ف هتحتاج تخزن version بداخل ال localStorage عشان تحدد على أساسه إذا كان اليوزر دا عنده الداتا على الحالة الأولى ولا التانية ولا التالتة ، عشان تعرف أنت المفروض تrun اهنى فانكشن ، ولا متعملش حاجة خالص لأن الداتا موجودة ب اخر شكل مطلوب ليها بالفعل

٨٠٪ من النتيجة المرغوبة بيجى بواسطة ٢٠٪ من المجهود المبذول
https://www.linkedin.com/posts/ahmed0saber_ahmed0saber-activity-7241142376797224961-Rc_T?utm_source=share&utm_medium=member_android

كل عام وانتم بخير ، عام هجري مليء بالبركات إن شاء الله ❤️

التكبر ، الخجل ، التسرع ! صاحبهم إن أردت الفشل

لو عاوز تفشل بسرعة ف الخطوات سهلة جدا ، و هنتكلم عنها النهارده

أول حاجة محتاج تعملها هى التكبر ، لو لقيت حد بيشرح لك حاجة تجاهله لأنك أعلى منه شأنا ، و لو صلح لك معلومة جادل و حوّر و بلاش تعترف أنك كنت غلط ، أما بقا لو أختلف معاك فى الرأى فهو خلاص بقا عدوك ، لازم تكرهه جدا لأنه مختلف معاك حول عصير المانجا أحلى ولا الفراولة

تاني خطوة و هى الخجل ، لازم تكون خجول جدا لدرجة أنك لو قدامك حد بيشرح حاجة أوعى تسأل عن اللى أنت مش فاهمه ، لو فى شخص ممكن يساعدك بحاجة و انت عارف كدا بلاش تتواصل معاه ، يرضيك الناس دى متردش عليك او تقولك "لا" ؟

أما الخطوة التالتة و الأخيرة هى التسرع ، لما تيجى تتعلم حاجة شوف أقصر كورس ممكن و أنجز نفسك بسرعة مش لازم تطبق ممكن تسمع و خلاص و بعدها طبق اى مشروع بسرعة و سيبه ب أخطاءه مفيش وقت للتفسير و اتعلم باك اند و انت لسا مزنوق فى الفرونت اند عشان تلحق تشتغل full stack ، و لو جالك تاسك خلصه بسرعة مش لازم يكون سليم المهم شبه المطلوب وخلاص

تخلَّص من تلك الصفات قبل ما تخلص عليك ، لو لقيت نفسك بتعمل اى حاجة منهم حاول تبطلها لأنها معوقات قوية جدا تعوقك عن النجاح !

متصفح chrome من فترة طويلة شوية بقا بيوفر APIs ل جافاسكريبت تقدر من خلالها تعمل face detection فى المتصفح منغير ما تستخدم مكتبة ولا تعمل machine learning model بنفسك ، و من قريب بقا بيوفر APIs أكتر للرد على الأسئلة و الترجمة و تصحيح ال grammar و غيرهم

طيب هل دا معناه أنك لو بتبنى ويبسايت تقدر تعتمد على ال APIs دى بشكل أساسي ؟
- لا للأسف ، لأن مش كل المستخدمين عندهم أحدث إصدارات chrome ولا كلهم بيستخدموا chrome حتى ، ف هتلاقى ال feature شغالة عند يوزر لكن مش شغالة عند غيره

ممكن تلجأ أنك تعمل fallback لل feature دى على المتصفحات اللى مش بتدعم ال APIs بشكل افتراضي زى firefox و safari و opera و edge و غيرهم ، و تستخدم مكتبة أو machine learning model خاص بيك على المتصفحات دى ، لكن على chrome تستخدم المتاح ، دا ممكن يحسن شوية من تجربة المستخدمين على chrome

بس أدرس جوانب الموضوع كويس

لو تقدر تلزم جميع المستخدمين باستخدام إصدار معين من chrome ممكن تستخدم ال APIs دى بكل أريحية ، الموضوع دا ممكن يحصل - مثلا - لو بتبنى desktop application ب electron.js لأنها بتنزل chromium engine بداخل البروجيكت بتاعك و تستضيف البروجيكت عليه كما لو كان صفحة بس فى صورة تطبيق ديسكتوب

دا بيخلى تطبيقات الديسكتوب المصنوعة ب electron.js تقيلة شوية فى الأداء و الحجم - زى vs code حبيبنا و github desktop - بس سهل جدا تعمل تطبيق ديسكتوب بمعرفة بسيطة ل html & css & js منغير ما تعطى اى اعتبار لل browser compatibility لأن كدا كدا البروجيكت بتاعك بيتفتح من خلال chrome بإصدار معين

الشباب بتوع ال frontend ايدهم بتاكلهم ?
https://www.linkedin.com/posts/ahmed0saber_ahmed0saber-activity-7190625285103353856-rWFW?utm_source=share&utm_medium=member_android