आज हम View Transitions API के साथ Chrome और Astro की यात्रा के बारे में ज़्यादा जानकारी देना चाहते हैं. इसमें बताया गया है कि Astro की कम्यूनिटी ने एपीआई को कैसे अपनाया और उससे जुड़े प्रयोग कैसे किए. साथ ही, इसमें यह भी बताया गया है कि इससे कम्यूनिटी को क्या फ़ायदे मिले. हमें यह बताते हुए भी खुशी हो रही है कि Astro 3.0 में, व्यू ट्रांज़िशन के लिए पहले से मौजूद नई सुविधा के बारे में ज़्यादा जानकारी दी जा रही है!
बैकग्राउंड
किसी पेज के अलग-अलग स्टेटस के बीच आसानी से ट्रांज़िशन करना, वेब पर ऐनिमेशन के साथ आसानी से इस्तेमाल किए जा सकने वाले अनुभव बनाने का एक मुश्किल काम रहा है. इसे स्टेटस ट्रांज़िशन कहा जाता है. सीएसएस ट्रांज़िशन, सीएसएस ऐनिमेशन, और वेब ऐनिमेशन एपीआई जैसे टूल उपलब्ध होने के बावजूद, स्टेटस ट्रांज़िशन बनाना मुश्किल काम है. आउटगोइंग एलिमेंट पर इंटरैक्शन को मैनेज करना एक चुनौती है. इससे ट्रांज़िशन ज़्यादा मुश्किल हो सकते हैं.
इसके अलावा, सहायता करने वाले डिवाइसों के लिए, पढ़ने की पोज़िशन और फ़ोकस बनाए रखना मुश्किल होता है. साथ ही, स्क्रोल पोज़िशन में अंतर होने पर, स्टेटस ट्रांज़िशन की प्रोसेस मुश्किल हो जाती है. इन सभी वजहों से, वेबपेज पर अलग-अलग एलिमेंट के बीच आसानी से ट्रांज़िशन लागू करने में मुश्किल आती है
व्यू ट्रांज़िशन एपीआई, ब्राउज़र के लिए इन समस्याओं का समाधान बनकर उभरा. यह नया एपीआई, दो स्टेटस के बीच ऐनिमेशन वाला ट्रांज़िशन बनाते समय, एक ही चरण में डीओएम को बदलने का आसान तरीका उपलब्ध कराता है.
Chrome 111 में व्यू ट्रांज़िशन एपीआई के लॉन्च के साथ, JavaScript पर आधारित वेब ऐप्लिकेशन के साथ-साथ सभी वेबसाइटों के लिए ट्रांज़िशन की सुविधा देने की दिशा में काम शुरू हुआ. आने वाले समय में, इसमें और भी बेहतर सुविधाएं जोड़ी जाएंगी. आने वाले समय में, Chrome में कई नई सुविधाएं जोड़ी जा सकती हैं. जैसे, सभी दस्तावेज़ों में ट्रांज़िशन, कंपोजिटर से चलने वाले ऐनिमेशन, स्कोप वाले ट्रांज़िशन, और नेस्ट किए गए ट्रांज़िशन ग्रुप.
व्यू ट्रांज़िशन की मदद से, एक्सप्लोरेशन की सुविधा को जल्दी उपलब्ध कराना
Chrome ने व्यू ट्रांज़िशन एपीआई के साथ काम करने की शुरुआत, अकेले नहीं की थी. डेवलपर, फ़्रेमवर्क के लेखकों, और सीएसएस वर्किंग ग्रुप के सुझावों और सहयोग से, कई सालों तक इस सुविधा को बेहतर बनाया गया.
शुरुआती दौर में, डेवलपर के प्रयोग ने अहम भूमिका निभाई. एपीआई के शुरुआती वर्शन में सीएसएस ऐनिमेशन काम नहीं करते थे. साथ ही, ट्रांज़िशन की सुविधा कुछ खास प्रीसेट तक ही सीमित थी. शुरुआती सुझावों से यह साफ़ तौर पर पता चला था कि डेवलपर चाहते हैं कि ट्रांज़िशन को पूरी तरह से पसंद के मुताबिक बनाया जा सके और उनमें ज़्यादा जानकारी दी जा सके. इस तरह के सहयोग से यह पक्का किया गया कि एपीआई को डिफ़ॉल्ट रूप से सही तरीके से काम करने वाला, आसानी से इस्तेमाल किया जा सकने वाला, और उपयोगकर्ताओं के हिसाब से बनाया गया हो.
Astro उन फ़्रेमवर्क में से एक था जो व्यू ट्रांज़िशन की सुविधा का इस्तेमाल शुरुआती दौर से कर रहा था. इस लेख के बाकी हिस्से में, Astro टीम के सदस्यों के अनुभव के बारे में बताया गया है. इसमें वे बताते हैं कि वे वेब डेवलपमेंट के अनुभव को बेहतर बनाने के लिए, व्यू ट्रांज़िशन की सुविधा को कैसे ढूंढते हैं, उसे कैसे अपनाते हैं, और उसे कैसे मुख्य तौर पर इस्तेमाल करते हैं.
Astro, व्यू ट्रांज़िशन पर क्यों भरोसा करता है
Astro को व्यू ट्रांज़िशन जैसी सुविधा का इंतज़ार लंबे समय से था. Astro एक JavaScript वेब फ़्रेमवर्क है. यह आपके यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को सर्वर-रेंडर करके, उन्हें हल्का एचटीएमएल बनाता है. इससे पेज तेज़ी से लोड होता है. Astro, क्लाइंट डिवाइस से ज़्यादा से ज़्यादा काम को जान-बूझकर हटा देता है. Astro वेबसाइटें, नेटिव ब्राउज़र पेज नेविगेशन का इस्तेमाल करती हैं. वहीं, अन्य वेब फ़्रेमवर्क, JavaScript क्लाइंट-साइड रूटिंग की मदद से ब्राउज़र नेविगेशन को हाइजैक कर सकते हैं.
इस समझौते की वजह से, Astro की टीम को एक समस्या का सामना करना पड़ा: क्लाइंट-साइड रूटिंग का इस्तेमाल किए बिना, Astro कैसे पेज ट्रांज़िशन को ऐनिमेट कर सकता है और सभी पेजों पर ऐप्लिकेशन जैसे यूज़र इंटरफ़ेस (यूआई) को बनाए रख सकता है?
इसका जवाब, व्यू ट्रांज़िशन था. व्यू ट्रांज़िशन की मदद से, Astro वही रूटिंग सुविधाएं दे सकता है जो JavaScript पर आधारित ज़्यादातर एसपीए वेब फ़्रेमवर्क देते हैं. हालांकि, इसमें क्लाइंट-साइड रूटिंग की परफ़ॉर्मेंस और जटिलता का ओवरहेड नहीं होता. अन्य फ़्रेमवर्क ने व्यू ट्रांज़िशन को लागू करने की जानकारी के तौर पर देखा, लेकिन Astro के लिए यह बहुत बड़ी बात थी.
Astro की टीम को अगला सवाल यह पूछना था कि “कैसे?” टीम ने प्रेरणा पाने के लिए, Turbo, Swup, और Livewire जैसे प्रोजेक्ट देखे. साथ ही, Astro में कुछ मिलते-जुलते तरीकों का प्रोटोटाइप भी बनाया.
शुरुआती कोशिशों में से एक, पूरे पेज का “स्मार्ट ट्रांज़िशन” था. यह एचटीएमएल के हर नए पेज की तुलना, मौजूदा एचटीएमएल से अपने-आप करता था. इसके बाद, 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, ब्राउज़र के 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>
<!-- ... -->
काम आसान हो गया: 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 को प्लैटफ़ॉर्म एपीआई के साथ अलाइन करने का एक अनचाहा फ़ायदा यह है कि नेटिव व्यू ट्रांज़िशन एपीआई के साथ नई सुविधाएं बनाने की कोशिश की जा सकती है. उदाहरण के लिए, Astro transition:persist डायरेक्टिव की मदद से, किसी भी एलिमेंट को पूरे पेज के नेविगेशन में बनाए रखा जा सकता है. इससे, लंबे समय तक चलने वाले एलिमेंट, जैसे कि हमेशा चलने वाले ऑडियो और वीडियो प्लेयर काम करते हैं. पहले, ऐसा सिर्फ़ भारी JavaScript SPAs में ही किया जा सकता था.
<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, डेवलपर के लिए व्यू ट्रांज़िशन को ज़्यादा बेहतर भी बना सकता है. उदाहरण के लिए, टीम ने पहले ही कस्टम फ़ॉरवर्ड/बैकवर्ड ऐनिमेशन और डाइनैमिक एचटीएमएल के लिए ऐनिमेशन की सुविधा जोड़ दी है. इन दोनों सुविधाओं को सिर्फ़ लोअर-लेवल एपीआई की मदद से लागू करना मुश्किल है. हालांकि, Astro में ये सुविधाएं आसानी से लागू की जा सकती हैं.
फ़िलहाल, ये सुविधाएं सिर्फ़ Astro में उपलब्ध हैं. हालांकि, Astro की टीम उम्मीद करती है कि आने वाले समय में ब्राउज़र को बेहतर बनाने के लिए, वे अपने अनुभव को स्पेसिफ़िकेशन के लेखकों और वर्किंग ग्रुप के साथ शेयर करेंगी. उदाहरण के लिए, प्रस्ताव को बारीकी से मॉनिटर करके, सीएसएस में ऐनिमेशन शेयर करना आसान बनाना.
इसके बाद क्या होता है?
आने वाले समय में, वेब पर व्यू ट्रांज़िशन की सुविधा का ज़्यादा इस्तेमाल किया जा सकता है. Astro, Nuxt, और HTMX ने कुछ हद तक सहायता दी है. साथ ही, कई अन्य ने भी अपनी दिलचस्पी दिखाई है.
Chrome की टीम, Astro में व्यू ट्रांज़िशन की सुविधा के काम करने से बेहद खुश है. यह वेब डेवलपमेंट के लिए एक बड़ा कदम है. इससे उपयोगकर्ताओं को बेहतर और डाइनैमिक अनुभव मिलता है. डेवलपर, हमारा सुझाव है कि आप Astro 3.0 में व्यू ट्रांज़िशन की सुविधा को आज़माएं. नए लैंडिंग पेज बनाते समय या मौजूदा साइटों को अपग्रेड करते समय, ये बेहतर सुविधाएं काफ़ी काम की साबित हो सकती हैं. व्यू ट्रांज़िशन की मदद से, एसपीए और एमपीए के बीच के अंतर को कम किया जा सका. Chrome को यह जानकर खुशी होगी कि एसपीए और/या एमपीए के लिए सहायता में और क्या-क्या कमी है. इस बारे में ज़्यादा जानने के लिए, View Transitions WICG GitHub repo पर बेझिझक टिप्पणी करें.
हमने अब तक जो इनोवेटिव डेमो और ऐप्लिकेशन देखे हैं उनसे हमें काफ़ी प्रेरणा मिली है. हमें और भी ऐसे डेमो और ऐप्लिकेशन देखने हैं. व्यू ट्रांज़िशन के साथ आपके काम से, वेब के भविष्य को आकार मिल रहा है. Astro में व्यू ट्रांज़िशन की सुविधा आज़माएं और अपना काम शेयर करें. साथ ही, इस सफ़र को साथ मिलकर जारी रखें.