Computer Aided Design: AutoCAD

AutoCAD is a very popular Computer Aided Design (CAD) package that supports engineers, architects, and designers across a wide range of industries. The first version of AutoCAD was written in C++ and released in 1982, which makes it more than 10 years older than JavaScript!

In 2010, the AutoCAD team launched a web-based version of its desktop AutoCAD tool using the Flash plug-in, later replacing it with HTML5/JavaScript. However, in both cases the web version of AutoCAD had a limited feature set, for the most part due to the prohibitive cost of migrating a 12-million-lines-of-code application to the web.

The AutoCAD team immediately saw the promise of WebAssembly when it was released in 2017, and sought to use Emscripten to compile its desktop C++ codebase and run it in the browser. Early experiments proved very successful, and the WebAssembly-based version of the product was announced at Google’s I/O conference in 2018.

This C++ core running in the browser provided the capability to render and edit designs, and had full support for AutoCAD’s DWF design format. The WebAssembly module runs in a Web Worker, with the output rendering to an HTML canvas element, whereas the interactive aspects of the web application were built using React and TypeScript (i.e., JavaScript).

WebAssembly has been a considerable benefit for the AutoCAD team, allowing it to share a common codebase across desktop and web. The team’s C++ developers can now add new features to their application, without needing any knowledge of JavaScript or web technologies.

Others in the industry are following a similar approach; Figma, a web-based design tool with real-time collaboration, is also finding success with WebAssembly, using this technology to share a C++ codebase between the desktop and web. In its case, Figma has reported an improvement in load time of three times (the time taken to download the app, load a design file, and render it). Similarly, Adobe is using WebAssembly for the web version of Lightroom, its image-manipulation app.

PDF Rendering: PSPDFKit

Portable Document Format (PDF) is a widely used file format that was released by Adobe in 1993, providing a rich and versatile description of document layout. PDF files are relatively complex and creating a compliant renderer involves writing a significant amount of code.

PSPDFKit is a company that provides a suite of tools for working with PDF documents on a wide range of platforms. The company’s C++ codebase, which is shared across platforms, has approximately 500,000 lines of code. Prior to adopting WebAssembly, the web version of its product rendered PDF content on the server, with the browser acting as a thin-client.

The PSPDFKit team was an early adopter of WebAssembly, making use of Emscripten to compile its PDF toolkit and allowing a purely client-side version of the product, which the company released in 2017. The team shared its experiences, indicating that the WebAssembly version of its toolkit was almost as fast as the native implementation.

3D Visualization: Google Earth

Google Earth provides a 3D rendering of the planet Earth using a variety of superimposed data sources (satellite images, aerial photography, GIS data). It is written in C++ and launched as a desktop application in 2001.

The Google Earth team has long been experimenting with technologies that could allow it to bring its application to the web, most recently using Portable Native Client (PNaCL), a sandboxed plug-in-like technology that Google developed for a number of years (which has incidentally now been deprecated in favor of WebAssembly). The Google Earth team recently released a beta version that uses Emscripten to compile its C++ codebase to WebAssembly. It also makes use of WebAssembly’s upcoming threading support. The beta has been successful and is seen by the team as its long-term strategy for the web.

Google is also exploring WebAssembly in a number of other projects. The company is using it within its note-taking app, Google Keep, which has a WebAssembly module “ink” that supports freehand drawing and handwriting. Google is also using it in squoosh, a Progressive Web App (PWA) for image manipulation, where WebAssembly is used to perform image processing and editing, giving fast and predictable performance.

Looking to the Future

Reviewing the applications that are currently using WebAssembly, we see a trend emerging. They all have C++ codebases and use the Emscripten compiler to target WebAssembly.

There are a couple of reasons for this. First, Emscripten provides the most mature WebAssembly tooling, having been developed alongside asm.js. It is also more than just a C++ to WebAssembly compiler; it provides portability for key components of the C/C++ ecosystem, including the C Standard Library and OpenGL.

Second, there are a significant number of companies with sizeable and valuable C++ codebases who want to target the web. In the past, they’ve tackled this problem in a variety of ways: using plug-ins, moving to a client-server model, or reimplementing logic in JavaScript. Emscripten finally gives these companies the opportunity to target the web without the need for significant changes to their technology or architecture.

When it comes to the use of WebAssembly in production, projects that migrate sizeable C++ codebases currently dominate. However, it is likely that we will see this change over time. As the Rust tooling improves and the use of Blazor becomes mainstream, we’ll begin to see a number of green-field WebAssembly applications emerge: those that have been designed with the web in mind from the outset.

In Chapter 4, we take a look at some of the upcoming WebAssembly features, which will no doubt drive adoption further.