WebAssembly: چگونگی و چرایی

آفلاین
user-avatar
ارسطو عباسی
13 خرداد 1398, خواندن در 12 دقیقه

در هر مرورگری که استفاده می‌کنید -کروم، فایرفاکس، اج، سافاری و...- کدهای داده شده به مرورگر توسط یک موتور جاوااسکریپتی اجرا و تفسیر می‌شود. موتوری که تنها می‌تواند جاوااسکریپت را شناسایی بکند. اما متاسفانه جاوااسکریپت نمی‌تواند برای تمامی کارهای‌ ما ایده‌آل و مناسب باشد. اینجا جائیست که WebAssembly وارد کار می‌شود. 

WebAssembly نوعی جدید از کدنویسی است که می‌تواند در مرورگرهای مدرن امروزی اجرا شود. این حالت در قالب باینری سطح پایین ارائه می‌شود به همین دلیل بسیار اندازه کمی دارد و در اجرا و بارگذاری بسیار سریع است. شما نیازی ندارید که WebAssembly بنویسید بلکه زبان‌های برنامه‌نویسی سطح بالایی را به WebAssembly کامپایل می‌کنید.

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

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

علارغم نامی که دارد اما WebAssembly یک زبان اسمبلی نیست. و مهمتر از هر چیزی WebAssembly اساسا برای مرورگرها ساخته شده است و ارتباط مستقیمی با سطوح پایین یک سیستم کامپیوتری ندارد. 

WebAssembly را بیشتر از هر چیزی می‌توان به عنوان یک واسط در نظر گرفت. زمانی که یک سورس WebAssembly با مرورگر تعامل برقرار می‌کند، مرورگر آن را تبدیل به کدهای ماشین می‌کند. در زیر می‌توانید چیزی که ما می‌نویسیم با چیزی که مرورگر در نهایت دریافت می‌کند را مشاهده کنید.

کاری که WebAssembly شما را قادر به انجام دادن آن می‌کند این است که می‌توانید از طریق زبان‌های برنامه‌نویسی مانند سی، سی‌پلاس‌پلاس و Rust کدهایی را تولید کنید و در نهایت آن‌ها را به چیزی که WebAssembly module خوانده می‌شود تبدیل کنید. در نهایت می‌توانید این ماژول را در وب اپلیکیشن‌تان قرار داده و آن را توسط جاوااسکریپت فراخوانی کنید. 

پس نتیجه می‌گیریم که WebAssembly جایگزینی برای جاوااسکریپت نیست، بلکه در کنار آن کار می‌کند. 

چرا به WebAssembly نیاز داریم؟

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

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

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

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

چرا وب تا به این اندازه جذاب است

زیبایی وب این است که شبیه به یک جادو است. وب همه جا کار می‌کند و تقریبا در همه جا حضور دارد. هیچ دانلود و هیچ فرایند نصبی نیاز نیست. تنها با یک کلیک وب اپلیکیشن‌ها را می‌توانید دریافت و استفاده بکنید. این کار بسیار امن‌تر از آن است که پکیج‌های مختلف را دانلود کنید و آن‌ها را به صورت مستقل روی کامپیوترتان نصب نمایید. به اشتراک گذاری در بستر وب نیز بسیار ساده تر است. تنها کافی‌ست یک لینک را به اشتراک بگذارید.

خب چرا باید با چنین پلتفرم عظیم و شگفت انگیزی تنها کارهای مربوط به اشتراک متن و تصاویر و ویدیو را انجام دهیم؟ چرا روی آن نتوانیم کارهای خارق‌العاده‌تری انجام دهیم و اپلیکیشن‌های‌مان را به صورت کامل روی آن پیاده‌سازی نکنیم؟ WebAssembly راهی برای تقویت این موضوع است.

WebAssembly چه چیزهایی را برای‌مان به ارمغان می‌آورد؟

چیزهایی که باعث می‌شود WebAssembly فوق‌العاده شود عبارت است از:

  • سرعت
  • حمل پذیری
  • انعطاف پذیری

WebAssembly توسعه داده شده است تا سرعت را برای ما بیاورد. باینری‌های WebAssembly بسیار کوچک‌تر از فایل‌های متنی جاوااسکریپتی هستند. به دلیل وجود سایز کمتر در نتیجه زمان کمتری برای دانلود کردن نیاز داریم. چنین مسئله‌ای روی یک ارتباط شبکه‌ای کُند بسیار مهم و پدیدار است.

بازگشایی و اجرا کردن کدهای WebAssembly نیز از جاوااسکریپت سریع‌تر اتفاق می‌افتد. جاوااسکریپت یک زبان پویا است. نوع‌عای داده‌ای در آن تعریف نمی‌شود، این موضوع باعث می‌شود که نوشتن آن سریع شود اما در اجرا کردن موتور جاوااسکریپتی نیاز دارد که کارهای بیشتری را انجام دهد. پس در نتیجه روال اجرا کردن کدها بیشتر طول می‌کشد. 

ترجمه کدهای جاوااسکریپت به این صورت است که ابتدا متن ساده جاوااسکریپتی به یک ساختمان داده به نام Abstract Syntax Tree یا AST تبدیل می‌شود و بعد از آن قالب باینری به خود می‌گیرد. اما روال ترجمه کدهای WebAssembly بسیار سریع‌تر و ساده‌تر است. WebAssembly از نوع استاتیک است، بنابراین کامپایلر آن نیازی ندارد که نگران تعیین نوع داده‌ای مربوط به آن باشد. حافظه در این روش به صورت دستی کنترل می‌شود، بنابراین درست مانند زبان C، حافظه ما خالی از موارد اضافی خواهد بود. تمام این موارد باعث می‌شود که کارایی بالاتری داشته باشیم و کدها در زمان سریع‌تری اجرا شوند. زمان اجرا شدن باینری‌های WASM تنها ۲۰ درصد کندر از اجرای همان کدها در حالت نیتیو است.

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

شما نه تنها می‌توانید اپلیکیشن خودتان را روی وب پورت بکنید بلکه می‌توانید از کتابخانه‌ها و اپلیکیشن‌های نوشته شده با C++ نیز می‌توانید استفاده بکنید. سی پلاس پلاس زبانی است که تقریبا در هر پلتفرمی می‌شود از آن استفاده کرد. حال با استفاده از وب اسمبلی، می‌توان از سی پلاس پلاس در دنیای وب نیز استفاده کرد.

شگفت انگیزترین ویژگی‌ که وب اسمبلی برای ما فراهم می‌کند، انعطاف‌پذیری در نوشتن اپلیکیشن‌های مبتنی بر وب است. تا به حال حاضر، جاوااسکریپت تنها زبان برنامه‌نویسی بوده که در تمام مرورگرها پشتیبانی میشده است. با آمدن وب اسمبلی حال توسعه دهندگان وب قابلیت انتخاب زبان‌های برنامه‌نویسی دیگر و استفاده از آن‌ها در محیط وب را دارند. البته باید گفت که جاوااسکریپت هنوز هم در بسیاری از استفاده‌ها کاربردی خواهد بود اما برای زمانی که بخواهید منحصرا روی یک موضوع تمرکز کنید و آن را بهتر نمایید، وب اسمبلی می‌تواند انتخاب خوبی باشد. قسمت‌هایی مانند رابط کاربری و App Logic را باید با جاوااسکریپت نوشت اما فانکشنالیتی اصلی در وب اپلیکیشن‌ها را می‌توان در وب اسمبلی همراه با کارایی بسیار بالاتری توسعه داد.

در حال حاضر زبان‌های برنامه‌نویسی که به صورت کامل از وب اسمبلی پشتیبانی می‌کنند شامل C، C++ و Rust می‌شوند اما از زبان‌های برنامه‌نویسی دیگری نیز می‌توان استفاده کرد.

WebAssembly چگونه کار می‌کند؟

شما در وهله اول به ابزاری نیاز دارید که سورس کد شما را به WebAssembly تبدیل بکند. یک راه برای انجام چنین کاری استفاده از یک کامپایلر ماژولار مانند LLVM است که می‌تواند برای زبان‌های مختلف استفاده شود. البته برای زبان‌های سی و سی پلاس پلاس می‌توانید از یک ابزار ساده‌تر به نام Emscripten استفاده کنید که خود این ابزار نیز بر پایه LLVM ساخته شده است. زبان برنامه‌نویسی Rust نیز دارای یک کامپایلر منحصر به فرد برای خودش است که خروجی WebAssembly تولید می‌کند، این کامپایلر rustc نام دارد.

اگر شما یک برنامه Hello World نوشته شده در C داشته باشید، دستور Emscripten به شما کمک می‌کند تا بتوانید فایل‌های لازم را برای اجرا شدن در مرورگر ایجاد کنید. چیزی که شما در خروجی دریافت می‌کنید یک ماژول وب اسمبلی همراه با فایل‌های HTML و Javascript است. 

emcc hello.c -s WASM=1 -o hello.html

شما برای استفاده از WebAssembly نیاز دارید که از HTML و Javascript استفاده بکنید. این بدان دلیل است که شما به هیچ پلتفرمی در مرورگر با استفاده از API دسترسی ندارید. جاوااسکریپت است که به شما کمک می‌کند تا با DOM، WebGL و… تعامل داشته باشید. Emascripten یک فایل جاوااسکریپتی را در فرایند کامپایل شدن ایجاد می‌کند که به شما این امکان را می‌دهد تا بتوانید به روشی منطقی با Web API تعامل داشته باشید. فایل HTML نیز برای بارگذاری فایل جاوااسکریپتی و نمایش خروجی WebAssembly استفاده می‌شود.

اگر می‌خواهید بدون نصب هیچ کامپایلر و...ای از WebAssembly استفاده بکنید، می‌توانید به وبسایت webassembly.studio یا WebAssembly Explorer مراجعه کنید.

آیا می‌توانم در حال حاضر از آن استفاده بکنم؟

بله!

از سال قبل تا به الان، اکثر مرورگرهای مدرن وب فرایند پشتیبانی از WebAssembly را شروع کرده‌اند. حتی به عنوان یک fallback، یک کتابخانه جاوااسکریپتی با نام asm.js ایجاد شده که Emscripten کد نوشته شده در C را به آن تبدیل می‌کند. در حال حاضر وبسایتی مانند فیسبوک برای فشرده‌سازی تصاویر و وبسایت Adobe Lightroom برای نسخه تحت وب خود از این تکنولوژی استفاده می‌کند. 

در حال حاضر علاوه بر این موارد مثال‌های هیجان انگیز دیگری نیز وجود دارد که همگی با استفاده از WebAssembly نوشته شده است. 

بازی‌های ویدیویی به عنوان مثال یکی از نمونه‌های این موارد است. پیشنهاد می‌کنم سری به این لینک بزنید تا واقعا شگفت زده شوید.

یک نمونه دیگر از این مثال‌ها Figma است. Figma یک ابزار طراحی رابط کاربری است که روی مرورگر اجرا می‌شود و براساس زبان سی پلاس پلاس نوشته شده. این ابزار به شما قابلیت اشتراک گذاری کارها و همچنین همکاری در بین افراد مختلف را می‌دهد. قبلا این ابزار از asm.js برای کامپایل سی پلاس پلاس استفاده می‌کرد. اما حال با تغییر به سمت WebAssembly زمان بارگذاری آن‌ها تا سه برابر پیشرفت داشته است. 

در انتظار چه چیزهای دیگری باشیم؟

مرورگرها در حال حاضر روی ویژگی‌های جدیدی کار می‌کنند. پشتیبانی از برنامه‌نویسی چند نخی و مقوله Garbage Collection از مواردی هستند که مرورگرها سعی در پیاده‌سازی آن دارند. انجام چنین کارهایی باعث می‌شود که وب اسمبلی بتواند کارایی بالاتری از خود نشان دهد. یکی از اهداف دیگر ساخت یک debugging tool است که بتواند به توسعه‌دهندگان بیشتر در زمینه پورت کردن سورس کدهای‌شان به وب اسمبلی کمک بکند. 

جاوااسکریپت نیز هنوز جای خود را در دنیای توسعه وب دارد. کیست که بگوید جاوااسکریپت ضعیف است و نمی‌تواند کار خاصی را انجام دهد؟ مشکلات کارایی نیز که برای برخی از سناریوها، جاوااسکریپت با آن‌ها برخورد می‌کند با استفاده از وب اسمبلی قابل حل است. کامپایل جاوااسکریپت به وب اسمبلی به نظر نمی‌رسد کار عاقلانه‌ای باشد زیرا که نیاز است تا مرورگرها تمام زیرساخت‌های خودشان را از نو بسازند.

ویژگی‌های جدید و دنیای جدید وب از همین نقطه شروع می‌شود.

منبع

چه امتیازی به این مقاله می دید؟
خیلی بد
بد
متوسط
خوب
عالی

دیدگاه‌ها و پرسش‌ها

برای ارسال دیدگاه لازم است، ابتدا وارد سایت شوید.

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

آفلاین
user-avatar
ارسطو عباسی @arastoo
برنامه‌نویس و مدیر بخش تولید محتوا وبسایت راکت - وبلاگ شخصی: https://arastoo.dev
دنبال کردن

گفتگو‌ برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن وارد شو