{"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><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>[jwp-video n=&#8221;1&#8243;]<\/p>\n\n\n\n<p class=\"eplus-AX0mws\">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\">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\">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\">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\">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\">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>[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\">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\"><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\">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\">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\">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\">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>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\">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\"><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>[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>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><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\">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\">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\">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\">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\">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\">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\">when opening a new shell.<\/p>\n\n\n\n<p class=\"eplus-646OGD\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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\">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>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>Also, it runs in a safe sandboxed environmentit, is compatible with other web technologies and maintains backwards compatibility.<\/p>\n\n\n\n<p>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\">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>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":{"0":"post-986","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-developer","8":"tag-codemotion-milan","9":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - 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}]}}