<h6>Topic</h6>
<h5>What is WebAssembly?</h5>
<p>WebAssembly (abbreviated <em>Wasm</em>) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.</p>
<p>Alongside HTML, CSS and Javascript, it is the fourth language to run natively in browsers and supports the 4 major browser engines &ndash; Firefox, Chrome, Safari and Edge.</p>
<p>WebAssembly allows you to run code at native speed that is able to work with the JavaScript context and access browser functionality through the same Web APIs accessible from JavaScript. It basically allows you to run your code in native speed inside a browser.<br />You can learn more in-depth information about WebAssembly here:</p>
<p><iframe title="YouTube video player" src="https://www.youtube.com/embed/njt-Qzw0mVY" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<h4>Which languages can I use it with?</h4>
<p>As mentioned above, it runs alongside Javascript. The code itself, however, is written in C, C++ or Rust.</p>
<h4>Creating a Hello World in WebAssembly</h4>
<h5>Setting up</h5>
<p>If you&rsquo;ve never used Rust before, you need to install the standart Rust tool chain.You can find it here (<a href="https://www.rust-lang.org/tools/install" target="_blank" rel="noopener">https://www.rust-lang.org/tools/install</a>).</p>
<p>After you&rsquo;ve installed the Rust tool chain, you need to install the wasm-pack (<a href="https://rustwasm.github.io/wasm-pack/installer/" target="_blank" rel="noopener">https://rustwasm.github.io/wasm-pack/installer/</a>) and <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">cargo-generate</code> which lets you make a Rust project quickly by using a pre-existing git repository as a template.</p>
<p>Install <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">cargo-generate</code> with this command:</p>
<p><code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">cargo install cargo-generate</code></p>
<h5>Creating the Project</h5>
<p>First, we need to clone a project template with this command:</p>
<p><code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">cargo generate --git https://github.com/rustwasm/wasm-pack-template</code></p>
<p>Now let&rsquo;s have a look at some of the files.<br />The main file we&rsquo;ll be using is <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">src/lib.rs</code>. It is the root file that is going to be compiled into webassembly. It uses wasm-bindgen to connect with JavaScript. It imports the <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">window.alert</code> JavaScript function and exports the <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">greet</code> Rust function, which alerts a greeting message</p>
<p>Now, we need to compile our application to webassembly to be able to use it in our project. We do that by running &nbsp;<code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">wasm-pack build</code></p>
<h4>Using WebAssembly with React</h4>
<p>first, we start with creating a react app.</p>
<p><code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">npx create-react-app webassembly-react</code></p>
<p>Out of the box, create-react-app will not support WebAssembly. We have to make some changes to the underlying webpack config that powers the app. Unfortunately, create-react-app doesn&rsquo;t expose the webpack config file. So, we&rsquo;ll need to pull in some dev dependencies to help us out. <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">react-app-rewired</code> is going to allow us to modify the webpack without ejecting, and <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">wasm-load</code> will help webpack handle WebAssembly.</p>
<p><code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">yarn add react-app-rewired wasm-loader --dev</code></p>
<p>Once this is done, you should have a fully functioning app, now we can make some tweaks to our webpack.</p>
<p>We need to add a <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">config-overrides.js</code> file to the root of our app. This file will allow us to make changes to our webpack file without rewriting it.</p>
<p>At this point, if you run <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">yarn start</code>, you will not be using the webpack config changes, since we need to modify the package scripts. We need to make some changes to <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">package.json</code> in order to take advantage of the changes we just made.&nbsp;</p>
<p>Put this in your <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">config.json</code>:</p>
<p>If you&rsquo;ve done everything correctly, you should be able to run <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">yarn start</code> and the app should load.</p>
<h5>Importing a WebAssembly module into the app</h5>
<p>Now that we have set up our React app and built the webassembly file, we need to import it. We need to do that asynchronously.</p>
<p>Once that is done, we can access webassembly in our app through state. Note that you need to <code style="color: #e83e8c; font-size: 87.5%; word-break: break-word;">await</code> the module each time you call a function.</p>
<h4>WebAssembly vs JavaScript &ndash; just how faster is it?</h4>
<p>The most obvious reason for using WebAssembly in your JavaScript app is for making it faster. But is that really happening? Well it depends on your use case. If the processes you&rsquo;re running in WebAssembly aren&rsquo;t really that time intensive, it&rsquo;s going to have the opposite result! It&rsquo;s caused by WebAssembly having to be loaded into the app. That takes some time, and JavaScript usually manages to complete the process way earlier than WebAssembly gets imported. I have created an example for this. (You can find the repo here <a href="https://github.com/Koala42/webassembly-react" target="_blank" rel="noopener">https://github.com/Koala42/webassembly-react</a>)</p>
<p><iframe style="border: 0;" src="https://wasm.koala42.com" width="100%" height="600px"></iframe></p>
<p>In this app, I&rsquo;ve created two simple functions. One functions calculates the factorial of 200 and the other one calculates the factorials of the first 40 numbers in the Fibonacci sequence. You can try pressing the buttons for yourself, a graph is going to show you the time it took for the process to complete.</p>
<p>We can see that calculating the factorial of 200 was actually way faster done in JavaScript. How is that possible? Loading the wasm module takes some time. And if the function itself is not time heavy enough, JavaScript is going to get it done way faster than the wasm even gets loaded.<br />The second fucntion is obviously a bit more complex than the first one. For this one, it&rsquo;s actually worth using WebAssembly. While computing the factorials of the first 30 numbers in the fibonacci sequence takes JavaScript about 500 milliseconds, WebAssembly is done in less than a millisecond, which is a massive difference.</p>
<h4>Summary</h4>
<p>Using WebAssembly in your web application is really useful if you need to make CPU-heavy or time heavy calculations fast. Getting it up and running is quite tedious and hard, since the language is pretty new and there haven&rsquo;t yet been created any libraries or templates that make this process easier.</p>
<p>&nbsp;</p>

Máte v hlavě nápad na projekt?

Přečtěte si náš blog

Praha

Zlín

Zeptejte se Honzy

Jan Jelínek

Stále rosteme,

HOME

PROČ K42

SLUŽBY

NAŠE PRÁCE

BLOG

KARIÉRA

KONTAKT

Máte v hlavě nápad na další projekt? Pojďme ho probrat.

Konzultace zdarma

Mobilní aplikace

Data a informace vždy s sebou.

Webové aplikace

Otevře je každý, kdo má připojení k internetu. Kdekoli, na čemkoli.

UX design

Jednoduché, intuitivní, funkční a konzistentní.

ERP systémy

Nejefektivnější práce s procesy a daty.

Také se věnujeme