Dev

5 min read

August 18, 2022

Learn the basic ideas behind WebAssembly, its pros and cons, and find out how it can help you with software development.

It helped them to develop web and mobile apps and even add some interactive features to them. Over the last few years, the programming landscape has changed a bit though, and a new option has emerged: WebAssembly.

What Is WebAssembly?

WebAssembly (or Wasm for short) is a new type of language that can be run in most modern browsers. It is a low-level language that runs at a speed similar to the majority of native solutions, even though it compiles different non-web languages (and also JavaScript) and transforms them into browser-friendly code.

WebAssembly was first announced in 2015 and released later on, in March 2017. It has become a World Wide Web Consortium recommendation on December 5th, 2019, and ultimately received the Programming Languages Software Award from ACM SIGPLAN in 2021.  

How Does WebAssembly Work?

WebAssembly’s base goal is to allow the compilation of code written in many different languages, ​​such as C / C ++, Rust, Ruby, Python, etc. into a target code that can be used by the browsers and in the broader spectrum – in the web. At the same time, it conveniently allows the use of JavaScript in it as well. Developers don’t write WebAssembly code directly. They write in the language of their choice, which is then compiled into WebAssembly bytecode. The bytecode is then run on the client – usually, a web browser – where it’s translated into native code and executed at high speed. The standardized code that WebAssembly provides (thanks to its format) permits the developers to bring the performance of some native, yet not browser-friendly languages to the web development area. This technology is commonly used to perform even complex operations in the browser, bringing great performance to web applications and, at the same time, allowing developers to build high-speed web apps in the language of their choice. How neat is that?

How To Compile The Language Of Your Choice Into WebAssembly?

While working with WebAssembly, you just have to write code in a high-level language (picked by you from many that WebAssembly supports) and turn it into WebAssembly bytecode. This is quite simple and can be done in any of three ways:

Direct compilation

Your source code is translated into WebAssembly through the language’s own compiler toolchain. Rust, C/C++, Kotlin/Native, and D now all have native ways to emit WebAssembly from compilers that support those languages.

Third-party tools

If your chosen language doesn’t have native WebAssembly support in its toolchain, you still can use a third-party tool to convert your code to WebAssembly. Java, Lua, and the .Net language family – all of them have support tools like this.

WebAssembly-based interpreter

In this case, the language itself is not translated into WebAssembly. Instead, a digital interpreter written in WebAssembly runs code written in the language of your choice. This is the most inconvenient approach, since the interpreter may be several megabytes of code, but it allows existing code written in the chosen language to run unchanged. Python and Ruby – both have interpreters translated to WebAssembly.

Why Is WebAssembly So Great?

The beauty of WebAssembly is that it’s simple and can work basically from anywhere. There’s no need for any download, no installation. In just one click you can compile your code. It’s safer than downloading and running a program directly on your computer because browsers have established security measures (such as sandboxing techniques) to protect you. Sandboxing means that the browser isolates third-party programs, preventing malicious or malfunctioning software from damaging or snooping on the rest of your computer. That keeps the running code from messing with your system. Also sharing your work is simple with WebAssembly. You can just easily generate  links, which are simply clickable strings of code that you can put anywhere.

For now, we can confidently say that WebAssembly is one of the few realistically universal platforms that can help you make your application accessible on any device. It also allows you to maintain a single code base, which provides simpler updates and makes sure that every user can properly access your application.

WebAssembly’s Pros And Cons

As we’ve previously mentioned, WebAssembly is an innovative smart language to help you with your coding. Yet, it is still quite new and contantly developing. Let's take a quick look at the pros and cons of WebAssembly to better understand what it can offer.

Advantages

What makes WebAssembly so helpful and such a good fit for the web:

1. speed
WebAssembly was designed to reach high-speed performance. Because of the size of its binaries, they work faster and are faster to download. They are also faster to decode and execute. This is especially important if you have to work on slow networks.

2. portability
One of the main goals of designing WebAssembly was its portability. To run any application on a device, it has to be compatible with the device’s processor architecture and operating system. That means compiling source code every time, depending on all possible combinations of operating systems and processors in the architecture that you want to support. With WebAssembly you need just one extra step and your app will run in almost every modern browser. The outcome is nearly native code with no installations, local security concerns, or used disk space.

3. flexibility
WebAssembly gives you a great sense of freedom. It compiles a growing number of coding languages into machine code. You can use and execute it, even if you don't know how to write WebAssembly code. It will allow flexible communication between the bytecode program and the language of your choice, compiling and supporting it. All of that while working on any browser, OS, and type of device that can use the same web APIs accessed by JavaScript.

4. security
WebAssembly is being used  inside the browsers most of the time. This improves security because it isolates modules and gives them permissions only for certain parts of the file system (or other resources). Different modules are isolated from each other and limited in ways for possible  contact with any malicious code.

5. easy debugging
WebAssembly binary files make debugging way easier than in many other languages.

Disadvantages

So what issues can appear while using the WebAssembly?

Obviously, no matter how many pros we’ll mention, the truth is that WebAssembly still has its limitations. New features are being actively developed and the technology is constantly evolving, so it has to take its toll on some of the functionalities.  

1. No garbage collection

WebAssembly supports a flat linear memory, which requires some understanding of how to explicitly allocate memory to execute code. C and C++ are logical choices because in these cases, memory management is built-in within the language. The reason why some of the most popular high-level languages such as Java weren't included initially is due to something called garbage collection (GC). It’s a form of automated memory management where the memory occupied by objects no longer in use by the program is reclaimed automatically. It’s meant to make the platform operate as efficiently as possible, but at the same time to limit the amount of control the driver has. Manually allocating memory means greater control. Languages with garbage collection functions allow you to program without worrying about memory availability or allocation. JavaScript is a great example of such a language. The browser engine runs a mark-and-sweep algorithm to collect unused objects and free up memory. This limitation, however, can soon disappear since the support for GC languages is currently being worked on in WebAssembly.

2. No direct DOM access

WebAssembly is unable to access the DOM (Document Object Model), so any DOM manipulation needs to be done from the outside via JavaScript or using a tool such as Emscripten. As far as we know, there are plans to add the ability to reference DOM and other Web API objects directly, but that's still in the proposal phase.  

3. No support in older browsers

This disadvantage is actually changing quite dynamically, since more and more browsers are being added to the list of those supported by WebAssembly. Nevertheless, some older browsers still don't have the availability to load the WebAssembly modules. However, this is a significant inconvenience since WebAssembly supports all major browsers. It’s currently supported by 74.93% of all global users and as many as 82.92% of desktop users. If you’re looking for the list of currently supported browsers, you will find it here: https://caniuse.com/#feat=wasm.

Availability in the browser and in the cloud

WebAssembly works perfectly fine inside most types of browsers. In this case, it is the browser that handles its access to operating system features. But you can also run WebAssembly outside the browser: on the server or on an IoT (Internet of Things) device, for example. Then some of the issues will work similarly to the cloud-native tools, such as handling the concept of a file system (which you will need for saving your code, configuration, and shared data) on services that have no file system. Giving your code full access to the operating system is not only hazardous and leaves you vulnerable to being hacked, but also ties the code to one specific operating system, expulsing the liberty that WebAssembly otherwise provides you.

Areas That Can Benefit Most Through WebAssembly

WebAssembly has been designed with the numerous situations when we run high-performance browser-based apps and programs, such as games, music and video streaming platforms, video editing programs, CAD, encryption and image recognition, 3D rendering, and music production, just to name a few, in mind. These applications do a lot of calculations and require the best performance. This kind of effect can be hard to get from JavaScript. With time, the list of the things that you can do directly from the browser is expanding.  

New APIs introduced things like interactive graphics, video streaming, offline browsing, etc. In turn, more and more applications previously known to be native-only started coming out to the web. Today you can easily edit documents and render images from a browser, but there are still some areas where JavaScript will struggle. Video games are especially challenging because there you have to coordinate not only audio and video, but also physics or artificial intelligence. Being able to reach it on the web efficiently would open the doors to bringing many other applications to the web and that’s what WebAssembly is aiming to do.

WebAssembly Working Group

Moreover, WebAssembly technology is developed as a web standard by the W3C WebAssembly Working Group. This is a huge and open collaborative effort of people from many tech brands worldwide. It joins the players from the whole tech industry and even wider, to combine the performance and security of an assembly-like language with the easiness of high-level native languages. The Bytecode Alliance created to reach that goal and set WebAssembly standards, already counts with an active participation of technology leaders such as Google, Fastly, Intel, Meta, Agora, Microsoft, and many others.

We hope that this portion of knowledge at least has sharpened your appetite for more. In case you want to learn more about WebAssembly or you just have some questions that need answering – please do not hesitate to contact us by clicking the link below.

Are you considering building custom software applications?

Do you want to work with a partner that will deliver cost-effectively and on time? Contact Score Digital to find out more about our values and development process.

Created by

Karol Ludwikowski

FULL-STACK SOFTWARE ENGINEER

Read more

Dev
10 min read
September 4, 2023

Can you build a web app in Flutter?

Explore the potential of Flutter for web development: its journey from mobile to web, key benefits, challenges, and how it stands against React and Angular. Discover if Flutter's cross-platform capabilities align with your project needs.

Dev
8 min read
May 29, 2023

React Native Mobile App Development: Pros & Cons

Understand the advantages and disadvantages of using React Native for your mobile app development project. Get insights into how this powerful framework can expedite the development process, reduce costs, improve app quality, and more.

Dev
6 min read
May 22, 2023

Advantages of Node.js for Your Next App

Explore why Node.js is rapidly becoming developers' top choice for app development. Discover its versatility with non-relational databases, an ever-growing developer community, expansive tooling, asynchronous programming prowess, handy pre-built NPM packages, and the ease of using JavaScript for full-stack development.

Dev
10 min read
September 4, 2023

Can you build a web app in Flutter?

Explore the potential of Flutter for web development: its journey from mobile to web, key benefits, challenges, and how it stands against React and Angular. Discover if Flutter's cross-platform capabilities align with your project needs.

Dev
8 min read
May 29, 2023

React Native Mobile App Development: Pros & Cons

Understand the advantages and disadvantages of using React Native for your mobile app development project. Get insights into how this powerful framework can expedite the development process, reduce costs, improve app quality, and more.

Dev
6 min read
May 22, 2023

Advantages of Node.js for Your Next App

Explore why Node.js is rapidly becoming developers' top choice for app development. Discover its versatility with non-relational databases, an ever-growing developer community, expansive tooling, asynchronous programming prowess, handy pre-built NPM packages, and the ease of using JavaScript for full-stack development.

Dev
9 min read
May 15, 2023

Why Node.js Is the Best for Creating Functions in the Cloud?

Discover why Node.js is the ultimate choice for creating cloud functions and leveraging the benefits of serverless computing. Learn about the cost-effectiveness, scalability, and simplified development offered by Node.js in building serverless applications on AWS Lambda, Azure Functions, and Google Cloud Functions. Unleash the potential of serverless computing with Score Digital.