{"id":986,"date":"2021-07-08T12:55:00","date_gmt":"2021-07-08T10:55:00","guid":{"rendered":"http:\/\/cmagazine.test\/getting-started-with-webassembly-and-rust\/"},"modified":"2021-12-23T15:13:21","modified_gmt":"2021-12-23T14:13:21","slug":"getting-started-with-webassembly-and-rust","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/","title":{"rendered":"Getting Started with WebAssembly and Rust"},"content":{"rendered":"\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-0a018326      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#what-is-webassembly\" class=\"uagb-toc-link__trigger\">What is WebAssembly?<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#webassembly-vs-javascript\" class=\"uagb-toc-link__trigger\">WebAssembly Vs. JavaScript<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#writing-rust-targeting-webassembly\" class=\"uagb-toc-link__trigger\">Writing Rust targeting WebAssembly<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#what-is-rust\" class=\"uagb-toc-link__trigger\">What is Rust?<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#webassembly-tutorial-setup\" class=\"uagb-toc-link__trigger\">WebAssembly tutorial: setup<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#our-first-webassembly-module\" class=\"uagb-toc-link__trigger\">Our first WebAssembly module<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#calling-webassembly-from-a-web-page\" class=\"uagb-toc-link__trigger\">Calling WebAssembly from a web page<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#what-is-he-future-of-webassembly\" class=\"uagb-toc-link__trigger\">What is he future of WebAssembly?<\/a><li class=\"uagb-toc__list\"><a href=\"#conclusions\" class=\"uagb-toc-link__trigger\">Conclusions<\/a><\/ul><\/ul><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"eplus-GxGqVy wp-block-heading\" id=\"h-what-is-webassembly\">What is WebAssembly?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/WebAssembly-logo-1024x635.jpg\" alt=\"WebAssemply logo\" class=\"wp-image-15481\" width=\"768\" height=\"476\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/WebAssembly-logo-1024x635.jpg 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/WebAssembly-logo-300x186.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/WebAssembly-logo-768x476.jpg 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/WebAssembly-logo.jpg 1200w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>WebAssembly <\/strong>was developed by Mozilla in 2015 while looking for a way to make JavaScript more efficient with heavy applications. If you have never heard about WebAssembly, check out the two videos in this article!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">[jwp-video n=&#8221;1&#8243;]<\/p>\n\n\n\n<p class=\"eplus-AX0mws wp-block-paragraph\">WebAssembly, or <b>Wasm<\/b> for brevity, is essentially a portable binary code format designed to run on an isolated virtual stack machine. It is not a replacement for <span id=\"urn:enhancement-ea9b6a5c\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/javascript\"><a href=\"https:\/\/www.codemotion.com\/magazine\/dev-hub\/javascript\/javascript-ultimate-guide\/\" class=\"ek-link\">JavaScript<\/a><\/span> but a companion tool that offers better performance where needed.<\/p>\n\n\n\n<p class=\"eplus-WIQD9d wp-block-paragraph\">WebAssembly is a compilation target for C, C++, Go, and Rust among others. Developers can code in any of those languages and then compile their source into Wasm binaries. These then run alongside <span id=\"urn:enhancement-2e802218\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/javascript\">JS<\/span> code in their apps.<\/p>\n\n\n\n<p class=\"eplus-1M9Dww wp-block-paragraph\">There are many obvious reasons why WebAssembly is <b>faster<\/b> than <span id=\"urn:enhancement-be6bfd1d\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/javascript\">JavaScript<\/span>. First of all, Wasm binary is <b>smaller<\/b> and easier to parse than <span id=\"urn:enhancement-7a8e3e01\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/javascript\">JS<\/span> code &#8211; even when minified. More importantly, Wasm is a compilation target for <b>statically typed<\/b> languages. <\/p>\n\n\n\n<p class=\"eplus-1M9Dww wp-block-paragraph\">That means that there is less overhead when accessing variables or evaluating expressions (there is no&nbsp; <i>OrdinaryGetOwnProperty <\/i>madness).<\/p>\n\n\n\n<p class=\"eplus-B99PO1 wp-block-paragraph\">However, none of these is the factor that makes WebAssembly so special. After all, on a purely technical level, Wasm binary is not very different from Java\u2019s bytecode or .NET Common Intermediate Language. <\/p>\n\n\n\n<p class=\"eplus-B99PO1 wp-block-paragraph\">But WebAssembly is an <b><span id=\"urn:enhancement-48ec9318\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/open_standard\">open standard<\/span><\/b> and is already implemented in all the major browsers. Consequently, you don\u2019t need a native plug-in to run Wasm code in your browser, no matter what platform, OS, or device you are using &#8211; that&#8217;s pretty unique.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">[jwp-video n=&#8221;2&#8243;]<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-c9023138 gb-headline-text\">WebAssembly Vs. JavaScript<\/h3>\n\n\n\n<p class=\"eplus-WfTrwu wp-block-paragraph\">We live in a world where <span id=\"urn:enhancement-89291b6c\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/javascript\">JavaScript<\/span> code is run absolutely everywhere. We have it in <b>browsers<\/b> and in the <b>back-end<\/b> with <i>Node.js<\/i>,&nbsp; in <b>desktop<\/b> apps (<i>Electron<\/i>) and even on <b>MCUs<\/b> (<i>low.js<\/i> anyone?).<\/p>\n\n\n\n<p class=\"eplus-YZLqpS wp-block-paragraph\"><span id=\"urn:enhancement-c2c05145\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/javascript\">JavaScript<\/span> has delivered to some extent on the promise &#8211; \u201c<i>write once, run anywhere<\/i>\u201d &#8211; that many have tried (and failed) to deliver in the past. Unfortunately the situation remains far from ideal, primarily because <span id=\"urn:enhancement-18a4b6c1\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/javascript\">its<\/span> programming was not designed with this goal in mind.<\/p>\n\n\n\n<p class=\"eplus-5dOWH3 wp-block-paragraph\">Several revisions of the <i>ECMAScript<\/i> standard have been released to improve the language and address its limitations. Furthermore, new and more expressive languages (yes <i><a href=\"https:\/\/www.codemotion.com\/magazine\/dev-hub\/web-developer\/why-should-you-care-to-learn-typescript\/\" class=\"ek-link\">TypeScript<\/a><\/i>, we hear you) have been released to add missing <span id=\"urn:enhancement-4cbef05f\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/feature_machine_learning\">features<\/span> while maintaining complete compatibility with existing runtime engines. <\/p>\n\n\n\n<p class=\"eplus-5dOWH3 wp-block-paragraph\">All of this has led to the fragmented ecosystem we all have to struggle with everyday, making the <span id=\"urn:enhancement-f8dacce\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/economic_development\">development<\/span> of large projects very challenging.<\/p>\n\n\n\n<p class=\"eplus-i42EHw wp-block-paragraph\">On top of that, <span id=\"urn:enhancement-dfcd3322\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/javascript\">JavaScript<\/span> is slow. Even with heavily optimized runtimes <span id=\"urn:enhancement-eba798c8\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/javascript\">JS<\/span> code is always slower than native code (yes, <i>V8<\/i>, I\u2019m talking about you and your speculative optimization). If this comes as a surprise to you, I suggest you download the <em>ECMAScript specification<\/em> and count how many steps are required to perform just an <em>OrdinaryGetOwnProperty<\/em>!<\/p>\n\n\n\n<p class=\"eplus-YZ5LdX wp-block-paragraph\">Therefore, when in need of<em> native performance<\/em>, developers have had to turn to<strong> native code<\/strong> (plug-ins, NPAPI, etc.), often with disastrous consequences in terms of security. This is where <strong>WebAssembly<\/strong> functions come to the rescue of our programming.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But in the end, JavaScript vs. WebAssembly is not a proper comparison. The former is a programming language that runs natively in the browser, while the former is a binary distribution format.<\/p>\n\n\n\n<h2 class=\"eplus-FhF3aY wp-block-heading\" id=\"h-writing-rust-targeting-webassembly\">Writing Rust targeting WebAssembly<\/h2>\n\n\n\n<p class=\"eplus-4i1EFt wp-block-paragraph\">There are many things to consider when choosing the technologies and languages to use for a project. To use WebAssembly we must use a language which can be compiled into Wasm. Transitioning from <span id=\"urn:enhancement-585bf85e\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/javascript\">JavaScript<\/span> to C or C++ can be challenging to say the least.<\/p>\n\n\n\n<p class=\"eplus-0mQiLI wp-block-paragraph\"><em>Golang <\/em>would be a better alternative in this case, as it is concise and easy to read. However, there is always a <span id=\"urn:enhancement-3fcdc5e7\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/trade-off\">trade-off<\/span> between performance and readability. Go\u2019s runtime offers a lot of <span id=\"urn:enhancement-a19737f\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/feature_machine_learning\">features<\/span>, but these come at the cost of the binary size:&nbsp; the smallest Wasm file compiled from Go is around 2 MB, while 10 MB is typical. That is huge compared to files compiled from C++ and Rust code, which are typically just a few KB.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">[jwp-video n=&#8221;3&#8243;]<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-rust\">What is Rust?<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/Rust_programming_language_logo-1024x1024.jpg\" alt=\"Rust coding language logo\" class=\"wp-image-15480\" width=\"256\" height=\"256\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/Rust_programming_language_logo-1024x1024.jpg 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/Rust_programming_language_logo-300x300.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/Rust_programming_language_logo-150x150.jpg 150w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/Rust_programming_language_logo-768x768.jpg 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/Rust_programming_language_logo-600x600.jpg 600w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/Rust_programming_language_logo.jpg 1200w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Rust is an open-source multi-paradigm programming language that focuses on speed, memory safety and parallelism. It eliminates many classes of bugs at compile-time and it is used in performance-critical services and embedded devices. Rust also integrates with other languages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Rust <\/strong>code is just as powerful as C++ when it comes to performance, but is safer, especially when dealing with memory management. Moreover, Rust\u2019s support for WebAssembly is mature and complete, offering tools and bindings to integrate it into existing JavaScript projects. <\/p>\n\n\n\n<h2 class=\"eplus-lawAOf wp-block-heading\" id=\"h-webassembly-tutorial-setup\">WebAssembly tutorial: setup<\/h2>\n\n\n\n<p class=\"eplus-1E75Fi wp-block-paragraph\">To begin programming with Rust and WebAssembly, one must obviously have the <b>Rust toolchain<\/b> installed. The best (and recommended) way to manage the Rust toolchain is via the <b>rustup<\/b> tool.<\/p>\n\n\n\n<p class=\"eplus-Um7Ii7 wp-block-paragraph\">Installing rustup is as easy as launching a Bash script (the rustup-init.sh script, in fact) with this one-line command:<\/p>\n\n\n<pre class=\"wp-block-code eplus-ms2hQW\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\"># curl https:\/\/sh.rustup.rs -sSf | sh<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"eplus-WiJMdb wp-block-paragraph\">If you are running Windows, luckily we live in the era of Nadella, and thus have plenty of options to get Bash up and running: the <b>Windows Subsystem for <span id=\"urn:enhancement-3d12c241\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/linux\">Linux<\/span><\/b>, <b>Git for Windows&#8217;<\/b> own Bash, or <b>Cygwin<\/b>, just to name a few. <\/p>\n\n\n\n<p class=\"eplus-WiJMdb wp-block-paragraph\">If you don\u2019t want to use Bash at all, there is an .exe version of rustup-init as well as standalone installers available for <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/forge.rust-lang.org\/infra\/other-installation-methods.html#standalone\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">download from the Rust code language project website<\/a>.<\/p>\n\n\n\n<p class=\"eplus-b0Tfg4 wp-block-paragraph\">The script will download and compile all the required tools including <b>rustc<\/b> (the Rust compiler) and <b>cargo<\/b> (Rust\u2019s package manager).<\/p>\n\n\n\n<p class=\"eplus-L9sB6K wp-block-paragraph\">The toolchain will be installed by default in <em>$HOME\/.cargo<\/em> so be sure to add the <em>$HOME\/.cargo\/bin<\/em> to your <em>PATH<\/em> environment variable, or simply run the command<\/p>\n\n\n<pre class=\"wp-block-code eplus-pVVpDM\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\"># source $HOME\/.cargo\/env<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"eplus-95Aah9 wp-block-paragraph\">when opening a new shell.<\/p>\n\n\n\n<p class=\"eplus-646OGD wp-block-paragraph\">Once the Rust toolchain is installed, we can proceed with installing <b>Wasm-pack<\/b>. Wasm-pack is an all in one tool to build, test and publish Rust-generated Wasm modules. To install it, simply type this command in your Bash prompt:<\/p>\n\n\n<pre class=\"wp-block-code eplus-v3tOkP\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\"># curl https:\/\/rustwasm.github.io\/wasm-pack\/installer\/init.sh -sSf | sh<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"eplus-33woov wp-block-paragraph\">Alternatively, you can again download the .exe file <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/rustwasm.github.io\/wasm-pack\/installer\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">from the official website<\/a> if you are on Windows.<br>Another useful tool to install is <code><strong>cargo-generate<\/strong><\/code>, which allows the creation of new projects based on existing templates. <\/p>\n\n\n\n<p class=\"eplus-33woov wp-block-paragraph\">Since the Rust toolchain is already installed, we can use Cargo it-self to download, compile and install cargo-generate, with this command:<\/p>\n\n\n<pre class=\"wp-block-code eplus-tFBiwm\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\"># cargo install cargo-generate<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"eplus-nz4kgD wp-block-paragraph\">If you do not already have them installed, we recommend installing git, node and npm &#8211; these may come in handy pretty soon.<\/p>\n\n\n\n<h3 class=\"eplus-a3zSYa wp-block-heading\" id=\"h-our-first-webassembly-module\">Our first WebAssembly module<\/h3>\n\n\n\n<p class=\"eplus-1cMS5A wp-block-paragraph\">Let\u2019s dive in and build our first Hello World project in Rust Wasm: a web page that shows an alert! <\/p>\n\n\n\n<p class=\"eplus-1cMS5A wp-block-paragraph\">First of all, we will create a new project using cargo generate, using a git repository as a template:<\/p>\n\n\n<pre class=\"wp-block-code eplus-4HLPOD\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\"># cargo generate --git https:\/\/github.com\/rustwasm\/wasm-pack-template<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"eplus-k4agzo wp-block-paragraph\">When prompted for the project\u2019s name, just type &#8216;hello&#8217;. The script will create the directory &#8216;hello&#8217; and populate it with the files shipped with the template:<\/p>\n\n\n\n<ul class=\"eplus-HCZtCV wp-block-list\"><li><em>Cargo.toml<\/em> \u2013 specifies dependencies and metadata for cargo (a sort of Rust equivalent of package.json);<\/li><li><em>src\/lib.rs<\/em> \u2013 contains the code of our Wasm module;<\/li><li><em>src\/utils.rs<\/em> \u2013 provides common utilities to debug Wasm code;<\/li><\/ul>\n\n\n\n<p class=\"eplus-q8qAw5 wp-block-paragraph\">Let\u2019s have a look at the <em>lib.rs<\/em> code in detail:<\/p>\n\n\n\n<script src=\"https:\/\/pastebin.com\/embed_js\/JRs5yBwm\"><\/script>\n\n\n\n<p class=\"eplus-X09F5a wp-block-paragraph\">We import the utils module, and then proceed using the <em>wasm_bindgen<\/em>, to provide interoperation between our Rust and <span id=\"urn:enhancement-acad8822\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/javascript\">JavaScript<\/span> codes.<\/p>\n\n\n\n<p class=\"eplus-xqZ9RM wp-block-paragraph\">In this simple example, <em>wasm_bindgen<\/em> is used to import the browser\u2019s <b><i>alert() <\/i><\/b>function, so our Rust code can call it and display the \u201cHello, hello!\u201d <span id=\"urn:enhancement-df8db833\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/message\">message<\/span> (the string created by cargo generate is \u201cHello, &lt;project_name&gt;!\u201d and our project is named \u201chello\u201d). Feel free to change this message according to your preferences.<\/p>\n\n\n\n<p class=\"eplus-P0eEa3 wp-block-paragraph\">At the same time we export the <b><i>greet() <\/i><\/b>function, so that the JavaScript code using our Wasm module can call it.<\/p>\n\n\n\n<p class=\"eplus-q8VzrZ wp-block-paragraph\">When targeting Wasm, the <em>wee_alloc<\/em> allocator is the preferred choice, as it was explicitly designed for smaller code size, although it can be a bit slower than other allocators.<\/p>\n\n\n\n<p class=\"eplus-XF7elE wp-block-paragraph\">Now that our code is ready, we can proceed with building the project. To do that we will use the <b>wasm-pack<\/b> utility, which performs some sanity checks (ensuring we have the correct Rust version), compiles our code to Wasm, downloads and compiles all dependencies, and finally invokes wasm-bindgen to generate the JavaScript API bindings. All that with just one command:<\/p>\n\n\n<pre class=\"wp-block-code eplus-NiFwKV\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\"># wasm-pack build<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"eplus-ibnBJN wp-block-paragraph\">Once finished, the compiled artifacts are available in the <em>pkg\/<\/em> directory. This directory should contain these files:<\/p>\n\n\n\n<ul class=\"eplus-NNs8uy wp-block-list\"><li><em>hello_bg.wasm<\/em> \u2013 our WebAssembly binary, which exports the greet() function;<\/li><li><em>hello.js<\/em> \u2013 JavaScript glue that implements the interoperation layer between JS and Wasm;<\/li><li><em>hello.d.ts<\/em> \u2013 TypeScript declarations for the JavaScript glue;<\/li><li><em>package.json<\/em> \u2013 the metadata about this generated WebAssembly package;<\/li><\/ul>\n\n\n\n<h3 class=\"eplus-uO3RIc wp-block-heading\" id=\"h-calling-webassembly-from-a-web-page\">Calling WebAssembly from a web page<\/h3>\n\n\n\n<p class=\"eplus-Fa4bKC wp-block-paragraph\">The Rust project offers an <i>npm init<\/i> template to generate a web application that will call our WebAssembly module. Simply type the command:<\/p>\n\n\n<pre class=\"wp-block-code eplus-xU4ArB\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\"># npm init wasm-app www<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"eplus-SFbhpf wp-block-paragraph\">This will generate the web app inside the <em>www\/<\/em> directory, including a <em>package.json<\/em> file, a configuration file for webpack, an empty <em>index.html<\/em> and an empty JavaScript entrypoint <em>index.js<\/em>.<\/p>\n\n\n\n<p class=\"eplus-eapjaI wp-block-paragraph\">To use our WebAssembly package here, we simply add it as a dependency in the <em>package.json<\/em> file, by adding the following line under the \u201c<i>devDependencies<\/i>\u201d node:<\/p>\n\n\n<pre class=\"wp-block-code eplus-ZzSNzQ\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-string\">\"hello\"<\/span>: <span class=\"hljs-string\">\"file:..\/pkg\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"eplus-A4MMAw wp-block-paragraph\">Then, install the dependencies with the well known command:<\/p>\n\n\n<pre class=\"wp-block-code eplus-Xnoevs\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\"># npm install<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"eplus-hDHfMc wp-block-paragraph\">Once the installation is finished, modify the <em>index.js<\/em> file to call our WebAssembly <i>greet()<\/i> function, with this code:<\/p>\n\n\n<pre class=\"wp-block-code eplus-peHv65\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> * <span class=\"hljs-keyword\">as<\/span> wasm <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"hello\"<\/span>; \nwasm.greet();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"eplus-1QokrM wp-block-paragraph\">This code imports our WebAssembly module using the JavaScript glue code in hello.js, and calls the <i>greet()&nbsp; <\/i>function.<\/p>\n\n\n\n<p class=\"eplus-8vNaZO wp-block-paragraph\">As we have Webpack and its local server installed, we can run the app with the command:<\/p>\n\n\n<pre class=\"wp-block-code eplus-5kDpnz\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\"># npm run start<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"eplus-cnCijI wp-block-paragraph\">Now point your browser to <em>http:\/\/localhost:8080\/<\/em> to be greeted with the message from our Rust code.<\/p>\n\n\n\n<p class=\"eplus-0o2lAF wp-block-paragraph\">Congratulations, you have created your first Rust\/WebAssembly project!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-he-future-of-webassembly\">What is he future of WebAssembly?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Google called WebAssembly the \u201cfuture of the web\u201d. That says enough. There are some undoubtful advantages to using Wasm. For starters, it can be executed at near-native speed across different platforms.This is possibile bacause it is statically typed, uses linear memory, and is stored in binary format. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, it runs in a safe sandboxed environmentit, is compatible with other web technologies and maintains backwards compatibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Google Maps and Google Earth use WebAssembly to seamlessly run their native binary code on the browser. JavaScript, HTML, and any server-side framework could not deliver the same amount od data at high speed. WebAssembly is faster than any possible web framework or language out there and that is what makes it a technology that is here to stay.<\/p>\n\n\n\n<h2 class=\"eplus-Q8I4fr wp-block-heading\" id=\"h-conclusions\">Conclusions<\/h2>\n\n\n\n<p class=\"eplus-XATo06 wp-block-paragraph\">There is plenty more to say about Rust and WebAssembly programming, considering best practice, optimization and interoperation between Rust and JavaScript (look up js-sys and web-sys).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to try WebAssembly without C or Rust, AssemblyScript will be the best option. If you want to learn more about Rust and WebAssembly, don\u2019t miss the talk <b>Diwanshi Pandey<\/b>, software engineer at <strong>Red Hat<\/strong>, gave at the <b><a href=\"https:\/\/talks.codemotion.com\/beyond-the-basics-get-started-with-web-a\" class=\"ek-link\">Codemotion Conference<\/a><\/b>. Diwanshi addressed more advanced topics and showed some really interesting demos. <\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>What is WebAssembly? WebAssembly was developed by Mozilla in 2015 while looking for a way to make JavaScript more efficient with heavy applications. If you have never heard about WebAssembly, check out the two videos in this article! [jwp-video n=&#8221;1&#8243;] WebAssembly, or Wasm for brevity, is essentially a portable binary code format designed to run&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/\">Read more<\/a><\/p>\n","protected":false},"author":31,"featured_media":16824,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":7,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[31],"tags":[22],"collections":[],"class_list":["post-986","post","type-post","status-publish","format-standard","has-post-thumbnail","category-web-developer","tag-codemotion-milan","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v28.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Getting Started with WebAssembly and Rust - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Learn how to build your first Hello World project in WebAssembly with fast and memory-safe Rust: a webpage showing an alert.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with WebAssembly and Rust\" \/>\n<meta property=\"og:description\" content=\"Learn how to build your first Hello World project in WebAssembly with fast and memory-safe Rust: a webpage showing an alert.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-08T10:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-23T14:13:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sergio Monteleone\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergio Monteleone\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/getting-started-with-webassembly-and-rust\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/getting-started-with-webassembly-and-rust\\\/\"},\"author\":{\"name\":\"Sergio Monteleone\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/1175f6a51ed61a57ce2bbe8f28682052\"},\"headline\":\"Getting Started with WebAssembly and Rust\",\"datePublished\":\"2021-07-08T10:55:00+00:00\",\"dateModified\":\"2021-12-23T14:13:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/getting-started-with-webassembly-and-rust\\\/\"},\"wordCount\":1808,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/getting-started-with-webassembly-and-rust\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/web-586177_960_720.jpg\",\"keywords\":[\"Codemotion Milan\"],\"articleSection\":[\"Web Developer\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/getting-started-with-webassembly-and-rust\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/getting-started-with-webassembly-and-rust\\\/\",\"name\":\"Getting Started with WebAssembly and Rust - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/getting-started-with-webassembly-and-rust\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/getting-started-with-webassembly-and-rust\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/web-586177_960_720.jpg\",\"datePublished\":\"2021-07-08T10:55:00+00:00\",\"dateModified\":\"2021-12-23T14:13:21+00:00\",\"description\":\"Learn how to build your first Hello World project in WebAssembly with fast and memory-safe Rust: a webpage showing an alert.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/getting-started-with-webassembly-and-rust\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/getting-started-with-webassembly-and-rust\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/getting-started-with-webassembly-and-rust\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/web-586177_960_720.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/web-586177_960_720.jpg\",\"width\":960,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/getting-started-with-webassembly-and-rust\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Developer\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Getting Started with WebAssembly and Rust\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/1175f6a51ed61a57ce2bbe8f28682052\",\"name\":\"Sergio Monteleone\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/01ed53edef772160c6afbbad5e36940f0cd612cbcf1a6dc3178588bd2b44708c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/01ed53edef772160c6afbbad5e36940f0cd612cbcf1a6dc3178588bd2b44708c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/01ed53edef772160c6afbbad5e36940f0cd612cbcf1a6dc3178588bd2b44708c?s=96&d=mm&r=g\",\"caption\":\"Sergio Monteleone\"},\"description\":\"Software developer and the co-founder of Moga Software s.r.l., a software house based in Italy. I tend to write code for anything that has a C\\\/C++ compiler, but don't mind using other technologies and languages. I love cats, dogs and, more in general, any lifeform when Lifeform.numLegs() &lt;= 4.\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/sergio-monteleone\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Getting Started with WebAssembly and Rust - Codemotion Magazine","description":"Learn how to build your first Hello World project in WebAssembly with fast and memory-safe Rust: a webpage showing an alert.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started with WebAssembly and Rust","og_description":"Learn how to build your first Hello World project in WebAssembly with fast and memory-safe Rust: a webpage showing an alert.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2021-07-08T10:55:00+00:00","article_modified_time":"2021-12-23T14:13:21+00:00","og_image":[{"width":960,"height":720,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720.jpg","type":"image\/jpeg"}],"author":"Sergio Monteleone","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Sergio Monteleone","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/"},"author":{"name":"Sergio Monteleone","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1175f6a51ed61a57ce2bbe8f28682052"},"headline":"Getting Started with WebAssembly and Rust","datePublished":"2021-07-08T10:55:00+00:00","dateModified":"2021-12-23T14:13:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/"},"wordCount":1808,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720.jpg","keywords":["Codemotion Milan"],"articleSection":["Web Developer"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/","name":"Getting Started with WebAssembly and Rust - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720.jpg","datePublished":"2021-07-08T10:55:00+00:00","dateModified":"2021-12-23T14:13:21+00:00","description":"Learn how to build your first Hello World project in WebAssembly with fast and memory-safe Rust: a webpage showing an alert.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720.jpg","width":960,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/getting-started-with-webassembly-and-rust\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Web Developer","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/"},{"@type":"ListItem","position":4,"name":"Getting Started with WebAssembly and Rust"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1175f6a51ed61a57ce2bbe8f28682052","name":"Sergio Monteleone","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/01ed53edef772160c6afbbad5e36940f0cd612cbcf1a6dc3178588bd2b44708c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/01ed53edef772160c6afbbad5e36940f0cd612cbcf1a6dc3178588bd2b44708c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/01ed53edef772160c6afbbad5e36940f0cd612cbcf1a6dc3178588bd2b44708c?s=96&d=mm&r=g","caption":"Sergio Monteleone"},"description":"Software developer and the co-founder of Moga Software s.r.l., a software house based in Italy. I tend to write code for anything that has a C\/C++ compiler, but don't mind using other technologies and languages. I love cats, dogs and, more in general, any lifeform when Lifeform.numLegs() &lt;= 4.","url":"https:\/\/www.codemotion.com\/magazine\/author\/sergio-monteleone\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720-600x600.jpg","author_info":{"display_name":"Sergio Monteleone","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/sergio-monteleone\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720.jpg",960,720,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720-300x225.jpg",300,225,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720-768x576.jpg",768,576,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720.jpg",960,720,false],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720.jpg",960,720,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720.jpg",960,720,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720.jpg",100,75,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/07\/web-586177_960_720-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Sergio Monteleone","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/sergio-monteleone\/"},"uagb_comment_info":1,"uagb_excerpt":"What is WebAssembly? WebAssembly was developed by Mozilla in 2015 while looking for a way to make JavaScript more efficient with heavy applications. If you have never heard about WebAssembly, check out the two videos in this article! [jwp-video n=&#8221;1&#8243;] WebAssembly, or Wasm for brevity, is essentially a portable binary code format designed to run&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/986","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=986"}],"version-history":[{"count":17,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/986\/revisions"}],"predecessor-version":[{"id":16823,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/986\/revisions\/16823"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/16824"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=986"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}