ข้อมูลอัปเดต 10 ประการจาก Google I/O 2024: ปลดล็อกศักยภาพของ AI สำหรับนักพัฒนาเว็บทุกราย

เว็บมีอายุครบ 35 ปีในเดือนสิงหาคมนี้ นักพัฒนาซอฟต์แวร์รุ่นหลายรุ่นได้หล่อหลอมเทคโนโลยีอันน่าทึ่ง และนำมาซึ่งนวัตกรรมมากมายนับไม่ถ้วนในชีวิตของเรา ตอนนี้ถึงเวลาเปิดรับคนรุ่นใหม่ที่มี AI ต่อไปนี้เป็นฟีเจอร์ที่น่าสนใจ 10 รายการซึ่งเปิดตัวในเซสชันสำคัญของนักพัฒนาซอฟต์แวร์และเซสชัน I/O ที่จะแนะนำเส้นทางสู่การพัฒนาที่ดียิ่งขึ้น ผ่านเว็บที่มีประสิทธิภาพมากขึ้นซึ่งง่ายขึ้นและง่ายขึ้น

1. ผสานรวม Gemini Nano ไว้ในเดสก์ท็อป Chrome เพื่อมอบฟีเจอร์ AI ใหม่ๆ ในอุปกรณ์

โดย Gemini Nano จะอยู่ใน Chrome เดสก์ท็อปตั้งแต่ Chrome 126 เป็นต้นไป ทำไมประเด็นนี้จึงสำคัญ คุณจะสามารถให้บริการฟีเจอร์ AI ที่มีประสิทธิภาพแก่ผู้ใช้ Chrome หลายพันล้านคนได้โดยไม่ต้องกังวลเกี่ยวกับวิศวกรรม การปรับแต่ง ความจุ หรือต้นทุนที่ต้องทำทันที "ช่วยฉันเขียน" พร้อมใช้งานใน Chrome โดยมาพร้อมกับพลังงานในอุปกรณ์ เพื่อช่วยให้ผู้ใช้เขียนเนื้อหาแบบสั้น

ช่วยเรากำหนดอนาคตของเว็บโดยการสมัครโปรแกรมทดลองใช้ก่อนเปิดตัว

2. WebAssembly และ WebGPU เปิดใช้ AI ในอุปกรณ์ได้ ไม่ว่าคุณจะใช้โมเดล AI ใดก็ตาม

เราลงทุนไปอย่างมหาศาลเพื่อให้มั่นใจว่าโมเดล AI ทำงานอย่างรวดเร็วและมีประสิทธิภาพโดยใช้ WebGPU และ Wasm ซึ่งเป็นเทคโนโลยีแกนหลักที่ทำให้ AI บนอุปกรณ์บนเว็บทำงานได้ การปรับปรุงใหม่ เช่น ค่าทศนิยม 16 บิตใน WebGPU รวมถึง Memory64 และ JavaScript Promise Integration ใน Wasm ทำให้ AI ทำงานได้เร็วขึ้น เมื่อใช้ Wasm และ WebGPU ไลบรารี AI จะสามารถเรียกใช้โมเดลจำนวนมากในฮาร์ดแวร์หลากหลายประเภท

3. เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่ทำงานด้วยระบบ AI จะช่วยปรับปรุงกระบวนการแก้ไขข้อบกพร่องของคุณ

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

ข้อมูลเชิงลึกเกี่ยวกับคอนโซลของ Chrome DevTools มีให้บริการแล้ววันนี้ในฐานะฟีเจอร์ทดลองในสหรัฐอเมริกา และจะเปิดตัวในประเทศอื่นๆ เพิ่มเติมเร็วๆ นี้

4. Speculation Rules API นำประสบการณ์การท่องเว็บแบบทันใจ

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

ตัวอย่างของ Tokopedia: ผลกระทบของการแสดงผลล่วงหน้าซึ่งทำให้โหลดได้เร็วขึ้นมาก แม้จะใช้การเชื่อมต่อช้า

5. ดู Transitions API สำหรับเว็บไซต์ที่มีหลายหน้า

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

6. แดชบอร์ดแพลตฟอร์มเว็บสำหรับมุมมองแบบรวมในทุกเบราว์เซอร์

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

7. เครื่องมือพื้นฐานในเวิร์กโฟลว์ของคุณ

เกณฑ์พื้นฐานจะทำงานได้ดีที่สุดเมื่อผสานรวมเข้ากับเวิร์กโฟลว์ นับตั้งแต่วันนี้เป็นต้นไป RUM Archive ของ Akamai มีเครื่องมือใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน RUM Archive Insights เป็นครั้งแรกที่คุณจะเห็นส่วนแบ่งของผู้ใช้ทั่วโลกของเวอร์ชันพื้นฐานและฟีเจอร์ที่ปลดล็อกด้วย Baseline เวอร์ชันนั้นคู่กัน

8. การดื่มน้ำบางส่วนใน Angular ช่วยให้ประสิทธิภาพดีขึ้น

เราเชื่อว่าหนึ่งในแพลตฟอร์มที่ดีที่สุดสำหรับการสร้างและทำให้เว็บแอปใช้งานได้คือ Angular ตอนนี้เรากำลังปรับปรุงการเพิ่มปริมาณน้ำบางส่วน ดังนั้น JavaScript จะโหลดและเพิ่มปริมาณน้ำบางส่วนในแอปเฉพาะเมื่อจำเป็นเท่านั้น ซึ่งช่วยปรับปรุง Core Web Vitals สำหรับแอปประสิทธิภาพที่อ่อนไหวได้อย่างมาก เข้าไปดูได้ในตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์ ในอีกไม่กี่สัปดาห์ข้างหน้า

9. รีแอ็กชันแบบละเอียดเชิงมุมพร้อม Signals พร้อมใช้งานทันที

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

โดย API เชิงรับที่อิงตามสัญญาณพร้อมให้ใช้งานแล้วทันที การตรวจจับการเปลี่ยนแปลงแบบละเอียดจะพร้อมใช้งานภายในปีนี้

10. สร้างประสบการณ์ที่สมจริงแบบ 3 มิติใน Maps JavaScript API

เรากำลังปลดล็อกวิธีใหม่ๆ ในการสร้างประสบการณ์เว็บที่สมจริง โดยการนำแผนที่ 3 มิติแบบภาพเสมือนจริงมาไว้ใน Maps JavaScript API จาก Google Maps Platform ที่เราคุ้นเคยกันดี ตอนนี้คุณสามารถใช้ประโยชน์จากเทคโนโลยีการแสดงผลของ Google เพื่อแสดงแผนที่ 3 มิติที่สมบูรณ์ได้ในความเร็วที่ผู้ใช้คาดหวัง และส่วนที่ดีที่สุดคือ คุณสามารถ เริ่มต้นได้จากโค้ดบรรทัดเดียว

เราแทบอดใจรอไม่ไหวที่จะได้เห็นประสบการณ์สุดสมจริงที่น่าตื่นตาตื่นใจที่คุณจะได้สร้างขึ้น ดูข้อมูลเพิ่มเติม


ในทุกๆ วัน คุณกำลังก้าวข้ามความซับซ้อนของการพัฒนา ก้าวข้ามขีดจำกัดของสิ่งที่เป็นไปได้ เรายินดีที่ได้ช่วยคุณสร้างประสบการณ์ใหม่ๆ ให้พวกเราทุกคนได้สนุกกัน ไปที่ developer.chrome.com และ web.dev เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเว็บที่มีประสิทธิภาพนี้ซึ่งใช้งานง่ายขึ้น และอย่าลืมติดต่อเราบน X, YouTube และตอนนี้คือ LinkedIn

แล้วพบกันในงาน I/O ครั้งถัดไป