การย้ายข้อมูล Puppeteer ไปยัง TypeScript

Jack Franklin

ทีมเครื่องมือสำหรับนักพัฒนาเว็บของเราเป็นแฟนตัวยงของ TypeScript มาก จนถึงขั้นที่เขียนโค้ดใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บด้วย TypeScript และกำลังอยู่ระหว่างการย้ายข้อมูลโค้ดทั้งหมดให้ TypeScript ตรวจสอบประเภท ดูข้อมูลเพิ่มเติมเกี่ยวกับการย้ายข้อมูลได้ในการบรรยายของเราที่ Chrome Dev Summit 2020 เราจึงพิจารณาย้ายข้อมูลโค้ดเบสของ Puppeteer ไปยัง TypeScript ด้วย

การวางแผนการย้ายข้อมูล

เมื่อวางแผนวิธีย้ายข้อมูล เราต้องการทํางานได้ทีละขั้น วิธีนี้ช่วยลดค่าใช้จ่ายในการย้ายข้อมูล เนื่องจากคุณทํางานกับโค้ดเพียงส่วนเล็กๆ ในแต่ละครั้ง และลดความเสี่ยงด้วย หากเกิดข้อผิดพลาดในขั้นตอนใดขั้นตอนหนึ่ง คุณก็เปลี่ยนกลับได้ง่ายๆ Puppeteer มีผู้ใช้จำนวนมากและรุ่นที่ใช้งานไม่ได้จะทำให้เกิดปัญหากับผู้ใช้จำนวนมาก เราจึงต้องลดความเสี่ยงของการเปลี่ยนแปลงที่ทำให้เกิดข้อบกพร่องให้เหลือน้อยที่สุด

นอกจากนี้ เรายังโชคดีด้วยที่ Puppeteer มีชุดการทดสอบหน่วยที่มีประสิทธิภาพครอบคลุมฟังก์ชันการทำงานทั้งหมด ซึ่งหมายความว่าเรามั่นใจได้ว่าไม่ได้ทำให้โค้ดใช้งานไม่ได้ขณะที่ย้ายข้อมูล และไม่ได้เปลี่ยนแปลง API ด้วย เป้าหมายของการย้ายข้อมูลคือการย้ายข้อมูลให้เสร็จสมบูรณ์โดยที่ผู้ใช้ Puppeteer ไม่รู้ตัวว่าเราได้ย้ายข้อมูลแล้ว และการทดสอบเป็นส่วนสําคัญของกลยุทธ์ดังกล่าว หากการทดสอบไม่ครอบคลุมดีพอ เราจะต้องเพิ่มการทดสอบก่อนดำเนินการย้ายข้อมูลต่อ

การเปลี่ยนแปลงโค้ดโดยไม่ทดสอบเป็นการกระทำที่มีความเสี่ยง แต่การเปลี่ยนแปลงที่คุณแก้ไขทั้งไฟล์หรือทั้งโค้ดเบสจะยิ่งมีความเสี่ยงเป็นพิเศษ เมื่อทําการเปลี่ยนแปลงทางกลไก คุณอาจพลาดขั้นตอนใดขั้นตอนหนึ่งได้โดยง่าย และหลายครั้งที่การทดสอบพบปัญหาที่ทั้งผู้ติดตั้งใช้งานและผู้ตรวจสอบมองข้ามไป

สิ่งที่เราลงทุนตั้งแต่เนิ่นๆ คือการตั้งค่าการผสานรวมอย่างต่อเนื่อง (CI) เราพบว่า CI ที่ทำงานกับคำขอดึงข้อมูลทำงานไม่เสถียรและมักไม่สำเร็จ ปัญหานี้เกิดขึ้นบ่อยมากจนเราติดนิสัยที่จะไม่สนใจ CI และผสานคําขอดึงข้อมูลโดยคิดว่าความล้มเหลวเป็นปัญหาที่เกิดขึ้นเพียงครั้งเดียวใน CI ไม่ใช่ปัญหาใน Puppeteer

หลังจากการบำรุงรักษาทั่วไปและเวลาเฉพาะในการแก้ไขข้อบกพร่องในการทดสอบตามปกติ เราทำให้ระบบอยู่ในสถานะ "ผ่าน" ได้อย่างสม่ำเสมอมากขึ้น ซึ่งทำให้เราสามารถฟัง CI และทราบว่าความล้มเหลวบ่งบอกถึงปัญหาจริง งานนี้ไม่ได้ดูหรูหราและน่าหงุดหงิดที่ต้องดูการเรียกใช้ CI ที่ไม่มีที่สิ้นสุด แต่จำเป็นต้องมีชุดทดสอบที่ทำงานได้อย่างน่าเชื่อถือเนื่องจากจำนวนคำขอดึงที่การย้ายข้อมูลส่งเข้ามา

เลือกและวางไฟล์ 1 ไฟล์

เมื่อถึงจุดนี้ เราได้เตรียมการย้ายข้อมูลไว้พร้อมแล้ว และมีเซิร์ฟเวอร์ 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 ด้วย

เราได้รับประโยชน์อย่างมากจาก TypeScript ในฐานะวิศวกรที่ทํางานกับโค้ดเบสของ Puppeteer ประกอบกับสภาพแวดล้อม CI ที่ดีขึ้นมาก ทำให้เรามีประสิทธิผลมากขึ้นเมื่อทํางานกับ Puppeteer และ TypeScript จะตรวจหาข้อบกพร่องที่อาจปรากฏในรุ่น npm เรายินดีที่จะได้ส่งการกําหนด TypeScript คุณภาพสูงเพื่อให้นักพัฒนาซอฟต์แวร์ทุกคนที่ใช้ Puppeteer ได้รับประโยชน์จากงานนี้ด้วย

ดาวน์โหลดแชแนลตัวอย่าง

ลองใช้ Chrome Canary, Dev หรือ เบต้า เป็นเบราว์เซอร์สำหรับนักพัฒนาซอฟต์แวร์เริ่มต้น ช่องทางเวอร์ชันตัวอย่างเหล่านี้จะช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools, ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ได้ก่อนที่ผู้ใช้จะพบ

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ การอัปเดต หรือสิ่งอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ