The desktop Graphical User Interface (GUI) has been with us since the 1990s, when Windows became mainstream. Out went character-based screens, replaced by icons and multiple fonts, selectable via mouse.
Around this time, the Web went mainstream. Unlike Windows and other desktop GUIs, however, the Web user experience was generally poor. Web GUIs had the odd popup window, lots of graphics and colored 3D buttons, and animated cursors… if you were lucky. At least in the beginning, websites were designed for displaying information, not sophisticated input.
(It didn’t help that, until 2000, producing nice-looking webpages required a lot of effort. You put controls, text and pictures into tables to give the page some structure. As browsers adopted new CSS standards, it became easier to have a website both look good and not vary in appearance between different browsers.)
WebAssembly isn’t the first attempt at speeding up web processes. Earlier experiments such as Google Native Client (no longer active) also did this; code written in C/C++ ran in a sandbox, isolated from the operating system. But that’s been discontinued in favor of WebAssembly.
We’re now seeing WebAssembly games every bit as good as those old Flash games that everybody used to play. For example, Funky Karts is a browser game written in C++/OpenGL ES 2 and WebAssembly. You can play the game instantly in your browser and read about its development.
In addition to games, WebAssembly has been used in statistical visualization, ray tracing, emulators, voice commands, and software development. It makes possible web GUIs that are almost as good as desktop GUIs.
Building the Better GUI
GUIs are made up of lots of controls, and you need to place them accurately and rapidly. WebAssembly lets your C/C++/Rust programs place lots of bytes on the screen very quickly, something that HTML and CSS were never intended to do (as they rely on the slower DOM (Document Object Model) to put controls on a webpage).
There are some great desktop GUIs available (both closed- and open-source) such as Qt and Nuklear. Many of these are written in C or C++, and are now being implemented on web with WebAssembly (for example, AssortedWidgets is written in C++ 11 with OpenGL ES 2, and has an impressive online demo).
But IMGui is way better. It’s used in many games, apps, and design tools, and there is now a WebAssembly implementation by the ImGUI author. As a complex web GUI, it is pretty feature-complete; plus, it loads in no time. If you need a web GUI, this is an excellent place to start.
The version of WebAssembly that all four major browsers currently support (Chrome, Firefox, Safari and Edge) reached MVP last year, but that’s only a starting point. According to Firefox’s Lin Clark, future features will include multithreading, SIMD support, and improved compilation. It will start compiling while still downloading, and then optimize running code to speed it up.
These features all help make powerful web GUIs possible by forcing WebAssembly programs to run faster. Multithreading will also make the GUI run smoother by allowing more intense computing tasks to be done in a non-GUI thread.
Although C/C++, Go and Rust are the most popular WebAssembly development languages, other languages can also be used to develop complex web applications. According to the awesome page of WebAssembly (supported) languages, there are over 30 languages, though for many it’s still early days.
Nevertheless, I have seen a complex GUI work in a browser and I think that WebAssembly is the future, at least for now!