WebAssembly & Low-Code: Build High-Performance Apps In-Browser
WebAssembly & Low-Code: Build High-Performance Apps In-Browser
“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 and Co-Founder, Figma
WebAssembly (Wasm) introduces a novel form of code execution within modern web browsers, representing a significant advancement in the realm of web development.
When combined with the concept of low code, it has the power to revolutionize the way software developers construct applications for the web.
The JavaScript Dominance: Is It Coming to an End?
According to a Medium article from 2019, the global count of websites surpassed a staggering 1.6 billion. Not surprisingly, JavaScript stands as the dominant programming language, utilized by 95% of these websites. This comes as no surprise since JavaScript enjoys unparalleled support across all web browsers. However, is JavaScript the sole option available?
Thanks to the introduction of WebAssembly this is changing.
What Is WebAssembly?
WebAssembly, often abbreviated as Wasm, emerged as a creation of the World Wide Web Consortium (W3C). It was initially announced in 2015 and witnessed its first demonstration 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 common misconception that WebAssembly constitutes an entirely new programming language. In reality, it functions as a compilation target for widely adopted programming languages such as Python, C, C++, and Rust. Rather than being hand-written by developers, WebAssembly enables these languages to be compiled and executed within a web browser. Consequently, this diminishes JavaScript’s dominance on the web, while simultaneously addressing its performance limitations. By leveraging languages traditionally employed for constructing large-scale, mission-critical enterprise systems, such as C++, WebAssembly facilitates their accessibility within a browser environment.
How Does WebAssemby Work?
WebAssembly serves as an intermediary between the source code written in another language and its compatibility within a web browser.
WebAssembly takes the source code written in another language and makes it compatible for use inside a web browser. The process looks like this:
- 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.
- WebAssembly bytecode: You choose WebAssembly bytecode as your compilation target. As a result, you get a .wasm file.
- 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” or our blog post on “Will WebAssembly Replace JavaScript?“.
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 of Applications Built Using WebAssembly?
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 prominent examples are Figma, the popular online design application for creating sophisticated mock-ups, and Google Earth, Google’s renowned 3D mapping service.
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 and Co-Founder, Figma
He then goes on to explain that Figma is written in C++, one of the languages that can be compiled into WebAssembly code. By adopting this approach, Figma was able to speed up its load time by 3x, thus attaining near-native performance.
Google Earth is another prominent example of an application that relies on WebAssembly.
Google Earth 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-specific solution.
However, the engineering team behind Google Earth made the strategic decision to embrace WebAssembly. By leveraging the widespread support for WebAssembly across all browsers, Google Earth became accessible to users regardless of their choice of browser.
Both Figma and Google Earth exemplify how WebAssembly serves as a fitting solution for complex engineering and business challenges. It enables the migration of large-scale applications to the web without sacrificing performance or necessitating a complete rewrite. These success stories demonstrate the transformative potential of WebAssembly in addressing the diverse use cases it was designed for.
WebAssembly & Low-Code
So, how does all of this relate to low-code software development? The answer lies in the potential transformation offered by both technologies.
WebAssembly holds the key to reshaping the future of web development and expanding the range of applications built for the web. On the other hand, low-code development has the capacity to revolutionize how developers create software by accelerating the delivery of custom web applications, with reports suggesting up to a 10x improvement, as indicated by IT consultancy Forrester. It represents a new approach to develop and deploy bespoke web applications rapidly.
At Five, we are building a language-independent, in-browser development environment that supports WebAssembly. Five already offers several native, full code capabilities in a VS Code-like code editor for JavaScript, TypeScript, and SQL. The code editor comes with syntax highlighting and auto-completion.
In the future, software developers will be able to write code not just in JavaScript or TypeScript, but in almost any language right inside Five’s integrated development environment (IDE). This code will then be compiled to WebAssembly, enabling the creation and deployment of high-performance web applications.
At Five, we work on combining the power of WebAssembly and low-code development, delivering both trends through a unified platform.
Excited to explore more? Get a free download of our development environment through our website!
TL; DR: WebAssembly & Low-Code
WebAssembly (Wasm) acts as a compilation target for various popular programming languages, including Python, Go, C#, C, Rust, and C++. Major browsers, such as Firefox, Chrome, Safari, and Edge, universally support WebAssembly. Figma and Google Earth serve as prominent examples of applications leveraging WebAssembly to achieve high performance.
By compiling code to WebAssembly, developers can construct and run high-performance web applications using a wide array of programming languages. Five, an environment for low-code development, combines these two significant trends in web development—WebAssembly and low-code—by allowing software engineers to utilize full-code capabilities within the integrated development environment (IDE) of Five.
