codete webassembly is it the future of the web platform main d7e1e342a5
Codete Blog

WebAssembly – Is It the Future of the Web Platform?

codete logo 41a83d4d26

28/06/2022 |

6 min read

Codete Team

The problems with JavaScript are well-known, and developers can basically do two things about them: remove these issues from the language or avoid them entirely.

The ECMAScript standards committee will never break JavaScript, so devs are forced to use alternative languages that compile to JavaScript. Picking one shouldn't be hard as there are many such languages available today. But then you need to consider another issue that lies at the heart of the web: computational performance. 

Luckily, WebAssembly (WASM) is here to help. 

It's a low-level virtual machine designed for native speed, allowing developers to create native applications on the web platform. Here's why WASM is gaining traction on the market and powers teams in building web apps.

 

Table of contents:

  1. What is WebAssembly?
  2. Benefits of WebAssembly
  3. What will WebAssembly be used for?
  4. The current state of WebAssembly
  5. How to import WebAssembly
  6. Wrap up

What is WebAssembly?

WebAssembly is a binary instruction format designed to improve certain aspects of JavaScript, allowing developers to import their performance-critical code as a standard JavaScript module. 

The WebAssembly code defines an Abstract Syntax Tree represented in a binary format. Developers can author and debug it in a text format, so it's readable. Browsers will understand the binary format, which means that you can compile binary bundles that are smaller than the text JavaScript in use today. And smaller payloads mean faster delivery. 

The advantages of WebAssembly modules listed above only scratch the surface. Here are more benefits of this technology.

Benefits of WebAssembly

  • WebAssembly performance is fast and efficient because it executes at close to native execution speed by taking advantage of common hardware capabilities available on a wide range of platforms. This clearly matches the market demand for high-performance applications.
  • Another interset perk of using WebAssembly is that it was designed to serve as a compile target for languages like C/C++ and Rust. With WebAssembly, you only need to take one compilation step and your application will smoothly run in every modern browser.
  • It's also safe – WebAssembly is a memory-safe, sandboxed execution environment that you can implement inside existing JavaScript virtual machines. This functionality will enforce the same-origin and permissions security policies of the browser.
  • Additionally, WebAssembly is open and debuggable. Like JavaScript, a WebAssembly module can be 'view source’-ed and read in its original textual form. With more recent browsers, including Chrome 64+ and Firefox 57+, developers can debug WASM code directly from your browser debugger tool. As time goes on and development continues, these tools will increase in power.
  • Finally, WebAssembly maintains the versionless, backward-compatible nature of the web. For example, it can call into and out of the JavaScript context, so it has access to the same functionality as JavaScript.

What does it all mean for JavaScript?

Writing directly in assembly language is tricky, so why would developers start doing it? If we wanted to make JavaScript easier, it would become more complex than it is today. Instead, we get WebAssembly which gives developers access to low-level building blocks developers can use to construct anything they like.

So, how is WebAssembly different from JavaScript? It works on a low level, defining primitives such as a range of types and operations on those types, control flow, calls, etc. Very simple stuff. 

What will WebAssembly be used for?

WebAssembly will make it easy to write things like threads and SIMD (Single Instruction, Multiple Data) in your code. This means parallel processing for video streams working with games, virtual reality, and augmented reality. 

If you have your finger on the pulse, you have probably already heard of doing this in JavaScript. However, doing this low-level coding using JavaScript's existing type system is tricky. In such cases, developers will probably want to forget about the object system, the garbage collector, and all the fancy dynamic stuff they get. Instead, they will line up some raw bits in little rows and crunch through them as fast as possible.

Games (Doom 3), VR, and AR are obvious uses of WebAssembly right now. Interestingly, most of the current WebAssembly demos use either Unity or Unreal Engine, both of which already support compiling to asm.js. It also allowed importing desktop applications to the web (examples include Autocad and Figma).

The current state of WebAssembly

The best way to understand how WebAssembly is being used today is by looking at surveys such as State of WebAssembly 2021. ​​

For which other languages are developers using for WASM modules? Rust, C++, and AssemblyScript hold the throne. Rust is an incredibly popular language – it achieved the status of “most loved” language in StackOverflow's developer survey for several years running. It's also a good fit for WebAssembly since it doesn't require garbage collection, generates lightweight binaries, and has strong tooling and community.

What about C++? It was actually the first language to provide support for WebAssembly and a popular pick among game developers. 

It's likely that WebAssembly will gain more traction among web developers soon. Web development is already the first application of WebAssembly: 

webassembly usage 308ec742d7
Source: State of WebAssembly 2021

It would be great to learn more about this and see how exactly developers are using it on the web. Especially since most respondents to the survey believe WebAssembly will have the most impact on web development in the future (69%).

WebAssembly is also becoming more popular in the blockchain community. You can even find it on the Ethereum 2.0 roadmap. 

How to import WebAssembly

The easiest way to import WebAssembly to JavaScript is using Fetch, an API for fetching network resources.

The best way to go here is using the new WebAssembly.instantiateStreaming() method that can take a fetch() call as the first argument, and then handle fetching, compiling, and instantiating the module in a single step. It accesses the raw byte code as it streams from the server as so:

WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)

.then(results => {

  // Do something with the results!

});

[code example from Mozilla's WebAssembly.instantiateStreaming() under Creative Commons license]

Once you have the WebAssembly instance available in JavaScript, you can start using features that have been exported via the WebAssembly.Instance.exports property. 

Wrap up

WebAssembly has already proven its value outside of the web development world. As more and more developers get interested in this technology, WebAssembly is bound to become more popular among JavaScript coders. Thanks to WebAssembly, developers can solve the biggest problems haunting JavaScript and build the exact features they need. 

Are you planning to use WebAssembly in your web development project? Share your thoughts in the comments section. We look forward to hearing from teams that have used WebAssembly successfully in their web development projects.

And if you're a company looking for a cross-functional software development team to deliver your next product – don't hesitate to contact us

Rated: 5.0 / 3 opinions
codete logo 41a83d4d26

Codete Team

Codete is an IT consulting and software development company. Since 2010, we’ve been supporting businesses worldwide in gaining competitive advantage by means of modern technology. We advise on digitalization, develop and implement high-quality solutions, and augment our clients’ teams with skilled software developers.

Our mission is to accelerate your growth through technology

Contact us

Codete Global
Spółka z ograniczoną odpowiedzialnością

Na Zjeździe 11
30-527 Kraków

NIP (VAT-ID): PL6762460401
REGON: 122745429
KRS: 0000983688

Get in Touch
  • icon facebook
  • icon linkedin
  • icon instagram
  • icon youtube
Offices
  • Kraków

    Na Zjeździe 11
    30-527 Kraków
    Poland

  • Lublin

    Wojciechowska 7E
    20-704 Lublin
    Poland

  • Berlin

    Bouchéstraße 12
    12435 Berlin
    Germany