आज हम आपको View ट्रांज़िशन एपीआई की मदद से, Chrome और Astro के सफ़र के बारे में ज़्यादा जानकारी देना चाहते हैं. इसमें यह जानकारी भी शामिल है कि Astro समुदाय ने शुरुआत में ही इस एपीआई को कैसे अपनाया और इसे किस तरह से आज़माया. इससे, ज़्यादा से ज़्यादा कम्यूनिटी के लिए इस एपीआई को इस्तेमाल करने की संभावनाओं के बारे में पता चला. साथ ही, हमें एस्ट्रो 3.0 में व्यू ट्रांज़िशन के लिए पहले से मौजूद नए सपोर्ट के बारे में और जानकारी देते हुए खुशी हो रही है!
बैकग्राउंड
किसी पेज की अलग-अलग स्थितियों के बीच आसानी से होने वाला ट्रांज़िशन, जिसे स्टेट ट्रांज़िशन भी कहा जाता है. यह हमेशा से वेब पर बिना किसी रुकावट और ऐनिमेशन वाले अनुभव देने का जटिल पहलू रहा है. सीएसएस ट्रांज़िशन, सीएसएस ऐनिमेशन, और Web ऐनिमेशन एपीआई जैसे टूल उपलब्ध होने के बावजूद, अलग-अलग वर्शन में ट्रांज़िशन करना अब भी एक मुश्किल काम है. इनमें से एक चुनौती, आउटगोइंग एलिमेंट पर इंटरैक्शन को मैनेज करना है. इस वजह से ट्रांज़िशन की प्रोसेस और मुश्किल हो सकती है.
इसके अलावा, पढ़ने की जगह को बनाए रखना और सहायक डिवाइसों पर फ़ोकस करना मुश्किल है. साथ ही, स्क्रोल की स्थिति के अंतर से निपटने के लिए, स्थिति बदलने की प्रक्रिया एक मुश्किल प्रक्रिया बन जाती है. ये सभी बातें, वेबपेज पर मौजूद अलग-अलग एलिमेंट के बीच आसान ट्रांज़िशन लागू करने में मदद करती हैं
इन चुनौतियों से निपटने के लिए, The View ट्रांज़िशन एपीआई की मदद ली गई. यह नया एपीआई, दो स्थितियों के बीच ऐनिमेटेड ट्रांज़िशन बनाते समय, एक ही चरण में डीओएम को बदलने का आसान तरीका देता है.
Chrome 111 में View ट्रांज़िशन एपीआई के लॉन्च ने JavaScript पर आधारित वेब ऐप्लिकेशन के साथ-साथ, सभी वेबसाइटों के लिए ट्रांज़िशन में मदद करने के बड़े विज़न की शुरुआत की. आने वाले समय में इसे बेहतर भी बनाया जा रहा है. आने वाले समय में, Chrome में कई दिलचस्प बदलाव किए जा सकते हैं. जैसे, सभी दस्तावेज़ों में ट्रांज़िशन, कंपोज़िटर के ज़रिए चलाए जाने वाले ऐनिमेशन, स्कोप किए गए ट्रांज़िशन, और नेस्ट किए गए ट्रांज़िशन ग्रुप.
व्यू ट्रांज़िशन के साथ शुरुआती एक्सप्लोरेशन
व्यू ट्रांज़िशन एपीआई के साथ Chrome का सफ़र बहुत अकेला नहीं था. कई सालों में इस सुविधा को बेहतर बनाने में डेवलपर, फ़्रेमवर्क के लेखकों, और सीएसएस के वर्किंग ग्रुप से मिले सुझावों और उनके साथ मिलकर काम करने ने इस सुविधा को तैयार करने में अहम भूमिका निभाई है.
शुरुआत में, डेवलपर एक्सपेरिमेंट ने अहम भूमिका निभाई. एपीआई के सबसे पुराने वर्शन, सीएसएस ऐनिमेशन के साथ काम नहीं करते थे. साथ ही, ट्रांज़िशन के लिए कुछ पाबंदियों वाले प्रीसेट का इस्तेमाल किया जाता था. शुरुआती सुझावों से यह साफ़ तौर पर पता चला कि डेवलपर चाहते थे कि ट्रांज़िशन को पूरी तरह से पसंद के मुताबिक बनाया जा सके और वे सभी को बेहतर तरीके से समझ सकें. साथ मिलकर काम करने से, यह पक्का हुआ कि इस एपीआई को बेहतर डिफ़ॉल्ट, एक्सटेंशन, और कस्टमाइज़ेशन के साथ डिज़ाइन किया गया था.
Astro उन फ़्रेमवर्क में से एक था जिन्होंने शुरुआत में, 'व्यू ट्रांज़िशन' पर ध्यान दिया था. इस लेख का बाकी हिस्सा, Astro टीम के नज़रिए से तैयार किया गया है. इसमें, व्यू ट्रांज़िशन ढूंढने, इस्तेमाल करने, और वेब डेवलपमेंट के अनुभव को बेहतर बनाने के उनके अनुभव के बारे में बताया गया है.
Astro पर व्यू ट्रांज़िशन पर दांव क्यों लगाएं
एस्ट्रो लंबे समय से, व्यू ट्रांज़िशन जैसी किसी चीज़ की तलाश कर रहा था. Astro एक JavaScript वेब फ़्रेमवर्क है, जो तेज़ी से पेज लोड करने के परफ़ॉर्मेंस के लिए आपके यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को लाइटवेट एचटीएमएल पर रेंडर करता है. एस्ट्रो जान-बूझकर क्लाइंट के डिवाइस से ज़्यादा से ज़्यादा काम करने की कोशिश करता है. Astro वेबसाइटें, नेटिव ब्राउज़र पेज नेविगेशन का इस्तेमाल करती हैं. ऐसे में, अन्य वेब फ़्रेमवर्क के बजाय, JavaScript क्लाइंट-साइड रूटिंग का इस्तेमाल करके, ब्राउज़र नेविगेशन को हाइजैक कर सकते हैं.
इस बदलाव की वजह से, Astro टीम के लिए एक चुनौती पैदा हुई: क्लाइंट-साइड रूटिंग का इस्तेमाल किए बिना, Astro पेज के ट्रांज़िशन को कैसे ऐनिमेट कर सकता है और सभी पेजों पर ऐप्लिकेशन जैसा एक जैसा बना सकता है?
'ट्रांज़िशन' देखें. व्यू ट्रांज़िशन के साथ, Astro JavaScript से मिलने वाले, एसपीए वेब फ़्रेमवर्क की तरह ही रूटिंग की सुविधाएं दे सकता है. हालांकि, क्लाइंट-साइड रूटिंग की परफ़ॉर्मेंस और जटिल सुविधाओं की वजह से ऐसा नहीं होगा. अन्य फ़्रेमवर्क में, व्यू ट्रांज़िशन को लागू करने के वैकल्पिक ब्यौरे के तौर पर इस्तेमाल किया गया. हालांकि, 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 ट्रांज़िशन एपीआई पहले से ही बेहतरीन है. इसमें प्रॉडक्ट के इस्तेमाल को ज़्यादा मुश्किल नहीं बनाया गया है. कुछ शुरुआती डेमो देखने के बाद, 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 ट्रांज़िशन एपीआई को Astro में लाएं और अपने-आप फ़ॉलबैक उपलब्ध कराएं. ऐसा करने से, ज़्यादा से ज़्यादा वेबसाइटों और ब्राउज़र पर ये काम हो सकेंगे. फ़ॉलबैक सहायता ज़रूरी है, क्योंकि ज़्यादातर ब्राउज़र (Chrome से बाहर के) ने अभी तक नेटिव व्यू ट्रांज़िशन के लिए पूरी तरह से काम नहीं किया है.
Astro में आधिकारिक सहायता लॉन्च करना
Astro ने Astro 2.9 में प्रयोग के तौर पर, View ट्रांजिशन के लिए सहायता उपलब्ध कराई है. जवाब तुरंत सकारात्मक था. डेवलपर ने इस्तेमाल के अलग-अलग उदाहरणों के शानदार डेमो शेयर करने शुरू किए हैं और कुछ मामलों में तो इन्हें प्रोडक्शन के लिए भी भेज दिया है.
Astro 3.0, सहायता को अंतिम रूप देता है और सभी के लिए नए View ट्रांजिशन एपीआई को फ़्लैग करता है. अब इन नए एपीआई का इस्तेमाल, एक्सपेरिमेंट के तौर पर या एक साथ करने के लिए किया जा सकता है.
<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 एसपीए में ही काम करते थे.
<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 आपसे यह जानना चाहता है कि क्या एसपीए और/या MPA के साथ काम करने में कोई अतिरिक्त अंतर है. इस बारे में ज़्यादा जानकारी पाने के लिए, ट्रांज़िशन से जुड़े WICG GitHub के रेपो पर जाएं पर, टिप्पणी करें.
हम पहले ही उन नए डेमो और ऐप्लिकेशन को इस्तेमाल कर चुके हैं जिन्हें हमने देखा है. साथ ही, हम इस बारे में और जानकारी देखने के लिए उत्सुक हैं. व्यू ट्रांज़िशन के साथ आपका काम, वेब को बेहतर बनाने में मदद कर रहा है. Astro में 'व्यू ट्रांज़िशन' का इस्तेमाल करके, अपना काम शेयर करें. आइए, हम साथ मिलकर इस सफ़र को जारी रखते हैं.