RIOT.js এর মডুলার কোডিং

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

Riot.js এ মডুলার কোডিংয়ে মূল উপাদান হলো কম্পোনেন্টস, যা একটি UI উপাদান এবং তার আচরণ (অর্থাৎ, JavaScript কোড) এবং স্টাইল (CSS) একত্রে ধারণ করে। প্রতিটি কম্পোনেন্ট নির্দিষ্ট একটি দায়িত্ব পালন করে এবং অন্য কম্পোনেন্টগুলির সাথে সংযুক্ত হয়ে বৃহত্তর অ্যাপ্লিকেশন তৈরি করে।

Riot.js এ মডুলার কোডিং-এর মূল সুবিধা:

1. পুনঃব্যবহারযোগ্য কোড: আপনি একবার একটি কম্পোনেন্ট তৈরি করলে তা বারবার ব্যবহার করতে পারবেন। উদাহরণস্বরূপ, একটি বাটন কম্পোনেন্ট বা ইনপুট ফিল্ড কম্পোনেন্ট একাধিক জায়গায় ব্যবহার করা যেতে পারে।
2. একমাত্রিক দৃষ্টিভঙ্গি (Single Responsibility): প্রতিটি কম্পোনেন্ট একটি নির্দিষ্ট কাজের জন্য দায়ী থাকে। এটি কোডের পড়াশোনা সহজ করে এবং রক্ষণাবেক্ষণ সহজ করে।
3. অবজেক্ট-ভিত্তিক ডিজাইন: Riot.js কম্পোনেন্টগুলো অবজেক্ট-ভিত্তিক ডিজাইন অনুসরণ করে। প্রতিটি কম্পোনেন্ট তার নিজস্ব ডেটা, ফাংশন এবং মেথড ধারণ করে, যা অন্য কম্পোনেন্ট থেকে স্বাধীন থাকে।
4. দ্রুত ডেভেলপমেন্ট: কম্পোনেন্ট ভিত্তিক কাঠামো কোড লেখার প্রক্রিয়া দ্রুত এবং সহজ করে তোলে, কারণ আপনি আগে তৈরি করা কম্পোনেন্টগুলোকে পুনঃব্যবহার করতে পারেন।

Riot.js এর মডুলার কোডিং উদাহরণ:

ধরা যাক, আপনি একটি অ্যাপ্লিকেশন তৈরি করছেন, যেখানে কিছু সাধারণ কম্পোনেন্ট যেমন বাটন, টেক্সট ইনপুট, এবং লোগো থাকবে। এভাবে প্রতিটি কম্পোনেন্ট আলাদাভাবে তৈরি করা যাবে।

১. বাটন কম্পোনেন্ট:

<!-- Button.riot -->
<button onclick={clickHandler}>{opts.label}</button>

<script>
  export default {
    clickHandler() {
      alert('Button clicked!');
    }
  }
</script>

ব্যাখ্যা:

• এখানে একটি বাটন কম্পোনেন্ট তৈরি করা হয়েছে। opts.label প্রপ্সের মাধ্যমে বাটনের টেক্সট পাস করা যাবে।
• clickHandler ফাংশনটি বাটনে ক্লিক হলে alert দেখাবে।

২. ইনপুট কম্পোনেন্ট:

<!-- InputField.riot -->
<input type="text" value={value} oninput={updateValue} />

<script>
  export default {
    onMounted() {
      this.value = '';  // Initial value
    },
    
    updateValue(e) {
      this.value = e.target.value;  // Update value on input change
    }
  }
</script>

ব্যাখ্যা:

• এখানে একটি ইনপুট কম্পোনেন্ট তৈরি করা হয়েছে। value ভ্যালু বাইন্ডিংয়ের মাধ্যমে ইনপুট ফিল্ডের মান ট্র্যাক করা হচ্ছে।
• updateValue ফাংশনটি ইনপুটে কোনো পরিবর্তন হলে value আপডেট করবে।

৩. লোগো কম্পোনেন্ট:

<!-- Logo.riot -->
<img src={opts.src} alt="Logo" />

<script>
  export default {
    opts: {
      src: 'default-logo.png'
    }
  }
</script>

ব্যাখ্যা:

• এখানে একটি লোগো কম্পোনেন্ট তৈরি করা হয়েছে, যেখানে opts.src প্রপ্সের মাধ্যমে লোগোর ছবি পাস করা যাবে। যদি কিছু না দেয়া হয়, তবে এটি ডিফল্ট ছবিটি দেখাবে।

কম্পোনেন্ট ব্যবহারের উদাহরণ:

এখন আপনি এই কম্পোনেন্টগুলোকে একত্রে একটি প্রধান কম্পোনেন্টে ব্যবহার করতে পারেন:

<!-- App.riot -->
<app>
  <logo src="logo.png" />
  <input-field />
  <button label="Click Me" />
</app>

<script>
  import Logo from './Logo.riot';
  import InputField from './InputField.riot';
  import Button from './Button.riot';

  export default {
    components: {
      Logo,
      InputField,
      Button
    }
  }
</script>

ব্যাখ্যা:

• App.riot কম্পোনেন্টে আপনি Logo, InputField, এবং Button কম্পোনেন্টগুলো ব্যবহার করছেন।
• Logo কম্পোনেন্টে লোগোর চিত্রের পথ পাস করা হয়েছে, এবং বাটন কম্পোনেন্টে লেবেল প্রপ্স পাস করা হয়েছে।
• Import এর মাধ্যমে কম্পোনেন্টগুলোকে একত্রিত করা হয়েছে এবং components অবজেক্টে রেজিস্টার করা হয়েছে।

Riot.js-এ মডুলার কোডিংয়ের সুবিধা:

1. আলাদা এবং সংগঠিত কোড: মডুলার কোডিংয়ের মাধ্যমে আপনি প্রতিটি ফিচার বা UI অংশ আলাদাভাবে তৈরি করতে পারেন। এতে কোডটি পরিষ্কার এবং সহজে রক্ষণাবেক্ষণযোগ্য হয়।
2. প্রতিটি কম্পোনেন্টের জন্য পৃথক ফাইল: Riot.js-এ প্রতিটি কম্পোনেন্ট সাধারণত একটি .riot ফাইলে থাকে, যার মধ্যে HTML, CSS এবং JavaScript থাকে। এটি কম্পোনেন্টের সংগঠন ও ব্যবস্থাপনাকে সহজ করে।
3. পুনঃব্যবহারযোগ্যতা: একবার তৈরি করা কম্পোনেন্টগুলি বিভিন্ন জায়গায় পুনরায় ব্যবহার করা যায়, যা কোডের পুনঃব্যবহারযোগ্যতা নিশ্চিত করে।
4. সহজ রক্ষণাবেক্ষণ: মডুলার ডিজাইন কোডের পরিবর্তন বা আপডেট করার সময় সহায়ক। এক একটি কম্পোনেন্ট আলাদাভাবে আপডেট করা যায় এবং এটি অন্য অংশে প্রভাব ফেলবে না।

মডুলার কোডিংয়ের সাধারণ রীতি:

• নির্দিষ্ট দায়িত্ব: প্রতিটি কম্পোনেন্ট একটিই নির্দিষ্ট কাজের জন্য দায়ী থাকে। উদাহরণস্বরূপ, একটি কম্পোনেন্ট শুধুমাত্র বাটন, একটি কম্পোনেন্ট ইনপুট ফিল্ড এবং একটি কম্পোনেন্ট শুধুমাত্র লোগো দেখানোর জন্য।
• কম্পোনেন্ট ইন্টারঅ্যাকশন: কম্পোনেন্টগুলো একে অপরের সাথে ইন্টারঅ্যাক্ট করে। উদাহরণস্বরূপ, একটি ইনপুট ফিল্ড কম্পোনেন্টের মান অন্য কম্পোনেন্টে পাস করা হতে পারে।
• সহজ রিফ্যাক্টরিং: মডুলার কোডিংয়ের মাধ্যমে কোড সহজেই রিফ্যাক্টর করা যায়, কারণ প্রতিটি কম্পোনেন্ট আলাদাভাবে তৈরি হয়।

সারসংক্ষেপ:

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

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

কোড মডুলারাইজেশন এর মূল ধারণা:

1. কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার: প্রতিটি UI উপাদান একটি স্বতন্ত্র কম্পোনেন্টে ভাগ করা হয়, যেখানে HTML, CSS এবং JavaScript একত্রিত থাকে।
2. ডেটা বাইন্ডিং এবং ইভেন্ট ব্যবস্থাপনা: কম্পোনেন্টগুলোর মধ্যে ডেটা বাইন্ডিং এবং ইভেন্টের মাধ্যমে যোগাযোগ করা হয়।
3. নির্দিষ্ট কম্পোনেন্ট তৈরি করা: ছোট ছোট কম্পোনেন্ট তৈরি করে জটিল অ্যাপ্লিকেশন গড়ে তোলা হয়।

১. কম্পোনেন্ট তৈরি এবং ব্যবহারের মাধ্যমে মডুলারাইজেশন

Riot.js এ কম্পোনেন্টগুলি খুবই ছোট এবং পুনঃব্যবহারযোগ্য ইউনিট হিসেবে কাজ করে, যেগুলোর মধ্যে HTML, CSS এবং JavaScript কোড একত্রিত থাকে। প্রতিটি কম্পোনেন্ট একে অপরের সাথে যোগাযোগ করতে পারে, তবে তাদের মধ্যে নির্দিষ্ট দায়িত্ব ভাগ করা থাকে।

উদাহরণ:

১.১ Main App কম্পোনেন্ট

<!-- src/components/App.riot -->
<app>
  <h1>Welcome to My Riot.js App</h1>
  
  <!-- Using child component -->
  <header-component></header-component>
  <sidebar-component></sidebar-component>
  <main-content></main-content>

  <script>
    import './HeaderComponent.riot';
    import './SidebarComponent.riot';
    import './MainContent.riot';

    export default {}
  </script>
</app>

১.২ HeaderComponent (Child Component)

<!-- src/components/HeaderComponent.riot -->
<header-component>
  <header>
    <h2>My App Header</h2>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav>
  </header>
  <style>
    header {
      background-color: #333;
      color: white;
      padding: 10px;
    }
  </style>
  <script>
    export default {}
  </script>
</header-component>

১.৩ SidebarComponent (Child Component)

<!-- src/components/SidebarComponent.riot -->
<sidebar-component>
  <aside>
    <ul>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </aside>
  <style>
    aside {
      background-color: #f4f4f4;
      padding: 20px;
    }
    ul {
      list-style-type: none;
    }
  </style>
  <script>
    export default {}
  </script>
</sidebar-component>

১.৪ MainContent (Child Component)

<!-- src/components/MainContent.riot -->
<main-content>
  <section>
    <h3>Main Content Area</h3>
    <p>This is where the main content goes.</p>
  </section>
  <style>
    section {
      padding: 20px;
    }
  </style>
  <script>
    export default {}
  </script>
</main-content>

ব্যাখ্যা:

• এখানে, App কম্পোনেন্ট একটি মূল কম্পোনেন্ট যা অন্যান্য তিনটি কম্পোনেন্ট (HeaderComponent, SidebarComponent, MainContent) ব্যবহার করছে।
• প্রতিটি কম্পোনেন্টের মধ্যে HTML, CSS এবং JavaScript কোড পৃথক করা হয়েছে।
• import এবং export ব্যবহার করে প্রতিটি কম্পোনেন্টকে আলাদা আলাদা ফাইলে রাখা হয়েছে এবং তাদের মধ্যে সম্পর্ক স্থাপন করা হয়েছে।

২. ডেটা বাইন্ডিং এবং ইভেন্ট ব্যবস্থাপনা

Riot.js এ কম্পোনেন্টের মধ্যে ডেটা বাইন্ডিং এবং ইভেন্ট ব্যবস্থাপনা খুব সহজ। আপনি একটি কম্পোনেন্টের ডেটা অন্য কম্পোনেন্টে পাস করতে পারেন এবং ইভেন্ট ব্যবহার করে তাদের মধ্যে যোগাযোগ স্থাপন করতে পারেন।

উদাহরণ:

২.১ Parent to Child Data Passing

<!-- src/components/ParentComponent.riot -->
<parent-component>
  <child-component title={parentTitle}></child-component>

  <button onclick={changeTitle}>Change Title</button>

  <script>
    import './ChildComponent.riot';

    export default {
      parentTitle: 'Hello from Parent',

      changeTitle() {
        this.parentTitle = 'New Title from Parent';
      }
    }
  </script>
</parent-component>

২.২ Child Component (Receiving Props)

<!-- src/components/ChildComponent.riot -->
<child-component>
  <h2>{opts.title}</h2>

  <script>
    export default {}
  </script>
</child-component>

ব্যাখ্যা:

• parentTitle ডেটা ParentComponent থেকে ChildComponent-এ opts.title হিসেবে পাস করা হচ্ছে।
• changeTitle() ফাংশনটি বাটন ক্লিক করলে parentTitle পরিবর্তন হবে এবং সেই অনুযায়ী Child কম্পোনেন্ট আপডেট হবে।

৩. ইভেন্ট ব্যবস্থাপনা (Event Management)

Riot.js-এ কম্পোনেন্টগুলির মধ্যে যোগাযোগের জন্য ইভেন্ট ব্যবস্থাপনা ব্যবহার করা হয়। আপনি একটি কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে custom events ব্যবহার করে ডেটা পাঠাতে পারেন।

উদাহরণ:

৩.১ Child to Parent Event Emission

<!-- src/components/ChildComponent.riot -->
<child-component>
  <button onclick={sendEvent}>Send Event to Parent</button>

  <script>
    export default {
      sendEvent() {
        this.emit('childEvent', 'Hello from Child');
      }
    }
  </script>
</child-component>

৩.২ Parent Component Listening to Child Event

<!-- src/components/ParentComponent.riot -->
<parent-component>
  <child-component onchildEvent={receiveEvent}></child-component>

  <p>{message}</p>

  <script>
    import './ChildComponent.riot';

    export default {
      message: '',

      receiveEvent(event) {
        this.message = event.detail;  // Receives the event from child
      }
    }
  </script>
</parent-component>

ব্যাখ্যা:

• Child কম্পোনেন্ট একটি ইভেন্ট childEvent ইমিট করছে, যা Parent কম্পোনেন্টে শোনা হচ্ছে।
• Parent কম্পোনেন্ট onchildEvent ইভেন্ট হ্যান্ডলার ব্যবহার করে Child থেকে আসা ডেটা গ্রহণ করছে এবং UI আপডেট হচ্ছে।

৪. Reusability and Maintainability

Riot.js-এ কোড মডুলারাইজেশন এবং কম্পোনেন্ট ব্যবহার করার ফলে আপনার অ্যাপ্লিকেশন সহজে রিইউজেবল এবং রক্ষণাবেক্ষণযোগ্য হয়ে ওঠে:

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

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

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

১. Parent to Child Communication (প্যারেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাঠানো)

Riot.js তে প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাস করার জন্য opts (options) ব্যবহার করা হয়। প্যারেন্ট কম্পোনেন্টে থাকা ডেটা opts মাধ্যমে চাইল্ড কম্পোনেন্টে পাস করা হয়।

উদাহরণ: Parent to Child Communication

Parent Component (ParentComponent.riot):

<parent-component>
  <child-component title={parentTitle}></child-component>

  <script>
    export default {
      onMounted() {
        this.parentTitle = "Hello from Parent!";
      }
    }
  </script>
</parent-component>

Child Component (ChildComponent.riot):

<child-component>
  <h1>{opts.title}</h1> <!-- opts.title প্যারেন্ট থেকে এসেছে -->

  <script>
    export default {
      onMounted() {
        console.log("Child component mounted!");
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• parentTitle প্যারেন্ট কম্পোনেন্টের ডেটা, যা opts.title হিসাবে চাইল্ড কম্পোনেন্টে পাস করা হয়েছে।
• চাইল্ড কম্পোনেন্টে {opts.title} দিয়ে প্যারেন্ট থেকে আসা ডেটা প্রদর্শিত হচ্ছে।

২. Child to Parent Communication (চাইল্ড থেকে প্যারেন্ট কম্পোনেন্টে ডেটা পাঠানো)

চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ডেটা পাঠাতে Custom Events ব্যবহার করা হয়। চাইল্ড কম্পোনেন্ট একটি কাস্টম ইভেন্ট ট্রিগার করতে পারে এবং প্যারেন্ট কম্পোনেন্ট সেই ইভেন্ট শুনে ডেটা গ্রহণ করতে পারে।

উদাহরণ: Child to Parent Communication

Parent Component (ParentComponent.riot):

<parent-component>
  <child-component onsubmit={handleSubmit}></child-component>

  <script>
    export default {
      handleSubmit(e) {
        console.log("Received data from child:", e.detail);
      }
    }
  </script>
</parent-component>

Child Component (ChildComponent.riot):

<child-component>
  <button onclick={sendData}>Send Data to Parent</button>

  <script>
    export default {
      sendData() {
        this.emit('submit', { message: 'Hello from Child!' }); // Custom event
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• this.emit('submit', { message: 'Hello from Child!' }) চাইল্ড কম্পোনেন্টে একটি কাস্টম ইভেন্ট submit তৈরি করে, যা প্যারেন্ট কম্পোনেন্টে পৌঁছায়।
• প্যারেন্ট কম্পোনেন্টে onsubmit হ্যান্ডলার মাধ্যমে চাইল্ড কম্পোনেন্ট থেকে পাঠানো ডেটা গ্রহণ করা হয়।

৩. Shared State (একটি স্টেট শেয়ার করা)

আপনি যদি একাধিক কম্পোনেন্টের মধ্যে একই স্টেট শেয়ার করতে চান, তাহলে একটি Global State বা Shared State ব্যবহার করতে পারেন। Riot.js তে সাধারণভাবে, shared state ম্যানেজমেন্টের জন্য একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি ব্যবহার করা হয় (যেমন Redux বা Flux), তবে ছোট অ্যাপ্লিকেশনগুলির জন্য স্টেট শেয়ার করতে আপনি সাধারণ JavaScript অবজেক্ট বা Riot.observable ব্যবহার করতে পারেন।

উদাহরণ: Shared State Using Riot.observable

Global State (State.js):

import riot from 'riot';

export const state = riot.observable({
  title: 'Initial State'
});

Parent Component (ParentComponent.riot):

<parent-component>
  <h1>{state.title}</h1>
  <button onclick={changeTitle}>Change Title</button>

  <script>
    import { state } from './State';

    export default {
      onMounted() {
        state.on('change', () => {
          this.update();
        });
      },

      changeTitle() {
        state.title = 'Updated by Parent!';
      }
    }
  </script>
</parent-component>

Child Component (ChildComponent.riot):

<child-component>
  <h1>{state.title}</h1>

  <script>
    import { state } from './State';

    export default {
      onMounted() {
        state.on('change', () => {
          this.update();
        });
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• state একটি শেয়ারড স্টেট হিসেবে ব্যবহার করা হয়েছে এবং এটি riot.observable() এর মাধ্যমে তৈরি করা হয়েছে।
• প্যারেন্ট এবং চাইল্ড কম্পোনেন্ট উভয়ই একই state শেয়ার করছে, ফলে এক কম্পোনেন্টে স্টেট পরিবর্তিত হলে অন্য কম্পোনেন্টে সেটি আপডেট হবে।

৪. Shared Functions (একটি ফাংশন শেয়ার করা)

রাইট.জেএস-এ ফাংশন শেয়ার করতে আপনি সাধারণ JavaScript ফাংশন ব্যবহার করতে পারেন অথবা একাধিক কম্পোনেন্টের মধ্যে Common Functions শেয়ার করতে একটি Utility Module তৈরি করতে পারেন।

উদাহরণ: Shared Functions Using Utility Module

Utility.js (Shared Function):

export function updateTitle(newTitle) {
  console.log('Title updated:', newTitle);
  return newTitle;
}

Parent Component (ParentComponent.riot):

<parent-component>
  <button onclick={updateParentTitle}>Update Title</button>

  <script>
    import { updateTitle } from './Utility';

    export default {
      updateParentTitle() {
        const newTitle = updateTitle('Updated from Parent!');
        console.log(newTitle); // "Updated from Parent!"
      }
    }
  </script>
</parent-component>

Child Component (ChildComponent.riot):

<child-component>
  <button onclick={updateChildTitle}>Update Title from Child</button>

  <script>
    import { updateTitle } from './Utility';

    export default {
      updateChildTitle() {
        const newTitle = updateTitle('Updated from Child!');
        console.log(newTitle); // "Updated from Child!"
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• Utility.js ফাইলটিতে একটি সাধারণ JavaScript ফাংশন updateTitle() তৈরি করা হয়েছে যা প্যারেন্ট এবং চাইল্ড কম্পোনেন্টে শেয়ার করা হয়েছে।

Riot.js-এ ট্যাগ এবং কম্পোনেন্ট এর মধ্যে ডেটা এবং ফাংশন শেয়ার করা সম্ভব বিভিন্ন উপায় দিয়ে:

1. প্যারেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাঠানোর জন্য opts ব্যবহার করা।
2. চাইল্ড থেকে প্যারেন্ট কম্পোনেন্টে ডেটা পাঠানোর জন্য কাস্টম ইভেন্ট ব্যবহার করা।
3. Shared State বা Global State ব্যবহারের মাধ্যমে একাধিক কম্পোনেন্টের মধ্যে স্টেট শেয়ার করা।
4. Utility Module ব্যবহার করে ফাংশন শেয়ার করা।

এগুলি Riot.js এর কম্পোনেন্ট ভিত্তিক অ্যাপ্লিকেশনে ডেটা এবং ফাংশন শেয়ার করার প্রধান উপায়।

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

Riot.js-এ কম্পোনেন্ট তৈরি করার প্রক্রিয়া খুবই সহজ। একটি কম্পোনেন্টের মধ্যে HTML, JavaScript, এবং CSS একত্রে থাকে। একবার একটি কম্পোনেন্ট তৈরি করলে, আপনি সেটিকে অন্য কোথাও পুনরায় ব্যবহার করতে পারবেন।

Riot.js-এ মডুলার কম্পোনেন্ট তৈরি এবং রিইউজ করার পদ্ধতি:

1. কম্পোনেন্ট তৈরি:

প্রথমে একটি কম্পোনেন্ট তৈরি করতে হবে। কম্পোনেন্টের মধ্যে HTML, CSS এবং JavaScript থাকে। এই কম্পোনেন্টটি একটি .riot ফাইল হিসেবে সংরক্ষণ করা হবে।

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

  <style>
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>

  <script>
    export default {
      handleClick() {
        alert('Button clicked!');
      }
    }
  </script>
</my-button>

এখানে:

• HTML: <button> ট্যাগ ব্যবহার করে একটি বাটন তৈরি করা হয়েছে।
• CSS: বাটনের জন্য কিছু স্টাইল যোগ করা হয়েছে।
• JavaScript: handleClick ফাংশনটি ক্লিক করার সময় একটি alert বার্তা প্রদর্শন করবে।
• opts.label: এটি কাস্টম প্রপার্টি যা বাহ্যিকভাবে পাঠানো হবে এবং বাটনের টেক্সট হিসেবে প্রদর্শিত হবে।

2. কম্পোনেন্ট রিইউজ করা:

একবার কম্পোনেন্ট তৈরি হলে, আপনি এটি অন্য কম্পোনেন্ট বা পৃষ্ঠায় ব্যবহার করতে পারবেন। নিচে দেখানো হলো কিভাবে MyButton কম্পোনেন্টটি অন্য একটি কম্পোনেন্টে ব্যবহার করা যায়।

<!-- App.riot -->
<app>
  <h1>Welcome to My App!</h1>
  <my-button label="Click Me"></my-button>
  <my-button label="Submit"></my-button>

  <script>
    import './MyButton.riot';
  </script>
</app>

এখানে:

• <my-button label="Click Me"></my-button>: MyButton কম্পোনেন্টটি এখানে ব্যবহার করা হয়েছে এবং label প্রপার্টির মাধ্যমে কম্পোনেন্টে ডাইনামিক টেক্সট পাঠানো হয়েছে।

3. কম্পোনেন্টের ডেটা পাস করা (Props):

Riot.js-এ কম্পোনেন্টের মধ্যে বাহ্যিক ডেটা পাঠানোর জন্য Props ব্যবহার করা হয়। এটি opts (options) অবজেক্টের মাধ্যমে ঘটে। উপরে উল্লেখ করা label হল একটি Prop যা আপনি বাহ্যিকভাবে পাঠাতে পারেন।

<!-- AnotherComponent.riot -->
<another-component>
  <my-button label="Dynamic Label 1"></my-button>
  <my-button label="Dynamic Label 2"></my-button>

  <script>
    import './MyButton.riot';
  </script>
</another-component>

এখানে:

• Props label: এটি MyButton কম্পোনেন্টে পাঠানো হচ্ছে, যার মাধ্যমে প্রতিটি বাটনের টেক্সট ডাইনামিকভাবে নির্ধারিত হবে।

4. কম্পোনেন্টের স্টেট (State) ব্যবহার:

একটি কম্পোনেন্টের অভ্যন্তরে state ব্যবহার করে আপনি ডেটার মান পরিবর্তন করতে পারেন এবং তা UI তে রেন্ডার করতে পারেন।

<!-- Counter.riot -->
<counter>
  <button onclick={increment}>Increment</button>
  <p>Count: {count}</p>

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

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

এখানে:

• State: count হল একটি স্টেট ভেরিয়েবল, যা increment ফাংশনের মাধ্যমে আপডেট হয় এবং UI তে পরিবর্তিত হয়।
• onMounted(): এটি একটি লাইফসাইকেল হুক, যা কম্পোনেন্ট DOM এ যুক্ত হওয়ার পর চালু হয়।

5. কম্পোনেন্টে ইভেন্ট হ্যান্ডলিং:

Riot.js-এ ইভেন্ট হ্যান্ডলিং খুব সহজ। আপনি ইভেন্ট বাইন্ডিং ব্যবহার করে কম্পোনেন্টের ইন্টারঅ্যাকশন পরিচালনা করতে পারেন।

<!-- ClickTracker.riot -->
<click-tracker>
  <button onclick={handleClick}>Click Me!</button>
  <p>You clicked {clickCount} times.</p>

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

      handleClick() {
        this.clickCount++;
      }
    }
  </script>
</click-tracker>

এখানে:

• Event Handling: onclick={handleClick} ব্যবহার করে বাটনে ক্লিক ইভেন্ট বাইন্ড করা হয়েছে, যা handleClick ফাংশনটি কল করে এবং clickCount বাড়ায়।

6. কম্পোনেন্টের শৈলী (Scoped Styling):

Riot.js-এ CSS কম্পোনেন্ট-ভিত্তিক, অর্থাৎ প্রতিটি কম্পোনেন্টের স্টাইল শুধুমাত্র সেই কম্পোনেন্টের জন্য প্রযোজ্য। এতে কোডের স্কোপড স্টাইলিং করা সহজ হয়ে যায়।

<!-- StyledComponent.riot -->
<styled-component>
  <h2>Styled Component</h2>
  <p>This is a styled component.</p>

  <style>
    h2 {
      color: darkblue;
    }

    p {
      font-size: 16px;
    }
  </style>
</styled-component>

এখানে:

• Scoped Styling: h2 এবং p ট্যাগের জন্য CSS স্টাইল ব্যবহার করা হয়েছে, যা শুধু এই কম্পোনেন্টের জন্য প্রযোজ্য।

Riot.js-এ মডুলার কম্পোনেন্ট তৈরি এবং রিইউজ করা অত্যন্ত সহজ এবং কার্যকরী। একবার একটি কম্পোনেন্ট তৈরি করলে, আপনি সেই কম্পোনেন্টকে যেকোনো স্থানে পুনরায় ব্যবহার করতে পারবেন। Props এবং State ব্যবহার করে আপনি কম্পোনেন্টের মধ্যে ডেটা পাস এবং আপডেট করতে পারেন। Scoped Styling এর মাধ্যমে প্রতিটি কম্পোনেন্টের জন্য আলাদা স্টাইল রাখতে পারবেন।

Riot.js-এ ট্যাগ লাইব্রেরি তৈরি এবং ব্যবস্থাপনা খুবই সহজ। Riot.js কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার ব্যবহার করে, যেখানে প্রতিটি কম্পোনেন্ট (যা সাধারণত ট্যাগ নামে পরিচিত) HTML, JavaScript এবং CSS একত্রে থাকে। আপনি আপনার অ্যাপ্লিকেশনে পুনঃব্যবহারযোগ্য ট্যাগ লাইব্রেরি তৈরি করতে পারেন, যা বিভিন্ন কম্পোনেন্ট রেন্ডার করতে সাহায্য করবে।

Riot.js-এ ট্যাগ লাইব্রেরি তৈরি ও ব্যবস্থাপনা:

Riot.js-এ ট্যাগ লাইব্রেরি তৈরি করতে, আপনাকে .riot ফাইল ব্যবহার করতে হবে, যেখানে প্রতিটি ট্যাগ একটি স্বতন্ত্র কম্পোনেন্ট হিসেবে কাজ করবে। আপনি এই ট্যাগগুলিকে একটি লাইব্রেরি বা মডিউল আকারে সংকলন করতে পারেন এবং অন্য ট্যাগ বা কম্পোনেন্টে ব্যবহার করতে পারেন।

উদাহরণ 1: একটি সাধারণ ট্যাগ তৈরি করা

ধরা যাক আপনি একটি ট্যাগ তৈরি করতে চান যেটি একটি ইউজার প্রোফাইল প্রদর্শন করবে।

<!-- UserProfile.riot -->
<user-profile>
  <h2>{opts.name}</h2>
  <p>{opts.email}</p>

  <style>
    h2 {
      color: #4CAF50;
    }
    p {
      color: #555;
    }
  </style>
</user-profile>

এখানে, আমরা UserProfile নামে একটি ট্যাগ তৈরি করেছি, যা opts.name এবং opts.email ডেটা প্রপার্টি গ্রহণ করে। এই ট্যাগটি কোনও ডেটার উপর ভিত্তি করে ডাইনামিক ইউজার প্রোফাইল তথ্য রেন্ডার করবে।

উদাহরণ 2: ট্যাগ লাইব্রেরি তৈরি ও ব্যবস্থাপনা

ধরা যাক, আপনি অনেকগুলি ট্যাগ তৈরি করেছেন এবং সেগুলিকে একটি লাইব্রেরির মতো একত্রে সংকলন করতে চান।

1. ট্যাগ লাইব্রেরি তৈরি করা:

<!-- Header.riot -->
<header>
  <h1>Welcome to My Website</h1>
</header>

<!-- Footer.riot -->
<footer>
  <p>© 2024 My Website</p>
</footer>

<!-- UserProfile.riot -->
<user-profile>
  <h2>{opts.name}</h2>
  <p>{opts.email}</p>
</user-profile>

এখানে, আপনি তিনটি পৃথক ট্যাগ তৈরি করেছেন:

• Header: ওয়েবসাইটের শিরোনাম প্রদর্শন করে।
• Footer: ওয়েবসাইটের ফুটার প্রদর্শন করে।
• UserProfile: ইউজারের নাম এবং ইমেইল দেখায়।

2. লাইব্রেরি ব্যবহার করে ট্যাগ মাউন্ট করা:

<!-- App.riot -->
<app>
  <!-- Header ট্যাগ -->
  <header></header>

  <!-- UserProfile ট্যাগ -->
  <user-profile name="John Doe" email="johndoe@example.com"></user-profile>

  <!-- Footer ট্যাগ -->
  <footer></footer>

  <script>
    import riot from 'riot'
    import Header from './Header.riot'
    import Footer from './Footer.riot'
    import UserProfile from './UserProfile.riot'

    export default {
      onMounted() {
        // ট্যাগগুলো মাউন্ট করা
        riot.mount('header', Header)
        riot.mount('footer', Footer)
        riot.mount('user-profile', UserProfile)
      }
    }
  </script>
</app>

এখানে, আপনি আপনার App কম্পোনেন্টের মধ্যে Header, Footer এবং UserProfile ট্যাগগুলো মাউন্ট করেছেন। riot.mount() ব্যবহার করে আপনি প্রতিটি ট্যাগকে ডাইনামিকভাবে রেন্ডার করছেন।

উদাহরণ 3: ডাটা শেয়ার করা এবং রিয়েকটিভ লাইফসাইকেল

Riot.js-এ কম্পোনেন্টগুলোর মধ্যে ডাটা শেয়ার করা খুবই সহজ। আপনি একটি প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডাটা পাঠাতে পারেন।

<!-- ParentComponent.riot -->
<parent-component>
  <user-profile name={parentName} email={parentEmail}></user-profile>

  <script>
    import UserProfile from './UserProfile.riot'

    export default {
      onMounted() {
        this.parentName = 'Jane Doe'
        this.parentEmail = 'janedoe@example.com'
      }
    }
  </script>
</parent-component>

এখানে, parentName এবং parentEmail ডেটা প্রপার্টি প্যারেন্ট কম্পোনেন্ট থেকে UserProfile ট্যাগে পাস করা হয়েছে।

উদাহরণ 4: কম্পোনেন্ট লাইফসাইকেল ব্যবহারের মাধ্যমে ট্যাগ পরিচালনা

Riot.js-এ কম্পোনেন্ট লাইফসাইকেল মেথড যেমন onMounted, onUpdated, onBeforeUnmount ইত্যাদি ব্যবহার করে আপনি ট্যাগের ডেটা বা লজিক পরিচালনা করতে পারেন।

<!-- Timer.riot -->
<timer>
  <p>Time Left: {time}</p>

  <script>
    export default {
      onMounted() {
        this.time = 10
        this.timerInterval = setInterval(() => {
          this.time--
          if (this.time <= 0) clearInterval(this.timerInterval)
        }, 1000)
      },

      onBeforeUnmount() {
        clearInterval(this.timerInterval)
      }
    }
  </script>
</timer>

এখানে, Timer কম্পোনেন্ট প্রতি সেকেন্ডে সময় গুণিত করে এবং যখন সময় শেষ হয় তখন টাইমার বন্ধ হয়ে যায়।

সারাংশ:

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

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