รีเฟรชสถาปัตยกรรมเครื่องมือสำหรับนักพัฒนาเว็บ: ย้ายข้อมูลไปยังคอมโพเนนต์ของเว็บ

Jack Franklin

โพสต์นี้เป็นส่วนหนึ่งของชุดบล็อกโพสต์ที่อธิบายการเปลี่ยนแปลงที่เราทำกับสถาปัตยกรรมของเครื่องมือสำหรับนักพัฒนาเว็บและวิธีสร้าง

เมื่อสร้าง DevTools เป็นครั้งแรกเมื่อหลายปีก่อน ทีมของเราเลือกที่จะสร้างเฟรมเวิร์ก UI ที่ออกแบบมาโดยเฉพาะ นี่เป็นตัวเลือกที่เหมาะสมในขณะนั้นและได้ทําหน้าที่เป็น DevTools ได้เป็นอย่างดี

แต่หลังจากนั้น แพลตฟอร์มนี้ก็ได้เพิ่มฟีเจอร์ต่างๆ เข้ามามากมาย และหนึ่งในนั้นคือ Web Components ซึ่งเหมาะอย่างยิ่งสำหรับการสร้างองค์ประกอบ UI ใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ การใช้สิ่งที่แพลตฟอร์มมีให้ช่วยลดจำนวนโค้ด UI ที่ต้องทำการดูแลรักษาได้อย่างมาก และช่วยให้เราลงทุนในการสร้างฟีเจอร์สําหรับ DevTools ได้มากขึ้น แทนที่จะต้องรองรับโครงสร้างพื้นฐานที่กําหนดเอง

เราได้สร้างคู่มือการสร้างองค์ประกอบ UI ใน DevTools เพื่อแชร์กับทีม DevTools วงกว้างขึ้นเพื่อช่วยในการเปลี่ยนแปลงนี้ คำแนะนำบางส่วนมีไว้สำหรับ DevTools และสถาปัตยกรรมของเครื่องมือนี้โดยเฉพาะ ซึ่งมีข้อจำกัดเป็นของตัวเอง แต่คำแนะนำบางส่วนเป็นแนวทางทั่วไปเกี่ยวกับแนวทางที่เราใช้ในการสร้าง โครงสร้าง และทดสอบคอมโพเนนต์เว็บ

วันนี้เราเผยแพร่เอกสารนี้ต่อสาธารณะที่ goo.gle/building-ui-devtools หากเคยสงสัยเกี่ยวกับวิธีใช้คอมโพเนนต์เว็บในแอปพลิเคชันขนาดใหญ่ในชีวิตจริง หรือความท้าทายบางอย่างที่มาพร้อมกับการผสานรวมคอมโพเนนต์เข้ากับโค้ดเบสขนาดใหญ่ที่มีอยู่แล้ว เอกสารนี้อาจช่วยตอบคำถามของคุณได้ หากมีคำถามเกี่ยวกับหลักเกณฑ์ของเรา โปรดทวีตหาเรา

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

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

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

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