วันนี้เราขอแชร์ข้อมูลเพิ่มเติมเกี่ยวกับเส้นทางของ Chrome และ Astro กับ View Transitions API ซึ่งรวมถึงวิธีที่ชุมชน Astro ยอมรับและทดลองใช้ API ตั้งแต่เนิ่นๆ เพื่อแสดงให้เห็นถึงศักยภาพของ API นี้ต่อชุมชนในวงกว้าง นอกจากนี้ เรายังยินดีที่จะได้แชร์ข้อมูลเพิ่มเติมเกี่ยวกับการรองรับการเปลี่ยนมุมมองในตัวแบบใหม่ใน Astro 3.0
ข้อมูลเบื้องต้น
การเปลี่ยนสถานะต่างๆ ของหน้าเว็บอย่างราบรื่นหรือที่เรียกว่าการเปลี่ยนสถานะเป็นองค์ประกอบที่ซับซ้อนในการสร้างประสบการณ์การใช้งานที่ราบรื่นและมีภาพเคลื่อนไหวบนเว็บเสมอมา แม้ว่าจะมีเครื่องมือต่างๆ เช่น การเปลี่ยน CSS, ภาพเคลื่อนไหว CSS และ Web Animation API แต่การสร้างการเปลี่ยนสถานะยังคงเป็นงานที่ยากอยู่ ปัญหาอย่างหนึ่งคือการจัดการการโต้ตอบกับองค์ประกอบขาออก ซึ่งอาจทําให้การเปลี่ยนผ่านมีความซับซ้อนมากขึ้น
นอกจากนี้ การรักษาตำแหน่งการอ่านและโฟกัสสำหรับอุปกรณ์ช่วยเหลือยังทำได้ยาก และการจัดการกับความแตกต่างของตําแหน่งการเลื่อนทําให้การเปลี่ยนสถานะเป็นกระบวนการที่ยุ่งยาก ปัจจัยทั้งหมดเหล่านี้ทําให้การใช้ทรานซิชันที่ราบรื่นระหว่างองค์ประกอบต่างๆ ในหน้าเว็บมีความซับซ้อน
View Transitions API จึงเกิดขึ้นเพื่อแก้ปัญหาเหล่านี้ในเบราว์เซอร์ API ใหม่นี้ช่วยให้เปลี่ยน DOM ได้ง่ายขึ้นในขั้นตอนเดียวขณะสร้างการเปลี่ยนภาพเคลื่อนไหวระหว่าง 2 สถานะ
การเปิดตัว View Transitions API ใน Chrome 111 เป็นจุดเริ่มต้นของวิสัยทัศน์ที่กว้างขึ้นสำหรับการรองรับการเปลี่ยนผ่านสำหรับเว็บไซต์ทั้งหมด ไม่ใช่แค่เว็บแอปพลิเคชันที่ใช้ JavaScript และเราจะทำการปรับปรุงเพิ่มเติมในอนาคตด้วย Chrome อาจเพิ่มฟีเจอร์ใหม่ๆ ที่น่าสนใจ เช่น การเปลี่ยนภาพในเอกสาร ภาพเคลื่อนไหวที่ขับเคลื่อนโดยคอมโพสิเตอร์ การเปลี่ยนภาพที่มีขอบเขต และกลุ่มการเปลี่ยนภาพแบบซ้อนกันในอนาคต
ไปที่การสาธิต: เวอร์ชันที่ใช้จริง, แหล่งที่มา
การสํารวจระยะแรกที่มีการเปลี่ยนมุมมอง
เส้นทางของ Chrome กับ View Transitions API ไม่ได้เป็นเส้นทางเดียว ความคิดเห็นและการทํางานร่วมกันจากนักพัฒนาซอฟต์แวร์ ผู้เขียนเฟรมเวิร์ก และกลุ่มทํางาน CSS ล้วนมีบทบาทสําคัญในการกำหนดรูปร่างหน้าตาของฟีเจอร์นี้ตลอดหลายปีที่ผ่านมา
การทดสอบของนักพัฒนาแอปมีบทบาทสำคัญตั้งแต่เนิ่นๆ API เวอร์ชันแรกๆ ไม่รองรับภาพเคลื่อนไหว CSS และทรานซิชันถูกจํากัดไว้ที่ค่าที่กำหนดล่วงหน้าแบบจํากัดเพียงไม่กี่รายการ ความคิดเห็นในช่วงแรกแสดงให้เห็นอย่างชัดเจนว่านักพัฒนาแอปต้องการให้ทรานซิชันปรับแต่งได้อย่างเต็มที่และแสดงออกได้อย่างเต็มที่ การทำงานร่วมกันนี้ช่วยให้มั่นใจได้ว่า API ได้รับการออกแบบให้มีค่าเริ่มต้นที่ดี ความสามารถในการขยาย และการปรับแต่งอย่างสมดุล
Astro เป็นหนึ่งในเฟรมเวิร์กที่ใช้การเปลี่ยนมุมมองตั้งแต่เนิ่นๆ ส่วนที่เหลือของบทความนี้มาจากมุมมองของทีม Astro และแชร์ประสบการณ์ในการค้นหา การนำไปใช้ และทำให้การเปลี่ยนมุมมองเป็นหัวใจสําคัญของประสบการณ์การพัฒนาเว็บ
เหตุผลที่ Astro เดิมพันกับการเปลี่ยนไปดูเนื้อหา
Astro มองหาฟีเจอร์อย่างการเปลี่ยนมุมมองมาอย่างยาวนาน Astro เป็นเฟรมเวิร์กเว็บ JavaScript ที่แสดงผลคอมโพเนนต์ UI บนเซิร์ฟเวอร์เป็น HTML ที่มีน้ำหนักเบาเพื่อให้หน้าเว็บโหลดได้เร็วขึ้น Astro ตั้งใจย้ายงานออกจากอุปกรณ์ของลูกค้าให้ได้มากที่สุด เว็บไซต์ Astro ใช้การนําทางหน้าเว็บของเบราว์เซอร์เอง ซึ่งเฟรมเวิร์กเว็บอื่นๆ อาจลักลอบใช้การนําทางของเบราว์เซอร์ด้วยการกำหนดเส้นทางฝั่งไคลเอ็นต์ JavaScript แทน
ข้อเสียนี้ทำให้เกิดปัญหาสําหรับทีม Astro ว่า Astro จะแสดงภาพเคลื่อนไหวการเปลี่ยนหน้าเว็บและคง UI ไว้อย่างถาวรในหน้าต่างๆ ได้อย่างไรโดยไม่ต้องใช้การกำหนดเส้นทางฝั่งไคลเอ็นต์
การเปลี่ยนมุมมองคือคำตอบ การเปลี่ยนมุมมองช่วยให้ Astro มีฟีเจอร์การกำหนดเส้นทางเดียวกับเฟรมเวิร์กเว็บ SPA ที่มี JavaScript จำนวนมาก แต่ไม่มีค่าใช้จ่ายเพิ่มเติมด้านประสิทธิภาพและความซับซ้อนของการกำหนดเส้นทางฝั่งไคลเอ็นต์ เฟรมเวิร์กอื่นๆ ถือว่าการเปลี่ยนเฟรมเป็นรายละเอียดการติดตั้งใช้งานที่ไม่บังคับ แต่สำหรับ Astro การเปลี่ยนเฟรมเป็นสิ่งที่สำคัญกว่ามาก
คำถามถัดไปที่ทีม Astro ต้องตอบคือ "อย่างไร" ทีมได้มองหาแรงบันดาลใจจากโปรเจ็กต์ต่างๆ เช่น Turbo, Swup และ Livewire รวมถึงสร้างต้นแบบแนวทางที่คล้ายกัน 2-3 รายการใน Astro
หนึ่งในความพยายามแรกๆ เกี่ยวข้องกับ "การเปลี่ยนผ่านอัจฉริยะ" แบบเต็มหน้าที่จะเปรียบเทียบหน้า HTML ใหม่ทุกหน้ากับ HTML ปัจจุบันโดยอัตโนมัติ จากนั้นพยายามแทนที่องค์ประกอบทุกรายการพร้อมกันโดยใช้ JavaScript วิธีการนี้มีความชาญฉลาด แต่มีแนวโน้มที่จะเกิดข้อผิดพลาด
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
โชคดีที่ชุมชน Astro แสดงให้เห็นว่า View Transitions API มีประสิทธิภาพอยู่แล้วโดยไม่ต้องทำให้ผลิตภัณฑ์มีความซับซ้อนมากเกินไป หลังจากดูการสาธิตเบื้องต้น ทีม Astro ก็ถูกใจแนวคิดของ Astro API ที่เรียบง่ายซึ่งสามารถจับคู่กับเบราว์เซอร์ API ได้ใกล้เคียงที่สุด แทนที่จะแสดงการเปลี่ยนมุมมองเป็นรายละเอียดการใช้งานที่มองไม่เห็นซึ่งซ่อนอยู่ใน Astro นักพัฒนาแอปอาจเห็นการเปลี่ยนมุมมองได้โดยตรง การปรับ Astro ให้สอดคล้องกับแพลตฟอร์มเว็บโดยตรงและลดความซับซ้อนโดยรวมในฝั่งไคลเอ็นต์
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
งานนี้กลายเป็นเรื่องง่าย: นำ View Transitions API ใหม่มาใช้ใน Astro และระบุทางเลือกสำรองอัตโนมัติที่จะนำไปสู่เว็บไซต์และเบราว์เซอร์มากที่สุด การสนับสนุนสำรองเป็นสิ่งจําเป็น เนื่องจากเบราว์เซอร์ส่วนใหญ่ (นอกเหนือจาก Chrome) ยังไม่รองรับการเปลี่ยนมุมมองแบบเนทีฟอย่างเต็มรูปแบบ
การเปิดตัวการสนับสนุนอย่างเป็นทางการใน Astro
Astro เปิดตัวการรองรับการเปลี่ยนมุมมองเวอร์ชันทดลองใน Astro 2.9 ผลลัพธ์เป็นบวกทันที นักพัฒนาซอฟต์แวร์เริ่มแชร์เดโมที่น่าทึ่งของกรณีการใช้งานที่หลากหลาย และบางกรณีก็นำไปใช้งานจริง
ไปที่การสาธิต: เวอร์ชันที่ใช้จริง, แหล่งที่มา
Astro 3.0 สิ้นสุดการรองรับและยกเลิกการแจ้งว่า View Transitions API เวอร์ชันใหม่ไม่เหมาะสมสำหรับทุกคน ตอนนี้ API ใหม่เหล่านี้พร้อมให้คุณนำไปใช้งานแบบทดลองหรือใช้งานพร้อมกันทั้งหมดแล้ว
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
ประโยชน์ที่ไม่คาดคิดของการปรับ Astro ให้สอดคล้องกับ API ของแพลตฟอร์มคือความสามารถในการทดลองสร้างฟีเจอร์ใหม่ๆ บน View Transitions API เดิม เช่น คำสั่ง transition:persist ของ Astro ใหม่ช่วยให้องค์ประกอบใดๆ คงอยู่ตลอดการนําทางทั้งหน้า ซึ่งจะขับเคลื่อนองค์ประกอบที่มีอายุการใช้งานยาวนาน เช่น โปรแกรมเล่นเสียงและวิดีโอแบบถาวร ซึ่งก่อนหน้านี้ทำได้เฉพาะใน SPA ที่ใช้ JavaScript ที่มีขนาดใหญ่
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
ไปที่การสาธิต: เวอร์ชันที่ใช้จริง, แหล่งที่มา
นอกจากนี้ Astro ยังปรับการเปลี่ยนมุมมองให้เหมาะกับนักพัฒนาแอปมากขึ้นได้อีกด้วย ตัวอย่างเช่น ทีมได้เพิ่มการรองรับภาพเคลื่อนไหวแบบกรอไปข้างหน้า/กรอกลับที่กำหนดเองและภาพเคลื่อนไหวสำหรับ HTML แบบไดนามิกแล้ว ฟีเจอร์ทั้ง 2 อย่างนี้ทําได้ยากด้วย API ระดับล่างเพียงอย่างเดียว แต่ทําได้อย่างง่ายดายใน Astro
ฟีเจอร์เหล่านี้มีให้บริการใน Astro เท่านั้นในตอนนี้ แต่ทีม Astro หวังว่าจะได้ส่งต่อประสบการณ์การใช้งานนี้ไปยังผู้เขียนข้อกำหนดและกลุ่มทำงานเพื่อนำไปปรับปรุงเบราว์เซอร์ในอนาคต เช่น การตรวจสอบข้อเสนออย่างใกล้ชิดเพื่อให้แชร์ภาพเคลื่อนไหวใน CSS ได้ง่ายขึ้น
สิ่งที่จะเกิดขึ้นต่อไป
อนาคตของการเปลี่ยนมุมมองบนเว็บสดใส Astro, Nuxt และ HTMX ทั้งหมดรองรับในระดับหนึ่ง และอีกหลายแพลตฟอร์มก็แสดงความสนใจ
ทีม Chrome ยินดีอย่างยิ่งที่ Astro รองรับการเปลี่ยนมุมมองแบบเนทีฟ นี่เป็นก้าวสําคัญสําหรับการพัฒนาเว็บ ซึ่งช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่นและไดนามิกมากขึ้น นักพัฒนาแอป เราขอแนะนำให้คุณลองใช้การเปลี่ยนมุมมองใน Astro 3.0 ไม่ว่าจะสร้างหน้า Landing Page ใหม่หรืออัปเกรดเว็บไซต์ที่มีอยู่ การปรับปรุงเหล่านี้จะทําให้ทุกอย่างเปลี่ยนแปลงไป การเปลี่ยนมุมมองช่วยเติมเต็มช่องว่างระหว่างสิ่งที่เป็นไปได้ด้วย SPA และ MPA Chrome ยินดีรับฟังความคิดเห็นจากคุณว่ายังมีช่องโหว่อื่นๆ ในการรองรับ SPA และ/หรือ MPA หรือไม่ โปรดแสดงความคิดเห็นใน View Transitions WICG GitHub repo เพื่อพูดคุยเรื่องนี้เพิ่มเติม
เราได้รับแรงบันดาลใจจากเดโมและการใช้งานที่สร้างสรรค์ซึ่งได้เห็นแล้ว และหวังว่าจะได้เห็นสิ่งใหม่ๆ อีกมากมาย ผลงานของคุณเกี่ยวกับการเปลี่ยนมุมมองกำลังกำหนดอนาคตของเว็บ ลองใช้การเปลี่ยนมุมมองใน Astro, แชร์ผลงานของคุณ และมาเดินทางด้วยกันต่อ