تبدیل Rust در جاوا اسکریپت به WebAssembly باید بهترین انتخاب کد برای وب باشد.برای انجام این کار Rust نیز باید با جاوا اسکریپت در وب ادغام شود.

علت اینکه چرا در WebAssembly باید از rust در جاوا اسکریپت استفاده کنیم را می خواهیم در این مقاله بیان کنیم زیرا ممکن است شما بخواهید یک WebAssembly ( که یک نوع جدید از کد است که می تواند در مرورگرهای وب مدرن اجرا شود ) یا به بیان ساده تر یک Wasm را بنویسید و یا کد بزنید و rust  را به عنوان زبان کد نویسی خود انتخاب کرده باشید.بنابراین سعی شده است تا در این مقاله راه های استفاده از این زبان در جاوا اسکریپت را بگوییم و شما را بیشتر با این زبان آشنا کنیم.

زبان Rust

ما باید یک ابزار مجموعه ای از کتابخانه های به هم پیوسته ای ایجاد کنیم که Rust و WebAssembly را عملی کنند.امروزه به جای استفاده از API های وب، به طور مستقیم از کتابخانه ها و چارچوب های سطح بالا استفاده می کنند.عواملی وجود دارد که زبان Rust را از زبان های Go، C # و دیگر زبان هایی که می توان با ان ها یک wasm را کد نویسی کرد، جدا می کنند. این برنامه حداقل زمان اجرایی را دارد، و همین باعث می شود برای کتابخانه های جاوا اسکریپت به راحتی بتوان از ان استفاده کرد. C و C ++  نیز مشابه این برنامه هستند، اما آنچه که Rust را از زبان های دیگر متمایز می کند، ابزار آن است، که اکنون نگاهی به مزیت های ابزار این زبان خواهیم داشت .

اصول اولیه

اگر قبلا از زبان Rust  در جاوا اسکریپت استفاده نکرده اید ابتدا بهتر است یک سری تنظیمات را اجرا کنید.این پروسه بسیار آسان است ابتدا Rustup را دانلود کنید، که راه کنترل نسخه های   Rust است و ابزارهای زنجیره ای مختلف برای تلفیق متقابل در ورژن های متفاوت این زبان است. هم چنین Rustup اجازه ی دسترسی به Cargo را به شما می دهد. Cargo وظیفه ی ساخت ابزار در Rust  دارد و هم چنین مدیریت پکیج را نیز بر عهده دارد.حالا که ما تصمیم به کد نویسی با این زبان داریم، می توانیم به راحتی کد Rust را که از طریق WebAssembly در مرورگر اجرا می شود، بنویسیم، اما اگر ما بخواهیم کاری انجام دهیم تا طرفداران CPU را تحت تاثیر قرار دهیم، احتمالا در برخی موارد باید از Model Object Model (DOM) استفاده کنیم یا از بعضی از API  ها در جاوا اسکریپت بهره ببریم. به عبارت دیگر و به زبان تخصصی تر نیاز به جاوا اسکریپت interop داریم.

مشکل و راه حل ها

WebAssembly یک زبان بسیار ساده است. اگر می خواهیم این زبان را با جاوا اسکریپت تطبیق دهیم و تلفیق کنیم، Wasm فقط چهار نوع داده را برای انجام این کار به ما می دهد: شناورهای 32 و 64 بیت و عددهای صحیح در 32 و 64 بیت. Wasm یک مفهوم مشخص از رشته ها، آرایه ها، اشیاء یا هر نوع داده ی دیگری را ندارد. اساسا، ما فقط می توانیم با استفاده از  اشاره گرها، مفهوم و کد مورد نظر را بین Rust و جاوا اسکریپت منتقل کنیم. نیازی به گفتن نیست که این قابلیت کمتر از حد ایده آل ما است؛ اما خبر خوب این است که دو کتابخانه که ارتباط بین Wasm و جاوا اسکریپت را تسهیل می کنند، وجود دارد: ism-bindgen و stdweb .با این حال خبر بدی نیز وجود دارد و آن این است که این دو کتابخانه متاسفانه با یکدیگر ناسازگار هستند. ism-bindgen سطح پایین تری نسبت به stdweb دارد اما  تلاش می کند تا کنترل کامل بر نحوه تعامل جاوا اسکریپت و Rust را به شما بدهد. در حقیقت، حتی صحبت از بازنویسی stdweb با استفاده از ism-bindgen نیز وجود دارد که بتواند از ناسازگاری خلاص شود.از آنجا که ism-bingen گزینه ای با حجم کمتر است (و این گزینه به طور رسمی توسط گروه کاری Rust WebAssembly کار می کند)، ما بر روی آن تمرکز خواهیم کرد.

bindgen wasm- و wasm-pack

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

$ cargo new my-wasm-library --lib

cd my-wasm-library $

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

// Include the `wasm_bindgen` attribute into the current namespace.

use wasm_bindgen::prelude::wasm_bindgen;


// This attribute makes calling Rust from JavaScript possible.

// It generates code that can convert the basic types wasm understands

// (integers and floats) into more complex types like strings and

// vice versa. If you're interested in how this works, check this out:

//blog.ryanlevick.com/posts/wasm-bindgen-interop/

#[wasm_bindgen]

// This is pretty plain Rust code. If you've written Rust before this

// should look extremely familiar. If not, why wait?! Check this out:

// doc.rust-lang.org/book/

pub fn excited_greeting(original: &str) -> String {

 format!("HELLO, {}", original.to_uppercase())

}

تغییرات لازم

در ادامه، ما باید دو تغییر را در فایل پیکربندی Cargo.to ml خود داشته باشیم:

    اضافه کردن ism_bindgen به عنوان وابستگی ( متبوع برای تابعی که در ابتدا ایجاد کردیم)

    پیکربندی نوع باینری (دودویی) کتابخانه ، تا آن را به عنوان یک کتابخانه سیستمی یا سیستم دینامیکی بتوانیم در نظر بگیریم. در این مورد، سیستم ما از نوع wasm است، و تنظیم این گزینه در واقع چگونگی تولید پرونده های باینری wasm است.

[package]

name = "my-wasm-library"

version = "0.1.0"

authors = ["$YOUR_INFO"]

Edition = "2018"


[lib]

crate-type = ["cdylib", "rlib"]


[dependencies]

wasm-bindgen = "0.2.33"

استفاده از cargo

همان طور که پیشتر گفته شد ،cargo یک ابزار است که برای کمک به مدیریت پروژه های rust خود می توان از آن  استفاده کرد. اگر ما فقط از cargo استفاده کنیم، در نهایت تنها یک باینری wasm به دست می آوریم . بنابراین برای آسان ساختن کد Rust از جاوا اسکریپت، زمانی که ما می خواهیم یک کد جاوا اسکریپت داشته باشیم که انواع جاوا اسکریپت های غنی مانند رشته ها و اشیا را به اشاره گرها تبدیل می کند و سپس این اشاره گرها را به ماژول Wasm منتقل می کند، از این ابزار استفاده می کنیم. این کار را بدون نوشتن برنامه نیز می توان انجام داد اما انجام این کار به صورت دستی خسته کننده و مستعد اشکالات است و تعداد خطاها و ارور های برنامه را بالا می برد.

توانایی های دیگر این دو کتاب خانه

خوشبختانه، علاوه بر داشتن یک کتابخانه، ism-bindgen همچنین دارای توانایی ایجاد «glue » در جاوا اسکریپت برای ما نیز هست. این به این معنی است که در کد با ماژول Wasm ، ما می توانیم از کد های جاوا اسکریپت های معمول نیز استفاده کنیم و کد تولید شده از wasm-bindgen کار خسته کننده ی تبدیل این انواع را به نوع اشاره گر انجام می دهد تا که Wasm واقعا بتواند زبانی که کد را نوشته ایم را درک کند.ما می توانیم از wasm -packet برای ساخت باینری Wasm استفاده کنیم و از ism-bindgen  برای ابزار CL استفاده کنیم و تمام جاوا اسکریپت (و هر نوع اسکریپت که به صورت اختیاری تولید شده ) را به یک بسته خوب و منظم بسته بندی کنیم.

کد نویسی مربوط به این دو کتابخانه

بگذارید این کار را هم اکنون انجام دهیم تا بتوانید معنای ان را بهتر درک کنید .ابتدا ما باید installer را نصب کنیم:

 cargo install wasm-pack $

به طور پیش فرض، ism-bindgen ماژول های ES6 را تولید می کند. ما از یک تگ اسکریپت ساده برای کد خود استفاده می کنیم، بنابراین ما فقط می خواهیم یک شیء جاوا اسکریپت ساده را ایجاد کنیم که به توابع ماشینی دسترسی پیدا می کند. برای انجام این کار، ما آن را به گزینه  target no-modules-- منتقل می کنیم.

wasm-pack build --target no-modules $

مزایای این کد نویسی

با این روندی که پیش رفته ایم ، در حال حاضر یک پرونده pkg در پروژه ی خود داریم که اگر به مطالب با دقت نگاه کنیم، موارد زیر را خواهیم دید:

    package.json   که می تواند مفید واقع شود اگر ما می خواهیم این بسته را به عنوان یک ماژول NPM استفاده کنیم

    my_wasm_library_bg.wasm  که در واقع کد واقعی ما است

    my_wasm_library.js که کد جاوا اسکریپت "glue" ماست

    برخی از فایل هایی که TypeScript  را تعریف می کنند

حالا می توانیم یک فایل index.html ایجاد کنیم که از JavaScript و Wasm ما استفاده می کند:

<html>

<head>

 <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />

</head>

<body>

 <!-- Include our glue code -->

 <script src='./pkg/my_wasm_library.js'></script>

 <!-- Include our glue code -->

 <script>

   window.addEventListener('load', async () => {

     // Load the wasm file

     await wasm_bindgen('./pkg/my_wasm_library_bg.wasm');

     // Once it's loaded the `wasm_bindgen` object is populated

     // with the functions defined in our Rust code

     constant greeting = wasm_bindgen.excited_greeting("Ryan")

     console.log(greeting)

   });

 </script>

</body>

</html>

نکته ی جانبی

شما ممکن است وسوسه شوید و بخواهید فایل HTML را در مرورگر خود باز کنید، اما متاسفانه این کار امکان پذیر نیست.جالب است بدانید که به دلایل امنیتی، فایل های Wasm از دامنه مشابه به عنوان فایل HTML ارائه می شوند. برای انجام این کار شما یک سرور HTTP نیاز دارید اگر سرور HTTP static مورد علاقه خود را داشته باشید که بتواند فایل ها را از سیستم فایل خود برایتان بفرستد، به راحتی می توانید از آن استفاده کنید. ما در اینجا از  http-server استفاده می کنیم که می توانید آن را نصب کنید و اجرا کنید:

 cargo install basic-http-server $

basic-http-server $

اکنون فایل index.html از طریق سرور وب خود با رفتن به   localhost: 4000 / index.html باز کنید و کنسول جاوا اسکریپت خود را بررسی کنید.این روندی که در بالا توضیح داده شد شما را بیشتر با این زبان و طرز کار آن آشنا می کند. برای کسانی که برای اولین بار است می خواهند با این زبان برنامه نویسی کنند، بهتر است تمامی کد های بالا را یک بار خودشان بزنند  تا بتوانند طرز کار را به طور واضح ببینند.