Puppeteer-কে TypeScript-এ মাইগ্রেট করা

Jack Franklin

DevTools টিমের আমরা TypeScript-এর খুব বড় ভক্ত—এতটাই যে DevTools-এর নতুন কোড এতেই লেখা হচ্ছে এবং আমরা TypeScript-এর মাধ্যমে টাইপ-চেক করার জন্য পুরো কোডবেসকে মাইগ্রেট করার প্রসেসের মধ্যে রয়েছি। Chrome Dev Summit 2020-এ আমাদের আলোচনা থেকে আপনি সেই মাইগ্রেশন সম্পর্কে আরও জানতে পারবেন। তাই, Puppeteer-এর কোডবেস-কে TypeScript-এ মাইগ্রেট করার কথা ভাবাটাও যুক্তিযুক্ত ছিল।

মাইগ্রেশনের পরিকল্পনা করা

মাইগ্রেশন কীভাবে প্ল্যান করতে হয় সেই বিষয়ে আমরা ছোট ছোট ধাপে অগ্রগতি করতে চেয়েছিলাম। এর ফলে মাইগ্রেশনের ওভারহেড কম থাকে—আপনি যেকোনও সময় কোডের একটি ছোট অংশের উপর কাজ করছেন—এবং ঝুঁকিও কম থাকে। কোনও ধাপে কোনও সমস্যা হলে, আপনি সহজেই তা আগের অবস্থায় ফিরিয়ে আনতে পারবেন। Puppeteer-এর অনেক ব্যবহারকারী আছেন এবং কোনও রিলিজ কাজ না করলে তাদের সকলেরই সমস্যা হবে, তাই আমাদের কাছে এটি অত্যন্ত গুরুত্বপূর্ণ ছিল যে আমরা যেন পরিবর্তন সংক্রান্ত ঝুঁকিকে ন্যূনতম রাখি।

এছাড়াও, আমরা ভাগ্যবান যে Puppeteer-এর ইউনিট টেস্টের একটি শক্তিশালী সেট রয়েছে যা এর সমস্ত কার্যকারিতা কভার করে। এর অর্থ হল, আমরা মাইগ্রেট করার সময় কোড ভাঙছি না এবং API-তে কোনও পরিবর্তন করছি না। মাইগ্রেশনের লক্ষ্য ছিল, কোনও Puppeteer ব্যবহারকারীকে বুঝতে না দিয়েই মাইগ্রেশন সম্পূর্ণ করা এবং সেই কৌশলের একটি গুরুত্বপূর্ণ অংশ ছিল এই পরীক্ষাগুলি। আমাদের কাছে যদি ভালো টেস্ট কভারেজ না থাকত, তাহলে মাইগ্রেশন চালিয়ে যাওয়ার আগে আমরা সেটি যোগ করতাম।

পরীক্ষা না করে কোডে কোনও পরিবর্তন করা ঝুঁকিপূর্ণ, তবে আপনি যদি সম্পূর্ণ ফাইল বা সম্পূর্ণ কোডবেসে পরিবর্তন করেন, তাহলে তা বিশেষভাবে ঝুঁকিপূর্ণ। মেকানিক্যাল পরিবর্তন করার সময়, কোনও একটি ধাপ বাদ পড়ে যাওয়া খুবই সহজ এবং একাধিকবার পরীক্ষা করার সময় এমন সমস্যা ধরা পড়েছে যা প্রয়োগকারী ও রিভিউয়ার, দুজনেরই চোখ এড়িয়ে গেছে।

আমরা যে একটি বিষয়ে আগে থেকেই সময় বিনিয়োগ করেছিলাম তা হল আমাদের কন্টিনিউয়াস ইন্টিগ্রেশন (CI) সেট-আপ। আমরা লক্ষ্য করেছি যে পুল অনুরোধের বিরুদ্ধে CI রানগুলি ফ্ল্যাকি ছিল এবং প্রায়শই ব্যর্থ হয়েছে। এটি এত ঘন ঘন ঘটত যে আমরা CI উপেক্ষা করা এবং পুল অনুরোধগুলি মার্জ করার অভ্যাসে পড়েছিলাম, ধরে নিই যে ব্যর্থতা Puppeteer-এ কোনও সমস্যার পরিবর্তে CI-তে একটি ওয়ান-অফ সমস্যা ছিল।

কিছু সাধারণ রক্ষণাবেক্ষণ এবং নিয়মিত টেস্ট ফ্লেক ঠিক করার জন্য নির্দিষ্ট সময় দেওয়ার পরে, আমরা এটিকে অনেক বেশি ধারাবাহিকভাবে পাস করার অবস্থায় নিয়ে এসেছি, এর ফলে আমরা CI শুনতে এবং বুঝতে পারি যে কোনও ব্যর্থতা আসলে কোনও সমস্যার ইঙ্গিত দিচ্ছে। এই কাজ খুব আকর্ষণীয় নয় এবং অন্তহীন CI রান দেখতে দেখতে বিরক্তি ধরে যায়, কিন্তু মাইগ্রেশন থেকে আসা পুল অনুরোধের সংখ্যা বিবেচনা করে আমাদের টেস্ট স্যুট নির্ভরযোগ্যভাবে চালানো অত্যন্ত গুরুত্বপূর্ণ ছিল।

একটি ফাইল বেছে নিয়ে ল্যান্ড করুন

এই সময় আমাদের মাইগ্রেশন রেডি ছিল এবং আমাদের সাহায্য করার জন্য টেস্টে ভর্তি একটি শক্তিশালী CI সার্ভার ছিল। যেকোনও ফাইল নিয়ে কাজ শুরু না করে, আমরা উদ্দেশ্যমূলকভাবে মাইগ্রেট করার জন্য একটি ছোট ফাইল বেছে নিয়েছি। এটি একটি গুরুত্বপূর্ণ অনুশীলন কারণ এর মাধ্যমে আপনি যে প্রসেস শুরু করতে চলেছেন তা যাচাই করতে পারবেন। এই ফাইলে কাজ করলে, আপনার পদ্ধতি সঠিক; কাজ না করলে, আপনাকে নতুন করে শুরু করতে হবে।

এছাড়াও, ফাইল ধরে ধরে (এবং নিয়মিত Puppeteer রিলিজের সাথে, যাতে সব পরিবর্তন একই npm ভার্সনে শিপ করা না হয়) কাজ করার ফলে ঝুঁকি কম থাকে। আমরা DeviceDescriptors.js-কে প্রথম ফাইল হিসেবে বেছে নিয়েছি, কারণ এটি কোডবেসের সবচেয়ে সহজ ফাইলগুলির মধ্যে একটি। এই সমস্ত প্রস্তুতিমূলক কাজ করা এবং এত ছোট পরিবর্তন করা কিছুটা অপ্রতিরোধ্য মনে হতে পারে, তবে লক্ষ্য অবিলম্বে বিশাল পরিবর্তন করা নয়, বরং সতর্কতার সাথে এবং পদ্ধতিগতভাবে ফাইল বাই ফাইল এগিয়ে যাওয়া। পদ্ধতি যাচাই করার জন্য সময় ব্যয় করলে, মাইগ্রেশনের সময় আরও জটিল ফাইল নিয়ে কাজ করার সময় অবশ্যই সময় বাঁচবে।

প্যাটার্ন প্রমাণ করে আবার চেষ্টা করুন

ভাল কথা, DeviceDescriptors.js-এ করা পরিবর্তন কোডবেসে সফলভাবে যোগ করা গেছে এবং আমাদের আশা অনুযায়ী প্ল্যানটি কাজ করেছে! এই পর্যায়ে আপনি মনোযোগ দিয়ে কাজ শুরু করার জন্য প্রস্তুত এবং আমরা ঠিক সেটাই করেছি। GitHub লেবেল ব্যবহার করা হল সব পুল অনুরোধকে একসাথে গ্রুপ করার একটি খুব ভালো উপায় এবং আমরা দেখেছি যে এটি প্রগ্রেস ট্র্যাক করার জন্য খুবই উপযোগী।

এটি মাইগ্রেট করুন এবং পরে উন্নত করুন

যেকোনও স্বতন্ত্র JavaScript ফাইলের জন্য আমাদের প্রসেস হল:

  1. .js থেকে .ts-এ ফাইলের নাম পরিবর্তন করুন।
  2. TypeScript কম্পাইলার রান করুন।
  3. কোনও সমস্যা থাকলে তা সমাধান করুন।
  4. পুল অনুরোধ তৈরি করুন।

এইসব প্রাথমিক পুল অনুরোধের বেশিরভাগ কাজ ছিল আগে থেকে থাকা ডেটা স্ট্রাকচারের জন্য TypeScript ইন্টারফেস এক্সট্র্যাক্ট করা। DeviceDescriptors.js মাইগ্রেট করা প্রথম পুল অনুরোধের ক্ষেত্রে, যা আমরা আগে আলোচনা করেছি, কোডটি এখান থেকে গেছে:

module.exports = [
  { 
    name: 'Pixel 4',
    … // Other fields omitted to save space
  }, 
  …
]

এবং হয়ে গেছে:

interface Device {
  name: string,
  …
}

const devices: Device[] = [{name: 'Pixel 4', …}, …]

module.exports = devices;

এই প্রসেসের অংশ হিসেবে, আমরা কোডবেসের প্রতিটি লাইন চেক করে সমস্যা খুঁজে বের করার কাজ করেছি। যেসব কোডবেস কয়েক বছর ধরে তৈরি হয়েছে এবং সময়ের সাথে সাথে বেড়ে উঠেছে, সেগুলির ক্ষেত্রে কোড রিফ্যাক্টর করা এবং পরিস্থিতি উন্নত করার সুযোগ থাকে। বিশেষ করে TypeScript-এ পরিবর্তন করার পরে, আমরা এমন জায়গা দেখতে পেয়েছি যেখানে কোডের সামান্য রিস্ট্রাকচারিং আমাদের কম্পাইলারের উপর আরও বেশি নির্ভর করতে এবং আরও ভাল টাইপ সেফটি পেতে সাহায্য করবে।

স্বভাববিরুদ্ধ হলেও, এইসব পরিবর্তন সঙ্গে সঙ্গে না করা খুবই গুরুত্বপূর্ণ। মাইগ্রেশনের লক্ষ্য হল কোডবেসকে TypeScript-এ নিয়ে যাওয়া এবং বড় ধরনের মাইগ্রেশন চলাকালীন আপনাকে সবসময় সফ্টওয়্যার ও ব্যবহারকারীদের ক্ষেত্রে ব্রেकेज হওয়ার ঝুঁকি সম্পর্কে চিন্তা করতে হবে। প্রাথমিক পরিবর্তনগুলি ন্যূনতম রেখে, আমরা সেই ঝুঁকি কম রেখেছি। ফাইলটি মার্জ করে TypeScript-এ মাইগ্রেট করার পরে, আমরা টাইপ সিস্টেমের সুবিধা নিতে কোডটি উন্নত করার জন্য ফলো-আপ পরিবর্তন করতে পারি। আপনার মাইগ্রেশনের জন্য কঠোর বাউন্ডারি সেট করেছেন কিনা তা নিশ্চিত করুন এবং সেগুলির মধ্যেই থাকার চেষ্টা করুন।

আমাদের টাইপ ডেফিনিশন পরীক্ষা করার জন্য টেস্ট মাইগ্রেট করা

আমরা সম্পূর্ণ সোর্স কোড TypeScript-এ মাইগ্রেট করার পরে, আমাদের পরীক্ষায় ফোকাস করতে পারি। আমাদের টেস্টের কভারেজ খুব ভাল ছিল, কিন্তু সেগুলি সবই JavaScript-এ লেখা ছিল। এর অর্থ হল, তারা আমাদের টাইপ ডেফিনিশন পরীক্ষা করে দেখেনি। প্রজেক্টের দীর্ঘমেয়াদী লক্ষ্যগুলির মধ্যে একটি (যার উপর আমরা এখনও কাজ করছি) হল Puppeteer-এর সাথে খুব ভালো কোয়ালিটির টাইপ ডেফিনেশন শিপ করা, কিন্তু আমাদের টাইপ ডেফিনেশন সম্পর্কে আমাদের কোডবেসে কোনও চেক ছিল না।

TypeScript-এ টেস্ট মাইগ্রেট করার (একই প্রসেস অনুসরণ করে, একটি একটি করে ফাইল) মাধ্যমে, আমরা TypeScript-এ এমন কিছু সমস্যা খুঁজে পেয়েছি যা অন্যথায় ব্যবহারকারীদের খুঁজে বের করতে হত। এখন আমাদের টেস্ট শুধু আমাদের সমস্ত কার্যকারিতাকেই কভার করে না, সেই সাথে আমাদের TypeScript-এর কোয়ালিটিও চেক করে!

Puppeteer কোডবেসে কাজ করা ইঞ্জিনিয়ার হিসেবে আমরা ইতিমধ্যেই TypeScript থেকে অনেক উপকৃত হয়েছি। আমাদের অনেক উন্নত CI এনভায়রনমেন্টের সাথে এটি আমাদের Puppeteer-এ কাজ করার সময় আরও প্রোডাক্টিভ হতে সাহায্য করেছে এবং TypeScript এমন বাগ ধরেছে যা অন্যথায় npm রিলিজের মধ্যে চলে যেত। আমরা খুব ভাল কোয়ালিটির TypeScript সংজ্ঞা শিপ করতে পেরে আনন্দিত, যাতে Puppeteer ব্যবহার করা সব ডেভেলপারও এই কাজ থেকে উপকৃত হতে পারেন।

প্রিভিউ চ্যানেল ডাউনলোড করা

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary, Dev বা Beta ব্যবহার করার কথা বিবেচনা করুন। এইসব প্রিভিউ চ্যানেল আপনাকে লেটেস্ট DevTools ফিচারে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীরা সমস্যা খুঁজে পাওয়ার আগেই আপনার সাইটে সমস্যা খুঁজে পেতে সাহায্য করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

নতুন ফিচার, আপডেট বা DevTools সম্পর্কিত অন্য যেকোনও বিষয় নিয়ে আলোচনা করতে, নিম্নলিখিত বিকল্প ব্যবহার করুন।