DEV Community

Cover image for WebAssembly & Low-Code: Build High-Performance Apps In-Browser
Dom | Five.Co
Dom | Five.Co

Posted on


WebAssembly & Low-Code: Build High-Performance Apps In-Browser

WebAssembly is a new type of code that can be run inside modern web browsers. Together with low-code, it has the potential to transform how software developers build applications for the web.

The JavaScript Dominance

According to an article on Medium, as of 2019, there were over 1.6 billion websites in the world. And JavaScript is the dominant programming language, used by 95% of them. This is not a big surprise. After all, JavaScript is the only programming language that is intrinsically supported by all browsers. Or is it?

Thanks to WebAssembly this has changed.

What Is WebAssembly?

The World Wide Web Consortium (W3C) designed and develops WebAssembly. It was first announced back in 2015 and the first demonstration took place two years later, in 2017.

Some people think that WebAssembly or Wasm is a new programming language. But that’s not entirely true. It is a type of code, but not one that is intended to be handwritten by programmers. Instead, WebAssembly is a compilation target for commonly used programming languages, such as Python, C, C++, or Rust. By serving as a compilation target, these languages can then be run inside a browser, breaking up JavaScript's dominance on the web. This also helps overcome JavaScript's performance issues by making programming languages that were traditionally used to create large-scale, mission-critical enterprise systems, such as C++, accessible in a browser.

How Does It Work?

WebAssembly takes the source code written in another language and makes it compatible for use inside a web browser. The process looks like this:

  1. Source code (e.g., Python, C++, or Rust): You have an application written in a compatible language that you want to execute in the browser.
  2. WebAssembly bytecode: You choose WebAssembly bytecode as your compilation target. As a result, you get a .wasm file.
  3. Machine code (opcode): The browser loads the .wasm file and compiles it to the corresponding machine code of its host system.

If you would like to find out how to build your first application with Wasm, we recommend the OpenSource.Com article on "How to write 'Hello World' in WebAssembly". For a more detailed explanation of how the compilation process works, check out this excellent podcast episode on Software Engineering Daily.

I Think I Get It. But Can You Give Some Examples?

If all of this sounds too abstract, don't worry! Chances are high that you are already using a web application that is powered by WebAssembly.

Two great examples are Figma, the popular online design application for creating sophisticated mock-ups, and Google Earth, Google's 3D mapping service.

Figma and Google Earth are two examples of successful web applications using WebAssembly

In a blog post from 2017, Figma's CTO wrote:

"Because apps compiled to WebAssembly can run as fast as native apps, it has the potential to change the way software is written on the web." - Evan Wallace, CTO of Figma

He then goes on to explain that Figma is written in C++, which is one of the languages that can be compiled into WebAssembly code. By doing so, Figma was able to speed up its load time by 3x, achieving near-native performance.

Google Earth, on the other hand, used to be a Chrome-only application. Up until 2019, Google Earth could not be accessed from any other browser, because it was using Native Client (NaCl), a Chrome-only solution. The engineering team behind Google Earth then adopted WebAssembly. Because all browsers support WebAssembly, its adoption ensured that Google Earth could be accessed by anyone, regardless of which browser they were using.

In both cases WebAssembly was the right solution for a complex engineering (and business) problem: how do you bring large applications to the web, without sacrificing performance or having to re-write the entire application from scratch? Figma and Google Earth are two great examples of the types of use cases that WebAssembly is designed for.

WebAssembly & Low-Code

How does all of this relate to low-code software development? Both are potentially transformative technologies.

WebAssembly has the potential to transform the future of web development and to broaden the types of applications built for the web. Low-code, on the other hand, has the potential to transform how developers build software by accelerating the delivery of custom web applications up to 10x, according to IT consultancy Forrester. It is a new way to rapidly develop & deploy custom web applications.

At Five, we are building a language-independent, in-browser development environment that supports Wasm. In the future, software developers will be able to write code not just in JavaScript or TypeScript, but in almost any language right inside of Five. This code is then compiled to Wasm and can be used to develop & deploy device-independent web applications. Inside Five, we're combining the power of WebAssembly with low-code in one platform.

Curious to give this a try? Sign up for a free download of our development environment through our website!

TL; DR: WebAssembly & Low-Code

WebAssembly (or Wasm) is a compilation target for many popular programming languages, such as Python, Go, C#, C, Rust, and C++. All major browsers (Firefox, Chrome, Safari, and Edge) support Wasm. Two popular applications using Wasm are Figma and Google Earth.

By compiling code to Wasm, developers can build and run high-performance web applications in almost any programming language. Five, a low-code development environment, combines the two big trends in web development, Wasm and low-code development, by letting software engineers use full-code almost anywhere inside the Five integrated development environment (IDE).

Top comments (0)

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another “Coder”. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.