وب اسمبلی (WebAssembly) چیست؟

خدمات طراحی سایت و برنامه نویسی انواع پلتفرم ، اپلیکیشن در شمال کشور با سابقه درخشان از سال 1385 بصورت حرفه ای

وب اسمبلی (WebAssembly) چیست؟

تعریف کردن وب اسمبلی کار آسانی نیست. به همین دلیل متاسفانه این تصورات اشتباه رایج شده که Wasm همان جاوا اسکریپت یا سی پلاس پلاس است یا فقط به یکی از آن دو زبان برنامه‌نویسی مربوط می‌شود. اما هیچ‌کدام از آن تصورات درست نیست. برای اینکه بشود وب اسمبلی را خیلی ساده و روشن تعریف کرد، لازم است اول درباره‌ی چند مفهوم و زبان برنامه‌نویسی حرف زد.

  • JavaScript: پایه و اساس وب دیزاین را زبان نشانه‌گذاری HTML و CSS و زبان برنامه‌نویسی JavaScript می‌سازند. جاوا اسکریپت زبان برنامه‌نویسی سطح بالا و تفسیری است که در مرورگر اجرا می‌شود. کاربرد اصلی جاوا اسکریپت تعاملی و داینامیک کردن صفحات و همچنین پیاده‌سازی طراحی UI وبسایت است. مثلا، اگر طراح سایت بخواهد انیمیشن به صفحه‌ی سایت اضافه کند از جاوا اسکریپت استفاده می‌کند.

 

  • Compiled languages: زبان‌های برنامه‌نویسی به دو دسته تقسیم می‌شوند: زبان‌های تفسیری یا کامپایلری. زبان‌های برنامه‌نویسی سطح بالا مثل جاوا اسکریپت و پایتون برای کامپیوتر قابل‌فهم نیستند. چون زبان‌های سطح بالا به زبان طبیعی (زبان انسان) شبیه است تا کار کدنویسی برای توسعه‌دهنده راحت باشد. پس، قبل از اینکه ماشین (کامپیوتر) بتواند کدها را اجرا کند، اول باید آن‌ها را به زبان خودش، زبان صفر و یک‌ها، ترجمه کند. فرآیند ترجمه ممکن است به دو صورت اتفاق بیفتد: خط به خط یا یک‌جا. یعنی یا همه‌ی کد‌های نوشته شده یک‌جا به زبان ماشین کامپایل می‌شوند یا خط به خط تفسیر می‌شوند.

 

  • Binary code: زبان کامپیوتر یا ماشین زبان صفر و یک، زبان باینری یا دودویی است. هر چیزی را که بخواهیم کامپیوتر بفهمد باید در قالب صفر و یک‌ها به آن بدهیم. به زبان‌هایی که با صفر و یک نوشته می‌‌شوند زبان‌های سطح پایین می‌گویند چون فهمیدن آن برای انسان و برنامه‌نویس بسیار سخت و زمان‌بر است. درنتیجه، برنامه‌نویسی به زبان‌های سطح پایین، مانند زبان اسمبلی، نیز بسیار سخت و زمان‌بر است.
وب اسمبلی (WebAssembly) چیست؟

وب اسمبلی (WebAssembly) چیست؟

 

تعریف Wasm

خب مفاهیم بالا چه ارتباطی با Wasm دارد؟ برای طراحی سایت نمی‌شود از زبان‌های سطح پایین و دیگر زبان‌های سطح بالا به راحتی استفاده کرد. در حالی که اگر با کامپیوتر به زبان اصلی (Native) خودش حرف زد، همه‌چیز (پردازش و اجرای کدها و درنتیجه عملکرد سایت) سریع‌تر می‌شود. علاوه‌ بر آن، استفاده از زبان‌های برنامه‌نویسی دیگر (در کنار جاوا اسکریپت) امکانات بیشتری را در اختیار توسعه‌دهنده و برنامه‌نویس قرار می‌دهد.

ماشین وب اسمبلی ساخته شد تا به طراحان سایت امکان دهد که در طراحی وبسایت از زبان‌های دیگر هم استفاده کنند. وب اسمبلی کدهای نوشته‌ شده به هر زبان سطح بالایی را به کدهای باینری (کدهای اجرایی سطح پایین) تبدیل می‌کند. مرورگرها می‌توانند کدهای باینری Wasm را، مثل کدهای جاوا اسکریپت، بفهمند و اجرا کنند.

تا قبل از وب اسمبلی،‌ جاوا اسکریپت تنها زبان برنامه‌نویسی آشنا و قابل‌فهم برای مرورگرها بود. اما امروزه نسخه‌های جدید مرورگرها با کدهای Wasm سازگارند و آن‌ها را می‌شناسند و اجرا می‌کنند. از میان تعریف‌هایی که از وب اسمبلی ارائه شده است، تعریف developer.mozilla.org از بقیه ساده‌تر و آسان‌فهم‌تر است.

وب اسمبلی نوع جدیدی کد است که در مرورگرهای مدرن اجرا می‌شود. کدهای وب اسمبلی امکانات جدیدی را در اختیار طراح سایت قرار می‌دهد و عملکرد سایت را نیز بسیار بهتر و سریع‌تر می‌کند. وب اسمبلی طوری طراحی نشده است که برنامه‌نویس آن را بنویسد. بلکه طوری طراحی شده تا کامپایلری قوی باشد و  کدهای نوشته شده به زبان‌های مبدا مثل C, C++, Rust و … را ترجمه کند.

 

 اهمیت وب اسمبلی در طراحی وبسایت

برای اینکه اهمیت کدهای وب اسمبلی معلوم شود، لازم است مزایا و ویژگی‌های آن در طراحی سایت شمرده شود. وب اسمبلی چه امکانات و ویژگی‌هایی را در اختیار طراح سایت می‌گذارد که تا پیش از سال ۲۰۱۷ و تولد آن، در طراحی وب امکان‌پذیر نبوده است؟

  • بعد از وب اسمبلی، طراح سایت از هر زبانی که بخواهد می‌تواند برای کدنویسی استفاده کند. او کدها را می‌نویسد و خیالش راحت است که وقتی آن‌ها را به کدهای Wasm تبدیل کرد، در مرورگر اجرا می‌شوند. همین ویژگی دست طراحان سایت و وب اپلیکیشن‌ها را برای توسعه‌ی پروژه‌های پیچیده و سنگین (مثل Google Earth یا بازی‌های سه بعدی و سایت‌ها و وب اپ‌های واقعیت مجازی و واقعیت افزوده) باز می‌گذارد.

 

  • Wasm عملکرد سایت را بهینه می‌کند چون کدهایش سبک‌تر است، پس سریع‌تر در مرورگر اجرا می‌شوند و زمان بارگذاری کمتری را نیاز دارند. این یعنی طراح سایت می‌تواند صفحات پیچیده‌تر و پرجزئیات‌تری را طراحی کند اما نگران زمان بارگذاری صفحه و معطل‌ شدن کاربر نباشد. اما مگر جاوا اسکرپیت همان ویژگی‌ها را ندارد؟ بله، اما در همه‌ی موارد و همه‌ی پروژه‌ها جاوا اسکریپت سرعت و عملکرد لازم را، مخصوصا برای تسک‌های خیلی سنگین، فراهم نمی‌کند.

 

  • درست است که توسعه‌دهنده یا برنامه‌نویس کدهای Wasm را نمی‌نویسد، اما می‌تواند آن‌ها را بخواند و در صورت لزوم ویرایش یا اصلاح کند (debugging). از دو فایل اکستنشن برای ذخیره‌ی کدهای وب اسمبلی استفاده می‌شود: wat. که برای داشتن text فرمت کدهاست و wasm. برای فرمت binary کدها. توسعه‌دهنده به ‌راحتی قادر است فرمت متنی را ویرایش کند.

 

Wasm & JavaScript

چه ارتباطی میان جاوا اسکریپت (JS) و وب اسمبلی وجود دارد؟ وب اسمبلی و جاوا اسکریپت یکدیگر را تکمیل می‌کنند. JS زبانی است ۲۶ ساله که کتابخانه‌ها و پلاگین‌های زیادی دارد. همچنین مرورگرها برای پردازش و اجرای کدهای جاوا اسکریپت زیرساخت‌هایی قوی دارند. در کل، جاوا اسکریپت زبانی قدیمی‌ و قوی‌ است. اما همان‌طور که اشاره شد، جاوا اسکریپت محدودیت‌هایی دارد و قدرتش برای همه‌ی پروژه‌ها کافی نیست.

وب اسمبلی زبان بسیار جدیدی است و امکانات و ویژگی‌هایی دارد که آن را از جاوا اسکریپت متمایز می‌کند. اما Wasm ساخته شده تا در کنار جاوا اسکریپت عمل و محدودیت‌هایش را با کمک گرفتن از امکانات JS برطرف کند. یعنی این دو زبان به یکدیگر مرتبط می‌شوند و از امکانات یکدیگر استفاده می‌کنند. با وب اسمبلی می‌شود کدهای جاوا اسکریپت را فراخوانی کرد و از جاوا اسکریپت داده گرفت و برعکس.

 

نمونه کدهای Wasm

قطعه کد زیر به زبان C نوشته شده است.

int factorial(int n) {
if (n == 0)
return 1;
else
return n * factorial(n-1);
}

 

قطعه کد زیر کامپایل‌شده‌ی کدهای C بالا در فرمت متنی وب اسمبلی (wat.) است.

(module
(table 0 anyfunc)
(memory $0 1)
(export “memory” (memory $0)) (export “factorial” (func $factorial))
(func $factorial (; 0 😉 (param $0 i32) (result i32)
(local $1 i32)
(local $2 i32)
(block $label$0
(br_if $label$0
(i32.eqz
(get_local $0)
)
)
(set_local $2
(i32.const 1)
)
(loop $label$1
(set_local $2
(i32.mul
(get_local $0) (get_local $2)
)
)
(set_local $0
(tee_local $1 (i32.add
(get_local $0) (i32.const -1)
)
)
)
(br_if $label$1 (get_local $1)
)
)
(return
(get_local $2)
)
)
(i32.const 1)
)
)

قطعه کدهای زیر دو نمونه از کدهای Wasm است که اولی در فرمت متنی است و دومی باینری.

 

برچسب ها:
, , , , , , , , , , , , , , , , ,