অদৃশ্য ফ্রন্টএন্ড: ছোট সিদ্ধান্ত যা একটি প্রোডাক্টকে বাঁচিয়ে দেয়
সেরা ফ্রন্টএন্ড কাজগুলো কখনোই ডেমোতে দেখা যায় না।
আমি যে কাজটিকে সবচেয়ে বেশি গুরুত্ব দিই তা হলো অদৃশ্য। কেউ এগুলোর স্ক্রিনশট নেয় না। কিন্তু এই কাজগুলো না থাকলে ব্যবহারকারীরা চলে যায়। তারা কেন চলে গেল তা আপনি হয়তো কখনোই জানতে পারবেন না।
এই কাজগুলো ঘটে ফাঁকফোকরে। এটি স্ক্রিনগুলোর মাঝে এবং আপনার ব্যাকএন্ড ও একজন প্রকৃত মানুষের মাঝে ঘটে।
বড় সমস্যা প্রতিরোধ করতে পারে এমন তিনটি ছোট ফিক্সের উদাহরণ নিচে দেওয়া হলো।
১. লগইন এরর (error) ঠিক করা
সমস্যা: লগইন সফল হয়েছে কি না তা দেখার জন্য ফ্রন্টএন্ড একটি 'status' ফিল্ড চেক করছিল। কিন্তু ব্যাকএন্ড একটি বৈধ টোকেন (token) পাঠানোর পাশাপাশি একটি 'null' স্ট্যাটাস পাঠিয়েছিল। ফলে ব্যবহারকারী সঠিকভাবে লগইন করা সত্ত্বেও একটি এরর দেখতে পাচ্ছিলেন।
সমাধান: ফ্রন্টএন্ড এখন স্ট্যাটাস স্ট্রিংয়ের পরিবর্তে টোকেনের উপস্থিতি চেক করে।
শিক্ষা: টেকনিক্যাল স্পেসিফিকেশনের একটি অস্পষ্ট ফিল্ড ব্যবহারকারীর জন্য একটি বন্ধ দরজায় পরিণত হতে পারে।
২. ভেরিফিকেশন লিঙ্ক হ্যান্ডেল করা
সমস্যা: একজন ব্যবহারকারী একটি নতুন ট্যাবে ভেরিফিকেশন লিঙ্কটি ওপেন করেন। কিন্তু মূল ট্যাবটি আটকে থাকে। সার্ভার পোলিং (polling) ব্যর্থ হয় কারণ প্রথম ট্যাবে কোনো লগইন টোকেন নেই।
সমাধান: ব্রাউজার স্টোরেজ ইভেন্ট (browser storage event) ব্যবহার করুন। যখন একটি ট্যাব লোকাল স্টোরেজ আপডেট করে, তখন অন্য প্রতিটি ট্যাব তাৎক্ষণিকভাবে সেই মেসেজটি পায়। ট্যাবগুলো সিঙ্ক (sync) করার এটি একটি ফ্রি এবং তাৎক্ষণিক উপায়।
৩. রিসেন্ড (Resend) বাটনের কুলডাউন (cooldown)
সমস্যা: "৩০ সেকেন্ডের মধ্যে ইমেল পুনরায় পাঠান" টাইমারটি কম্পোনেন্ট স্টেটে (component state) সংরক্ষিত ছিল। যদি ব্যবহারকারী পেজটি রিফ্রেশ করতেন, তবে টাইমারটি আবার শূন্যে ফিরে আসত। ব্যবহারকারীরা বারবার বাটনে ক্লিক (spam) করতেন, যা আপনার ইমেল খরচ বাড়িয়ে দিত।
সমাধান: কাউন্টডাউন সংরক্ষণ করবেন না। বরং ডেডলাইন টাইমস্ট্যাম্প (deadline timestamp) সংরক্ষণ করুন।
কুলডাউন কখন শেষ হবে সেই সঠিক সময়টি সংরক্ষণ করার মাধ্যমে, পেজ রিফ্রেশ করলেও টাইমারটি বজায় থাকে। পেজ রিলোড করে এটি রিসেট করা অসম্ভব।
কেন ফাউন্ডারদের এটি নিয়ে ভাবা উচিত:
• লগইন ফিক্স ব্যবহারকারীর অ্যাক্টিভেশন (activation) রক্ষা করে। • ট্যাব সিঙ্ক আপনার কনভার্সন রেট (conversion rate) রক্ষা করে। • কুলডাউন অপব্যবহার থেকে আপনার বাজেট রক্ষা করে।
দুর্দান্ত ইঞ্জিনিয়ারিং মানে শুধু স্ক্রিনকে দেখতে সুন্দর করা নয়। এটি হলো ফাঁকফোকরগুলোর দিকে গভীরভাবে নজর দেওয়া। এই ফিক্সগুলোর জন্য পঞ্চাশ লাইনেরও কম কোড লেগেছে। আসল ভ্যালু আসে সমস্যাটি খেয়াল করা এবং সঠিক জায়গায় সেটি সমাধান করার মাধ্যমে।
উৎস: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl