আমরা DevTools টিমে TypeScript-এর বড় অনুরাগী- এতটাই যে DevTools-এ নতুন কোড লেখা হচ্ছে এবং আমরা TypeScript দ্বারা টাইপ-চেক করার জন্য পুরো কোডবেসের একটি বড় স্থানান্তরের মাঝখানে রয়েছি। আপনি Chrome Dev Summit 2020 এ আমাদের আলোচনায় সেই স্থানান্তর সম্পর্কে আরও জানতে পারেন। তাই Puppeteer-এর কোডবেসকে TypeScript-এ স্থানান্তরিত করার দিকেও তাকানো নিখুঁত বোধগম্য।
অভিবাসনের পরিকল্পনা
কিভাবে মাইগ্রেট করা যায় তার পরিকল্পনা করার সময় আমরা ছোট ছোট পদক্ষেপে অগ্রগতি করতে সক্ষম হতে চেয়েছিলাম। এটি মাইগ্রেশনের ওভারহেডকে নিচে রাখে—আপনি যেকোন সময় কোডের একটি ছোট অংশে কাজ করছেন—এবং ঝুঁকিও কম রাখে। কোনো একটি ধাপে কিছু ভুল হলে আপনি সহজেই তা ফিরিয়ে দিতে পারবেন। Puppeteer এর অনেক ব্যবহারকারী আছে এবং একটি ভাঙা প্রকাশ তাদের অনেকের জন্য সমস্যা সৃষ্টি করবে, তাই এটি অত্যাবশ্যক ছিল যে আমরা পরিবর্তনগুলিকে ন্যূনতমভাবে ভাঙার ঝুঁকি বজায় রাখি।
আমরা সৌভাগ্যবান যে Puppeteer এর সমস্ত কার্যকারিতা কভার করার জায়গায় ইউনিট পরীক্ষার একটি শক্তিশালী সেট রয়েছে। এর অর্থ হল আমরা আত্মবিশ্বাসী হতে পারি যে আমরা মাইগ্রেট করার সময় কোড ভঙ্গ করছি না, তবে আমরা আমাদের API-তে পরিবর্তনগুলি প্রবর্তন করছি না। মাইগ্রেশনের লক্ষ্য ছিল কোনো Puppeteer ব্যবহারকারী না বুঝেই এটি সম্পূর্ণ করা যে আমরা স্থানান্তরিত হয়েছি, এবং পরীক্ষাগুলি সেই কৌশলটির একটি গুরুত্বপূর্ণ অংশ ছিল। যদি আমাদের ভাল পরীক্ষার কভারেজ না থাকত, তবে আমরা মাইগ্রেশন চালিয়ে যাওয়ার আগে এটি যোগ করতাম।
পরীক্ষা ছাড়া যেকোন কোড পরিবর্তন করা ঝুঁকিপূর্ণ, তবে আপনি যেখানে সম্পূর্ণ ফাইল বা কোডবেসের সম্পূর্ণতা স্পর্শ করছেন সেখানে পরিবর্তনগুলি বিশেষভাবে ঝুঁকিপূর্ণ। যান্ত্রিক পরিবর্তন করার সময়, একটি ধাপ মিস করা সহজ, এবং একাধিক অনুষ্ঠানে পরীক্ষায় এমন একটি সমস্যা ধরা পড়ে যা বাস্তবায়নকারী এবং পর্যালোচক উভয়ের কাছ থেকে পিছিয়ে গিয়েছিল।
একটি জিনিস যা আমরা আগেভাগে সময় বিনিয়োগ করেছি তা হল আমাদের কন্টিনিউয়াস ইন্টিগ্রেশন (CI) সেটআপ । আমরা লক্ষ্য করেছি যে পুল অনুরোধের বিরুদ্ধে CI রানগুলি অস্পষ্ট ছিল এবং প্রায়শই ব্যর্থ হয়। এটি প্রায়শই ঘটেছিল যে আমরা আমাদের CI উপেক্ষা করার এবং পুল অনুরোধগুলিকে একত্রিত করার অভ্যাসে পরিণত হয়েছি, ধরে নিচ্ছি যে ব্যর্থতাটি পাপেটিয়ারের সমস্যার পরিবর্তে সিআই-এর এক-একটি সমস্যা ছিল।
কিছু সাধারণ রক্ষণাবেক্ষণ এবং কিছু নিয়মিত পরীক্ষার ফ্লেক্স ঠিক করার জন্য নিবেদিত সময়ের পরে, আমরা এটিকে অনেক বেশি ধারাবাহিকভাবে উত্তীর্ণ অবস্থায় নিয়ে এসেছি, যা আমাদের CI শুনতে সক্ষম করে এবং বুঝতে পারে যে একটি ব্যর্থতা একটি প্রকৃত সমস্যা নির্দেশ করছে। এই কাজটি চটকদার নয়, এবং এটি অবিরাম CI রানগুলি দেখে হতাশাজনক, তবে মাইগ্রেশন যে সংখ্যার পুল অনুরোধগুলিকে ছুঁড়ে দিয়েছে তা বিবেচনা করে আমাদের টেস্ট স্যুটটি নির্ভরযোগ্যভাবে চালানো অত্যাবশ্যক ছিল৷
একটি ফাইল বাছাই করুন এবং ল্যান্ড করুন
এই মুহুর্তে আমাদের মাইগ্রেশন যাওয়ার জন্য প্রস্তুত ছিল এবং আমাদের পিছনে দেখার জন্য পরীক্ষায় পূর্ণ একটি শক্তিশালী CI সার্ভার ছিল। যেকোনো ইচ্ছাকৃত ফাইলে ডুব দেওয়ার পরিবর্তে, আমরা উদ্দেশ্যমূলকভাবে মাইগ্রেট করার জন্য একটি ছোট ফাইল বেছে নিয়েছি । এটি একটি দরকারী অনুশীলন কারণ এটি আপনাকে পরিকল্পিত প্রক্রিয়াটি যাচাই করতে দেয় যা আপনি গ্রহণ করতে চলেছেন। যদি এটি এই ফাইলে কাজ করে, আপনার পদ্ধতি বৈধ; যদি না হয়, আপনি ড্রয়িং বোর্ডে ফিরে যেতে পারেন।
অতিরিক্তভাবে ফাইলের মাধ্যমে ফাইল যাওয়া (এবং নিয়মিত পাপেটিয়ার রিলিজ সহ, তাই সমস্ত পরিবর্তন একই এনপিএম সংস্করণে পাঠানো হয়নি) ঝুঁকি কম রাখে। আমরা প্রথম ফাইল হিসাবে DeviceDescriptors.js বাছাই করেছি , কারণ এটি কোডবেসের সবচেয়ে সহজবোধ্য ফাইলগুলির মধ্যে একটি। এই সমস্ত প্রস্তুতিমূলক কাজ করা এবং এইরকম একটি ছোট পরিবর্তন আনার জন্য এটি কিছুটা অস্বস্তিকর বোধ করতে পারে, তবে লক্ষ্য অবিলম্বে বিশাল পরিবর্তন করা নয়, তবে সতর্কতার সাথে এগিয়ে যাওয়া এবং পদ্ধতিগতভাবে ফাইল দ্বারা ফাইল করা। পদ্ধতির যাচাইকরণে ব্যয় করা সময় অবশ্যই পরে মাইগ্রেশনের সময় বাঁচায় যখন আপনি সেই আরও জটিল ফাইলগুলিকে আঘাত করেন।
প্যাটার্ন প্রমাণ করুন এবং পুনরাবৃত্তি করুন
সৌভাগ্যক্রমে DeviceDescriptors.js এ পরিবর্তনটি সফলভাবে কোডবেসে পরিণত হয়েছে, এবং পরিকল্পনাটি আমরা আশা করেছিলাম যেভাবে কাজ করেছে! এই মুহুর্তে আপনি নকল করতে এবং এটির সাথে এগিয়ে যাওয়ার জন্য প্রস্তুত, যা আমরা করেছি । একটি GitHub লেবেল ব্যবহার করা সমস্ত পুল অনুরোধ একসাথে গোষ্ঠী করার একটি সত্যিই চমৎকার উপায়, এবং আমরা অগ্রগতি ট্র্যাক করার জন্য এটি দরকারী বলে মনে করেছি।
এটি স্থানান্তরিত করুন এবং পরে এটি উন্নত করুন
যেকোনো পৃথক জাভাস্ক্রিপ্ট ফাইলের জন্য আমাদের প্রক্রিয়া ছিল:
- ফাইলটির নাম
.jsথেকে.tsকরুন । - 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-এর সমস্যাগুলি খুঁজে পেয়েছি যা অন্যথায় আমাদের জন্য অনুসন্ধান করার জন্য ব্যবহারকারীদের উপর ছেড়ে দেওয়া হত। এখন আমাদের পরীক্ষাগুলি কেবল আমাদের সমস্ত কার্যকারিতাই কভার করে না, আমাদের টাইপস্ক্রিপ্টের গুণমান পরীক্ষা হিসাবেও কাজ করে !
Puppeteer কোডবেসে কাজ করা প্রকৌশলী হিসেবে আমরা ইতিমধ্যেই TypeScript থেকে ব্যাপকভাবে উপকৃত হয়েছি। আমাদের অনেক উন্নত CI পরিবেশের সাথে মিলিত, এটি পাপেটিয়ারে কাজ করার সময় আমাদের আরও বেশি উত্পাদনশীল হতে সক্ষম করেছে এবং টাইপস্ক্রিপ্ট ক্যাচ বাগ রয়েছে যা অন্যথায় এটি একটি এনপিএম রিলিজে পরিণত হত। Puppeteer ব্যবহার করে সকল ডেভেলপারদের এই কাজ থেকেও উপকৃত হতে সক্ষম করার জন্য উচ্চ মানের TypeScript সংজ্ঞা পাঠানোর জন্য আমরা উত্তেজিত।
প্রিভিউ চ্যানেল ডাউনলোড করুন
আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary , Dev বা Beta ব্যবহার করার কথা বিবেচনা করুন। এই পূর্বরূপ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করে এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি খুঁজে পায়!
Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে
পোস্টের নতুন বৈশিষ্ট্য এবং পরিবর্তনগুলি বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷
- crbug.com এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
- আরও বিকল্প ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন
> সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন । - @ChromeDevTools- এ টুইট করুন।
- আমাদের DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷