היום אנחנו רוצים לשתף מידע נוסף על המסע של Chrome ושל Astro עם View Transitions API. בין היתר, קהילת Astro אימצה את ה-API והתנסיה בו בשלב מוקדם, כדי להדגיש את האפשרויות לקהילה הרחבה יותר. אנחנו שמחים לשתף מידע נוסף על התמיכה המובנית החדשה ב-View Migrates ב-Astro 3.0.
רקע
מעברים חלקים בין מצבים שונים של הדף, המכונים מעברי מצב, היו תמיד היבט מורכב של יצירת חוויות אינטרנט חלקות ואנימציה באינטרנט. למרות הזמינות של כלים כגון מעברי CSS, הנפשות CSS ו-Web Animation API, יצירת מעברי מצבים נותרה משימה מרתיעה. אחד האתגרים הוא הטיפול באינטראקציה ברכיבים יוצאים, דבר שעלול להפוך את המעברים למורכבים יותר.
בנוסף, קשה לשמור על מיקום הקריאה ועל המיקוד של מכשירי המסייעים. בנוסף, ההתמודדות עם הבדלים במיקום הגלילה הופכת את המעברים בין מצבים לתהליך מסורבל. כל הגורמים האלה תורמים למורכבות של העברת מעברים חלקים בין רכיבים שונים בדף אינטרנט
ה-View Transitions API הופיע כפתרון של הדפדפן לאתגרים האלה. ה-API החדש הזה מספק דרך קלה יותר לשנות את ה-DOM בשלב אחד תוך יצירת מעבר מונפש בין שני מצבים.
ההשקה של View Migrates API ב-Chrome 111 סימנה את תחילתו של חזון רחב יותר לגבי תמיכה במעבר בכל האתרים, ולא רק באפליקציות אינטרנט שמבוססות על JavaScript. בקרוב יש שיפורים נוספים. בעתיד Chrome עשוי לנסות תוספות מלהיבות כמו מעברים בין מסמכים, אנימציות שמבוססות על קומפוזיטור, מעברים בין תחומים וקבוצות מעבר בתוך שכבות.
ניתוחים מוקדמים עם מעברים בין צפיות
המסע של Chrome עם ממשק ה-API של מעברי התצוגה לא היה מבודד. משוב ושיתוף פעולה ממפתחים, מחברי מסגרות ומקבוצת עבודה של CSS מילאו תפקיד קריטי בעיצוב התכונה במהלך השנים.
לניסויים של המפתחים היה תפקיד קריטי בשלב מוקדם. הגרסאות המוקדמות של ה-API לא תמכו באנימציות CSS, והמעברים הוגבלו לכמה הגדרות קבועות מראש מגבילות. משוב מוקדם הבהיר שהמפתחים רוצים שהמעברים יהיו ניתנים להתאמה אישית מלאה ואקספרסיביים. שיתוף הפעולה ההדדי הזה מבטיח שה-API תוכנן עם איזון של ברירות מחדל טובות, יכולת הרחבה והתאמה אישית.
Astro הייתה אחת מהמסגרות האלו שכבר התבססו על המעברים להצגת מודעות בתחילת הדרך. המשך המאמר הזה הוא מנקודת המבט של צוות Astro, ומשתף את ניסיונם במציאת המעברים של View, ההטמעה שלהם והבאה שלהם בחזית ובמרכז לחוויית פיתוח האינטרנט.
למה אסטרו מהמר על מעברי צפיות
אסטרו חיפשה משהו כמו הצגת מעברים במשך הרבה זמן. Astro היא מסגרת אינטרנט של JavaScript שמעבדת את רכיבי ממשק המשתמש שלך ל-HTML קומפקטי, כדי להשיג ביצועים מהירים יותר של טעינת דפים. Astro מעביר באופן מכוון כמה שיותר עבודה ממכשיר הלקוח. אתרי אסטרו משתמשים בניווט בדפי דפדפן מקוריים, בעוד שמסגרות אינטרנט אחרות עלולות לפרוץ לניווט בדפדפן עם ניתוב בצד הלקוח של JavaScript במקום זאת.
הפשרה הזאת יצרה אתגר לצוות של Astro: איך אסטרו יכולה להנפיש מעברים בין דפים ולספק עקביות בממשק המשתמש דמוי-אפליקציה בדפים, מבלי לאמץ ניתוב בצד הלקוח?
הצגת המעברים הייתה התשובה. בעזרת View Transitions, Astro יכולה לספק את אותן תכונות ניתוב שקיימות במסגרות אינטרנט של SPA שמבוססות על JavaScript, אבל בלי תקורת הביצועים והמורכבות של ניתוב בצד הלקוח. מסגרות אחרות ניגשו למעברים של View כפרטים אופציונליים להטמעה, אבל עבור Astro זה היה משהו הרבה יותר גדול.
השאלה הבאה שצוות אסטרו היה צריך לענות עליה הייתה "איך?" הצוות חיפש השראה בפרויקטים כמו Turbo , Swup ו-Livewire, ואפילו יצר אב-טיפוס של כמה גישות דומות בתוך 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 Migrates API כבר היה חזק ונוכחי גם בלי המוצר מורכב יותר מדי. לאחר שראה כמה הדגמות מוקדמות, צוות Astro מכר על הרעיון של Astro API פשוט שיכול להתאים ככל האפשר לממשקי ה-API של הדפדפן. במקום לראות את המעברים של View כפרטים בלתי נראה של יישום שמוסתרים בתוך 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 Migrates API החדש אל Astro וספקו גיבויים אוטומטיים שיעזרו לכם להגיע לכמה שיותר אתרים ודפדפנים. התמיכה החלופית היא חיונית, כי רוב הדפדפנים (מחוץ ל-Chrome) עדיין לא הציגו תמיכה מלאה במעברים של תצוגה מקורית.
השקת תמיכה רשמית ב-Astro
Astro פרסמה תמיכה ניסיונית במעברים בין תצוגות ב-Astro 2.9. התגובה מיד הייתה חיובית. מפתחים התחילו לשתף הדגמות מדהימות של כל כך הרבה תרחישי שימוש שונים, ובמקרים מסוימים אפילו להעביר את הכול לייצור.
Astro 3.0, מסיים את התמיכה ומבטל את הסימון של ממשק ה-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 של הפלטפורמה הוא היכולת להתנסות ביצירת תכונות חדשות מעל ה-API המקורי של View Migrates. לדוגמה, הוראת Astro transition:persist החדשה מאפשרת לכל רכיב להישאר פעיל לאורך ניווט בדף מלא. התכונה הזו מפעילה אלמנטים ארוכי טווח, כמו נגני אודיו ווידאו עקביים, פעולה שפעם הייתה אפשרית רק ב-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 מציעה למפתח שימוש בחינם כדי להפוך את המעברים של View לארגונומיים יותר. למשל, הצוות כבר הוסיף תמיכה באנימציות בהתאמה אישית של 'הבא'/'אחורה' וב'אנימציות' ב-HTML דינמי. קשה לעשות את שתי התכונות האלה רק באמצעות ממשקי API ברמה נמוכה יותר, אבל ב-Astro ניתן כמעט ללא מאמץ.
בשלב זה, התכונות האלו קיימות ב-Astro בלבד, אך צוות אסטרו מקווה לספק את חוויות השימוש שלו למחברי המפרט ולקבוצות העבודה כדי לשפר את הדפדפן בעתיד. לדוגמה, על ידי מעקב מקרוב אחר הצעה כדי לשתף אנימציות בקלות רבה יותר ב-CSS.
מה השלבים הבאים?
העתיד של מעברי צפייה באינטרנט הוא ורוד. Astro, Nuxt ו-HTMX סיפקו רמה מסוימת של תמיכה, ורבים אחרים הביעו עניין.
צוות Chrome מתלהב מהתמיכה המקורית של Astro מעברי תצוגה. זהו צעד גדול לפיתוח אתרים שמאפשר חוויות משתמש דינמיות וזרימה יותר. למפתחים, אנחנו ממליצים להתעמק ב'הצגת המעברים' ב-Astro 3.0. בין אם אתם יוצרים דפי נחיתה חדשים או משדרגים אתרים קיימים, השיפורים האלה משנים את כללי המשחק. המעברים של צפיות עזרו למלא את הפער בין מה שהתאפשר באמצעות SPA ו-MPA. נשמח לשמוע ממך אם יש פערי תמיכה נוספים ב-SPA או ב-MPA. אפשר להוסיף הערות במאגר GitHub של WICG כדי לדון בנושא.
אנחנו כבר מקבלים השראה מההדגמות ומהיישומים החדשניים שראינו, ואנחנו מצפים לראות עוד. העבודה שלך עם מעברים בין תצוגות מעצבת את העתיד של האינטרנט. כדאי לנסות את המעברים של View ב-Astro, לשתף את העבודה שלך ואנחנו נמשיך את התהליך הזה ביחד.