যখন থেকে ওয়েব শুধুমাত্র নথিপত্রের জন্য নয় বরং অ্যাপগুলির জন্যও একটি প্ল্যাটফর্ম হয়ে উঠেছে, তখন থেকে কিছু উন্নত অ্যাপ ওয়েব ব্রাউজারগুলিকে তাদের সীমাতে ঠেলে দিয়েছে। কর্মক্ষমতা উন্নত করার জন্য নিম্ন-স্তরের ভাষার সাথে ইন্টারফেস করে "ধাতুর কাছাকাছি" যাওয়ার পদ্ধতিটি অনেক উচ্চ-স্তরের ভাষায় সম্মুখীন হয়। একটি উদাহরণ হিসাবে, Java এর জাভা নেটিভ ইন্টারফেস রয়েছে। জাভাস্ক্রিপ্টের জন্য, এই নিম্ন-স্তরের ভাষা হল WebAssembly। এই প্রবন্ধে, আপনি অ্যাসেম্বলি ভাষা কী তা আবিষ্কার করবেন এবং কেন এটি ওয়েবে উপযোগী হতে পারে, তারপর asm.js-এর অন্তর্বর্তী সমাধানের মাধ্যমে WebAssembly কীভাবে তৈরি করা হয়েছিল তা শিখুন।
সমাবেশের ভাষা
আপনি কি কখনো সমাবেশ ভাষায় প্রোগ্রাম করেছেন? কম্পিউটার প্রোগ্রামিং-এ, অ্যাসেম্বলি ল্যাঙ্গুয়েজ, যাকে প্রায়শই অ্যাসেম্বলি বলা হয় এবং সাধারণত ASM বা asm নামে সংক্ষেপে বলা হয়, যে কোনো নিম্ন-স্তরের প্রোগ্রামিং ভাষা যা ভাষার নির্দেশাবলী এবং আর্কিটেকচারের মেশিন কোড নির্দেশাবলীর মধ্যে অত্যন্ত দৃঢ় সঙ্গতিপূর্ণ।
উদাহরণস্বরূপ, Intel® 64 এবং IA-32 আর্কিটেকচার (PDF) দেখে, MUL নির্দেশনা ( mul tiplication এর জন্য) প্রথম অপারেন্ড (গন্তব্য অপারেন্ড) এবং দ্বিতীয় অপারেন্ড (সোর্স অপারেন্ড) এর একটি স্বাক্ষরবিহীন গুণন সম্পাদন করে এবং সংরক্ষণ করে গন্তব্য অপারেন্ড ফলাফল. খুব সরলীকৃত, গন্তব্য অপারেন্ড হল একটি অন্তর্নিহিত অপারেন্ড যা রেজিস্টার AX এ অবস্থিত, এবং সোর্স অপারেন্ডটি CX এর মত একটি সাধারণ-উদ্দেশ্য রেজিস্টারে অবস্থিত। ফলাফল রেজিস্টার AX এ আবার সংরক্ষণ করা হয়। নিম্নলিখিত x86 কোড উদাহরণ বিবেচনা করুন:
mov ax, 5 ; Set the value of register AX to 5.
mov cx, 10 ; Set the value of register CX to 10.
mul cx ; Multiply the value of register AX (5)
; and the value of register CX (10), and
; store the result in register AX.
তুলনা করার জন্য, যদি 5 এবং 10 গুণ করার উদ্দেশ্য নিয়ে কাজ করা হয়, আপনি সম্ভবত জাভাস্ক্রিপ্টে নিম্নলিখিতগুলির মতো কোড লিখবেন:
const factor1 = 5;
const factor2 = 10;
const result = factor1 * factor2;
সমাবেশ রুটে যাওয়ার সুবিধা হল এই ধরনের নিম্ন-স্তরের এবং মেশিন-অপ্টিমাইজড কোড উচ্চ-স্তরের এবং মানব-অপ্টিমাইজ করা কোডের চেয়ে অনেক বেশি কার্যকর। পূর্ববর্তী ক্ষেত্রে এটি কোন ব্যাপার না, কিন্তু আপনি কল্পনা করতে পারেন যে আরও জটিল অপারেশনের জন্য, পার্থক্যটি তাৎপর্যপূর্ণ হতে পারে।
নাম অনুসারে, x86 কোড x86 আর্কিটেকচারের উপর নির্ভরশীল। যদি অ্যাসেম্বলি কোড লেখার একটি উপায় থাকে যা একটি নির্দিষ্ট আর্কিটেকচারের উপর নির্ভরশীল নয়, তবে এটি সমাবেশের কার্যকারিতা সুবিধার উত্তরাধিকারী হবে?
asm.js
কোনো আর্কিটেকচার নির্ভরতা ছাড়াই অ্যাসেম্বলি কোড লেখার প্রথম ধাপ ছিল asm.js , জাভাস্ক্রিপ্টের একটি কঠোর উপসেট যা কম্পাইলারদের জন্য নিম্ন-স্তরের, দক্ষ লক্ষ্য ভাষা হিসেবে ব্যবহার করা যেতে পারে। এই উপ-ভাষাটি কার্যকরভাবে C বা C++ এর মতো মেমরি-অনিরাপদ ভাষার জন্য একটি স্যান্ডবক্সযুক্ত ভার্চুয়াল মেশিন বর্ণনা করেছে। স্থির এবং গতিশীল বৈধতার সংমিশ্রণ জাভাস্ক্রিপ্ট ইঞ্জিনকে বৈধ asm.js কোডের জন্য একটি আগাম-সময় (AOT) অপ্টিমাইজিং সংকলন কৌশল নিয়োগ করার অনুমতি দেয়। ম্যানুয়াল মেমরি ম্যানেজমেন্ট সহ স্ট্যাটিকালি-টাইপ করা ভাষায় লেখা কোড (যেমন সি) একটি উৎস থেকে উৎস কম্পাইলার যেমন প্রাথমিক এমস্ক্রিপ্টেন (এলএলভিএম-এর উপর ভিত্তি করে) দ্বারা অনুবাদ করা হয়েছিল।
AOT-এর জন্য উপযুক্ত ভাষার বৈশিষ্ট্য সীমিত করে কর্মক্ষমতা উন্নত করা হয়েছে। ফায়ারফক্স 22 ছিল প্রথম ব্রাউজার যা asm.js সমর্থন করে , যা OdinMonkey নামে প্রকাশিত হয়েছিল। ক্রোম 61 সংস্করণে asm.js সমর্থন যোগ করেছে। যদিও asm.js এখনও ব্রাউজারে কাজ করে, এটি WebAssembly দ্বারা বাতিল করা হয়েছে। এই মুহুর্তে asm.js ব্যবহার করার কারণটি এমন ব্রাউজারগুলির জন্য একটি বিকল্প হিসাবে হবে যেগুলিতে WebAssembly সমর্থন নেই৷
ওয়েব অ্যাসেম্বলি
WebAssembly হল একটি কমপ্যাক্ট বাইনারি ফর্ম্যাট সহ একটি নিম্ন-স্তরের সমাবেশের মতো ভাষা যা কাছাকাছি-নেটিভ পারফরম্যান্সের সাথে চলে এবং C/C++ এবং Rust এর মতো ভাষা প্রদান করে এবং আরও অনেক কিছুকে একটি সংকলন লক্ষ্যের সাথে প্রদান করে যাতে তারা ওয়েবে চলে। Java, এবং Dart-এর মতো মেমরি-পরিচালিত ভাষাগুলির জন্য সমর্থন কাজ চলছে এবং শীঘ্রই উপলব্ধ হওয়া উচিত, অথবা Kotlin/Wasm- এর ক্ষেত্রে ইতিমধ্যেই অবতরণ করেছে। WebAssembly জাভাস্ক্রিপ্টের পাশাপাশি চালানোর জন্য ডিজাইন করা হয়েছে, উভয়কে একসাথে কাজ করার অনুমতি দেয়।
ব্রাউজার ছাড়াও, WebAssembly প্রোগ্রামগুলি অন্যান্য রানটাইমেও চলে, ধন্যবাদ WASI , WebAssembly সিস্টেম ইন্টারফেস, WebAssembly-এর জন্য একটি মডুলার সিস্টেম ইন্টারফেস। WASI অপারেটিং সিস্টেম জুড়ে বহনযোগ্য হতে তৈরি করা হয়েছে, নিরাপদ থাকার উদ্দেশ্য এবং স্যান্ডবক্সযুক্ত পরিবেশে চালানোর ক্ষমতা।
WebAssembly কোড (বাইনারী কোড, অর্থাৎ বাইটকোড) একটি পোর্টেবল ভার্চুয়াল স্ট্যাক মেশিনে (VM) চালানোর উদ্দেশ্যে তৈরি করা হয়েছে। বাইটকোডটি জাভাস্ক্রিপ্টের চেয়ে দ্রুত পার্স এবং কার্যকর করার জন্য এবং একটি কমপ্যাক্ট কোড উপস্থাপনা করার জন্য ডিজাইন করা হয়েছে।
নির্দেশাবলীর ধারণাগত বাস্তবায়ন একটি ঐতিহ্যগত প্রোগ্রাম কাউন্টারের মাধ্যমে এগিয়ে যায় যা নির্দেশাবলীর মাধ্যমে অগ্রসর হয়। অনুশীলনে, বেশিরভাগ Wasm ইঞ্জিন Wasm বাইটকোডকে মেশিন কোডে কম্পাইল করে এবং তারপরে এটি কার্যকর করে। নির্দেশাবলী দুটি বিভাগে পড়ে:
- কন্ট্রোল নির্দেশাবলী যা কন্ট্রোল কনস্ট্রাক্ট গঠন করে এবং স্ট্যাকের থেকে তাদের আর্গুমেন্ট মান(গুলি) পপ করে, প্রোগ্রাম কাউন্টার পরিবর্তন করতে পারে এবং ফলাফলের মান(গুলি) স্ট্যাকের উপর পুশ করতে পারে।
- সহজ নির্দেশাবলী যা স্ট্যাক থেকে তাদের আর্গুমেন্ট মান(গুলি) পপ করে, মানগুলিতে একটি অপারেটর প্রয়োগ করে এবং তারপর ফলাফলের মান(গুলি) স্ট্যাকের উপর পুশ করে, প্রোগ্রাম কাউন্টারের একটি অন্তর্নিহিত অগ্রগতি দ্বারা অনুসরণ করে।
আগের উদাহরণে ফিরে গেলে, নিচের WebAssembly কোডটি নিবন্ধের শুরু থেকে x86 কোডের সমতুল্য হবে:
i32.const 5 ; Push the integer value 5 onto the stack.
i32.const 10 ; Push the integer value 10 onto the stack.
i32.mul ; Pop the two most recent items on the stack,
; multiply them, and push the result onto the stack.
যদিও asm.js সমস্ত সফ্টওয়্যারে প্রয়োগ করা হয়, অর্থাৎ, এটির কোড যেকোন জাভাস্ক্রিপ্ট ইঞ্জিনে চলতে পারে (এমনকি অপ্টিমাইজ করা হলেও), WebAssembly নতুন কার্যকারিতা প্রয়োজন যা সমস্ত ব্রাউজার বিক্রেতারা সম্মত হয়েছে৷ 2015 সালে ঘোষণা করা হয়েছিল এবং 2017 সালের মার্চ মাসে প্রথম প্রকাশিত হয়েছিল, WebAssembly 5 ডিসেম্বর, 2019-এ W3C সুপারিশে পরিণত হয়েছিল। W3C সমস্ত প্রধান ব্রাউজার বিক্রেতা এবং অন্যান্য আগ্রহী পক্ষের অবদানের সাথে মান বজায় রাখে। 2017 সাল থেকে, ব্রাউজার সমর্থন সর্বজনীন।
WebAssembly এর দুটি উপস্থাপনা রয়েছে: পাঠ্য এবং বাইনারি । আপনি উপরে যা দেখছেন তা হল পাঠ্য উপস্থাপনা।
টেক্সচুয়াল উপস্থাপনা
পাঠ্য উপস্থাপনা S-এক্সপ্রেশনের উপর ভিত্তি করে এবং সাধারণত ফাইল এক্সটেনশন .wat ব্যবহার করে ( W eb A সমাবেশ t ext বিন্যাসের জন্য)। আপনি যদি সত্যিই চান, আপনি এটি হাতে লিখতে পারেন। উপরের থেকে গুণের উদাহরণটি গ্রহণ করে এবং ফ্যাক্টরগুলিকে আর হার্ডকোড না করে এটিকে আরও কার্যকর করে তোলে, আপনি সম্ভবত নিম্নলিখিত কোডটি বুঝতে পারেন:
(module
(func $mul (param $factor1 i32) (param $factor2 i32) (result i32)
local.get $factor1
local.get $factor2
i32.mul)
(export "mul" (func $mul))
)
বাইনারি উপস্থাপনা
বাইনারি ফর্ম্যাট যা ফাইল এক্সটেনশন .wasm ব্যবহার করে তা মানুষের ব্যবহারের জন্য নয়, মানব সৃষ্টির কথাই বলা যায়। wat2wasm এর মতো একটি টুল ব্যবহার করে, আপনি উপরের কোডটিকে নিম্নলিখিত বাইনারি উপস্থাপনায় রূপান্তর করতে পারেন। (মন্তব্যগুলি সাধারণত বাইনারি উপস্থাপনার অংশ নয়, তবে আরও ভাল বোঝার জন্য wat2wasm টুল দ্বারা যোগ করা হয়।)
0000000: 0061 736d ; WASM_BINARY_MAGIC
0000004: 0100 0000 ; WASM_BINARY_VERSION
; section "Type" (1)
0000008: 01 ; section code
0000009: 00 ; section size (guess)
000000a: 01 ; num types
; func type 0
000000b: 60 ; func
000000c: 02 ; num params
000000d: 7f ; i32
000000e: 7f ; i32
000000f: 01 ; num results
0000010: 7f ; i32
0000009: 07 ; FIXUP section size
; section "Function" (3)
0000011: 03 ; section code
0000012: 00 ; section size (guess)
0000013: 01 ; num functions
0000014: 00 ; function 0 signature index
0000012: 02 ; FIXUP section size
; section "Export" (7)
0000015: 07 ; section code
0000016: 00 ; section size (guess)
0000017: 01 ; num exports
0000018: 03 ; string length
0000019: 6d75 6c mul ; export name
000001c: 00 ; export kind
000001d: 00 ; export func index
0000016: 07 ; FIXUP section size
; section "Code" (10)
000001e: 0a ; section code
000001f: 00 ; section size (guess)
0000020: 01 ; num functions
; function body 0
0000021: 00 ; func body size (guess)
0000022: 00 ; local decl count
0000023: 20 ; local.get
0000024: 00 ; local index
0000025: 20 ; local.get
0000026: 01 ; local index
0000027: 6c ; i32.mul
0000028: 0b ; end
0000021: 07 ; FIXUP func body size
000001f: 09 ; FIXUP section size
; section "name"
0000029: 00 ; section code
000002a: 00 ; section size (guess)
000002b: 04 ; string length
000002c: 6e61 6d65 name ; custom section name
0000030: 01 ; name subsection type
0000031: 00 ; subsection size (guess)
0000032: 01 ; num names
0000033: 00 ; elem index
0000034: 03 ; string length
0000035: 6d75 6c mul ; elem name 0
0000031: 06 ; FIXUP subsection size
0000038: 02 ; local name type
0000039: 00 ; subsection size (guess)
000003a: 01 ; num functions
000003b: 00 ; function index
000003c: 02 ; num locals
000003d: 00 ; local index
000003e: 07 ; string length
000003f: 6661 6374 6f72 31 factor1 ; local name 0
0000046: 01 ; local index
0000047: 07 ; string length
0000048: 6661 6374 6f72 32 factor2 ; local name 1
0000039: 15 ; FIXUP subsection size
000002a: 24 ; FIXUP section size
WebAssembly এ কম্পাইল করা হচ্ছে
আপনি দেখতে পাচ্ছেন, .wat বা .wasm দুটিই বিশেষভাবে খুব মানব-বান্ধব নয়। এমস্ক্রিপ্টেনের মতো একটি কম্পাইলার এখানেই আসে। এটি আপনাকে উচ্চ-স্তরের ভাষা যেমন C এবং C++ থেকে কম্পাইল করতে দেয়। অন্যান্য ভাষার জন্য অন্যান্য কম্পাইলার রয়েছে যেমন মরিচা এবং আরও অনেক কিছু। নিম্নলিখিত সি কোড বিবেচনা করুন:
#include <stdio.h>
int main() {
printf("Hello World\n");
return 0;
}
সাধারণত, আপনি কম্পাইলার gcc দিয়ে এই C প্রোগ্রামটি কম্পাইল করবেন।
$ gcc hello.c -o hello
Emscripten ইনস্টল করার সাথে, আপনি emcc কমান্ড এবং প্রায় একই আর্গুমেন্ট ব্যবহার করে WebAssembly এ কম্পাইল করেন:
$ emcc hello.c -o hello.html
এটি একটি hello.wasm ফাইল এবং এইচটিএমএল র্যাপার ফাইল hello.html তৈরি করবে। যখন আপনি একটি ওয়েব সার্ভার থেকে hello.html ফাইলটি পরিবেশন করেন, তখন আপনি DevTools কনসোলে প্রিন্ট করা "Hello World" দেখতে পাবেন৷
এইচটিএমএল র্যাপার ছাড়া WebAssembly এ কম্পাইল করার একটি উপায়ও আছে:
$ emcc hello.c -o hello.js
আগের মত, এটি একটি hello.wasm ফাইল তৈরি করবে, কিন্তু এবার একটি hello.js ফাইল HTML র্যাপারের পরিবর্তে। পরীক্ষা করার জন্য, আপনি ফলস্বরূপ জাভাস্ক্রিপ্ট ফাইল hello.js চালান, উদাহরণস্বরূপ, Node.js:
$ node hello.js
Hello World
আরও জানুন
WebAssembly-এর এই সংক্ষিপ্ত ভূমিকাটি হল আইসবার্গের টিপ। MDN-এ WebAssembly ডকুমেন্টেশনে WebAssembly সম্পর্কে আরও জানুন এবং Emscripten ডকুমেন্টেশনের সাথে পরামর্শ করুন। সত্যি বলতে, WebAssembly-এর সাথে কাজ করা কিছুটা অনুভূত হতে পারে কিভাবে একটি আউল মেম আঁকতে হয় , বিশেষ করে যেহেতু HTML, CSS এবং JavaScript এর সাথে পরিচিত ওয়েব ডেভেলপাররা C. সৌভাগ্যবশত এর মতো ভাষা থেকে সংকলিত হতে পারার প্রয়োজন নেই স্ট্যাকওভারফ্লো-এর webassembly ট্যাগের মতো চ্যানেল রয়েছে যেখানে বিশেষজ্ঞরা প্রায়ই সাহায্য করতে খুশি হন যদি আপনি সুন্দরভাবে জিজ্ঞাসা করেন।
স্বীকৃতি
এই নিবন্ধটি জ্যাকব কুমেরো , ডেরেক শফ এবং রাচেল অ্যান্ড্রু দ্বারা পর্যালোচনা করা হয়েছে।