Computer Programming Import এবং Export (ইমপোর্ট এবং এক্সপোর্ট) গাইড ও নোট

WebAssembly-তে ইমপোর্ট এবং এক্সপোর্ট (Import and Export)

WebAssembly (WASM) একটি কম্পাইলড বাইনারি ফরম্যাট যা মূলত ব্রাউজারে দ্রুত এবং কার্যকরী কোড রান করার জন্য ডিজাইন করা হয়েছে। WebAssembly মডিউলগুলি সাধারণত ইমপোর্ট এবং এক্সপোর্ট অপারেশনগুলি ব্যবহার করে বাহ্যিক কোডের (যেমন JavaScript বা অন্য WASM মডিউল) সাথে ইন্টারঅ্যাক্ট করে।

ইমপোর্ট এবং এক্সপোর্ট মূলত মডিউলগুলির মধ্যে যোগাযোগের প্রক্রিয়া। এগুলি WebAssembly এর ফাংশনালিটি বাড়ানোর জন্য ব্যবহৃত হয় এবং বাহ্যিক কোডের সাথে যোগাযোগের মাধ্যমে মডিউলের কার্যকারিতা বৃদ্ধি করে।

1. ইমপোর্ট (Import)

ইমপোর্ট হলো WebAssembly মডিউল থেকে বাইরের ফাংশন বা ডাটা গ্রহণের প্রক্রিয়া। একটি WebAssembly মডিউল বাইরের পরিবেশ থেকে ফাংশন, ডাটা, বা মেমরি ব্যবহার করতে ইমপোর্ট করে, যা মডিউলটির কার্যকারিতা বাড়ায় এবং বাহ্যিক কোডের সাথে ইন্টিগ্রেট হতে সহায়ক হয়।

ইমপোর্ট ফাংশনের গঠন:

• ইমপোর্ট সেকশন WebAssembly মডিউলের একটি অংশ যেখানে বাইরের কোড বা ফাংশনগুলো উল্লেখ করা হয়। এটি JavaScript বা অন্য WASM মডিউল থেকে ফাংশন বা ডাটা ইমপোর্ট করতে পারে।

উদাহরণ:

ধরা যাক, একটি JavaScript ফাংশন WebAssembly মডিউলে ইমপোর্ট করা হচ্ছে:

JavaScript ইমপোর্ট:

const importObject = {
  env: {
    imported_func: function(x, y) {
      return x + y;  // JavaScript ফাংশন
    }
  }
};

fetch('your_wasm_module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, importObject))
  .then(results => {
    const { instance } = results;
    console.log(instance.exports.add(3, 4)); // WebAssembly ফাংশন কল
  });

WebAssembly কোড:

(module
  (import "env" "imported_func" (func $imported_func (param i32 i32) (result i32)))
  (func $add (param i32 i32) (result i32)
    (call $imported_func (local.get 0) (local.get 1))
  )
  (export "add" (func $add))
)

এখানে, imported_func JavaScript থেকে ইমপোর্ট করা হয়েছে এবং WebAssembly মডিউলটি সেই ফাংশনটি ব্যবহার করেছে।

2. এক্সপোর্ট (Export)

এক্সপোর্ট হলো WebAssembly মডিউল থেকে বাহ্যিক কোড বা মডিউলের জন্য ফাংশন, ডাটা বা অন্যান্য রিসোর্স এক্সপোর্ট করার প্রক্রিয়া। এক্সপোর্টের মাধ্যমে WebAssembly কোড বা ফাংশনগুলো বাহ্যিক কোড যেমন JavaScript থেকে অ্যাক্সেস করা যেতে পারে।

এক্সপোর্ট ফাংশনের গঠন:

• এক্সপোর্ট সেকশন হল মডিউলের অংশ যেখানে মডিউলের ভেতরের ফাংশন, ডাটা বা অন্যান্য উপাদান অন্য মডিউল বা কোডের জন্য এক্সপোর্ট করা হয়।

উদাহরণ:

ধরা যাক, একটি WebAssembly ফাংশন JavaScript এ এক্সপোর্ট করা হচ্ছে:

WebAssembly কোড:

(module
  (func $add (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add)
  (export "add" (func $add))
)

এখানে add ফাংশনটি WebAssembly থেকে JavaScript তে এক্সপোর্ট করা হয়েছে।

JavaScript এক্সপোর্ট:

fetch('your_wasm_module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    const { instance } = results;
    console.log(instance.exports.add(5, 10)); // WebAssembly ফাংশন কল
  });

এখানে WebAssembly ফাংশন add JavaScript এ এক্সপোর্ট করা হয়েছে এবং সেই ফাংশনটি JavaScript থেকে কল করা হচ্ছে।

3. ইমপোর্ট এবং এক্সপোর্ট এর মধ্যে সম্পর্ক

• ইমপোর্ট: বাহ্যিক কোড (যেমন JavaScript) WebAssembly মডিউল থেকে ফাংশন বা ডাটা ব্যবহার করতে ইমপোর্ট করে।
• এক্সপোর্ট: WebAssembly মডিউল বাহ্যিক কোড (যেমন JavaScript) কে তার ফাংশন বা ডাটা প্রদান করতে এক্সপোর্ট করে।

এগুলি একে অপরের পরিপূরক হিসেবে কাজ করে এবং মডিউলগুলির মধ্যে সম্পর্ক স্থাপন করতে সাহায্য করে।

4. ইমপোর্ট এবং এক্সপোর্ট এর উপকারিতা

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

5. ব্যবহারের উদাহরণ

ধরা যাক, আপনার একটি গণিত সম্পর্কিত WebAssembly মডিউল রয়েছে এবং আপনি JavaScript থেকে সেই মডিউলটি ব্যবহার করতে চান। আপনি ইমপোর্ট এর মাধ্যমে JavaScript ফাংশন বা ডাটা গ্রহণ করতে পারেন এবং এক্সপোর্ট এর মাধ্যমে WebAssembly এর ফাংশন JavaScript এ দিতে পারেন।

WebAssembly গণনা কোড:

(module
  (import "env" "multiply" (func $multiply (param i32 i32) (result i32)))
  (func $add (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add)
  (export "add" (func $add))
)

JavaScript কোড:

const importObject = {
  env: {
    multiply: function (x, y) {
      return x * y;
    }
  }
};

fetch('your_wasm_module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, importObject))
  .then(results => {
    const { instance } = results;
    console.log(instance.exports.add(5, 10));  // যোগফল
    console.log(instance.exports.multiply(5, 10));  // গুণফল
  });

এখানে, multiply ফাংশন JavaScript থেকে ইমপোর্ট করা হচ্ছে, এবং add ফাংশন WebAssembly থেকে এক্সপোর্ট করা হচ্ছে।

সারসংক্ষেপ

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

JavaScript এবং WebAssembly এর মধ্যে Function Import/Export

WebAssembly (WASM) এবং JavaScript একে অপরের সাথে ইন্টিগ্রেট করে কাজ করতে পারে, যার মধ্যে একটি গুরুত্বপূর্ণ দিক হলো function import এবং function export। WebAssembly মডিউল থেকে JavaScript ফাংশন ইম্পোর্ট বা এক্সপোর্ট করার মাধ্যমে দুইটি কোড একে অপরের সাথে ইন্টারঅ্যাক্ট করতে পারে।

নিম্নে WebAssembly এবং JavaScript এর মধ্যে function import এবং export করার বিস্তারিত প্রক্রিয়া আলোচনা করা হলো।

1. JavaScript থেকে WebAssembly মডিউলে Function Import

WebAssembly মডিউলে JavaScript এর কোনো ফাংশন ইম্পোর্ট করতে চাইলে, প্রথমে আপনাকে JavaScript ফাংশনটি WebAssembly মডিউলে import করতে হবে। এটি মূলত WebAssembly মডিউলকে বাইরের কোডের সাথে যোগাযোগ করার সুযোগ দেয়।

1.1 JavaScript ফাংশন Import করা

ধরা যাক, আপনার JavaScript কোডে একটি multiply নামক ফাংশন রয়েছে, যেটি WebAssembly মডিউলে ইম্পোর্ট করা হবে।

// JavaScript ফাংশন
function multiply(a, b) {
    return a * b;
}

// WebAssembly মডিউল লোড এবং ফাংশন ইম্পোর্ট
fetch('your_module.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes, {
        env: { // এখানে আমরা JavaScript ফাংশন ইম্পোর্ট করছি
            multiply: multiply
        }
    }))
    .then(wasmModule => {
        const multiplyFromWasm = wasmModule.instance.exports.multiply;
        const result = multiplyFromWasm(3, 4); // WebAssembly ফাংশন কল
        console.log("Multiplication result from WebAssembly: ", result);
    })
    .catch(console.error);

• এখানে, multiply JavaScript ফাংশনটি WebAssembly মডিউলে ইম্পোর্ট করা হয়েছে env নামক এক্সপোর্ট টেবিলের মাধ্যমে।
• এর পর, JavaScript থেকে WebAssembly মডিউলটি লোড হয়ে সেই ফাংশনটি WebAssembly কোডে ব্যবহৃত হচ্ছে।

1.2 WebAssembly ফাংশন Import করা (WebAssembly কোড)

আপনার WebAssembly কোডে এইভাবে ফাংশন ইম্পোর্ট করতে হবে:

// WebAssembly কোডে multiply ফাংশন ইম্পোর্ট করা
extern int multiply(int, int);

int main() {
    int result = multiply(5, 3);  // বাইরের JavaScript ফাংশন কল
    return 0;
}

এখানে multiply ফাংশনটি বাইরের কোড (JavaScript) থেকে ইম্পোর্ট করা হচ্ছে এবং WebAssembly কোডে ব্যবহৃত হচ্ছে।

2. WebAssembly থেকে JavaScript মডিউলে Function Export

WebAssembly মডিউল থেকে JavaScript এর জন্য ফাংশন এক্সপোর্ট করার মাধ্যমে WebAssembly মডিউলটি বাইরের JavaScript কোডের জন্য ফাংশন বা ডেটা প্রদান করতে পারে। এটি খুবই উপকারী যখন আপনি ওয়েব অ্যাপ্লিকেশনে দ্রুত পারফরম্যান্সের জন্য WebAssembly ব্যবহার করতে চান এবং JavaScript এর মধ্যে ওয়েব পেজের ইন্টারঅ্যাকশন রাখতে চান।

2.1 WebAssembly থেকে JavaScript ফাংশন Export করা

ধরা যাক, আপনার WebAssembly কোডে একটি add নামক ফাংশন রয়েছে, যেটি JavaScript এ এক্সপোর্ট করা হবে।

#include <stdio.h>

// WebAssembly ফাংশন
int add(int a, int b) {
    return a + b;
}

এই কোডটি add ফাংশনটি WebAssembly মডিউলে ডিফাইন করে, যা পরবর্তীতে বাইরের JavaScript কোডে এক্সপোর্ট করা হবে।

2.2 JavaScript এ WebAssembly ফাংশন Export করা

JavaScript কোডে এটি ব্যবহার করার জন্য, WebAssembly মডিউল লোড করার সময় add ফাংশন এক্সপোর্ট করতে হবে:

fetch('your_module.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes))
    .then(wasmModule => {
        const addFromWasm = wasmModule.instance.exports.add; // WebAssembly থেকে add ফাংশন এক্সপোর্ট করা
        const result = addFromWasm(10, 20);
        console.log("Sum from WebAssembly: ", result);
    })
    .catch(console.error);

এখানে, add ফাংশনটি WebAssembly থেকে JavaScript এ এক্সপোর্ট করা হচ্ছে এবং JavaScript থেকে সেই ফাংশন কল করা হচ্ছে।

3. WebAssembly এবং JavaScript এর মধ্যে Import/Export এর উদাহরণ

ধরা যাক, আপনার WebAssembly মডিউলটি বাইরের JavaScript ফাংশন ব্যবহার করে এবং সেই মডিউলটি JavaScript থেকে WebAssembly এর ফাংশন এক্সপোর্ট করছে।

3.1 Full Example

1. WebAssembly কোড (C ভাষায়):

#include <stdio.h>

extern int multiply(int, int);  // JavaScript ফাংশন ইম্পোর্ট

int add(int a, int b) {
    return a + b;
}

int main() {
    int sum = add(5, 10);  // নিজস্ব ফাংশন কল
    int product = multiply(4, 6);  // বাইরের JavaScript ফাংশন কল
    return 0;
}

2. JavaScript কোড:

// JavaScript ফাংশন
function multiply(a, b) {
    return a * b;
}

// WebAssembly মডিউল লোড করা এবং ফাংশন ইম্পোর্ট/এক্সপোর্ট
fetch('your_module.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes, {
        env: {
            multiply: multiply  // JavaScript ফাংশন ইম্পোর্ট
        }
    }))
    .then(wasmModule => {
        // WebAssembly মডিউল থেকে add ফাংশন এক্সপোর্ট
        const addFromWasm = wasmModule.instance.exports.add;
        const result = addFromWasm(10, 20);
        console.log("Sum from WebAssembly: ", result);
    })
    .catch(console.error);

এই উদাহরণে:

• JavaScript কোডে multiply ফাংশন WebAssembly মডিউলে import করা হয়েছে।
• WebAssembly থেকে add ফাংশন export করে JavaScript কোডে কল করা হচ্ছে।

সারসংক্ষেপ

• Import: WebAssembly মডিউল বাইরের JavaScript ফাংশন ইম্পোর্ট করে, যার মাধ্যমে বাইরের কোড থেকে ফাংশন ব্যবহার করা যায়।
• Export: WebAssembly মডিউল থেকে বাইরের JavaScript কোডে ফাংশন এক্সপোর্ট করা হয়, যাতে JavaScript সেই ফাংশন ব্যবহার করতে পারে।
• WebAssembly Functions: WebAssembly এবং JavaScript একে অপরের সাথে ইন্টারঅ্যাক্ট করতে পারে, যার মাধ্যমে দুইটি পরিবেশের মধ্যে কার্যকরী ফাংশন শেয়ার করা সম্ভব।

এই পদ্ধতি ব্যবহারের মাধ্যমে, WebAssembly এবং JavaScript একে অপরের সাথে সঠিকভাবে কাজ করতে পারে এবং ওয়েব অ্যাপ্লিকেশনগুলির পারফরম্যান্স আরও দ্রুত এবং কার্যকরী হতে পারে।

WebAssembly এর Import Object এর ধারণা

WebAssembly Import Object হলো একটি বিশেষ অবজেক্ট যা WebAssembly মডিউলে বাইরের (অথবা হোস্ট সিস্টেমের) ফাংশন, মেমোরি বা টেবিল ইমপোর্ট করতে ব্যবহৃত হয়। এই Import Object এর মাধ্যমে WebAssembly মডিউল বাইরের কোডের সাথে ইন্টারঅ্যাক্ট করতে পারে, যেমন JavaScript এর ফাংশন অথবা অন্যান্য WebAssembly মডিউলগুলোর ফাংশন।

WebAssembly মডিউলগুলির মধ্যে ইন্টারঅ্যাকশনের জন্য Import Object খুবই গুরুত্বপূর্ণ। WebAssembly মডিউল বাইরের ফাংশন এবং ডাটা ব্যবহার করতে পারে, যেমন মেমোরি বা কাস্টম ফাংশন, যেগুলো নিজে থেকে সরাসরি এক্সিকিউট করা সম্ভব নয়।

Import Object কিভাবে কাজ করে?

একটি WebAssembly মডিউল যখন বাইরের ফাংশন বা ডাটা ইমপোর্ট করতে চায়, তখন সেই বাইরের ফাংশন বা ডাটা Import Object এর মাধ্যমে প্রদান করা হয়। এই Import Object এ বাইরের ফাংশন বা ডাটা সমূহকে ডিফাইন করা হয়, এবং তা WebAssembly মডিউলকে সরবরাহ করা হয় যখন মডিউলটি রান করা হয়।

Import Object এর কাঠামো

WebAssembly মডিউলে বাইরের ফাংশন বা ডাটা ইমপোর্ট করার জন্য import কিওয়ার্ড ব্যবহার করা হয়, এবং এটি সাধারণত একটি অবজেক্ট হিসেবে প্রদর্শিত হয়। Import Object এর মাধ্যমে বাইরের ফাংশন অথবা ডাটা এক্সপোর্ট করা হয় এবং সেগুলো ওয়েব অ্যাপ্লিকেশন বা অন্যান্য কোডের মধ্যে ব্যবহার করা যায়।

উদাহরণ: Import Object ব্যবহার

ধরা যাক, আপনার একটি WebAssembly মডিউল আছে এবং সেই মডিউলটি বাইরের একটি JavaScript ফাংশন ইমপোর্ট করতে চায়। তাহলে Import Object এ আপনি সেই ফাংশনটি ডিফাইন করতে পারেন।

1. WebAssembly মডিউল (WAT):

(module
  (import "env" "log" (func $log (param i32)))
  (func $calculate (param $x i32) (result i32)
    (i32.add (local.get $x) (i32.const 5))
  )
  (export "calculate" (func $calculate))
)

এই উদাহরণে:

• env নামক একটি ইমপোর্টেড অবজেক্টের log ফাংশন ইমপোর্ট করা হয়েছে।
• calculate নামক একটি ফাংশন ডিফাইন করা হয়েছে, যা একটি ইনপুট x নিয়ে তার সাথে 5 যোগ করে রিটার্ন করবে।
• log ফাংশনটি ব্যবহৃত হয়নি, তবে এটি বাইরের JavaScript কোডের মাধ্যমে ব্যবহৃত হতে পারে।

2. JavaScript কোড:

const importObject = {
  env: {
    log: function(x) {
      console.log("Log from WebAssembly:", x);
    }
  }
};

fetch('your_module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, importObject))
  .then(wasmModule => {
    const { calculate } = wasmModule.instance.exports;
    
    const result = calculate(10); // WebAssembly মডিউল থেকে ফাংশন কল
    console.log("Result from WebAssembly:", result); // 15
  })
  .catch(console.error);

এই কোডে:

• importObject নামক একটি অবজেক্ট তৈরি করা হয়েছে, যেখানে env অবজেক্টে log ফাংশন ডিফাইন করা হয়েছে।
• WebAssembly.instantiate ফাংশনটি WebAssembly মডিউলকে লোড এবং ইনস্ট্যানশিয়েট করে, এবং importObject প্যারামিটার হিসেবে ব্যবহার করা হয়।
• calculate ফাংশনটি ওয়েব অ্যাপ্লিকেশন থেকে কল করা হয় এবং তার ফলাফল (যা ১৫ হবে) দেখানো হয়।

3. কী ঘটছে?

• JavaScript এ log ফাংশনটি importObject এ ডিফাইন করা হয়েছে এবং এটি WebAssembly মডিউলের মাধ্যমে ইমপোর্ট করা হয়েছে।
• WebAssembly মডিউলটির ভিতরে log ফাংশনটি ব্যবহার করা হয়নি, তবে আপনি চাইলে সেই ফাংশনটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি যদি WebAssembly মডিউলটি এমনভাবে লিখতে চান যে সে বাইরের log ফাংশনটি কল করবে, তাহলে তা করতে পারেন।

Import Object এর ব্যবহার

1. ফাংশন ইমপোর্ট:
   WebAssembly মডিউল বাইরের JavaScript ফাংশন ইমপোর্ট করতে পারে, যা WebAssembly কোডের মধ্যে ব্যবহৃত হবে।

2. মেমোরি ইমপোর্ট:
   WebAssembly মডিউল বাইরের মেমোরি বা ডাটা স্ট্রাকচারও ইমপোর্ট করতে পারে। উদাহরণস্বরূপ, বাইরের JavaScript কোডের মধ্যে ডেটা প্রক্রিয়া করা এবং তা WebAssembly মডিউলকে প্রদান করা।

   উদাহরণ:

   (import "env" "memory" (memory 1))

3. মডিউল ইমপোর্ট:
   WebAssembly মডিউল অন্য মডিউল বা কোডের ফাংশন, মেমোরি ইত্যাদি ইমপোর্ট করতে পারে।

সারসংক্ষেপ

Import Object WebAssembly মডিউলগুলির জন্য একটি গুরুত্বপূর্ণ উপাদান, যা বাইরের কোড, ফাংশন এবং ডাটা WebAssembly মডিউলে সরবরাহ করার জন্য ব্যবহৃত হয়। এটি WebAssembly মডিউল এবং বাইরের JavaScript কোডের মধ্যে ইন্টারঅ্যাকশন করার সুযোগ দেয়। Import Object ব্যবহার করে WebAssembly মডিউল বাইরের ফাংশন কল করতে পারে, মেমোরি অ্যাক্সেস করতে পারে এবং আরও অনেক কিছু করতে পারে।

JavaScript থেকে WebAssembly মডিউল কল করা

WebAssembly (WASM) কোডকে JavaScript এ ইন্টিগ্রেট করে রান করা সম্ভব। এটি WebAssembly এর মাধ্যমে কোডের পারফরম্যান্স বৃদ্ধি করতে এবং JavaScript এর কিছু সীমাবদ্ধতা কাটিয়ে উঠতে সাহায্য করে। WebAssembly মডিউলকে JavaScript এ কল করা সাধারণত কয়েকটি ধাপে করা হয়:

1. WebAssembly মডিউল লোড করা
2. ফাংশন এক্সপোর্ট করা
3. WebAssembly মডিউল থেকে ফাংশন কল করা

এখানে WebAssembly মডিউলকে JavaScript এ কল করার পুরো প্রক্রিয়া বিস্তারিতভাবে দেখানো হলো।

1. WebAssembly মডিউল তৈরি করা

প্রথমে একটি সহজ WebAssembly মডিউল তৈরি করা যাক যা JavaScript থেকে কল করা হবে। উদাহরণস্বরূপ, একটি add ফাংশন যা দুটি সংখ্যা যোগ করবে।

WebAssembly Text Format (WAT):

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    (i32.add
      (local.get $a)
      (local.get $b)
    )
  )
  (export "add" (func $add))
)

এই WAT ফাইলটি একটি add ফাংশন এক্সপোর্ট করে যা দুটি 32-বিট পূর্ণসংখ্যার যোগফল প্রদান করবে।

এখন, এই .wat ফাইলটিকে WebAssembly বাইনারি ফরম্যাটে রূপান্তর করতে হবে।

.wat থেকে .wasm এ রূপান্তর:

এটি করার জন্য wat2wasm টুল ব্যবহার করা হয়:

wat2wasm add.wat -o add.wasm

এটি add.wasm নামক WebAssembly বাইনারি ফাইল তৈরি করবে যা আমরা JavaScript থেকে ব্যবহার করব।

2. JavaScript থেকে WebAssembly মডিউল লোড করা

JavaScript এ WebAssembly মডিউল লোড এবং ব্যবহার করার জন্য প্রথমে WebAssembly বাইনারি ফাইলটি লোড করতে হবে।

fetch('add.wasm')           // WASM ফাইলটি ফেচ করা হচ্ছে
  .then(response => response.arrayBuffer())   // রেসপন্সটি অ্যারেবাফারে পরিণত করা
  .then(bytes => WebAssembly.instantiate(bytes))  // WebAssembly ইনস্ট্যান্স তৈরি করা
  .then(wasmModule => {
    // WASM মডিউল প্রস্তুত
    const { add } = wasmModule.instance.exports;  // `add` ফাংশন এক্সপোর্ট করা হচ্ছে
    console.log(add(2, 3));  // WebAssembly `add` ফাংশন কল করা হচ্ছে
  })
  .catch(console.error);

ব্যাখ্যা:

• fetch('add.wasm'): এটি add.wasm ফাইলটি ব্রাউজার থেকে ফেচ করে।
• arrayBuffer(): ফাইলটি অ্যারেবাফারে রূপান্তরিত করা হয়, যাতে বাইনারি ডেটা পড়া যায়।
• WebAssembly.instantiate(): এই ফাংশনটি .wasm ফাইলটি ইনস্ট্যান্সিয়েট করে, অর্থাৎ সেটি WebAssembly মডিউলে রূপান্তরিত হয়।
• wasmModule.instance.exports.add: WebAssembly মডিউল থেকে add ফাংশন এক্সপোর্ট করা হয় এবং JavaScript থেকে সেটি কল করা হয়।

এখন আপনি যদি এই স্ক্রিপ্টটি আপনার ওয়েবপেজে রান করেন, তাহলে এটি 2 + 3 = 5 আউটপুট করবে।

3. মেমোরি এবং ফাংশন এক্সপোর্ট করা

WebAssembly মডিউলে শুধু ফাংশনই নয়, মেমোরি বা অন্যান্য উপাদানও এক্সপোর্ট করা যেতে পারে। উদাহরণস্বরূপ, যদি আপনি মেমোরি এক্সপোর্ট করতে চান, তবে মেমোরি সংক্রান্ত কাজ JavaScript থেকে করতে পারেন।

WebAssembly মডিউলে মেমোরি এক্সপোর্ট:

(module
  (memory 1)  ;; 64KB মেমোরি
  (export "memory" (memory 0))
  (func $set_value (param $index i32) (param $value i32)
    (i32.store
      (local.get $index)
      (local.get $value)
    )
  )
  (export "set_value" (func $set_value))
)

এখানে set_value ফাংশনটি মেমোরিতে নির্দিষ্ট অবস্থানে একটি মান লেখার জন্য ব্যবহৃত হচ্ছে এবং memory এক্সপোর্ট করা হচ্ছে।

JavaScript কোড:

fetch('memory.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(wasmModule => {
    const { memory, set_value } = wasmModule.instance.exports;

    // মেমোরি ব্যবহারের জন্য অ্যারের ভিউ তৈরি করা হচ্ছে
    const view = new Int32Array(memory.buffer);
    set_value(0, 42);  // মেমোরির প্রথম অবস্থানে 42 লেখা হচ্ছে
    console.log(view[0]);  // আউটপুট: 42
  })
  .catch(console.error);

এখানে, JavaScript থেকে memory এক্সপোর্ট করে মেমোরি অ্যাক্সেস করা হচ্ছে এবং set_value ফাংশনকে কল করা হচ্ছে।

4. WebAssembly মডিউল এবং JavaScript এর মধ্যে পারস্পরিক ক্রিয়া

JavaScript এবং WebAssembly এর মধ্যে পারস্পরিক ক্রিয়া সাধারণত ইমপোর্ট এবং এক্সপোর্ট ব্যবস্থার মাধ্যমে পরিচালিত হয়। WebAssembly মডিউলগুলি JavaScript এর সাথে যোগাযোগ করতে পারে এবং উল্টোও সম্ভব, যেমন JavaScript থেকে WebAssembly ফাংশন কল করা এবং এক্সপোর্ট করা।

সারসংক্ষেপ

JavaScript থেকে WebAssembly মডিউল কল করা খুবই সহজ। আপনি .wasm ফাইলটি fetch করে, instantiate করে এবং তারপরে এক্সপোর্ট করা ফাংশনগুলি JavaScript থেকে কল করতে পারেন। WebAssembly ফাংশনগুলি খুব দ্রুত রান করে এবং গাণিতিক বা কমপ্লেক্স কাজের জন্য JavaScript এর তুলনায় অনেক বেশি কার্যকরী। এই প্রক্রিয়াটি ওয়েব অ্যাপ্লিকেশনে পারফরম্যান্স বৃদ্ধি করতে এবং JavaScript এর সীমাবদ্ধতা কাটিয়ে ওঠার জন্য ব্যবহৃত হয়।

WebAssembly এর মাধ্যমে ডেটা এক্সপোর্ট করা

WebAssembly (WASM) এর মাধ্যমে ডেটা এক্সপোর্ট করা এমন একটি প্রক্রিয়া, যার মাধ্যমে আপনি WebAssembly মডিউল থেকে JavaScript বা অন্য কোনো প্রযুক্তির মাধ্যমে ডেটা বের করতে পারেন। সাধারণত, WebAssembly মডিউলগুলো কিছু ডেটা প্রসেস করে এবং সেই ডেটা JavaScript এ পাঠানোর জন্য exports ব্যবহার করে।

নিচে WebAssembly এর মাধ্যমে ডেটা এক্সপোর্ট করার প্রক্রিয়া বিস্তারিতভাবে আলোচনা করা হয়েছে।

1. WebAssembly মডিউল থেকে ডেটা এক্সপোর্ট

WebAssembly মডিউলগুলি functions, memory, এবং globals এক্সপোর্ট করতে পারে। এক্সপোর্ট করা ফাংশনগুলো JavaScript থেকে কল করা হয় এবং JavaScript তে ফলাফল ফেরত পাঠানো হয়।

1.1 WebAssembly মডিউল তৈরি এবং ডেটা এক্সপোর্ট

ধরা যাক, আপনি WebAssembly মডিউলে একটি ফাংশন তৈরি করেছেন যা কিছু ডেটা প্রসেস করে এবং তারপর সেই ডেটা JavaScript তে এক্সপোর্ট করছে।

WebAssembly (WASM) কোড:

(module
  (memory 1)  ;; মেমরি এক্সপোর্ট
  (export "memory" (memory 0))
  
  (export "processData" (func $processData))  ;; ফাংশন এক্সপোর্ট
  
  (func $processData (param $a i32) (result i32)
    local.get $a
    i32.mul  ;; এই ফাংশনটি প্রাপ্ত সংখ্যা দুটি দিয়ে গুণ করবে
  )
)

এখানে, processData নামক একটি ফাংশন i32.mul ইন্সট্রাকশন ব্যবহার করে একটি পূর্ণসংখ্যা প্রসেস করবে এবং তার ফলাফল JavaScript তে এক্সপোর্ট করবে।

1.2 JavaScript থেকে WebAssembly ফাংশন কল করা

fetch('your_program.wasm')  // WebAssembly ফাইল লোড করা
  .then(response => response.arrayBuffer())  // ফাইলটি বাইটে রূপান্তর
  .then(bytes => WebAssembly.instantiate(bytes))  // ফাইলটিকে ইনস্ট্যানশিয়েট করা
  .then(wasmModule => {
      const { instance } = wasmModule;
      
      // WebAssembly ফাংশন থেকে ডেটা এক্সপোর্ট করা
      const result = instance.exports.processData(10);  // এখানে 10 প্যারামিটার হিসাবে পাঠানো হচ্ছে
      console.log('Result from WASM:', result);  // আউটপুট হবে 100 (10 * 10)
  })
  .catch(console.error);

এখানে, processData ফাংশনটি 10 প্যারামিটার হিসেবে গ্রহণ করছে এবং সেই প্যারামিটারটির সাথে 10 গুণ করছে, এবং তারপর ফলাফল JavaScript তে এক্সপোর্ট করছে।

2. Memory থেকে ডেটা এক্সপোর্ট করা

WebAssembly মডিউলগুলি মেমরি এক্সপোর্ট করে, যা JavaScript এবং WebAssembly এর মধ্যে ডেটা শেয়ার করতে সাহায্য করে। আপনি যদি একটি অ্যারে বা অন্যান্য ডেটা সংরক্ষণ করতে চান, তবে Linear Memory ব্যবহার করতে পারেন, যা মেমরি থেকে ডেটা এক্সপোর্ট করার একটি শক্তিশালী পদ্ধতি।

2.1 WebAssembly Memory Example

ধরা যাক, WebAssembly মডিউলে একটি অ্যারে তৈরি করা হয়েছে, এবং সেই অ্যারে থেকে ডেটা এক্সপোর্ট করা হচ্ছে।

WebAssembly (WASM) কোড:

(module
  (memory 1)
  (export "memory" (memory 0))
  
  (export "fillMemory" (func $fillMemory))  ;; মেমরি পূর্ণ করার ফাংশন এক্সপোর্ট
  
  (func $fillMemory (param $value i32)
    i32.store 0 $value   ;; মেমরির প্রথম সেলে একটি ভ্যালু স্টোর
  )
)

এখানে, fillMemory ফাংশনটি WebAssembly মেমরির প্রথম সেলে একটি ভ্যালু স্টোর করবে।

2.2 JavaScript থেকে Memory Access এবং ডেটা এক্সপোর্ট

fetch('your_memory_program.wasm')  // WebAssembly ফাইল লোড করা
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))  // ইনস্ট্যানশিয়েট করা
  .then(wasmModule => {
      const { instance } = wasmModule;
      
      // মেমরি অ্যাক্সেস করা
      const memory = new Int32Array(instance.exports.memory.buffer);

      // মেমরি পূর্ণ করা
      instance.exports.fillMemory(42);  // মেমরির প্রথম সেলে 42 স্টোর করা

      // মেমরি থেকে ডেটা এক্সপোর্ট করা
      console.log('Data in memory:', memory[0]);  // আউটপুট হবে 42
  })
  .catch(console.error);

এখানে, JavaScript কোড Int32Array ব্যবহার করে WebAssembly মেমরি অ্যাক্সেস করছে এবং fillMemory ফাংশন কল করে মেমরির প্রথম সেলে একটি ভ্যালু পাঠাচ্ছে। এরপর মেমরি থেকে ডেটা এক্সপোর্ট করা হচ্ছে।

3. Global Variables এর মাধ্যমে ডেটা এক্সপোর্ট

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

3.1 WebAssembly Global Example

WebAssembly (WASM) কোড:

(module
  (global $myGlobal i32 (i32.const 100))  ;; একটি গ্লোবাল ভ্যারিয়েবল
  (export "myGlobal" (global $myGlobal))  ;; গ্লোবাল এক্সপোর্ট
)

এখানে, myGlobal নামক একটি গ্লোবাল ভ্যারিয়েবল WebAssembly মডিউল থেকে এক্সপোর্ট করা হয়েছে।

3.2 JavaScript থেকে Global Variable Access

fetch('your_global_program.wasm')  // WebAssembly ফাইল লোড করা
  .then(response => response.arrayBuffer())  // বাইটে রূপান্তর
  .then(bytes => WebAssembly.instantiate(bytes))  // ইনস্ট্যানশিয়েট করা
  .then(wasmModule => {
      const { instance } = wasmModule;
      
      // গ্লোবাল ভ্যারিয়েবল এক্সপোর্ট করা
      console.log('Global Variable from WASM:', instance.exports.myGlobal);  // আউটপুট হবে 100
  })
  .catch(console.error);

এখানে, myGlobal গ্লোবাল ভ্যারিয়েবলটি WebAssembly মডিউল থেকে এক্সপোর্ট করা হচ্ছে এবং JavaScript কোডে তা এক্সেস করা হচ্ছে।

Summary

• Function Exporting: WebAssembly মডিউল থেকে ফাংশন এক্সপোর্ট করে JavaScript তে কল করা যায়। এই ফাংশনগুলো প্রিমিটিভ বা জটিল ডেটা প্রসেস করে JavaScript এ পাঠাতে পারে।
• Memory Exporting: WebAssembly মডিউল মেমরি এক্সপোর্ট করে, যা JavaScript এ অ্যাক্সেস করা যায় এবং ডেটা শেয়ার করা সম্ভব।
• Global Variable Exporting: গ্লোবাল ভ্যারিয়েবল এক্সপোর্ট করে ডেটা JavaScript এর মাধ্যমে অ্যাক্সেস করা যেতে পারে।

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