(function (s, e, n, d, er) { s['Sender'] = er; s[er] = s[er] || function () { (s[er].q = s[er].q || []).push(arguments) }, s[er].l = 1 * new Date(); var a = e.createElement(n), m = e.getElementsByTagName(n)[0]; a.async = 1; a.src = d; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://cdn.sender.net/accounts_resources/universal.js', 'sender'); sender('986212f6399684')
وب اسمبلی چیست

  این مقاله را میتوانید در مدت زمان 6 دقیقه مطالعه کنید   منتشر شده در تاریخ: شهریور ۳۰ام, ۱۴۰۱   آخرین بروزرسانی: شهریور ۳۰ام, ۱۴۰۱


وب اسمبلی (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) کار با آن را یاد گرفت و تمرین کرد. 

 

آیا این مطلب برای شما مفید بود؟

امتیازشو ثبت کنید

میانگین / 5. تعداد رای

اولین نفر شما امتیاز دهید

دوره غیرحضوری طراحی و برنامه نویسی وبسایت

آموزش طراحی وبسایت به شیوه تخصصی و کاربردی با وردپرس

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

شاید به این مطالب نیز علاقه مند باشید.

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

در این دنیای پر از رقابت پیداکردن شغلی که دوستش داریم کار سختی است. می‌شود ادعا کرد این سختی در دنیای شغل‌های دیجیتال، مثل طراحی سایت،‌سخت‌تر است. چون هم نیاز…

مرورگر، دروازه ورود به اینترنت

شبکه جهانی وب بسیار گسترده و قدرتمند است. طی دهه‌های گذشته، اینترنت تمام زندگی ما، از کار کردن گرفته تا نحوه تعامل با یکدیگر را تحت تاثیر قرار داده است.…

آموزش تامین امنیت وردپرس

۵ نکته بسیار مهم برای تامین امنیت وردپرس که باید بدانید!

وب‌سایت داشتن هرروز آسان‌تر می‌شود، چون کاربردهای سایت‌ها هرروز بیشتر می‌شود. با دیجیتالی‌شدن و آنلاین‌شدن تقریبا همه‌چیز، کسب‌وکارها و افراد بیشتری ترغیب می‌شوند تا سایت داشته باشند. به‌همین دلیل، اگر…

0 0 رای
امتیازدهی به مقاله
دنبال کردن
با خبر کردن از
guest
2 دیدگاه
قدیمی ترین
جدیدترین بیشترین بازخورد
بازخورد داخلی
دیدن همه نظرات
مهسیما
مهسیما
1 روز گذشته

متن خوبی بود.

تاییدیه ها

تهران - ستارخان، خیابان کوثر دوم، پلاک ۱۰، واحد ۳

آیا این مطلب برای شما مفید بود؟

امتیازشو ثبت کنید

میانگین / 5. تعداد رای

اولین نفر شما امتیاز دهید

دوره غیرحضوری طراحی و برنامه نویسی وبسایت

آموزش طراحی وبسایت به شیوه تخصصی و کاربردی با وردپرس

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