Web Workers হল JavaScript-এ মাল্টিথ্রেডিং সমর্থনকারী একটি প্রযুক্তি যা ব্রাউজারে পেছনের থ্রেডে স্ক্রিপ্ট রান করতে সক্ষম করে। এর মাধ্যমে ইউজার ইন্টারফেস বা মেইন থ্রেডে কোনো বিলম্ব বা ব্লকিং ছাড়াই দীর্ঘকাল চলতে থাকা প্রসেসগুলো কার্যকরী করা যায়। Angular এ Web Workers ব্যবহার করলে অ্যাপ্লিকেশন আরও দ্রুত এবং সাড়া দেওয়ার সক্ষম হয়, বিশেষ করে বড় পরিসরের ডেটা প্রসেসিং বা কোনো ভারী কাজের ক্ষেত্রে।

Web Workers এর সুবিধা

• অসীম সমান্তরাল প্রসেসিং: একাধিক কাজ একযোগে চালানো যায়, মেইন থ্রেড ব্লক না হয়ে।
• ব্যবহারকারী ইন্টারফেসের গতিশীলতা: ভারী কাজের কারণে UI হালকা থাকে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।
• ব্যাকগ্রাউন্ড প্রসেসিং: বড় পরিসরের ডেটা বা গণনা ব্যাকগ্রাউন্ডে চালানো যায়, যার ফলে ইউজার ইন্টারফেস ক্র্যাশ বা স্লো হয় না।

Angular এ Web Workers ব্যবহার করা

Angular অ্যাপ্লিকেশনে Web Workers ব্যবহার করতে Angular CLI সরাসরি সাহায্য করে। এখানে আমরা ধাপে ধাপে দেখব কিভাবে Angular-এ Web Worker ইন্টিগ্রেট করা যায়।

১. Web Worker তৈরি করা

Angular CLI দিয়ে সহজেই Web Worker তৈরি করা যায়। CLI কমান্ড ব্যবহার করলে প্রয়োজনীয় ফাইলগুলো তৈরি হয়ে যায় এবং আপনি সরাসরি Web Worker ব্যবহার করতে পারবেন।

ng generate web-worker worker-name

এটি একটি নতুন Web Worker ফাইল তৈরি করবে, যেমন worker-name.worker.ts।

২. Web Worker কোড

যখন আপনি একটি Web Worker তৈরি করবেন, তখন মূল কাজের লজিক Web Worker ফাইলে থাকবে। উদাহরণস্বরূপ, যদি আপনি একটি গণনা বা বড় ডেটা প্রসেস করতে চান, সেটি Web Worker থ্রেডে করা হবে, যাতে মেইন থ্রেড ব্লক না হয়।

worker-name.worker.ts:

// Web Worker কোড
addEventListener('message', ({ data }) => {
  // এখানে আমরা কোনো কাজ করব, যেমন গণনা বা ডেটা প্রসেসিং
  const result = data.num * 2; // উদাহরণস্বরূপ, সংখ্যা গুণ করা
  postMessage(result); // ফলাফল মেইন থ্রেডে পাঠানো
});

এখানে addEventListener দিয়ে আমরা Web Worker থেকে ডেটা গ্রহণ করছি এবং postMessage দিয়ে ফলাফল মেইন থ্রেডে পাঠাচ্ছি।

৩. মেইন থ্রেডে Web Worker ব্যবহার করা

Web Worker কোড সম্পন্ন হওয়ার পর, মেইন থ্রেডে Web Worker থেকে কাজ করার জন্য Worker API ব্যবহার করতে হবে।

app.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Web Worker Example</h1>
             <button (click)="runWorker()">Run Web Worker</button>
             <p>Result: {{ result }}</p>`,
})
export class AppComponent implements OnInit {
  result: number = 0;

  private worker: Worker;

  ngOnInit() {
    // Web Worker ফাইলটি লোড করা
    if (typeof Worker !== 'undefined') {
      this.worker = new Worker(new URL('./worker-name.worker', import.meta.url));
    }
  }

  runWorker() {
    // Web Worker-এ মেসেজ পাঠানো
    this.worker.postMessage({ num: 5 });

    // Worker থেকে ফলাফল পাওয়া
    this.worker.onmessage = ({ data }) => {
      this.result = data;
    };
  }
}

এখানে:

• new Worker() দিয়ে আমরা Web Worker তৈরি করেছি এবং এটি একটি ফাইল হিসাবে লোড করছি।
• postMessage() ব্যবহার করে Web Worker-এ ডেটা পাঠানো হচ্ছে।
• onmessage ইভেন্ট হ্যান্ডলার দিয়ে আমরা Web Worker থেকে প্রাপ্ত ফলাফল গ্রহণ করছি।

৪. Web Worker বন্ধ করা

Web Worker ব্যবহারের পর এটি বন্ধ করে দেওয়া উচিত, যাতে এটি অতিরিক্ত মেমরি ব্যবহার না করে।

ngOnDestroy() {
  if (this.worker) {
    this.worker.terminate(); // Web Worker বন্ধ করা
  }
}

Angular এবং Web Worker এর সুবিধা

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

সীমাবদ্ধতা

• ডেটা শেয়ারিং: Web Worker এবং UI থ্রেডের মধ্যে ডেটা শেয়ারিং কিছুটা সীমিত। একমাত্র postMessage() এবং onmessage ইভেন্টের মাধ্যমে ডেটা আদান-প্রদান করা যায়।
• ডোম ম্যানিপুলেশন: Web Worker ডিরেক্টলি ডোম ম্যানিপুলেট করতে পারে না, তবে শুধু ব্যাকগ্রাউন্ডে কাজ করার জন্য ব্যবহৃত হয়।

উপসংহার

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