วันนี้เราจะมาแชร์ข้อมูลเพิ่มเติมเกี่ยวกับการเดินทางของ Chrome และ Astro ด้วย View Transitions API ซึ่งรวมถึงวิธีที่ชุมชน Astro เปิดรับและทดลองใช้ API ตั้งแต่เนิ่นๆ เพื่อเน้นย้ำถึงความเป็นไปได้สำหรับชุมชนในวงกว้าง นอกจากนี้เรายังตื่นเต้นที่จะได้แชร์เพิ่มเติมเกี่ยวกับการสนับสนุนในตัวใหม่สำหรับ View Transitions ใน Astro 3.0
ที่มา
การเปลี่ยนผ่านอย่างราบรื่นระหว่างสถานะต่างๆ ของหน้าเว็บที่เรียกว่าการเปลี่ยนสถานะเป็นแง่มุมที่ซับซ้อนมาตลอดในการสร้างประสบการณ์การใช้งานแบบภาพเคลื่อนไหวและราบรื่นบนเว็บ แม้ว่าเครื่องมือต่างๆ เช่น การเปลี่ยน CSS, ภาพเคลื่อนไหว CSS และ Web Animation API จะมีให้บริการ แต่การสร้างการเปลี่ยนสถานะก็ยังคงเป็นงานที่ท้าทาย ความท้าทายอย่างหนึ่งคือการจัดการการโต้ตอบกับองค์ประกอบขาออก ซึ่งอาจทำให้การเปลี่ยนผ่านนั้นซับซ้อนขึ้น
นอกจากนี้ การรักษาตำแหน่งการอ่านและโฟกัสสำหรับอุปกรณ์อำนวยความสะดวกก็เป็นเรื่องยาก และการจัดการกับความแตกต่างของตำแหน่งการเลื่อนทำให้การเปลี่ยนสถานะเป็นกระบวนการที่ยุ่งยาก ปัจจัยทั้งหมดนี้ส่งผลต่อความซับซ้อนของการเปลี่ยนองค์ประกอบต่างๆ ในหน้าเว็บอย่างราบรื่น
View Transitions API กลายเป็นโซลูชันของเบราว์เซอร์ที่รับมือกับความท้าทายเหล่านี้ API ใหม่นี้ช่วยให้เปลี่ยน DOM ได้ง่ายขึ้นในขั้นตอนเดียวในขณะที่สร้างการเปลี่ยนแบบภาพเคลื่อนไหวระหว่าง 2 สถานะ
การเปิดตัว View Transitions API ใน Chrome 111 ถือเป็นจุดเริ่มต้นของวิสัยทัศน์ที่กว้างไกลยิ่งขึ้นสำหรับการรองรับการเปลี่ยนผ่านสำหรับเว็บไซต์ทั้งหมด ไม่ใช่แค่เว็บแอปพลิเคชันที่ใช้ JavaScript เท่านั้น การปรับปรุงในอนาคตก็กำลังจะมีขึ้นด้วย Chrome อาจสำรวจส่วนเพิ่มเติมที่น่าสนใจ เช่น การเปลี่ยนผ่านในเอกสาร ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยคอมโพสิต การเปลี่ยนแบบกำหนดขอบเขต และกลุ่มการเปลี่ยนแบบซ้อนในอนาคต
เข้าชมการสาธิต: เรียลไทม์ แหล่งที่มา
การสำรวจขั้นต้นที่มีการเปลี่ยนมุมมอง
เส้นทางการใช้ View Transitions API ของ Chrome ไม่ได้เกิดขึ้นเองแต่เพียงอย่างเดียว ความคิดเห็นและการทำงานร่วมกันจากนักพัฒนาซอฟต์แวร์ ผู้เขียนเฟรมเวิร์ก และคณะทำงานของ CSS ล้วนมีบทบาทสำคัญในการกำหนดลักษณะฟีเจอร์นี้ตลอดระยะเวลาหลายปี
การทดสอบของนักพัฒนาแอปมีบทบาทสำคัญตั้งแต่เนิ่นๆ API เวอร์ชันแรกๆ ไม่รองรับภาพเคลื่อนไหว CSS และการเปลี่ยนจะถูกจำกัดไว้สำหรับค่าที่กำหนดล่วงหน้าเพียงไม่กี่รายการ ความคิดเห็นในช่วงแรกแสดงให้เห็นว่านักพัฒนาแอปต้องการให้การเปลี่ยนผ่านที่ปรับแต่งได้และแสดงออกมาอย่างเต็มที่ การร่วมมือระหว่างกันนี้ช่วยให้มั่นใจได้ว่า API ได้รับการออกแบบมาอย่างสมดุลระหว่างค่าเริ่มต้นที่ดี ความสามารถในการขยายการใช้งาน และการปรับแต่ง
Astro เป็นหนึ่งในเฟรมเวิร์กที่เปลี่ยนมาใช้มุมมองการเปลี่ยนภาพตั้งแต่ช่วงแรกๆ ส่วนที่เหลือของบทความนี้มาจากมุมมองของทีม Astro และจะแชร์ประสบการณ์ในการค้นหา การนำไปใช้ และการนำ View Transitions มาใช้เป็นหลักในการพัฒนาเว็บ
ทำไมจึงต้องเดิมพัน Astro กับการเปลี่ยนมุมมอง
Astro ได้ค้นหาบางสิ่ง เช่น ดูการเปลี่ยนภาพมาเป็นเวลานาน Astro เป็นเว็บเฟรมเวิร์ก JavaScript ที่เซิร์ฟเวอร์แสดงผลคอมโพเนนต์ UI ไปยัง HTML ขนาดเล็กเพื่อให้โหลดหน้าเว็บได้เร็วขึ้น Astro ตั้งใจจะย้ายงานออกจากอุปกรณ์ไคลเอ็นต์ให้ได้มากที่สุด เว็บไซต์ Astro ใช้การนำทางหน้าเบราว์เซอร์ในเครื่อง ซึ่งเว็บเฟรมเวิร์กอื่นๆ อาจลักลอบใช้บัญชีโดยใช้การกำหนดเส้นทางฝั่งไคลเอ็นต์ของ JavaScript แทน
การทดแทนกันนี้สร้างความท้าทายให้กับทีม Astro นั่นก็คือ Astro จะทำภาพเคลื่อนไหวการเปลี่ยนหน้าและมอบ UI ที่เหมือนกับแอปในหน้าเว็บต่างๆ โดยไม่ต้องใช้การกำหนดเส้นทางฝั่งไคลเอ็นต์ได้อย่างไร
"มุมมองการเปลี่ยนภาพ" คือคำตอบ เมื่อใช้มุมมองการเปลี่ยน Astro จะสามารถให้บริการฟีเจอร์การกำหนดเส้นทางแบบเดียวกับเว็บเฟรมเวิร์ก SPA ที่เน้น JavaScript ได้ แต่จะไม่ลดค่าใช้จ่ายในประสิทธิภาพและความซับซ้อนของการกำหนดเส้นทางฝั่งไคลเอ็นต์ เฟรมเวิร์กอื่นๆ นั้นใช้ View Transitions เป็นรายละเอียดการปรับใช้งานที่ไม่บังคับ แต่สำหรับ 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) ยังไม่ได้ให้การสนับสนุนอย่างเต็มรูปแบบสำหรับการเปลี่ยน View แบบเนทีฟ
การเปิดตัวการสนับสนุนอย่างเป็นทางการใน Astro
Astro ได้เปิดตัวการรองรับ View Transitions รุ่นทดลองใน 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 แบบเนทีฟ เช่น คำสั่ง Astro transition:persist ใหม่จะทำให้องค์ประกอบต่างๆ ยังคงอยู่ในการนำทางแบบเต็มหน้า ซึ่งจะขับเคลื่อนองค์ประกอบที่มีอายุยาวนาน เช่น โปรแกรมเล่นเสียงและวิดีโอแบบถาวร ซึ่งเป็นสิ่งที่เคยทำได้เฉพาะใน JavaScript SPA สำหรับใช้งานหนักเท่านั้น
<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 ได้ง่ายขึ้น
สิ่งที่จะเกิดขึ้นต่อไป
อนาคตของ View Transitions บนเว็บนั้นกำลังสดใส Astro, Nuxt และ HTMX ทุกคนได้รับการสนับสนุนในระดับหนึ่งแล้ว และบริษัทอื่นๆ อีกมากก็แสดงความสนใจ
ทีม Chrome ตื่นเต้นกับการรองรับการเปลี่ยนรุ่น View ของ Astro นี่เป็นก้าวสำคัญสำหรับการพัฒนาเว็บ ซึ่งช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่มีประสิทธิภาพและคล่องตัวมากขึ้น นักพัฒนาซอฟต์แวร์ เราขอแนะนำให้คุณเจาะลึกรายละเอียดเกี่ยวกับ "มุมมองการเปลี่ยนภาพ" ใน Astro 3.0 ไม่ว่าคุณจะสร้างหน้า Landing Page ใหม่หรืออัปเกรดเว็บไซต์ที่มีอยู่แล้ว การปรับปรุงเหล่านี้จะเป็นตัวเปลี่ยนเกม View Transitions ได้ช่วยเติมเต็มช่องว่างระหว่างศักยภาพของ SPA และ MPA Chrome อยากทราบความคิดเห็นของคุณว่ามีช่องโหว่ในการรองรับ SPA และ/หรือ MPA หรือไม่ โปรดแสดงความคิดเห็นในดูที่เก็บ GitHub ของ WICG เพื่อพูดคุยเกี่ยวกับเรื่องนี้เพิ่มเติม
เราได้รับแรงบันดาลใจจากการสาธิตและแอปพลิเคชันที่เป็นนวัตกรรมใหม่ที่เราเห็น และเราอยากเห็นข้อมูลเพิ่มเติม การทำงานร่วมกับมุมมองการเปลี่ยนรุ่นกำลังช่วยสร้างอนาคตของเว็บ ลองใช้ View Transitions ใน Astro แล้วแชร์งานของคุณ แล้วร่วมเดินทางไปด้วยกัน