हमने हाल ही में AppSignal पर एक "Getting started" पेज जोड़ा है, जो नए उपयोगकर्ताओं को अनुशंसित चरणों से भरा एक पेज दिखाता है ताकि उन्हें अपने AppSignal अनुभव का अधिकतम लाभ उठाने में मदद मिल सके।
कुछ उपयोगकर्ता AppSignal के साथ शुरुआत करते समय एक मददगार हाथ का आनंद लेते हैं, जबकि अन्य हमारे उत्पाद को अकेले तलाशना पसंद करते हैं या उनके पास पहले से ही AppSignal के साथ अनुभव है।
अपने सभी उपयोगकर्ताओं को निर्देशित या एकल अनुभव का विकल्प देने के लिए, हमने एक टॉगल डिज़ाइन किया जो "Getting started" पेज को छुपाता और दिखाता है।
चुनौती
उपयोगकर्ताओं को उनके व्यक्तिगत सेटिंग्स मेनू से "Getting started" पेज को टॉगल करने की क्षमता देना अपेक्षा से थोड़ा अधिक चुनौतीपूर्ण था। ऐसा इसलिए है क्योंकि "Getting started" पेज React.js में बनाया गया है, और व्यक्तिगत सेटिंग्स मेनू एक रेल्स-जनरेटेड टेम्पलेट है जो React ऐप के बाहर रेंडर किया गया है।
हमें रेल्स-जनरेटेड और React मेनू पर टॉगल स्थिति को सिंक करने का एक तरीका खोजना था, आदर्श रूप से वर्तमान स्थिति के लिए सर्वर को पोल किए बिना।
समाधान
हमारे गैर-React इंटरैक्शन के लिए, AppSignal "रेल्स वे" में StimulusJS का उपयोग करता है, जो आपके एप्लिकेशन में इंटरैक्टिव जावास्क्रिप्ट खुशी के छिड़काव जोड़ता है।
हमने StimulusJS वैनिला JS को चुना क्योंकि इसमें एक मानकीकृत संरचना है जो अच्छी तरह से प्रलेखित है और किसी भी रेल्स डेवलपर द्वारा कुछ जावास्क्रिप्ट अनुभव के साथ आसानी से अपनाया जा सकता है।
React.js और StimulusJS को सिंक में रखने के लिए, हमने डॉक्यूमेंट बॉडी पर डिस्पैच किए गए कस्टम इवेंट बनाए। हमने अपने React और StimulusJS सेटअप को हमारे hide_getting_started इवेंट के लिए कनेक्ट और सुनने के लिए कॉन्फ़िगर किया।
StimulusJS में
जब StimulusJS कंट्रोलर कनेक्ट होता है, तो हम डॉक्यूमेंट पर इवेंट सुनते हैं। अपने जावास्क्रिप्ट को साफ और सुव्यवस्थित रखने के लिए, हम डिस्कनेक्ट पर इवेंट लिस्टनर को हटा देते हैं:
React.js में
हम React.js में वही काम करते हैं जो हम StimulusJS में करते हैं। हमारा React.js कोड डॉक्यूमेंट पर इवेंट सुनता है और डिस्कनेक्ट पर इवेंट लिस्टनर को हटा देता है:
टॉगल ऑन, टॉगल ऑफ
इस सेटअप के साथ, हम अपने स्वतंत्र React.js और StimulusJS कार्यान्वयन दोनों से कस्टम इवेंट उत्सर्जित कर सकते हैं, जिससे वे एक दूसरे के साथ बातचीत कर सकते हैं और हमेशा सही स्थिति को प्रतिबिंबित कर सकते हैं:
जावास्क्रिप्ट के बारे में सबसे अच्छी बात यह है कि हमारे जैसे परिदृश्य में भी, जहां आप विभिन्न फ्रेमवर्क का उपयोग करते हैं, आप अपने React.js या StimulusJS कंपोनेंट्स और कंट्रोलर के बाहर परिवर्तनों को संभालने के लिए इवेंट का उपयोग कर सकते हैं, बिना DOM को संशोधित किए या अधिक जटिल समाधान बनाए जो बैक-एंड और फ्रंट-एंड के बीच अनुरोध आगे-पीछे भेजते हैं।
यह सरल और सीधा समाधान आपको DOM को संशोधित किए बिना या बैक-एंड और फ्रंट-एंड के बीच अनुरोध आगे-पीछे भेजने वाले अधिक जटिल समाधान बनाए बिना विभिन्न जावास्क्रिप्ट कार्यान्वयन के बीच स्थिति को प्रबंधित करने की अनुमति देता है।
AppSignal के साथ अपने फ्रंट-एंड जावास्क्रिप्ट की निगरानी करें
क्या आप अपने एप्लिकेशन के जावास्क्रिप्ट फ्रंट-एंड की निगरानी डेवलपर्स द्वारा डेवलपर्स के लिए बनाए गए टूल के साथ करना चाहेंगे? डेवलपर्स कहते हैं कि वे हमारी निगरानी का उपयोग करने का आनंद लेते हैं क्योंकि हमारे पास है:
- एक सहज इंटरफ़ेस जो नेविगेट करने में आसान है।
- सरल और अनुमानित मूल्य निर्धारण।
- डेवलपर-टू-डेवलपर समर्थन।
यदि आप AppSignal में नए हैं, तो कुछ मुफ्त स्ट्रॉपवाफल्स के लिए हमसे पूछना याद रखें! वे लगभग उतने ही अच्छे लगते हैं जितना कि आपकी एप्लिकेशन के सभी मीट्रिक आपकी उंगलियों पर होने का एहसास 😉🍪
Connor James
AppSignal में डेवलपर मार्केटिंग मैनेजर। पॉडकास्ट के दीवाने जो कैनोली को इतना पसंद करते हैं कि वे अपना नाम बदलकर Connoli रखने पर विचार कर रहे हैं। उन्हें लगता है कि color में 'u' होता है। आप उन्हें माइक पर, मंच पर, या ऑफ ड्यूटी होने पर सोफे पर लेटे हुए पा सकते हैं।
Connor James के सभी लेख
Robert Beekman
सह-संस्थापक के रूप में, Robert ने हमारा पहला कमिट लिखा। वे हमारे समर्थन रोल-मॉडल भी हैं और कोड में छोटे विवरणों के बारे में सब कुछ जानते हैं। एक ही समय में यात्रा और फोटोग्राफी करते हैं।
Robert Beekman के सभी लेख
