प्रॉम्प्ट और दायरा
एक उत्पाद SPA रूट परिवर्तनों और एक छवि विवरण दृश्य (image detail view) खोलने के लिए View Transition API प्रभावों का उपयोग करना चाहता है। इसके कार्यान्वयन की व्याख्या करें और बताएं कि आप पुराने ब्राउज़रों, prefers-reduced-motion, एसिंक डेटा, फ़ोकस, एनिमेशन विफलता और परफ़ॉर्मेंस फ़ॉलबैक को कैसे संभालते हैं।
यह API की सीमाओं और प्रोग्रेसिव एन्हांसमेंट का परीक्षण करता है, न कि किसी डेमो एनिमेशन का। MDN document.startViewTransition() को सेम-डॉक्यूमेंट अपडेट एंट्री पॉइंट के रूप में परिभाषित करता है और कहता है कि कॉलबैक पूरा होने के बाद ट्रांज़िशन आगे बढ़ता है; क्रॉस-डॉक्यूमेंट ट्रांज़िशन के लिए सेम ओरिजिन और CSS @view-transition की भी आवश्यकता होती है। एनिमेशन को स्टेट परिवर्तनों का समर्थन करना चाहिए और उपयोगिता (usability) को कभी बाधित नहीं करना चाहिए।
साक्षात्कारकर्ता क्या जांच रहा है
पहला, क्या आप सेम-डॉक्यूमेंट SPA, एलिमेंट-स्कोप्ड और क्रॉस-डॉक्यूमेंट ट्रांज़िशन के बीच अंतर कर सकते हैं? दूसरा, क्या आप असमर्थित API, रिजेक्टेड कॉलबैक, रिड्यूस्ड मोशन और पेज से बाहर निकलने की स्थिति को संभाल सकते हैं? तीसरा, क्या आप फ़ोकस, सिमेंटिक DOM, स्क्रॉलिंग और वास्तविक इंटरैक्शन को स्नैपशॉट एनिमेशन के पीछे छिपाने के बजाय सुरक्षित रख सकते हैं?
उत्तर देने से पहले स्पष्ट करने योग्य प्रश्न
- किस सीमा (boundary) पर ट्रांज़िशन हो रहा है? एक सेम-डॉक्यूमेंट DOM अपडेट, एक एलिमेंट, या दस्तावेज़ों के बीच नेविगेशन?
- क्या अपडेट में एसिंक डेटा शामिल है? पहले क्या तैयार होना चाहिए, और अधिकतम प्रतीक्षा समय क्या है?
- पुराने ब्राउज़रों के लिए स्वीकार्य अनुभव क्या है? वही स्टेट अपडेट बिना एनिमेशन के काम करना चाहिए।
- कौन से उपयोगकर्ता मोशन को कम या अक्षम करते हैं?
prefers-reduced-motionऔर एक ऐप सेटिंग कैसे संयोजित होते हैं? - पेज की स्थिति कैसे पुनर्स्थापित की जाती है? फ़ोकस, स्क्रॉल, फ़ॉर्म इनपुट और बैक नेविगेशन?
- परफ़ॉर्मेंस बजट क्या है? स्नैपशॉट स्कोप, अवधि, लो-एंड डिवाइस और समवर्ती (concurrent) ट्रांज़िशन?
30-सेकंड का उत्तर ढांचा
"मैं स्टेट अपडेट को एनिमेशन से अलग रखूंगा: समर्थित होने पर, एक सिंक्रोनस DOM अपडेट को startViewTransition में लपेटें; अन्यथा उसी अपडेट को सीधे चलाएं। रूट या घटक (component) में एसिंक डेटा तैयार करें, कॉलबैक को केवल तैयार स्टेट को कमिट करने पर केंद्रित रखें, और ready, finished और skipTransition पर नज़र रखें। स्कोप को सीमित करने के लिए नामित दृश्यों (named views) का उपयोग करें, prefers-reduced-motion के तहत मोशन को छोटा या अक्षम करें, फ़ोकस और स्क्रॉल को पुनर्स्थापित करें, और सुनिश्चित करें कि एनिमेशन की विफलता इंटरैक्शन को ब्लॉक न कर सके। लो-एंड डिवाइसों पर लंबे कार्यों (long tasks), स्नैपशॉट गणना, पूरा होने के समय और फ़ॉलबैक दर को मान्य करें।"
चरण-दर-चरण गहन विश्लेषण
चरण 1: स्टेट अपडेट और एनिमेशन लक्ष्य को परिभाषित करें
बिना सोचे-समझे पूरे पेज को फ़ेड करने के बजाय, उन दो स्टेट्स के नाम तय करें जिन्हें एनिमेशन जोड़ता है, जैसे कि लिस्ट कार्ड से विवरण पेज या फ़िल्टर किए गए परिणामों से एक नई लिस्ट। अपडेट बिना एनिमेशन के भी सही होना चाहिए; एनिमेशन केवल एक एन्हांसमेंट लेयर है। प्रत्येक नेविगेशन प्रकार के लिए अनुमत ट्रांज़िशन नाम और फ़ॉलबैक व्यवहार को परिभाषित करें।
चरण 2: समर्थन का पता लगाएं और सिंक्रोनस फ़ॉलबैक बनाए रखें
कॉल करने से पहले document.startViewTransition की जांच करें। असमर्थित ब्राउज़र सीधे उसी अपडेट फ़ंक्शन को निष्पादित करते हैं; व्यावसायिक तर्क (business logic) की नकल न करें। नए ब्राउज़र का समर्थन हर पुराने डिवाइस को कवर नहीं करता है, इसलिए MDN के कम्पैटिबिलिटी मार्गदर्शन के अनुसार एक फ़ॉलबैक पथ बनाए रखें।
चरण 3: कॉलबैक और एसिंक डेटा को सीमित करें
updateCallback पुराने-दृश्य के स्नैपशॉट के बाद चलता है; इसका लौटाया गया Promise अगले फ्रेम से पहले पूरा होना चाहिए। जहाँ संभव हो, शुरू करने से पहले डेटा फ़ेच करें। यदि कॉलबैक को प्रतीक्षा करनी ही पड़े, तो एक टाइमआउट सेट करें और ट्रांज़िशन को छोड़ने (skip) की अनुमति दें। एक रिजेक्टेड कॉलबैक सामान्य बिज़नेस एरर हैंडलिंग का पालन करता है और उसे आधे-अधूरे अपडेट किए गए पेज को उजागर नहीं करना चाहिए।
const update = () => renderState(nextState);
if (!document.startViewTransition || reduceMotion) {
update();
} else {
const transition = document.startViewTransition(update);
transition.finished.catch(() => {
// Animation failure does not roll back the completed state update.
});
}चरण 4: नामित दृश्यों (named views) के साथ स्नैपशॉट सीमित करें
केवल उन्हीं तत्वों को एक अद्वितीय view-transition-name दें जो वास्तव में एक स्थान साझा करते हैं। दोहराए गए लिस्ट घटक बिना किसी अस्पष्टता के एक नाम साझा नहीं कर सकते। गतिशील सूचियों (dynamic lists) के लिए, अपडेट करने से पहले पुराने नामों को साफ़ करें और बाद में स्थिर अद्वितीय नाम असाइन करें।
चरण 5: रिड्यूस्ड मोशन और सुलभ (accessible) व्यवहार लागू करें
prefers-reduced-motion: reduce को सुनें, अवधि को शून्य या शून्य के करीब सेट करें, और स्टेट परिवर्तन को बनाए रखें। कीबोर्ड फ़ोकस को न छिपाएं या केवल रंग के माध्यम से परिणाम संप्रेषित न करें। अपडेट के बाद, फ़ोकस को नए व्यू हेडिंग या समकक्ष पर ले जाएं। web.dev चेतावनी देता है कि फ़ुल-स्क्रीन व्यू-ट्रांज़िशन एनिमेशन वेस्टिबुलर विकारों वाले लोगों को असुविधा पहुँचा सकते हैं।
चरण 6: SPA, एलिमेंट और क्रॉस-डॉक्यूमेंट अंतर को संभालें
एक SPA अपने DOM अपडेट को document.startViewTransition के साथ लपेटता है; एक एलिमेंट-स्कोप्ड ट्रांज़िशन कॉलिंग एलिमेंट और उसके वंशजों को प्रभावित करता है; एक क्रॉस-डॉक्यूमेंट नेविगेशन के लिए सेम ओरिजिन और दोनों दस्तावेज़ों में @view-transition ऑप्ट-इन की आवश्यकता होती है। यह न मान लें कि पूरे दस्तावेज़ जीवनचक्र में एक सेम-डॉक्यूमेंट JS कॉलबैक मौजूद है।
चरण 7: स्किप, समवर्ती और विफलता पथ डिज़ाइन करें
तेज़ क्लिक के लिए, पुराने नेविगेशन को रद्द या संयोजित करें ताकि ट्रांज़िशन एक ही नोड के लिए प्रतिस्पर्धा न करें। अटके हुए एनिमेशन को समाप्त करने के लिए skipTransition() या टाइमआउट का उपयोग करें। एक बार बिज़नेस स्टेट अपडेट हो जाने के बाद, दृश्य विफलता (visual failure) के कारण डुप्लिकेट सबमिशन, डुप्लिकेट अनुरोध या गलत रोलबैक नहीं होना चाहिए।
चरण 8: परफ़ॉर्मेंस और वास्तविक उपयोगकर्ता अनुभव को मान्य करें
शुरू से अंत तक के समय, स्किप अनुपात, लंबे कार्यों, CLS, इनपुट विलंब और लो-एंड डिवाइस त्रुटियों की निगरानी करें। बड़ी सूचियों, धीमे नेटवर्क, अस्वीकृत एसिंक कार्य, तेज़ बैक नेविगेशन, स्क्रीन रीडर और रिड्यूस्ड मोशन के साथ परीक्षण करें। पुष्टि करें कि स्नैपशॉट और एनिमेशन कभी भी वास्तविक इंटरैक्शन को अधिक समय तक प्रतीक्षा न कराएं।
समझौते (Trade-offs) और सीमाएं
समझौता 1: फ़ुल-पेज या स्थानीय ट्रांज़िशन
फ़ुल-पेज ट्रांज़िशन सरल होते हैं लेकिन उनमें अधिक स्नैपशॉट की लागत आती है और वे फ़ोकस तथा स्क्रॉल में हस्तक्षेप कर सकते हैं। स्थानीय ट्रांज़िशन के लिए स्थिर नामों और सटीक घटक सीमाओं की आवश्यकता होती है, जो उन्हें बार-बार होने वाले इंटरैक्शन और बड़े पेजों के लिए बेहतर बनाते हैं।
समझौता 2: डेटा की प्रतीक्षा करें या तुरंत ट्रांज़िशन करें
प्रतीक्षा करने से पुरानी/नई सामग्री के बेमेल होने से बचा जा सकता है लेकिन प्रतिक्रिया समय बढ़ जाता है। प्रीफ़ेचिंग को प्राथमिकता दें; अन्यथा स्पष्ट लोडिंग स्थिति दिखाएं। एक ट्रांज़िशन लोडिंग फ़ीडबैक का विकल्प नहीं है।
समझौता 3: कस्टम या ब्राउज़र-डिफ़ॉल्ट एनिमेशन
डिफ़ॉल्ट अधिक सुरक्षित और बनाए रखने में आसान होते हैं। केवल एक स्पष्ट नेविगेशन सिमेंटिक्स और सत्यापन बजट के साथ ही स्यूडो-एलिमेंट एनिमेशन को ओवरराइड करें, और रिड्यूस्ड मोशन के लिए समान रूप से कार्यात्मक स्थिर स्थिति प्रदान करें।
विफलता अभ्यास (Failure drills) और विकास योजना
अभ्यास 1: असमर्थित ब्राउज़र या अस्वीकृत कॉलबैक
असमर्थित ब्राउज़र में सीधे अपडेट करें, Promise को अस्वीकार करें, और सत्यापित करें कि पेज की स्थिति सही बनी रहे। केवल नैदानिक (diagnostic) जानकारी लॉग करें और निरंतर इंटरैक्शन को कभी भी ब्लॉक न करें।
अभ्यास 2: तेज़ नेविगेशन और एसिंक रेस
पहले अनुरोध को धीमा करते हुए दो लिंक पर तेज़ी से क्लिक करें। सत्यापित करें कि पुराना ट्रांज़िशन वर्तमान स्थिति को ओवरराइट नहीं कर सकता है, फ़ोकस वर्तमान पेज पर जाता है, और कोई डुप्लिकेट साइड-इफ़ेक्ट अनुरोध नहीं भेजा जाता है।
अभ्यास 3: रिड्यूस्ड मोशन और लो-एंड डिवाइस
सिस्टम रिड्यूस मोशन को सक्षम करें और CPU-बाधित डिवाइस पर एक बड़ी-सूची वाला ट्रांज़िशन चलाएं। पुष्टि करें कि एनिमेशन अक्षम या छोटा कर दिया गया है, जबकि इनपुट विलंब और लेआउट स्थिरता बजट के भीतर रहती है।
सामान्य गलतियाँ और फ़ॉलो-अप
गलती 1: कोई फ़ॉलबैक पथ न होना
असमर्थित API को भी वही DOM या रूट अपडेट उत्पन्न करना चाहिए। प्रोग्रेसिव एन्हांसमेंट बिज़नेस स्टेट को एनिमेशन की सफलता से नहीं बांध सकता।
गलती 2: कॉलबैक के अंदर नेटवर्क के लिए हमेशा प्रतीक्षा करना
स्नैपशॉट के बाद लंबे समय तक प्रतीक्षा करने से पुराना पेज फ़्रीज़ हो जाता है। डेटा पहले तैयार करें या टाइमआउट सेट करें और एनिमेशन को छोड़ दें।
गलती 3: कई तत्वों को एक साझा नाम देना
डुप्लिकेट नाम मिलान संबंधी अस्पष्टता और अतिरिक्त स्नैपशॉट बनाते हैं। केवल उसी तत्व को नाम दें जो वास्तव में चलता है और उसका नाम अद्वितीय और स्थिर रखें।
गलती 4: फ़ोकस और स्क्रॉल की उपेक्षा करना
एक पूर्ण दृश्य ट्रांज़िशन कीबोर्ड उपयोगकर्ताओं को सही स्थान पर वापस नहीं लाता है। फ़ोकस, स्क्रॉल और सिमेंटिक हेडिंग को स्पष्ट रूप से पुनर्स्थापित करें।
गलती 5: रिड्यूस्ड मोशन को सुविधा हटाने के रूप में देखना
उपयोगकर्ता कम मोशन मांगते हैं, कम स्टेट या जानकारी नहीं। समान इंटरैक्शन बनाए रखें और केवल एनिमेशन प्रस्तुति बदलें।
गलती 6: एनिमेशन विफल होने पर बिज़नेस स्टेट को रोल बैक करना
finished अस्वीकृति आमतौर पर एक विज़ुअल-स्टेज विफलता का वर्णन करती है। पहले से सफल हो चुके स्टेट अपडेट को पुनः सबमिट या रोल बैक न करें।