وب اسمبلی (WebAssembly) چیست؟ چرا در طراحی وبسایت کاربردی و مهم است؟ چه مزایایی دارد؟ چرا بعضی از متخصصان آن را در آینده‌ وب دیزاین بسیار موثر می‌دانند؟ 

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

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

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

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

تعریف Wasm

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

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

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

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

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

Wasm & JavaScript

نمونه کدهای Wasm

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

(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) 
   )
)

(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

جمع‌بندی و نتیجه‌گیری