Pagelyze তৈরির মাধ্যমে React সম্পর্কে আমি যা শিখলাম

Pagelyze তৈরি করা আমার React দেখার দৃষ্টিভঙ্গি বদলে দিয়েছে। আমি তাত্ত্বিক বিষয় দেখা বন্ধ করে প্রোডাক্ট আর্কিটেকচারের দিকে নজর দিতে শুরু করেছি।

Pagelyze হলো একটি ওয়েবসাইট অডিট টুল। এটি কোনো ছোটখাটো প্র্যাকটিস অ্যাপ নয়। এটি অডিট রিপোর্ট, স্কোরিং লজিক এবং ড্যাশবোর্ড পরিচালনা করে। এই কারণে, আমাকে একটি প্রশ্নের উত্তর দিতে হয়েছিল:

প্রোডাক্ট যত বড় হবে, এই কোড কি পরিষ্কার (clean) থাকবে?

useState বা useEffect-এর মতো Hooks গুরুত্বপূর্ণ। কিন্তু এগুলোই সব নয়। আপনি আধুনিক সিনট্যাক্স ব্যবহার করেও এমন একটি বিশৃঙ্খল কোড তৈরি করতে পারেন যা রক্ষণাবেক্ষণ করা কঠিন। সমস্যাটি সাধারণত হয় 'Responsibility' বা দায়িত্ব নিয়ে।

একটি খারাপ সেটআপে, ডেটা লোড করা থেকে শুরু করে ফলাফল দেখানো পর্যন্ত সবকিছু একটি ফাইলই সামলায়। স্কেল করার সময় এটি ব্যর্থ হয়।

একটি উন্নত উপায় হলো উদ্দেশ্য অনুযায়ী কম্পোনেন্টগুলোকে ভাগ করা:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

প্রতিটি অংশের একটি নির্দিষ্ট কাজ আছে। আপনি আপনার ডেটা লজিক নষ্ট না করেই একটি কার্ডের ডিজাইন পরিবর্তন করতে পারেন।

Redux নাকি Context ব্যবহার করবেন—এই প্রশ্ন করা বন্ধ করুন। বরং প্রশ্ন করুন কার স্টেট (state) প্রয়োজন।

  • Local UI state: ট্যাব এবং মোডাল
  • Form state: URL এবং ভ্যালিডেশন
  • Server state: রিপোর্ট এবং স্ক্যান
  • Global state: ইউজার প্রোফাইল এবং পারমিশন

Custom hooks-এর কাজ হওয়া উচিত বিহেভিয়ার (behavior) প্রকাশ করা। এগুলো কেবল বিশৃঙ্খল কোডকে অন্য একটি ফাইলে সরিয়ে নেওয়ার জন্য হওয়া উচিত নয়। একটি ভালো হুক ডেটা ফেচ (fetch) করে যাতে পেজ কম্পোনেন্টটি কেবল স্ক্রিনটি সমন্বয় (coordinate) করতে পারে।

আপনার ফোল্ডারগুলোকে ফিচার অনুযায়ী সাজান:

  • features/audit-report/
  • features/lead-rescue/
  • features/dashboard/

Routing কেবল URL-এর মধ্যেই সীমাবদ্ধ নয়। এটি হলো ইউজারের যাত্রা (user journey)। একজন ইউজার একটি ল্যান্ডিং পেজ থেকে ফ্রি অডিটে যান, তারপর একটি রিপোর্টে এবং সবশেষে একটি সার্ভিস ইনকোয়ারিতে পৌঁছান। ভালো রাউটিং তাদের পরবর্তী ধাপে পরিচালিত করে।

স্পষ্টতার সাথে তৈরি করুন। বাধার জায়গা (bottleneck) খুঁজে বের করুন। সেই নির্দিষ্ট অংশটি ঠিক করুন।

React-এর বেস্ট প্র্যাকটিসগুলো মূলত সিদ্ধান্তের বিষয়। একটি কম্পোনেন্ট কী নিয়ন্ত্রণ করবে তা আপনি ঠিক করেন। স্টেট কোথায় থাকবে তাও আপনি ঠিক করেন। একটি রুট ইউজারকে সাহায্য করছে কি না, তাও আপনি ঠিক করেন।

Pagelyze হলো আমার পরীক্ষা। আমি পরীক্ষা করছি না যে আমি একটি স্ক্রিন তৈরি করতে পারি কি না। আমি পরীক্ষা করছি যে প্রোডাক্ট বড় হওয়ার সাথে সাথে আমি এটিকে কতটা পরিষ্কার রাখতে পারি।

Source: https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb