WebAssembly জাভাস্ক্রিপ্ট এর নতুন বন্ধু নাকি শত্রু

Unsplash @cheng ming lian

আস সালামু আলাইকুম। আশা করি সবাই ভালো আছেন।

অনেকদিন পর বাংলায় আর্টিকেল লিখতে বসলাম। এমন একটা টপিক নিয়ে আজকে আমি আর্টিকেল লিখতেছি যা নিয়ে আমি খুবই এক্সাইটেড এবং সেটা বর্তমানে খুবই হাইপে আছে।

তো দেরী না করে চলুন ঝাঁপিয়ে পড়ি।

শুরুর পূর্বে

আচ্ছা ধরুন আপনি যেকোনো একটা ব্যাকএন্ড ল্যাঙ্গুয়েজ খুব ভালো পারেন এবং সেটাকে খুবই ভালোবাসেন। আপনি মনে মনে চাইবেন "ইশ! আমার পছন্দের ল্যাঙ্গুয়েজটা যদি সব জায়গায় রান করতে পারতাম...(দীর্ঘশ্বাঃস)"।

অন্য কারো ব্যাপারে জানিনা, বাট আমার প্রিয় প্রোগ্রামিং ল্যাঙ্গুয়েজ Golang কে আমি সব সময়ই চাই সবজায়গায় ব্যবহার করতে, বাট সবসময় সেটা হয়ে ওঠে না। এই যেমন আমি মাঝেসাঝে এম্বেডেড প্রোগ্রামিং নিয়ে কাজ করি, সেখানেও আমি গোল্যাং ব্যবহার করি TinyGo এবং Gobot নামক দুুুুুুইটা জনপ্রিয় লাইব্রেরি দিয়ে।

জাভাস্ক্রিপ্টের লোকেরা কিন্ত অলরেডি এই সুবিধা পেয়ে গেছে। তারা ব্রাউজার এবং সার্ভার দুই জায়গাতেই জাভাস্ক্রিপ্ট রান করতে পারতেছে। কিন্ত আমরা যারা জাভাস্ক্রিপ্ট নিয়ে কাজ না করলেই বাঁচি, আমাদের কি হবে? আমরা কি পারবো আমাদের ল্যাঙ্গুয়েজকে ব্রাউজারে রান করতে?

আর দেরী না করে উত্তরটা দিয়ে দেই, উত্তর হচ্ছে হ্যাঁ।

আমার আজকের এই আর্টিকেলের আজব টাইটেল দেখে অনেকেই বুঝে ফেলেছেন ভেতরের কাহিনী।

ওয়েব এসেম্বলি? কি জিনিস এটা?

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

বেশ এক্সাইটেড ব্যাপার তাই না? জাভাস্ক্রিপ্ট এখন আর একমাত্র ল্যাঙ্গুয়েজ না যেটা ব্রাউজারে রান হয়, এসে পড়েছে ওয়েব এসেম্বলি।

তার মানে জাভাস্ক্রিপ্টের খেলা শেষ

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

উহু! এত সহজ না। ক্লায়েন্ট সাইডে জাভাস্ক্রিপ্ট এখনো বস্‌, এটা খোদ যারা জাভাস্ক্রিপ্ট দেখতে পারে না তারাও মানেন। ইভেন ওয়েব এসেম্বলির মূল হর্তাকর্তারাও এমন সম্ভাবনাকে তুড়ি মেরে উড়িয়ে দিয়েছেন। সেটা ওয়েব এসেম্বলির অফিসিয়াল সাইটে গেলেই পাবেন।

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

ওয়েব এসেম্বলি কেন?

এখন প্রশ্ন আসতে পারে, জাভাস্ক্রিপ্ট থাকতে ওয়েব এসেম্বলি আবার কেন?

ঐযে প্রথমেই বললাম, স্পিড। মেশিন কোড যেভাবে রান হয় সে স্পিডকে বলে নেটিভ স্পিড। বিদ্যুতের বেগে চলে

ওয়েব এসেম্বলি প্রায় নেটিভ স্পিডে রান হবে এই গ্যারান্টি প্রায় সবাই দিচ্ছে।

আসুন কিছু উদাহরন দিয়ে ব্যাপারটা পরিষ্কার করি।

বাস্তব জগতে ওয়েব এসেম্বলি

Doom 3 হচ্ছে 2004 সালে রিলিজ পাওয়া কম্পিউটার গেমস। যেটা চালাতে সি++ দিয়ে লেখা id Tech 4 গেম ইঞ্জিন ব্যবহার করা হয়েছে। পিসি গেম এমন জিনিস যা চালাতে অত্যন্ত দ্রুত গতির প্রোগ্রামিং ল্যাঙ্গুয়েজ লাগে, যেমন সি++। কিন্ত ২০১৯ সালে এই গেমের নির্মাতারা ওয়েব এসেম্বলি নিয়ে এক্সপেরিমেন্ট করতে তাদের সি++ কোডকে ওয়েব ব্রাউজারে চালানোর জন্য সি++ দিয়ে লেখা id Tech 4 গেম ইঞ্জিনকে ওয়েব এসেম্বলির সাহায্যে D3wasm নামক নতুন গেম ইঞ্জিন এর পোর্ট করেছে। এর মানে হচ্ছে সেই সি++ দিয়ে লেখা Doom 3 গেম এখন ওয়েব এসেম্বলির সাহায্যে ব্রাউজারেও চলবে। বিশ্বাস না হলে এখানে ভিজিট করে নিজেই খেলে আসুন।

এরপর আসি আর্কিটেকচারদের প্রিয় টুল AutoCAD নিয়ে, যেটাও ওয়েব এসেম্বলির সাহায্যে ব্রাউজারে রান করা যাবে। এখানে দেখে আসতে পারেন।

এখানে গিয়ে দেখতে পারেন কিভাবে জনপ্রিয় ফ্রি UI ডিজাইন টুল Figma ওয়েব এসেম্বলি ব্যবহার করে তাদের লোড টাইম ৩ গুণ কমিয়ে এনেছে।

এখন নিশ্চয় আপনি ওয়েব এসেম্বলি নিয়ে ইমপ্রেসড।

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

কোন কোন ল্যাঙ্গুয়েজে সাপোর্ট আছে?

ওয়েব এসেম্বলি এতটাই হাইপে আছে যে প্রায় সকল জনপ্রিয়, কম জনপ্রিয় ল্যাঙ্গুয়েজই ওয়েব এসেম্বলির সাপোর্ট দেয়া শুরু করেছে।

এই যেমনঃ

1. C
2. C++
3. Go
4. Python
5. Rust

ইত্যাদি। আপনি সম্পুর্ন লিস্টটা এখান থেকে দেখে নিতে পারেন

হাতে কলমে ওয়েব এসেম্বলি

এবার আসুন আপনাকে ওয়েব এসেম্বলির একটু স্বাদ নেওয়াই। আমি এখানে ডেমোন্সট্রেশনের জন্য Go ব্যবহার করেছি। বাট আপনি চাইলে আপনার পছন্দের ওয়েব এসেম্বলি সাপোর্টেড ল্যাঙ্গুয়েজ নিয়ে কাজ করতে পারেন।

গো খুবই ফাস্ট গ্রোয়িং একটা ল্যাঙ্গুয়েজ যা টপ ১০/১৫ টা ল্যাঙ্গুয়েজের ভেতরে আছে। নতুন সবকিছু খুব দ্রুত নিয়ে আসে এর ডেভলপাররা।

সেই হিসেবে Go তে 1.11 ভার্শনে এক্সপেরিমেন্টালভাবে ওয়েব এসেম্বলির সাপোর্ট আসে। এরপর বর্তমান 1.14 ভার্সনে সেটা প্রোডাকশনে ব্যবহার উপযোগী হয়ে যায় (উপরের লিঙ্কে গেলেই পাবেন)।

আসুন আমরা হাতে কলমে ওয়েব এসেম্বলি দেখিঃ

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

ফাইনালি ফাংশনটিকে গ্লোবালি রেজিস্টার করেছি যাতে করে ক্লায়েন্ট সাইড থেকে কল করা যায়। এবং এটাকে ইনফিনিটভাবে রান করেছি select {} এর মাধ্যমে।

এবার গো কোডকে ওয়েব এসেম্বলিতে কনভার্ট করার পালাঃ

https://youtu.be/TzeEgdee3fc

উপরের চিত্রে আমরা দেখতে পাচ্ছি গো ওয়েব এসেম্বলি ৩টা ধাপে কাজ করে।

প্রথমে আমরা গোল্যাং এর অফিসিয়াল syscall/js প্যাকেজ ব্যবহার করেছি গোল্যাং থেকে জাভাস্ক্রিপ্টকে এক্সেস করার জন্য।

এবার আমরা আসুন কম্পাইল করিঃ

GOOS=js GOARCH=wasm go build -o main.wasm

এই কমান্ডের মাধ্যমে আমরা কোডকে ওয়েব এসেম্বলিতে কম্পাইল করেছি main.wasm নামে।

এবার ৩ নাম্বার ধাপের পালা। আমাদেরকে wasm_exec.js নামক ফাইলটা আনতে হবে, যেটা গোল্যাং এর ওয়েব এসেম্বলি র‍্যাপার। এই ফাইলটা গোল্যাং অফিশিয়ালি দিয়ে থাকে।

নিচের কমান্ড রান করে ফেলুন ঝটপট

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

এই কমান্ড এর সাহায্যে আমরা গোল্যাং এর রুট কোড থেকে wasm_exec.js ফাইলটা আমাদের কারেন্ট লোকেশনে আনলাম, যেখানে আমরা main.wasm ফাইলটা রেখেছি।

এবার দেখি ক্লায়েন্ট সাইডের কোডঃ

খুবই সোজা সাপ্টা কাজ। আমি প্রথমেই wasm_exec.js ইম্পোর্ট করে গো এর ওয়েব এসেম্বলিকে ক্লায়েন্ট সাইডে সেটআপ করেছি। দেখুন আমি এখানে main.wasm ফাইলটা ইম্পোর্ট করেছি। এরপর এটাকে রান করে দিলাম।

এরপর একটা ইনপুট ফিল্ড থেকে ইউজারের নাম নিয়ে welcomeMe ফাংশনটা ইনভোক করলাম যেটা গো এর সেই welcome ফাংশনটা রান করবে যেটাকে আমরা গো কোডে গ্লোবালি সেট করেছিলাম।

এখন যেকোনো স্ট্যাটিক সার্ভার দিয়ে index.html ফাইলটই সার্ভ করে ফেলুন। আমি এখানে গো দিয়ে স্ট্যাটিক সার্ভার না বানিয়ে এক লাইনে সার্ভার রান করেছি goexec নামক টুল দিয়ে

goexec 'http.ListenAndServe(`:8080`,http.FileServer(http.Dir(`.`)))'

এবার ব্রাউজের http://localhost:8080 গিয়ে দেখুন মজা

তো দেখলেন তো ওয়েব এসেম্বলির কি কার্মা। এটা তো কেবল বেসিক দেখালাম, গোল্যাং থেকে ওয়েব এসেম্বলি দিয়ে আপনি চাইলে ডম ম্যানিপুলেশন এর মত এডভান্সড কাজও করতে পারবেন। এখন আপনি বসে বসে ভাবুন কি কি জিনিস আপনি করতে পারবেন ওয়েব এসেম্বলি আর সাথে আপনার প্রিয় সার্ভার সাইড ল্যাঙ্গুয়েজ দিয়ে।

আজকে এই পর্যন্তই। আর হ্যাঁ, যদি বাংলায় গোল্যাং শিখতে চান তাহলে আর দেরী না করে আমার ফ্রি ইউটিউব কোর্স দেখা শুরু করে দিন এই লিঙ্কে গিয়ে । সামনে আরো অনেক দারুণ জিনিস শেখাবো ইন শা আল্লাহ।

ভালো থাকবেন। আল্লাহ হাফেজ।