Web Development Advanced RIOT.js Features গাইড ও নোট

Riot.js একটি lightweight এবং component-based JavaScript লাইব্রেরি, যা আপনাকে দ্রুত এবং সহজে ইউজার ইন্টারফেস (UI) তৈরি করতে সাহায্য করে। এটি ছোট এবং স্পষ্ট ডিজাইনের জন্য পরিচিত, তবে এতে বেশ কিছু advanced features রয়েছে যা উন্নত ধরনের অ্যাপ্লিকেশন তৈরি করতে সক্ষম। আসুন, Riot.js এর কিছু advanced features নিয়ে আলোচনা করি যা আপনার অ্যাপ্লিকেশন উন্নয়ন প্রক্রিয়াকে আরও শক্তিশালী এবং ফ্লেক্সিবল করে তুলবে।

১. Reactiveness and Data Binding

Riot.js তে reactivity এবং data binding অত্যন্ত শক্তিশালী। এটি আপনাকে ডাটা পরিবর্তিত হলে UI আপডেট করার জন্য ব্যবহৃত হয়। Riot.js-এ reactive data ব্যবহার করতে পারেন, যা ডেটার মধ্যে কোনো পরিবর্তন হলে UI তে তা স্বয়ংক্রিয়ভাবে আপডেট হয়।

Example: Reactive Data Binding

<counter-component>
  <button onclick={increment}>Increment</button>
  <p>Count: {count}</p>

  <script>
    export default {
      onMounted() {
        this.count = 0; // Initial count
      },

      increment() {
        this.count++; // Increment the count
      }
    }
  </script>
</counter-component>

ব্যাখ্যা:

• এখানে count একটি reactive ভ্যালু, যা increment ফাংশনের মাধ্যমে পরিবর্তিত হয় এবং UI তে স্বয়ংক্রিয়ভাবে আপডেট হয়।

২. Slot Support

Riot.js কম্পোনেন্টের মধ্যে slots ব্যবহার করে আপনি ডাইনামিক কনটেন্টকে সহজভাবে পাস করতে পারেন। এটি ইউজারদের কাস্টম কন্টেন্ট পাস করার সুযোগ দেয়, যা কম্পোনেন্টে স্বচ্ছভাবে রেন্ডার হয়।

Example: Using Slots

<card-component>
  <h3>{opts.title}</h3>
  <slot></slot> <!-- Custom content goes here -->
</card-component>

<card-component title="Card Title">
  <p>This is a custom content inside the card.</p>
</card-component>

ব্যাখ্যা:

• slot ব্যবহার করে আপনি card-component এর মধ্যে বাহ্যিক কন্টেন্ট পাস করেছেন। যখন আপনি কম্পোনেন্ট ব্যবহার করবেন, তখন slot এর জায়গায় সেই কন্টেন্ট প্রদর্শিত হবে।

৩. Scoped CSS

Riot.js আপনাকে scoped CSS ব্যবহার করার সুবিধা দেয়, যার মাধ্যমে আপনি কম্পোনেন্টের স্টাইল শুধুমাত্র সেই কম্পোনেন্টের জন্য প্রযোজ্য রাখতে পারেন। এতে আপনি প্রতিটি কম্পোনেন্টের জন্য আলাদা CSS লিখে ম্যানেজ করতে পারেন, যা অন্য কোন অংশের স্টাইলকে প্রভাবিত করবে না।

Example: Scoped CSS

<styled-component>
  <h1>This is a scoped component</h1>

  <style>
    h1 {
      color: blue;
    }
  </style>
</styled-component>

ব্যাখ্যা:

• এখানে <style> ট্যাগটি কম্পোনেন্টের মধ্যে স্থাপন করা হয়েছে, এবং এটি শুধুমাত্র এই কম্পোনেন্টে প্রযোজ্য থাকবে।

৪. Life Cycle Methods

Riot.js তে life cycle methods ব্যবহৃত হয়, যা কম্পোনেন্টের বিভিন্ন ধাপে কল হয়। এগুলি ব্যবহার করে আপনি কম্পোনেন্টের মাউন্টিং, আপডেট এবং আনমাউন্টিং হ্যান্ডেল করতে পারেন।

Example: Life Cycle Methods

<life-cycle-component>
  <p>Lifecycle Test</p>

  <script>
    export default {
      onMounted() {
        console.log('Component mounted!');
      },

      onUpdated() {
        console.log('Component updated!');
      },

      onUnmounted() {
        console.log('Component unmounted!');
      }
    }
  </script>
</life-cycle-component>

ব্যাখ্যা:

• onMounted(): যখন কম্পোনেন্ট DOM-এ যুক্ত হবে, এটি কল হবে।
• onUpdated(): যখন কম্পোনেন্টের ডেটা আপডেট হবে, এটি কল হবে।
• onUnmounted(): যখন কম্পোনেন্ট DOM থেকে মুছে যাবে, এটি কল হবে।

৫. Event Handling

Riot.js তে custom events এবং event delegation ব্যবহার করা সহজ। আপনি কম্পোনেন্টের মধ্যে ইভেন্ট হ্যান্ডলিং সহজভাবে করতে পারেন, এবং বাইরের কম্পোনেন্টে ইভেন্ট ফায়ার করতে পারেন।

Example: Custom Events in Riot.js

<custom-event-component>
  <button onclick={triggerCustomEvent}>Click me</button>

  <script>
    export default {
      triggerCustomEvent() {
        this.emit('customEvent', { message: 'Hello from Custom Event!' });
      }
    }
  </script>
</custom-event-component>

<parent-component>
  <custom-event-component oncustomEvent={handleCustomEvent}></custom-event-component>

  <script>
    export default {
      handleCustomEvent(e) {
        console.log(e.detail.message);
      }
    }
  </script>
</parent-component>

ব্যাখ্যা:

• this.emit() ব্যবহার করে একটি কাস্টম ইভেন্ট ট্রিগার করা হয়, এবং oncustomEvent হ্যান্ডলার ব্যবহার করে প্যারেন্ট কম্পোনেন্টে সেই ইভেন্ট শোনা হয়।

৬. Dynamic Component Mounting

Riot.js তে আপনি dynamic component mounting করতে পারেন, যা একটি বিশেষ পরিস্থিতিতে কম্পোনেন্ট মাউন্ট করতে সহায়তা করে। এটি এমন সিচুয়েশনে ব্যবহার করা হয় যেখানে আপনাকে UI তে ডাইনামিক কম্পোনেন্ট শো/হাইড করতে হয়।

Example: Dynamic Component Mounting

<app>
  <button onclick={toggleComponent}>Toggle Component</button>
  <my-component if={showComponent}></my-component>

  <script>
    import MyComponent from './MyComponent.riot';

    export default {
      onMounted() {
        this.showComponent = false;
      },

      toggleComponent() {
        this.showComponent = !this.showComponent;
      }
    }
  </script>
</app>

ব্যাখ্যা:

• if={showComponent} দ্বারা কম্পোনেন্টটি ডাইনামিকভাবে শো/হাইড করা হচ্ছে।

৭. Contextual Components (Context API)

Riot.js তে Context API ব্যবহার করে আপনি কম্পোনেন্টের মধ্যে শেয়ার করা ডেটা পাস করতে পারেন। এটি বিশেষভাবে কাজ করে যখন আপনার কম্পোনেন্টের মধ্যে একাধিক স্তরের ডেটা বা প্রপার্টি পাস করতে হয়।

Example: Contextual Components with Context API

<parent-component>
  <child-component></child-component>

  <script>
    export default {
      onMounted() {
        this.context = { message: 'Hello from Parent' };
      }
    }
  </script>
</parent-component>

<child-component>
  <p>{context.message}</p>

  <script>
    export default {
      onMounted() {
        console.log(this.context.message);
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• এখানে context প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে পাস করা হয়েছে, যা চাইল্ড কম্পোনেন্টে {context.message} দিয়ে অ্যাক্সেস করা হচ্ছে।

উপসংহার

Riot.js তে Advanced Features ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও শক্তিশালী, স্কেলেবল এবং রিয়েক্টিভ করতে পারেন। Riot.js এর কিছু গুরুত্বপূর্ণ advanced ফিচার হচ্ছে:

1. Reactivity and Data Binding: ডেটা পরিবর্তিত হলে UI আপডেট।
2. Slot Support: কাস্টম কন্টেন্ট পাস করার সুবিধা।
3. Scoped CSS: কম্পোনেন্টের মধ্যে স্টাইল স্কোপিং।
4. Life Cycle Methods: কম্পোনেন্টের বিভিন্ন অবস্থায় কাস্টম লজিক পরিচালনা।
5. Event Handling: কাস্টম ইভেন্ট এবং ইভেন্ট ডেলিগেশন।
6. Dynamic Component Mounting: কম্পোনেন্ট ডাইনামিকভাবে শো/হাইড করা।
7. Context API: ডেটা শেয়ারিং।

এই ফিচারগুলো ব্যবহার করে আপনি কম্পোনেন্ট ভিত্তিক অ্যাপ্লিকেশন তৈরি করতে পারেন, যা আরও রিডেবল এবং ম্যানটেইনেবল হবে।

Riot.js-এ Mixins ব্যবহার করে কোডের Reusability বাড়ানো সম্ভব। Mixins হল এমন একটি উপায় যা একটি কম্পোনেন্টের মধ্যে সাধারণ ফাংশনালিটি বা লজিক পুনরায় ব্যবহার করতে সাহায্য করে, যা একাধিক কম্পোনেন্টে শেয়ার করা যেতে পারে। Riot.js-এ, Mixins এমন একটি বৈশিষ্ট্য যা আপনাকে একাধিক কম্পোনেন্টে কোডের পুনঃব্যবহারযোগ্যতা বজায় রাখতে সাহায্য করে।

Riot.js এ Mixins ব্যবহার করার সুবিধা:

1. Code Reusability: একই লজিক বা ফাংশন বিভিন্ন কম্পোনেন্টে ব্যবহার করা যায়।
2. Cleaner Code: কম্পোনেন্টের মধ্যে অতিরিক্ত লজিক রাখতে হয় না, ফলে কোড পরিষ্কার ও সহজ হয়।
3. Encapsulation: কম্পোনেন্টের মধ্যে মিক্সিন ব্যবহার করে, আপনি সেই ফাংশনালিটি একত্রিত করতে পারেন যা বিভিন্ন কম্পোনেন্টের মধ্যে শেয়ার করা হতে পারে।

Mixins কীভাবে কাজ করে?

Riot.js-এ, Mixins সাধারণত JavaScript অবজেক্ট হিসেবে থাকে এবং এগুলিকে কম্পোনেন্টে মাউন্ট করার সময় mixins প্রপার্টি হিসাবে পাস করা হয়। Mixins এ থাকা ফাংশনগুলি কম্পোনেন্টে স্বয়ংক্রিয়ভাবে অন্তর্ভুক্ত হয়ে যায়।

উদাহরণ 1: Basic Mixin তৈরি এবং ব্যবহার

Step 1: Mixin তৈরি করা

// commonMixin.js
export const commonMixin = {
  onMounted() {
    console.log('Mixin Mounted');
    this.message = 'Hello from Mixin!';
  },
  changeMessage() {
    this.message = 'Message updated by Mixin!';
  }
};

এখানে, একটি commonMixin নামের মিক্সিন তৈরি করা হয়েছে যা onMounted এবং changeMessage মেথড ধারণ করে।

Step 2: Mixin ব্যবহার করা

<!-- ExampleComponent.riot -->
<example-component>
  <button onclick={changeMessage}>Change Message</button>
  <p>{message}</p>

  <script>
    import { commonMixin } from './commonMixin.js';

    export default {
      mixins: [commonMixin], // Mixin যুক্ত করা

      onMounted() {
        // Mixin-এর onMounted ফাংশন স্বয়ংক্রিয়ভাবে কল হবে
        console.log('Component Mounted');
      }
    }
  </script>
</example-component>

এখানে, আমরা commonMixin কে mixins প্রপার্টি ব্যবহার করে কম্পোনেন্টে যুক্ত করেছি। ফলে, onMounted এবং changeMessage ফাংশন কম্পোনেন্টের অংশ হয়ে যাবে এবং আপনি সহজেই কম্পোনেন্টে এগুলির ব্যবহার করতে পারবেন।

উদাহরণ 2: Multiple Mixins ব্যবহার করা

একাধিক মিক্সিন একসাথে ব্যবহার করা সম্ভব, যাতে একাধিক ফাংশনালিটি বা লজিক বিভিন্ন কম্পোনেন্টে সহজে শেয়ার করা যায়।

// mixinA.js
export const mixinA = {
  onMounted() {
    this.messageA = 'Hello from Mixin A';
  },
  changeMessageA() {
    this.messageA = 'Message updated by Mixin A';
  }
};

// mixinB.js
export const mixinB = {
  onMounted() {
    this.messageB = 'Hello from Mixin B';
  },
  changeMessageB() {
    this.messageB = 'Message updated by Mixin B';
  }
};

এখানে, দুটি মিক্সিন তৈরি করা হয়েছে (mixinA এবং mixinB)।

<!-- AnotherComponent.riot -->
<another-component>
  <button onclick={changeMessageA}>Change Message A</button>
  <button onclick={changeMessageB}>Change Message B</button>
  <p>{messageA}</p>
  <p>{messageB}</p>

  <script>
    import { mixinA } from './mixinA.js';
    import { mixinB } from './mixinB.js';

    export default {
      mixins: [mixinA, mixinB], // Multiple Mixins যুক্ত করা

      onMounted() {
        console.log('Both Mixins Mounted');
      }
    }
  </script>
</another-component>

এখানে, mixinA এবং mixinB মিক্সিন দুটি কম্পোনেন্টে যুক্ত করা হয়েছে, যার ফলে আমরা দুটি ভিন্ন বার্তা এবং ফাংশন একই কম্পোনেন্টে ব্যবহার করতে পারছি।

উদাহরণ 3: Mixin with Custom Methods and State

এখানে একটি মিক্সিন ব্যবহার করা হচ্ছে যা কাস্টম ডেটা এবং মেথড ধারণ করে:

// customMixin.js
export const customMixin = {
  data() {
    return {
      counter: 0
    };
  },
  increment() {
    this.counter++;
  },
  decrement() {
    this.counter--;
  }
};

এখানে, customMixin মিক্সিনটি একটি counter ডেটা এবং increment, decrement মেথড ধারণ করছে।

<!-- CounterComponent.riot -->
<counter-component>
  <button onclick={increment}>Increment</button>
  <button onclick={decrement}>Decrement</button>
  <p>Counter: {counter}</p>

  <script>
    import { customMixin } from './customMixin.js';

    export default {
      mixins: [customMixin], // Mixin যুক্ত করা

      onMounted() {
        console.log('Counter Component Mounted');
      }
    }
  </script>
</counter-component>

এখানে, customMixin মিক্সিনটি counter স্টেট এবং increment, decrement ফাংশন ব্যবহার করে কম্পোনেন্টে কার্যকরভাবে শেয়ার করা হচ্ছে।

মিক্সিন ব্যবহারের উপকারিতা:

1. Code Reusability: একাধিক কম্পোনেন্টে একই লজিক বা কার্যকারিতা শেয়ার করতে সাহায্য করে।
2. Clean and Modular Code: কোড আরও মডুলার এবং পরিষ্কার হয়, কারণ আপনি একই কোড একাধিক জায়গায় পুনরায় ব্যবহার করতে পারেন।
3. Consistency: একই ফাংশনালিটি এবং স্টেট একাধিক কম্পোনেন্টে ব্যবহার করলে অ্যাপ্লিকেশনের মধ্যে কনসিস্টেন্সি থাকে।
4. Separation of Concerns: প্রতিটি মিক্সিন আলাদা ফাংশনালিটি বা বৈশিষ্ট্য ধারণ করে, যা কোডের পৃথকীকরণ নিশ্চিত করে।

সারাংশ:

Mixins ব্যবহার করে আপনি Riot.js কম্পোনেন্টের মধ্যে কোডের পুনঃব্যবহারযোগ্যতা বাড়াতে পারেন। এটি আপনাকে একাধিক কম্পোনেন্টে একসাথে একই ফাংশনালিটি ব্যবহার করতে দেয় এবং আপনার অ্যাপ্লিকেশনকে আরও মডুলার এবং পরিচালনাযোগ্য করে তোলে। Mixins এমন একটি টুল যা বড় অ্যাপ্লিকেশনগুলিতে কোডের পুনঃব্যবহারযোগ্যতা এবং ক্লিন কোড রচনা করতে সাহায্য করে।

Riot.js-এ Custom Directives এবং Utilities আপনাকে HTML মার্কআপে কাস্টম আচরণ যোগ করার এবং কোডের পুনঃব্যবহারযোগ্যতা এবং সাদৃশ্য বৃদ্ধি করার সুযোগ দেয়। Riot.js সরাসরি ডিরেকটিভ এবং ইউটিলিটি ফাংশন সমর্থন করে, যা UI এবং লজিককে আরও শক্তিশালী এবং কাস্টমাইজেবল করতে সহায়তা করে।

এখানে Riot.js-এ Custom Directives এবং Utilities এর ব্যবহার এবং উদাহরণ দেখানো হচ্ছে।

১. Custom Directives: কাস্টম ডিরেকটিভ তৈরি করা

Riot.js ডিরেকটিভগুলির মাধ্যমে আপনি HTML এলিমেন্টে কাস্টম আচরণ যুক্ত করতে পারেন। ডিরেকটিভ সাধারণত each, if, show ইত্যাদির মতো স্ট্যান্ডার্ড নির্দেশাবলী ব্যবহৃত হয়, তবে আপনি নিজস্ব কাস্টম ডিরেকটিভও তৈরি করতে পারেন।

কাস্টম ডিরেকটিভ তৈরি করা

এখানে একটি কাস্টম ডিরেকটিভ তৈরি করা হয়েছে যা একটি DOM এলিমেন্টে ক্লিক করলে তার ব্যাকগ্রাউন্ড রঙ পরিবর্তন করবে।

Step 1: কাস্টম ডিরেকটিভ তৈরি করা

import riot from 'riot';

// কাস্টম ডিরেকটিভ তৈরি
riot.tag('change-bg', 'div', {
  onMounted() {
    this.root.addEventListener('click', () => {
      this.root.style.backgroundColor = 'lightblue';
    });
  },

  template: '<div>Click me to change background color</div>',
});

এখানে, change-bg ডিরেকটিভ একটি div এলিমেন্টে কাস্টম কার্যক্রম যুক্ত করে, যা ক্লিক করলে ব্যাকগ্রাউন্ড রঙ পরিবর্তন করবে।

Step 2: কাস্টম ডিরেকটিভ ব্যবহার

<!-- Index.html -->
<change-bg></change-bg>

এখানে, <change-bg></change-bg> এলিমেন্টটি ব্যবহার করলে, ক্লিক করার পর তার ব্যাকগ্রাউন্ড রঙ পরিবর্তিত হবে।

২. Custom Directives with Attributes: কাস্টম ডিরেকটিভ অ্যাট্রিবিউটের মাধ্যমে

Riot.js কাস্টম ডিরেকটিভের মাধ্যমে আপনি আরও ডাইনামিক এবং রিয়েকটিভ আচরণ সংযুক্ত করতে পারেন, যেমন একটি এলিমেন্টের অ্যাট্রিবিউট পরিবর্তন করা।

উদাহরণ: কাস্টম ডিরেকটিভ যা অ্যাট্রিবিউট পরিবর্তন করবে

import riot from 'riot';

// কাস্টম ডিরেকটিভ তৈরি
riot.tag('bg-color', 'div', {
  onMounted() {
    const color = this.opts.color || 'lightgreen';
    this.root.style.backgroundColor = color;
  },

  template: '<div>Background color will be set here</div>',
});

এখানে, bg-color ডিরেকটিভে একটি color অপশন যুক্ত করা হয়েছে, যার মাধ্যমে আপনি ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করতে পারবেন।

Step 2: কাস্টম ডিরেকটিভ ব্যবহার

<!-- Index.html -->
<bg-color color="pink"></bg-color>
<bg-color color="lightblue"></bg-color>

এখানে, color অপশন দিয়ে কাস্টম রঙ নির্ধারণ করা হচ্ছে এবং প্রতিটি div এর ব্যাকগ্রাউন্ড রঙ পরিবর্তন হবে।

৩. Utilities: ইউটিলিটি ফাংশন তৈরি করা

Riot.js আপনাকে নিজস্ব Utilities বা সহায়ক ফাংশন তৈরি করার সুযোগ দেয়, যা আপনার অ্যাপ্লিকেশন কোডকে আরও পরিষ্কার এবং পুনঃব্যবহারযোগ্য করতে সাহায্য করে। সাধারণত ইউটিলিটি ফাংশনগুলি কম্পোনেন্টের মধ্যে কিছু সাধারণ কার্যক্রম, যেমন ডেটা ফরম্যাটিং, অ্যারেতে ফিল্টারিং, বা কোডের পুনঃব্যবহারযোগ্য অংশ সম্পাদন করতে ব্যবহৃত হয়।

উদাহরণ: ইউটিলিটি ফাংশন ব্যবহার

ধরা যাক, একটি ইউটিলিটি ফাংশন আছে যা একটি তারিখ ফরম্যাট করবে:

// utils.js
export function formatDate(date) {
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return new Date(date).toLocaleDateString(undefined, options);
}

এটি একটি সাধারণ তারিখ ফরম্যাটিং ফাংশন যা date ইনপুট হিসেবে নেয় এবং নির্দিষ্ট ফরম্যাটে তারিখ প্রদান করে।

Step 1: ইউটিলিটি ফাংশন ব্যবহার কম্পোনেন্টে

import riot from 'riot';
import { formatDate } from './utils';

// কম্পোনেন্টে ইউটিলিটি ফাংশন ব্যবহার
riot.tag('formatted-date', 'div', {
  onMounted() {
    this.formattedDate = formatDate('2024-12-25');
  },

  template: '<div>{formattedDate}</div>',
});

এখানে, formatDate ফাংশন ব্যবহার করে একটি নির্দিষ্ট তারিখ ফরম্যাট করা হয়েছে এবং সেই তারিখটি কম্পোনেন্টের ভিতরে রেন্ডার করা হয়েছে।

Step 2: ইউটিলিটি ফাংশন ব্যবহার করা

<!-- Index.html -->
<formatted-date></formatted-date>

এটি সঠিকভাবে রেন্ডার করবে "December 25, 2024"।

৪. Custom Directives for Data Binding: ডাটা বাইন্ডিংয়ের জন্য কাস্টম ডিরেকটিভ

Riot.js-এর data binding খুবই শক্তিশালী। আপনি ডাটা বাইন্ডিংয়ের মাধ্যমে কাস্টম ডিরেকটিভ তৈরি করতে পারেন যা UI পরিবর্তন করে যখন ডেটা পরিবর্তন হয়।

উদাহরণ: ডাটা বাইন্ডিংয়ের জন্য কাস্টম ডিরেকটিভ

import riot from 'riot';

// কাস্টম ডিরেকটিভ যা ডাটা বাইন্ডিং হ্যান্ডেল করবে
riot.tag('show-text', 'div', {
  onMounted() {
    this.text = this.opts.text || 'Default Text';
  },

  template: '<div>{text}</div>',
});

এখানে, show-text ডিরেকটিভটি কাস্টম ডেটা বাইন্ডিং প্রক্রিয়া ব্যবহার করে, যাতে আপনি যেকোনো text প্রপার্টি পাস করলে সেটি প্রদর্শিত হবে।

Step 2: কাস্টম ডিরেকটিভ ব্যবহার

<!-- Index.html -->
<show-text text="Hello, Riot.js!"></show-text>
<show-text text="This is a custom directive"></show-text>

এখানে, text প্রপার্টি দিয়ে আমরা কাস্টম টেক্সট প্রদান করছি, যা UI-তে রেন্ডার হবে।

Riot.js-এ Custom Directives এবং Utilities ব্যবহার করার মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনকে আরও শক্তিশালী, মডুলার এবং পুনঃব্যবহারযোগ্য করতে পারেন। কাস্টম ডিরেকটিভগুলি HTML মার্কআপের মধ্যে কাস্টম আচরণ যোগ করতে সাহায্য করে, যেমন ইভেন্ট হ্যান্ডলিং বা স্টাইল পরিবর্তন, এবং ইউটিলিটি ফাংশনগুলি সাধারণ কার্যক্রমের জন্য পুনঃব্যবহারযোগ্য কোড তৈরি করতে সহায়তা করে। এগুলি আপনার কোডের সাদৃশ্য বৃদ্ধি করে এবং উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদান করে।

Riot.js-এ Lifecycle Events ব্যবহৃত হয় কম্পোনেন্টগুলির জীবনচক্রের বিভিন্ন পর্যায়ে কিছু কার্যকলাপ সম্পাদন করার জন্য। এই ইভেন্টগুলির মাধ্যমে আপনি কম্পোনেন্টের মাউন্টিং, আপডেটিং এবং আনমাউন্টিং অবস্থায় নির্দিষ্ট কোড চালাতে পারেন।

Riot.js-এর Lifecycle Methods বা ইভেন্টগুলি সাধারণত কম্পোনেন্টের মাউন্ট হওয়া, ডেটা আপডেট হওয়া, এবং কম্পোনেন্টটি DOM থেকে সরানোর সময় কল করা হয়।

Riot.js Lifecycle Events

Riot.js এ কয়েকটি lifecycle events বা মেথড রয়েছে যা কম্পোনেন্টের জীবনচক্রের বিভিন্ন সময়ে কাজ করে। প্রধান lifecycle methods হল:

1. onMounted(): যখন কম্পোনেন্ট প্রথমবার DOM এ মাউন্ট হয়, তখন এই মেথডটি কল হয়।
2. onUpdated(): যখন কম্পোনেন্টের ডেটা বা স্টেট পরিবর্তিত হয় এবং কম্পোনেন্ট পুনরায় রেন্ডার হয়, তখন এই মেথডটি কল হয়।
3. onBeforeUnmount(): যখন কম্পোনেন্টটি DOM থেকে আনমাউন্ট হওয়ার আগে কল হয়।
4. onUnmount(): কম্পোনেন্টটি DOM থেকে সরানোর পর কল হয়।

১. onMounted() - কম্পোনেন্ট মাউন্ট হওয়ার পর

onMounted() মেথডটি তখন কল হয় যখন কম্পোনেন্টটি প্রথমবার DOM এ মাউন্ট হয়। এটি এক ধরনের initialization মেথড যা কম্পোনেন্টের ডেটা সেট করতে বা প্রথম সেটআপ করতে ব্যবহৃত হয়।

উদাহরণ:

<!-- OnMountedExample.riot -->
<on-mounted-example>
  <p>{message}</p>

  <script>
    export default {
      onMounted() {
        this.message = "Hello, Riot.js!";
        console.log('Component Mounted!');
      }
    }
  </script>
</on-mounted-example>

এখানে, onMounted() ফাংশনটি কম্পোনেন্ট মাউন্ট হওয়ার পরে কল হবে এবং এটি message প্রপার্টি সেট করবে।

২. onUpdated() - কম্পোনেন্ট আপডেট হওয়ার পর

onUpdated() মেথডটি তখন কল হয় যখন কম্পোনেন্টের ডেটা পরিবর্তিত হয় এবং কম্পোনেন্ট পুনরায় রেন্ডার হয়। এটি সাধারণত ডেটা পরিবর্তন হলে বা ইউজার ইন্টারঅ্যাকশনের মাধ্যমে কোনো পরিবর্তন আসলে কল করা হয়।

উদাহরণ:

<!-- OnUpdatedExample.riot -->
<on-updated-example>
  <input type="text" oninput={updateMessage} placeholder="Type something">
  <p>{message}</p>

  <script>
    export default {
      onMounted() {
        this.message = '';
      },

      updateMessage(e) {
        this.message = e.target.value;
      },

      onUpdated() {
        console.log('Component Updated!');
      }
    }
  </script>
</on-updated-example>

এখানে, onUpdated() ফাংশনটি তখন কল হবে যখন ইনপুট ফিল্ডে কিছু টাইপ করার মাধ্যমে message পরিবর্তিত হবে। এটি ডেটা পরিবর্তন বা ইউজার ইন্টারঅ্যাকশন পরবর্তী সময়ে কার্যকর হবে।

৩. onBeforeUnmount() - কম্পোনেন্ট আনমাউন্ট হওয়ার আগে

onBeforeUnmount() মেথডটি তখন কল হয় যখন কম্পোনেন্টটি DOM থেকে সরানোর আগে। এটি সাধারণত কম্পোনেন্টের রিসোর্স বা ইভেন্ট লিসেনার পরিষ্কার করার জন্য ব্যবহৃত হয়।

উদাহরণ:

<!-- OnBeforeUnmountExample.riot -->
<on-before-unmount-example>
  <p>{message}</p>

  <script>
    export default {
      onMounted() {
        this.message = 'This component will unmount soon.';
      },

      onBeforeUnmount() {
        console.log('Component will be removed soon!');
      }
    }
  </script>
</on-before-unmount-example>

এখানে, onBeforeUnmount() ফাংশনটি তখন কল হবে যখন কম্পোনেন্টটি DOM থেকে সরানোর আগে। এটি পরিষ্কার করার জন্য বা টেমপ্লেটের আগে কোন রিসোর্স মুক্ত করার জন্য ব্যবহার করা হয়।

৪. onUnmount() - কম্পোনেন্ট আনমাউন্ট হওয়ার পর

onUnmount() মেথডটি তখন কল হয় যখন কম্পোনেন্টটি DOM থেকে সরানো হয়। এটি সাধারণত কম্পোনেন্টের পরবর্তী ব্যবহারের জন্য কিছু কোড নিষ্ক্রিয় করতে বা পরিষ্কার করার জন্য ব্যবহৃত হয়।

উদাহরণ:

<!-- OnUnmountExample.riot -->
<on-unmount-example>
  <p>{message}</p>

  <script>
    export default {
      onMounted() {
        this.message = 'This component will be removed shortly.';
      },

      onUnmount() {
        console.log('Component has been removed!');
      }
    }
  </script>
</on-unmount-example>

এখানে, onUnmount() ফাংশনটি কল হবে যখন কম্পোনেন্টটি DOM থেকে সরানো হবে। এটি কোডের ক্লিনআপের জন্য ব্যবহার করা যেতে পারে, যেমন ইভেন্ট লিসেনার বা টাইমআউট পরিষ্কার করা।

সারাংশ

• onMounted(): কম্পোনেন্ট প্রথমবার মাউন্ট হলে কল হয়, সাধারণত ডেটা ইনিশিয়ালাইজ করতে।
• onUpdated(): কম্পোনেন্টের ডেটা বা স্টেট পরিবর্তন হলে এবং পুনরায় রেন্ডার হলে কল হয়।
• onBeforeUnmount(): কম্পোনেন্টটি DOM থেকে সরানোর আগে কল হয়, যেখানে আপনি রিসোর্স বা ইভেন্ট লিসেনার পরিষ্কার করতে পারেন।
• onUnmount(): কম্পোনেন্টটি DOM থেকে সরানোর পর কল হয়, যেখানে আপনি ক্লিনআপ কার্যকর করতে পারেন।

এই Lifecycle Events Riot.js কম্পোনেন্টের আচরণ এবং পারফরম্যান্স নিয়ন্ত্রণ করতে সহায়ক। আপনি এসব ইভেন্ট ব্যবহার করে ডেটা ইনিশিয়ালাইজেশন, রিসোর্স ম্যানেজমেন্ট, এবং ক্লিনআপ কার্যকলাপ পরিচালনা করতে পারবেন।

Riot.js-এ Advanced Props এবং Attributes ব্যবস্থাপনা অত্যন্ত গুরুত্বপূর্ণ, বিশেষ করে যখন আপনি ডাইনামিক্যালি বা কাস্টম উপাদানগুলো তৈরি করতে চান। Props এবং Attributes ব্যবহার করে কম্পোনেন্টগুলির মধ্যে ডেটা আদান-প্রদান করা হয়, এবং এটি একটি শক্তিশালী পদ্ধতি যা আপনাকে কাস্টম কম্পোনেন্ট তৈরি করার সময় অনেক নিয়ন্ত্রণ এবং নমনীয়তা দেয়।

১. Advanced Props in Riot.js

Riot.js-এ Props হল সেই ডেটা যেগুলি প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে পাস করা হয়। এগুলি সাধারণত একটি ইনপুট বা কনফিগারেশন হিসেবে কাজ করে। যখন আপনি অ্যাডভান্সড প্রপস ব্যবহার করেন, তখন আপনি সেই প্রপসগুলির মাধ্যমে আরও ডাইনামিক এবং কাস্টমাইজড আচরণ অর্জন করতে পারেন।

১.১ Default Props with Fallback Values

Riot.js-এ আপনি প্রপসের জন্য ডিফল্ট মান নির্ধারণ করতে পারেন, যা প্রপস প্রদান না করা হলে ব্যবহৃত হবে। এর মাধ্যমে, আপনি কম্পোনেন্টের মধ্যে একটি প্রপসের মান যদি না থাকে, তবে তা ফ্যালব্যাক ভ্যালু ব্যবহার করতে পারবেন।

<!-- UserProfile.riot -->
<user-profile>
  <h2>{opts.name || 'Anonymous'}</h2>
  <p>{opts.age || 'Unknown age'}</p>

  <script>
    export default {
      opts: {
        name: '',
        age: ''
      }
    }
  </script>
</user-profile>

এখানে, যদি name বা age প্রপস প্যারেন্ট কম্পোনেন্ট থেকে না আসে, তবে কম্পোনেন্ট ডিফল্ট মান হিসেবে 'Anonymous' এবং 'Unknown age' প্রদর্শন করবে।

১.২ Dynamic Props (ডাইনামিক প্রপস)

ডাইনামিক প্রপস আপনাকে এমন প্রপস পাস করতে সাহায্য করে যা রিয়েল টাইমে পরিবর্তিত হতে পারে। Riot.js-এ ডাইনামিক প্রপস ব্যবহার করে আপনি কাস্টমাইজড এবং রিয়েকটিভ UI তৈরি করতে পারেন।

<!-- ButtonComponent.riot -->
<button onclick={handleClick}>{opts.label}</button>

<script>
  export default {
    handleClick() {
      this.opts.label = 'Clicked!';
      this.update();  // কম্পোনেন্টটি পুনরায় রেন্ডার করার জন্য
    }
  }
</script>

এখানে, যখন বাটনে ক্লিক করা হবে, label প্রপস পরিবর্তিত হবে এবং UI পুনরায় রেন্ডার হবে।

১.৩ Passing Objects as Props

আপনি অবজেক্ট বা অ্যারে হিসেবেও প্রপস পাঠাতে পারেন। এটি আপনার কম্পোনেন্টে আরও জটিল ডেটা স্ট্রাকচার হ্যান্ডেল করতে সহায়ক।

<!-- ProductList.riot -->
<product-list>
  <ul>
    <li each={product in opts.products}>
      {product.name} - ${product.price}
    </li>
  </ul>

  <script>
    export default {
      opts: {
        products: []
      }
    }
  </script>
</product-list>

এখানে, products প্রপস একটি অ্যারে যা প্যারেন্ট কম্পোনেন্ট থেকে পাস করা হবে এবং এটি কম্পোনেন্টের মধ্যে লিস্ট আকারে রেন্ডার হবে।

১.৪ Two-way Data Binding with Props

Riot.js-এ টু-ওয়ে ডেটা বাইন্ডিং করা সম্ভব, যাতে কম্পোনেন্টের মধ্যে একটি প্রপস পরিবর্তন হলে সেই পরিবর্তন প্যারেন্ট কম্পোনেন্টে প্রতিফলিত হয় এবং উল্টোটাও ঘটে।

<!-- CounterComponent.riot -->
<counter-component>
  <button onclick={decrement}>-</button>
  <span>{opts.count}</span>
  <button onclick={increment}>+</button>

  <script>
    export default {
      increment() {
        this.opts.count += 1;
        this.update();
      },

      decrement() {
        this.opts.count -= 1;
        this.update();
      }
    }
  </script>
</counter-component>

এখানে, count প্রপস প্যারেন্ট কম্পোনেন্ট থেকে পাস করা হচ্ছে, এবং প্রতিবার বাটন ক্লিক করার সময় সেটি পরিবর্তিত হবে।

২. Attributes in Riot.js

Riot.js-এ Attributes হল HTML ট্যাগের অ্যাট্রিবিউট যেমন class, id, style, ইত্যাদি। আপনি custom attributes ব্যবহার করতে পারেন, যা কাস্টম কম্পোনেন্টে ডেটা পাস করার জন্য ব্যবহৃত হয়।

২.১ Accessing HTML Attributes

Riot.js আপনাকে HTML এর অ্যাট্রিবিউট অ্যাক্সেস করতে দেয় যা আপনি কম্পোনেন্টের মধ্যে ব্যবহার করতে পারেন। সাধারণত এটি opts (প্যারেন্ট কম্পোনেন্ট থেকে প্রাপ্ত প্রপস) বা attrs (কাস্টম অ্যাট্রিবিউট) এর মাধ্যমে করা হয়।

<!-- CustomButton.riot -->
<custom-button>
  <button id={opts.id} class={opts.class}>{opts.text}</button>

  <script>
    export default {
      opts: {
        id: 'default-btn',
        class: 'primary-btn',
        text: 'Click me'
      }
    }
  </script>
</custom-button>

এখানে, id, class, এবং text নামক অ্যাট্রিবিউটগুলি প্যারেন্ট কম্পোনেন্ট থেকে পাস করা হচ্ছে এবং এটি বাটনের id, class, এবং টেক্সট হিসাবে ব্যবহার হচ্ছে।

২.২ Passing Custom Attributes

রিয়েকটিভ কম্পোনেন্টে আপনি কাস্টম অ্যাট্রিবিউট পাস করতে পারেন যেগুলি উপাদানটিকে আরও কাস্টমাইজড করে তোলে।

<!-- Tooltip.riot -->
<tooltip>
  <div class="tooltip" title={opts.tooltipText}>
    Hover over me for tooltip
  </div>

  <script>
    export default {
      opts: {
        tooltipText: 'Default Tooltip Text'
      }
    }
  </script>
</tooltip>

এখানে, tooltipText কাস্টম অ্যাট্রিবিউটের মাধ্যমে কম্পোনেন্টে পাস করা হচ্ছে। আপনি এই অ্যাট্রিবিউটের মান পরিবর্তন করে টুলটিপের টেক্সট কাস্টমাইজ করতে পারবেন।

২.৩ Conditionally Adding Attributes

Riot.js আপনাকে ডাইনামিক অ্যাট্রিবিউট যোগ করতে দেয়, যেমন আপনি শর্তসাপেক্ষভাবে কোনো অ্যাট্রিবিউট প্রয়োগ করতে পারেন।

<!-- ConditionalAttributes.riot -->
<conditional-attributes>
  <button class="btn" disabled={opts.isDisabled}>Click me</button>

  <script>
    export default {
      opts: {
        isDisabled: false
      }
    }
  </script>
</conditional-attributes>

এখানে, isDisabled প্রপসের মাধ্যমে বোতামের disabled অ্যাট্রিবিউট যোগ করা হয়েছে। যদি opts.isDisabled true হয়, তবে বোতামটি অক্ষম (disabled) হবে।

৩. Event Handling and Attributes

Riot.js-এ আপনি ইভেন্ট হ্যান্ডলার এবং Attributes একত্রে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, একটি কাস্টম বাটনে ক্লিক ইভেন্ট হ্যান্ডলারের মাধ্যমে ডেটা পরিবর্তন করা যেতে পারে।

<!-- EventAttributes.riot -->
<event-attributes>
  <button onclick={handleClick} id={opts.id} class={opts.class}>Click Me</button>

  <script>
    export default {
      opts: {
        id: 'default-btn',
        class: 'btn'
      },

      handleClick() {
        alert('Button Clicked!');
      }
    }
  </script>
</event-attributes>

এখানে, বাটনের id এবং class অ্যাট্রিবিউট কাস্টম প্রপস থেকে আসছে এবং handleClick ফাংশনটি ক্লিক ইভেন্ট হ্যান্ডল করবে।

উপসংহার

Riot.js-এ Advanced Props এবং Attributes ব্যবহার করে আপনি আপনার কম্পোনেন্টগুলোকে আরও ডাইনামিক, কাস্টমাইজড এবং রিয়েকটিভ করতে পারবেন। আপনি ডিফল্ট প্রপস, ডাইনামিক প্রপস, টু-ওয়ে ডেটা বাইন্ডিং, কাস্টম অ্যাট্রিবিউট এবং শর্তসাপেক্ষভাবে অ্যাট্রিবিউট যোগ করে কম্পোনেন্টের আচরণ নিয়ন্ত্রণ করতে পারেন।

এই সমস্ত ক্ষমতা Riot.js-কে একটি শক্তিশালী টুল করে তোলে, যা ছোট থেকে বড় অ্যাপ্লিকেশন তৈরির জন্য উপযুক্ত।