ทีม Chrome ให้ความสำคัญกับประสบการณ์ของผู้ใช้และระบบนิเวศของเว็บที่เจริญรุ่งเรือง เราต้องการให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีที่สุดบนเว็บ ไม่ใช่แค่กับเอกสารแบบคงที่เท่านั้น แต่ยังรวมถึงเมื่อใช้แอปพลิเคชันที่มีเนื้อหาสมบูรณ์และมีการโต้ตอบสูง
เครื่องมือและเฟรมเวิร์กแบบโอเพนซอร์สมีบทบาทสำคัญในการช่วยให้นักพัฒนาแอปสามารถสร้างแอปที่ทันสมัยสำหรับเว็บได้ ทั้งยังรองรับประสบการณ์การใช้งานที่ดีสำหรับนักพัฒนาแอปด้วย เฟรมเวิร์กและเครื่องมือเหล่านี้ช่วยให้บริษัททุกขนาด รวมถึงบุคคลธรรมดาที่พัฒนาแอปบนเว็บสามารถทํางานได้
เราเชื่อว่าเฟรมเวิร์กยังมีบทบาทสำคัญในการช่วยนักพัฒนาแอปในด้านคุณภาพที่สำคัญ เช่น ประสิทธิภาพ การช่วยเหลือพิเศษ ความปลอดภัย ความพร้อมใช้งานบนอุปกรณ์เคลื่อนที่ เฟรมเวิร์กนี้รองรับสิ่งเหล่านี้ด้วยโซลูชันที่รวมไว้แล้ว แทนที่จะขอให้นักพัฒนาซอฟต์แวร์และเจ้าของเว็บไซต์ทุกคนเป็นผู้เชี่ยวชาญในด้านเหล่านี้และติดตามแนวทางปฏิบัติแนะนำที่เปลี่ยนแปลงอยู่ตลอดเวลา ซึ่งจะช่วยให้นักพัฒนาแอปสามารถมุ่งเน้นที่การสร้างฟีเจอร์ของผลิตภัณฑ์ได้
กล่าวโดยย่อคือ เป้าหมายของเราคือคุณภาพ UX ที่สูงจะกลายเป็นผลพลอยได้จากการสร้างเว็บไซต์
Aurora: การทำงานร่วมกันระหว่าง Chrome กับเฟรมเวิร์กและเครื่องมือเว็บโอเพนซอร์ส
เป็นเวลาเกือบ 2 ปีที่เราได้ทํางานร่วมกับเฟรมเวิร์กยอดนิยมอย่าง Next.js, Nuxt และ Angular เพื่อปรับปรุงประสิทธิภาพของเว็บ นอกจากนี้ เรายังให้เงินสนับสนุนเครื่องมือและไลบรารียอดนิยม เช่น Vue, ESLint, webpack วันนี้เราจะตั้งชื่อความพยายามนี้ว่า Aurora
แสงออโรราเป็นแสงที่เกิดตามธรรมชาติซึ่งส่องประกายระยิบระยับบนท้องฟ้า เนื่องจากเราพยายามทำให้ประสบการณ์ของผู้ใช้ที่สร้างขึ้นด้วยเฟรมเวิร์กโดดเด่น เราจึงคิดว่าชื่อนี้เหมาะเจาะ
เราจะแชร์รายละเอียดเพิ่มเติมเกี่ยวกับ Aurora ในอีกไม่กี่เดือนข้างหน้า นี่เป็นการทำงานร่วมกันระหว่างทีมวิศวกร Chrome กลุ่มเล็กๆ (ชื่อรหัสภายในคือ WebSDK) กับผู้เขียนเฟรมเวิร์ก เป้าหมายของเราคือการมอบประสบการณ์การใช้งานที่ดีที่สุดให้กับผู้ใช้แอปเวอร์ชันที่ใช้งานจริง ไม่ว่าจะแสดงผลในเบราว์เซอร์ใดก็ตาม
กลยุทธ์ของเราคืออะไร
เราที่ Google ได้เรียนรู้สิ่งต่างๆ มากมายขณะใช้เฟรมเวิร์กและเครื่องมือในการสร้างและดูแลรักษาเว็บแอปพลิเคชันขนาดใหญ่ เช่น Google Search, Maps, ค้นรูป, Google Photos เป็นต้น เราค้นพบว่าเฟรมเวิร์กมีบทบาทสำคัญอย่างยิ่งในคุณภาพของแอปที่คาดการณ์ได้ด้วยการระบุค่าเริ่มต้นที่มีประสิทธิภาพและเครื่องมือที่เน้นมุมมอง
เฟรมเวิร์กมีจุดได้เปรียบที่ไม่เหมือนใครในการส่งผลต่อทั้ง DX และ UX เนื่องจากครอบคลุมทั้งระบบ ไม่ว่าจะเป็นไคลเอ็นต์และเซิร์ฟเวอร์ สภาพแวดล้อมการพัฒนาและสภาพแวดล้อมที่ใช้งานจริง รวมถึงผสานรวมเครื่องมือต่างๆ เช่น คอมไพเลอร์ เครื่องมือรวมไฟล์ โปรแกรมตรวจไวยากรณ์ ฯลฯ
เมื่อโซลูชันผสานรวมอยู่ในเฟรมเวิร์กแล้ว ทีมนักพัฒนาซอฟต์แวร์จะใช้โซลูชันเหล่านี้ได้และมุ่งเน้นเวลาไปกับสิ่งที่สําคัญต่อผลิตภัณฑ์มากที่สุด ซึ่งก็คือการเปิดตัวฟีเจอร์ที่ยอดเยี่ยมสําหรับผู้ใช้
ขณะที่เราทํางานเพื่อปรับปรุงเครื่องมือที่ใช้ในทุกเลเยอร์ของสแต็ก เฟรมเวิร์กต่างๆ เช่น Next.js, Nuxt และ Angular CLI จะจัดการทุกขั้นตอนของวงจรการทํางานของแอปพลิเคชัน ด้วยเหตุนี้ และข้อเท็จจริงที่ว่าการใช้งาน React นั้นมากที่สุดในระบบนิเวศเฟรมเวิร์ก UI หลัก เราจึงเริ่มการเพิ่มประสิทธิภาพส่วนใหญ่ด้วยการพิสูจน์ใน Next.js ก่อนขยายไปยังระบบนิเวศอื่นๆ
Aurora ช่วยให้ประสบความสำเร็จในวงกว้างด้วยการนำโซลูชันไปใช้ในเลเยอร์ที่เหมาะสมของสแต็กเทคโนโลยียอดนิยม การสร้างเว็บด้วยเฟรมเวิร์กนี้ช่วยปิดช่องว่างระหว่างเบราว์เซอร์กับเฟรมเวิร์ก ซึ่งทำให้การสร้างเว็บมีคุณภาพสูงไปโดยปริยาย ทั้งยังทำหน้าที่เป็นลูปความคิดเห็นเพื่อปรับปรุงแพลตฟอร์มเว็บด้วย
ขั้นตอนการทำงานของเราเป็นอย่างไร
หลักการของเราสำหรับวิธีที่ Aurora เชื่อมโยงเบราว์เซอร์กับระบบนิเวศของนักพัฒนาแอปคือความถ่อมตน ความอยากรู้ การค้นหาทางวิทยาศาสตร์ และการปฏิบัติจริง เราทำงานร่วมกับผู้เขียนเฟรมเวิร์กในการปรับปรุง ทำงานร่วมกับชุมชน และตรวจสอบอย่างละเอียดรอบคอบก่อนทำการเปลี่ยนแปลง
สรุปขั้นตอนที่เราทำกับฟีเจอร์ใหม่ที่เราพัฒนามีดังนี้
- ระบุปัญหาด้านประสบการณ์ของผู้ใช้ในสแต็กยอดนิยมโดยใช้แอปตัวแทน
- ต้นแบบโซลูชันที่แก้ปัญหานี้ โดยเน้นที่ "ค่าเริ่มต้นที่มีประสิทธิภาพ"
- ยืนยันฟีเจอร์กับสแต็กเฟรมเวิร์กอื่นเพื่อให้แน่ใจว่าปรับใช้ได้
- ตรวจสอบฟีเจอร์โดยการทดสอบในแอปเวอร์ชันที่ใช้งานจริง 2-3 แอป โดยปกติแล้วจะใช้การทดสอบประสิทธิภาพในห้องทดลอง
- ขับเคลื่อนการออกแบบโดยใช้กระบวนการ RFC เพื่อจัดการกับความคิดเห็นของชุมชน
- แสดงฟีเจอร์ในกองยอดนิยม ซึ่งมักจะอยู่หลัง Flag
- เปิดใช้ฟีเจอร์ในแอปเวอร์ชันที่ใช้งานจริงเพื่อประเมินคุณภาพและการผสานรวมเวิร์กโฟลว์ของนักพัฒนาแอป
- วัดการปรับปรุงประสิทธิภาพโดยการติดตามเมตริกในแอปเวอร์ชันที่ใช้งานจริงซึ่งนําฟีเจอร์มาใช้หรืออัปเกรด
- เปิดใช้ฟีเจอร์เป็นค่าเริ่มต้นในแพ็กเกจ เพื่อให้ผู้ใช้ทุกคนที่อัปเกรดได้รับประโยชน์
- เมื่อพิสูจน์แล้ว ให้ใช้เฟรมเวิร์กเพิ่มเติมเพื่อเปิดตัวฟีเจอร์
- ระบุช่องโหว่ในแพลตฟอร์มเว็บด้วยรายงานความคิดเห็น
- ไปยังปัญหาถัดไป
เครื่องมือและปลั๊กอินพื้นฐาน (webpack, Babel, ESLint, TypeScript ฯลฯ) ใช้ร่วมกันในเฟรมเวิร์กหลายแบบ ซึ่งจะช่วยสร้างผลกระทบแบบต่อเนื่อง แม้ว่าจะมีส่วนร่วมในกองเฟรมเวิร์กเดียวก็ตาม
นอกจากนี้ Chrome Framework Fund ยังให้การสนับสนุนเครื่องมือและไลบรารีโอเพนซอร์สด้วยเงินทุน แม้ว่าเราจะหวังว่าปัญหาและชั้นการแก้ปัญหาจะทับซ้อนกันมากพอที่จะนำไปใช้กับเฟรมเวิร์กและเครื่องมืออื่นๆ ได้ แต่เราก็รู้ว่าเราทำได้มากกว่านี้ ด้วยเหตุนี้ เราจึงต้องการทําตามหน้าที่ของเราเพื่อให้มั่นใจว่าไลบรารีและเฟรมเวิร์กที่ช่วยนักพัฒนาแอปประสบความสําเร็จจะเติบโตได้ ด้วยเหตุนี้ เราจึงจะลงทุนใน Chrome Framework Fund ต่อไป จนถึงตอนนี้ เครื่องมือนี้รองรับการทำงานกับ Webpack 5, Nuxt และประสิทธิภาพและการปรับปรุง ESLint
ผลงานของเราจนถึงตอนนี้มีอะไรบ้าง
ที่ผ่านมาเรามุ่งเน้นที่การเพิ่มประสิทธิภาพพื้นฐานสำหรับทรัพยากรต่างๆ เช่น รูปภาพ, JS, CSS, แบบอักษร เราได้เพิ่มประสิทธิภาพหลายอย่างเพื่อปรับปรุงค่าเริ่มต้นของเฟรมเวิร์กหลายรายการ ซึ่งรวมถึงรายการต่อไปนี้
- คอมโพเนนต์รูปภาพใน Next.js ที่รวมแนวทางปฏิบัติแนะนำสำหรับการโหลดรูปภาพไว้ด้วยกัน ตามด้วยการทำงานร่วมกันกับ Nuxt ในลักษณะเดียวกัน การใช้คอมโพเนนต์นี้ทำให้เวลาในการวาดภาพและการเปลี่ยนเลย์เอาต์ดีขึ้นอย่างมาก (เช่น Largest Contentful Paint ลดลง 57% และ Cumulative Layout Shift ลดลง 100% ใน nextjs.org/give)
- การแทรก CSS อัตโนมัติสำหรับการประกาศแบบอักษรเว็บ ณ เวลาที่สร้าง ฟีเจอร์นี้พร้อมใช้งานใน Angular (Google Fonts) และ Next.js (Google Fonts และ Adobe Fonts) ซึ่งส่งผลให้เกิดการพัฒนาที่โดดเด่นใน Largest Contentful Paint และ First Contentful Paint (ตัวอย่าง)
- การแทรก CSS ที่สําคัญในหน้าโดยใช้ Critters ทั้งใน Angular และ Next.js เพื่อลดเวลาในการแสดงผล ส่งผลให้คะแนนประสิทธิภาพของ Lighthouse ในแอป Angular ขนาดใหญ่ทั่วไปเพิ่มขึ้น 20-30 จุดเมื่อใช้ร่วมกับฟีเจอร์การแทรก CSS ของแบบอักษร
- การรองรับ ESLint ที่พร้อมใช้งานทันทีใน Next.js ซึ่งประกอบด้วยปลั๊กอินที่กำหนดเองและการกำหนดค่าที่แชร์ได้ เพื่อให้ตรวจพบปัญหาทั่วไปเฉพาะเฟรมเวิร์กได้ง่ายขึ้นเมื่อถึงเวลาสร้าง ซึ่งส่งผลให้โหลดได้มีประสิทธิภาพมากขึ้นและคาดการณ์ได้แม่นยำยิ่งขึ้น
- การเปิดตัวตัวส่งต่อประสิทธิภาพในตัวใน Create React App และ Next.js เพื่อช่วยให้ดูข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของหน้าเว็บได้ง่ายขึ้นผ่าน Web Vitals และเมตริกอื่นๆ ที่กําหนดเอง
- การแบ่งกลุ่มแบบละเอียดที่มาพร้อมกับ Next.js และ Gatsby ซึ่งทำให้ขนาดของกลุ่มลดลง 30-70 เปอร์เซ็นต์ ทั้งยังปรับปรุงประสิทธิภาพการแคชด้วย ซึ่งได้กลายเป็นค่าเริ่มต้นใน Webpack 5
- กลุ่ม polyfill แยกต่างหากสําหรับเบราว์เซอร์รุ่นเก่า โดยร่วมมือกับทีม Next.js เพื่อปรับปรุงขนาดกลุ่มในเบราว์เซอร์สมัยใหม่
ฟีเจอร์เหล่านี้ทุกรายการได้รับการเปิดใช้โดยอัตโนมัติโดยค่าเริ่มต้น หรือเพียงแค่ต้องเลือกใช้เท่านั้น การดำเนินการนี้จำเป็นเพื่อให้นักพัฒนาแอปได้รับประโยชน์ได้อย่างง่ายดายโดยไม่เพิ่มความซับซ้อนให้กับเวิร์กโฟลว์
แผนของเราสำหรับปี 2021
ตลอดช่วงที่เหลือของปีนี้ เราจะมุ่งเน้นที่การช่วยให้แพ็กเกจเฟรมเวิร์กปรับปรุงประสบการณ์ของผู้ใช้และประสิทธิภาพในเมตริกต่างๆ เช่น Core Web Vitals งานนี้จะมีการดำเนินการต่อไปนี้
- การปฏิบัติตามข้อกำหนดเพื่อบังคับใช้แนวทางปฏิบัติแนะนำ ดูข้อมูลเพิ่มเติมได้ในบล็อกโพสต์
- เพิ่มประสิทธิภาพการโหลดครั้งแรกโดยต่อยอดจากการทํางานร่วมกันเพื่อเพิ่มประสิทธิภาพรูปภาพ แบบอักษร และ CSS ที่สําคัญ
- โหลดสคริปต์ของบุคคลที่สาม (บุคคลที่สาม) โดยที่ประสิทธิภาพไม่ได้รับผลกระทบมากนัก โดยต่อยอดจากรากฐานของการทำงานกับคอมโพเนนต์ Script และทำการวิจัยอย่างละเอียดเกี่ยวกับวิธีจัดเรียงและลำดับบุคคลที่สามให้ดีที่สุด
- ประสิทธิภาพ JavaScript ในระดับที่ใหญ่ขึ้น (เช่น การรองรับคอมโพเนนต์เซิร์ฟเวอร์ React ใน Next.js)
ทีมของเรามุ่งมั่นที่จะโพสต์ข้อมูลเกี่ยวกับ RFC และเอกสารการออกแบบสำหรับแนวคิดเหล่านี้เป็นประจำ เพื่อให้เฟรมเวิร์กหรือนักพัฒนาแอปที่ต้องการติดตามแนวคิดเหล่านี้ได้ดำเนินการ
บทสรุป
ทีม Aurora (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Katie) หวังว่าจะได้ทำงานร่วมกับชุมชนเฟรมเวิร์กโอเพนซอร์สอย่างใกล้ชิดต่อไปเพื่อปรับปรุงประสบการณ์การใช้งานเริ่มต้นใน Next.js, Nuxt และ Angular เราจะเพิ่มการมีส่วนร่วมเพื่อครอบคลุมเฟรมเวิร์กและเครื่องมืออื่นๆ อีกมากมายในอนาคต โปรดติดตามบล็อกโพสต์ ทอล์ก และ RFC เพิ่มเติมจากทีมของเราในปีหน้า :)