وب اسمبلی (WebAssembly) چیست؟ چرا در طراحی وبسایت کاربردی و مهم است؟ چه مزایایی دارد؟ چرا بعضی از متخصصان آن را در آینده وب دیزاین بسیار موثر می‌دانند؟
تاریخچه تکاملی طراحی سایت در جهان نشان می‌دهد که متخصصان و برنامه‌نویسان به دنبال این هستند که طراحی سایت را راحت‌تر، سریع‌تر و بهینه‌تر کنند. به همین دلیل، فریمورک‌های توسعه‌ی فرانت اند و بک اند و سیستم‌های مدیریت محتوا مانند وردپرس روانه‌ی بازار شدند. همچنین، زبان‌های کاربردی در وب دیزاین مدام به‌روز و کتابخانه‌‌های قدرتمندی برای آن‌ها ساخته می‌شود. از طرف دیگر، مرورگرها هر روز قدرتمندتر میشوند و تکنولوژی‌های مختلفی مثل AJAX به طراحان و توسعه‌دهندگان امکانات بیشتری برای بهبود عملکرد وبسایت‌ها می‌دهد.
از جدیدترین ابزارها و پیشرفت‌هایی که در سال‌های اخیر با همکاری غول‌های دنیای تکنولوژی (گوگل، اپل، مایکروسافت، موزیلا و W3C) ساخته شده و کار طراحی وبسایت را راحت‌تر و بهینه‌تر کرده است، وب اسمبلی (WebAssembly or Wasm) نام دارد. Wasm (وسم) زبان جدیدی برای طراحی و توسعه وب است. این محتوا درباره‌ی آن زبان جدید است و به سوالاتی که در آغاز درباره‌ی آن طرح شد پاسخ می‌دهد.
آنچه در این نوشته خواهیم داشت
وب اسمبلی (WebAssembly) چیست؟
تعریف کردن وب اسمبلی کار آسانی نیست. به همین دلیل متاسفانه این تصورات اشتباه رایج شده که Wasm همان جاوا اسکریپت یا سی پلاس پلاس است یا فقط به یکی از آن دو زبان برنامه‌نویسی مربوط می‌شود. اما هیچ‌کدام از آن تصورات درست نیست. برای اینکه بشود وب اسمبلی را خیلی ساده و روشن تعریف کرد، لازم است اول درباره‌ی چند مفهوم و زبان برنامه‌نویسی حرف زد.
- JavaScript: پایه و اساس وب دیزاین را زبان نشانه‌گذاری HTML و CSS و زبان برنامه‌نویسی JavaScript می‌سازند. جاوا اسکریپت زبان برنامه‌نویسی سطح بالا و تفسیری است که در مرورگر اجرا می‌شود. کاربرد اصلی جاوا اسکریپت تعاملی و داینامیک کردن صفحات و همچنین پیاده‌سازی طراحی UI وبسایت است. مثلا، اگر طراح سایت بخواهد انیمیشن به صفحه‌ی سایت اضافه کند از جاوا اسکریپت استفاده می‌کند.
- Compiled languages: زبان‌های برنامه‌نویسی به دو دسته تقسیم میشوند: زبان‌های تفسیری یا کامپایلری. زبان‌های برنامه‌نویسی سطح بالا مثل جاوا اسکریپت و پایتون برای کامپیوتر قابل‌فهم نیستند. چون زبان‌های سطح بالا به زبان طبیعی (زبان انسان) شبیه است تا کار کدنویسی برای توسعهدهنده راحت باشد. پس، قبل از اینکه ماشین (کامپیوتر) بتواند کدها را اجرا کند، اول باید آن‌ها را به زبان خودش، زبان صفر و یک‌ها، ترجمه کند. فرآیند ترجمه ممکن است به دو صورت اتفاق بیفتد: خط به خط یا یک‌جا. یعنی یا همه‌ی کدهای نوشته شده یک‌جا به زبان ماشین کامپایل میشوند یا خط به خط تفسیر میشوند.
- Binary code: زبان کامپیوتر یا ماشین زبان صفر و یک، زبان باینری یا دودویی است. هر چیزی را که بخواهیم کامپیوتر بفهمد باید در قالب صفر و یک‌ها به آن بدهیم. به زبان‌هایی که با صفر و یک نوشته میشوند زبان‌های سطح پایین می‌گویند چون فهمیدن آن برای انسان و برنامه‌نویس بسیار سخت و زمان‌بر است. درنتیجه، برنامه‌نویسی به زبان‌های سطح پایین، مانند زبان اسمبلی، نیز بسیار سخت و زمان‌بر است.
تعریف 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 است که اولی در فرمت متنی است و دومی باینری.
(module
(func (export "addTwo") (param i32 i32) (result i32)
local.get 0
local.get 1
i32.add))
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: 06 ; string length 0000019: 6164 6454 776f addTwo ; export name 000001f: 00 ; export kind 0000020: 00 ; export func index 0000016: 0a ; FIXUP section size ; section "Code" (10) 0000021: 0a ; section code 0000022: 00 ; section size (guess) 0000023: 01 ; num functions ; function body 0 0000024: 00 ; func body size (guess) 0000025: 00 ; local decl count 0000026: 20 ; local.get 0000027: 00 ; local index 0000028: 20 ; local.get 0000029: 01 ; local index 000002a: 6a ; i32.add 000002b: 0b ; end 0000024: 07 ; FIXUP func body size 0000022: 09 ; FIXUP section size ; section "name" 000002c: 00 ; section code 000002d: 00 ; section size (guess) 000002e: 04 ; string length 000002f: 6e61 6d65 name ; custom section name 0000033: 02 ; local name type 0000034: 00 ; subsection size (guess) 0000035: 01 ; num functions 0000036: 00 ; function index 0000037: 00 ; num locals 0000034: 03 ; FIXUP subsection size 000002d: 0a ; FIXUP section size
جمع‌بندی و نتیجه‌گیری
۱. وبسایت‌ها و وب اپلیکیشن‌ها هر روز پویاتر و تعاملی‌تر میشوند. تجربه کاربر وبسایت‌ها و وب اپلیکیشن‌ها در آینده‌ای نه چندان دور با طراحی سه بعدی و هوش مصنوعی (ماشین لرنینگ) شکل خواهند گرفت. این یعنی وب دیزاینر با پروژه‌های سنگین‌تر و متفاوت‌تری روبرو خواهد شد.
۲. وب اسمبلی با نگاه به آینده‌ی طراحی سایت و نیازهای آینده ساخته شده است. Wasm جاوا اسکریپت را کامل می‌کند و با دیگر تکنولوژی‌های طراحی و توسعه سایت نیز سازگار است.
۳. ماشین وب اسمبلی به توسعهدهنده و برنامه‌نویس امکان می‌دهد تا از دیگر زبان‌های برنامه‌نویسی نیز در طراحی سایت و برای پیاده‌سازی رابط کاربر وبسایت‌ها استفاده کنند.
۴. برای استفاده از Wasm اولین قدم این است که به جاوا اسکریپت و طراحی وب مسلط شد (جاوا اسکریپت در آموزش طراحی و برنامه‌نویسی سایت درس داده می‌شود). در دومین قدم، با کمک گرفتن از منابع آنلاین (مثل webassembly.org) کار با آن را یاد گرفت و تمرین کرد.