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