আমরা gầnে AppSignal-এ একটি "Getting started" পেজ যোগ করেছি, যা নতুন ইউজারদের রিকমেন্ডেড স্টেপস থেকে ভরা একটি পেজ দেখায় যাতে তারা তাদের AppSignal এক্সপেরিয়েন্স থেকে সর্বোচ্চ লাভ উঠাতে পারে।
কিছু ইউজার AppSignal-এ শুরু করার সময় হেল্পিং হ্যান্ড পছন্দ করেন, অন্যদের সোলো এক্সপ্লোর করতে চান বা ইতিমধ্যে AppSignal-এ এক্সপেরিয়েন্সدار।
সব ইউজারকে গাইডেড বা সোলো এক্সপেরিয়েন্সের অপশন দিতে, আমরা একটি টগল ডিজাইন করেছি যা "Getting started" পেজকে হাইড ও শো করে।
চ্যালেঞ্জ
ইউজারদের পার্সোনাল সেটিংস মেনু থেকে "Getting started" পেজ টগল করার ক্ষমতা দেওয়া আপনার অনুমানের চেয়ে কিছুটা চ্যালেঞ্জিং ছিল। কারণ "Getting started" পেজ React.js-এ বিল্ট, আর পার্সোনাল সেটিংস মেনু একটি রেলস-জেনারেটেড টেমপ্লেট যা React অ্যাপের বাইরে রেন্ডার হয়।
আমাদের রেলস-জেনারেটেড এবং React মেনুগুলোর টগল স্টেট সিঙ্ক করতে হয়েছিল, আদর্শভাবে সার্ভার পোলিং ছাড়া করেন্ট স্টেটের জন্য।
সমাধান
নন-React ইন্টারঅ্যাকশনের জন্য, AppSignal StimulusJS ব্যবহার করে "রেলস ওয়ে"—আপনার অ্যাপ্লিকেশনের সব জায়গায় ইন্টারঅ্যাক্টিভ জাভাস্ক্রিপ্ট জয়ের ছিটেচUi ছড়িয়ে।
আমরা 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 মডিফাই না করেই বা ব্যাকএন্ড এবং ফ্রন্টএন্ডের মধ্যে রিকোয়েস্ট পাঠানো এমন জটিল সমাধান বানানো ছাড়া, আলাদা জাভাস্ক্রিপ্ট ইমপ্লিমেন্টেশনের মধ্যে স্টেট ম্যানেজ করতে দেয়।
AppSignal দিয়ে আপনার ফ্রন্ট-এন্ড জাভাস্ক্রিপ্ট মনিটর করুন
আপনি কি আপনার অ্যাপ্লিকেশনের জাভাস্ক্রিপ্ট ফ্রন্ট-এন্ড ডেভেলপারদের দ্বারা ডেভেলপারদের জন্য বने একটি টুল দিয়ে মনিটর করতে চান? ডেভেলপাররা বলেন তারা আমাদের মনিটরিং পছন্দ করেন কারণ আমাদের আছে:
- সহজে নেভিগেটযোগ্য ইন্টিউইটিভ ইন্টারফেস।
- সহজ এবং পূর্বাভাসযোগ্য মূল্য নির্ধারণ।
- ডেভেলপার-টু-ডেভেলপার সাপোর্ট।
আপনি যদি AppSignal-এ নতুন হন, স্ট্রুপওয়াফেলস চাইতে ভুলবেন না! সেগুলোর স্বাদ প্রায় ততটুকু ভালো লাগে যতটুকু ভালো লাগে আপনার অ্যাপ্লিকেশনের সকল মেট্রিক্স আপনার ফিঙ্গারটিপসে পাওয়া 😉🍪
কোনর জেমস
AppSignal-এ ডেভেলপার মার্কেটিং ম্যানেজার। পডকাস্ট অ্যাডিক্ট যিনি ক্যানোলি খুব পছন্দ করেন তাই নিজের নাম Connoli করতে ভাবছেন। তিনি মনে করেন color-এ 'u' থাকে। অফ-ডিউটির সময় মাইকে, স্টেজে বা সোফায় পড়ে থাকতে পারেন তিনি।
কোনর জেমসের সকল আর্টিকেল
রবার্ট বেকম্যান
কো-ফাউন্ডার হিসেবে, রবার্ট আমাদের প্রথম কমিট লিখেছেন। তিনি আমাদের সাপোর্ট রোল-মডেল এবং কোডের সূক্ষ্ম ডিটেইলস সব জানেন। ট্রাভেল এবং ফটোগ্রাফি (একই সাথে)।
রবার্ট বেকম্যানের সকল আর্টিকেল
