কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্ট ইভেন্টগুলি ব্যবহার করে StimulusJS এর সাথে অবিচ্ছিন্নভাবে React.js একত্রিত করুন

আমরা সম্প্রতি AppSignal-এ একটি "শুরু করা" পৃষ্ঠা যুক্ত করেছি, যা নতুন ব্যবহারকারীদের তাদের AppSignal অভিজ্ঞতা থেকে সর্বাধিক পেতে সাহায্য করার জন্য প্রস্তাবিত পদক্ষেপে ভরা একটি পৃষ্ঠা দেখায়৷

কিছু ব্যবহারকারী অ্যাপসিগন্যালের সাথে শুরু করার সময় সাহায্যের হাত উপভোগ করেন, অন্যরা আমাদের পণ্য একা অন্বেষণ করতে পছন্দ করেন বা ইতিমধ্যেই অ্যাপসিগন্যালের সাথে অভিজ্ঞতা রয়েছে৷

আমাদের সমস্ত ব্যবহারকারীদের একটি নির্দেশিত বা একক অভিজ্ঞতার বিকল্প দেওয়ার জন্য, আমরা একটি টগল ডিজাইন করেছি যা "শুরু করা" পৃষ্ঠাটিকে লুকিয়ে রাখে এবং দেখায়৷

চ্যালেঞ্জ

ব্যবহারকারীদের তাদের ব্যক্তিগত সেটিংস মেনু থেকে "শুরু করা" পৃষ্ঠাটি টগল করার ক্ষমতা দেওয়া আপনার প্রত্যাশার চেয়ে একটু বেশি চ্যালেঞ্জিং ছিল৷ কারণ "শুরু করা" পৃষ্ঠাটি React.js-এ তৈরি করা হয়েছে এবং ব্যক্তিগত সেটিংস মেনু হল একটি Rails-জেনারেটেড টেমপ্লেট যা React অ্যাপের বাইরে রেন্ডার করা হয়েছে।

আমাদের রেল-জেনারেটেড এবং রিঅ্যাক্ট মেনুতে টগল স্টেট সিঙ্ক করার একটি উপায় খুঁজে বের করতে হয়েছিল, আদর্শভাবে বর্তমান অবস্থার জন্য সার্ভারে ভোট না দিয়ে।

সমাধান

আমাদের অ-প্রতিক্রিয়া মিথস্ক্রিয়াগুলির জন্য, AppSignal "Rails way"-এ StimulusJS ব্যবহার করে , আপনার অ্যাপ্লিকেশন জুড়ে জাভাস্ক্রিপ্ট আনন্দের ইন্টারেক্টিভ ছিটানো যোগ করা হচ্ছে।

আমরা StimulusJS ভ্যানিলা JS বেছে নিয়েছি কারণ এটির একটি প্রমিত কাঠামো রয়েছে যা ভালভাবে নথিভুক্ত এবং কিছু জাভাস্ক্রিপ্ট অভিজ্ঞতা সহ যেকোন রেল বিকাশকারী সহজেই গ্রহণ করতে পারে।

React.js এবং StimulusJS কে সিঙ্কে রাখতে, আমরা নথির বডিতে পাঠানো কাস্টম ইভেন্ট তৈরি করেছি। আমাদের hide_getting_started সংযোগ করতে এবং শোনার জন্য আমরা আমাদের প্রতিক্রিয়া এবং StimulusJS সেটআপগুলি কনফিগার করেছি ঘটনা।

StimulusJS এ

StimulusJS কন্ট্রোলার সংযোগ করলে, আমরা নথিতে ইভেন্ট শুনি। আমাদের জাভাস্ক্রিপ্ট পরিষ্কার এবং পরিপাটি রাখতে, আমরা সংযোগ বিচ্ছিন্ন করার সময় ইভেন্ট শ্রোতাকে সরিয়ে দিই:

 

React.js-এ

আমরা React.js-এ একই কাজ করি যেমনটি আমরা StimulusJS-এ করি। আমাদের React.js কোড ডকুমেন্টে ইভেন্ট শোনে এবং সংযোগ বিচ্ছিন্ন হলে ইভেন্ট লিসেনারকে সরিয়ে দেয়:

 

টগল অন, টগল অফ

এই সেটআপের মাধ্যমে, আমরা আমাদের স্বাধীন React.js এবং StimulusJS উভয় বাস্তবায়ন থেকে কাস্টম ইভেন্টগুলি নির্গত করতে পারি, তাদের একে অপরের সাথে যোগাযোগ করতে এবং সর্বদা সঠিক অবস্থা প্রতিফলিত করতে দেয়:

 

জাভাস্ক্রিপ্ট সম্পর্কে দুর্দান্ত জিনিস হল যে এমনকি আমাদের মতো একটি পরিস্থিতিতে, যেখানে আপনি বিভিন্ন ফ্রেমওয়ার্ক ব্যবহার করেন, আপনি আপনার React.js বা StimulusJS উপাদান এবং কন্ট্রোলারের বাইরে পরিবর্তনগুলি পরিচালনা করতে ইভেন্টগুলি ব্যবহার করতে পারেন৷

এই সহজ এবং সরল সমাধানটি আপনাকে DOM পরিবর্তন না করে বা আরও জটিল সমাধান তৈরি না করে বিভিন্ন জাভাস্ক্রিপ্ট বাস্তবায়নের মধ্যে অবস্থা পরিচালনা করতে দেয় যা পিছনের প্রান্ত এবং সামনের প্রান্তের মধ্যে অনুরোধ পাঠায়।

অ্যাপসিগন্যাল দিয়ে আপনার ফ্রন্ট-এন্ড জাভাস্ক্রিপ্ট নিরীক্ষণ করুন

আপনি কি ডেভেলপারদের জন্য ডেভেলপারদের তৈরি একটি টুল দিয়ে আপনার অ্যাপ্লিকেশনের জাভাস্ক্রিপ্ট ফ্রন্ট-এন্ড নিরীক্ষণ করতে চান? ডেভেলপাররা বলে যে তারা আমাদের মনিটরিং ব্যবহার করে আনন্দ পায় কারণ আমাদের আছে:

  • একটি স্বজ্ঞাত ইন্টারফেস যা নেভিগেট করা সহজ।
  • সরল এবং অনুমানযোগ্য মূল্য।
  • ডেভেলপার থেকে ডেভেলপার সমর্থন।

আপনি যদি AppSignal-এ নতুন হয়ে থাকেন, তাহলে আমাদেরকে কিছু বিনামূল্যের স্ট্রোপওয়াফেল চাইতে ভুলবেন না! আপনার নখদর্পণে আপনার অ্যাপ্লিকেশানের সমস্ত মেট্রিক্স পাওয়া যেটা মনে হয় সেগুলি প্রায় ততটাই ভাল স্বাদের 😉🍪

জাভাস্ক্রিপ্ট ইভেন্টগুলি ব্যবহার করে StimulusJS এর সাথে অবিচ্ছিন্নভাবে React.js একত্রিত করুন

কনর জেমস

অ্যাপসিগন্যালে ডেভেলপার মার্কেটিং ম্যানেজার। পডকাস্ট আসক্ত যিনি ক্যানোলিকে এতটাই ভালোবাসেন যে তিনি তার নাম পরিবর্তন করে কনোলি রাখার কথা বিবেচনা করছেন। তিনি মনে করেন একটি 'উ' রঙ আছে। আপনি তাকে মাইকে, মঞ্চে বা সোফায় শুয়ে থাকতে পারেন যখন তিনি ডিউটি বন্ধ করেন৷

কনর জেমসের সমস্ত নিবন্ধ

জাভাস্ক্রিপ্ট ইভেন্টগুলি ব্যবহার করে StimulusJS এর সাথে অবিচ্ছিন্নভাবে React.js একত্রিত করুন

রবার্ট বেকম্যান

একজন সহ-প্রতিষ্ঠাতা হিসাবে, রবার্ট আমাদের প্রথম প্রতিশ্রুতি লিখেছিলেন। তিনি আমাদের সমর্থন রোল-মডেল এবং কোডের ক্ষুদ্র বিবরণ সম্পর্কে সব জানেন। ভ্রমণ এবং ছবি (একই সময়ে)।

রবার্ট বেকম্যানের সমস্ত নিবন্ধ


  1. C++ এ একটি বাইনারি গাছের ঘড়ির কাঁটার বিপরীত সর্পিল ট্রাভার্সাল?

  2. HTML DOM DragEvent

  3. Android ConcurrentLinkedDeque এ removeLast() কিভাবে ব্যবহার করবেন?

  4. পান্ডাস বা ম্যাটপ্লটলিবে এক গ্রাফে একাধিক বক্সপ্লট প্লট করুন