Rejuvenate my old OpenGL GUI with WebAssembly, or why WebAssembly is awesome!
Ever since the 90s, I have been trying to master javascript, html and later css. I have failed. I rarely complain about the difficulty of using C++ pointer and template, but I’m a hater of the web frontend stack.
Although the landscape keeps changing, from using the <table> tag everywhere to the pervasiveness of Angular.js and React.js, the fundamentals feel the same. To me, each update to the web development technology is just a little patch to cover a blast wound.
Html was first invented as a document format, like the .docx file of Microsoft office. Today, if you are asked to use Microsoft word to develop an app, you would think it is nothing but purely ridiculous. However, that ridiculousness had for long become normal for web app development.
When we design a framework, a platform or a library, we’d like to design it into different levels of abstractions. For example, we have Assembly language for low level, speedy logics, we have C++ for midlevel driver and operating system development and we have Python for productivity and cross platform development. We define tcp/ip to lay the ground, and then http on top. We build low level graphics APIs, like OpenGL and on top of it, we create game engines. This is a common and reasonable design pattern. The benefit of this is, as a user, you get to choose the level of functions. If you want finer control, you choose the low level stuff. If you just want to use the ready made solutions and don’t need customization, you select the high level APIs. You can enjoy the security of being able to change everything if you want to.
Take the iOS UI library as an example. It is built on top of a low level graphics element called CALayer. CALayer is nothing, but a rectangular patch, where you can draw your graphics on. On top of this, we have UIView, which uses CALayer to do graphics, and also has event handling and so on. You can always choose to use the default UI elements, like a UIButton. But whenever you want to have a fancier UI component that is not part of the defaults, you know you can always go lower level, draw whatever you like.
Designing in levels is a concept you seldom find from web standards. Every tag is essentially treated equally. Can you customize a <a> tag, for example? You can, only to certain degrees, like decorating it with css. Or you fake the customization by combining many tags, which is inefficient to load and display (for example, using <div> tags to form a progress bar).
Another example is the web video standards, like WebRTC and Media Source API. If I were to design these standards, I would do it level by level. First, I will make a standard to do nothing but video decoding. Then, I add another level to improve the quality of a video stream, such as adding jittering buffer to improve smoothness. Then finally, on top of this, I solve connectivity, adding P2P for example.
Users would get to choose and customize each level if they want to. A game or desktop streaming use case would prefer low latency over smoothness, in this case, developers can customize the buffering logic. A video broadcasting case, however, would prefer smoothness, they care less about timely delivery.
However, both WebRTC and Media Source API were designed as a big monster that does only one specific thing. You have no way to configure it to fulfill your needs. Have you wondered why the quality of chrome remote desktop is so bad? Because it uses WebRTC designed for P2P chatting.
As a metaphor, writing C++ is like using pencils. The quality of your art work depends on your capability of using them. It takes time to master, but theoretically, if you want to and are good enough, you can draw whatever you like with pencils. Writing web apps, however, is like filling coloring books. You can only do what’s confined by a coloring book’s line work. It’s difficult for you to do anything out of line.
And yet, javascript, html and css are so popular, as we have no choice. We certainly have demand for web apps, as it is so convenient to run them. There is no need to install, maintain and back up files. But do web apps really need javascript, html and css? I think what they really depend on is a way to load them without installation, a cross platform binary standard that is accepted broadly and a sandbox execution environment. There is no need for the slow document tree really, it only makes sense for a “document”.
But I think things could be changing with the introduction of WebAssembly. I, as a C++ programmer, who had felt being left out from frontend development, finally feel fitting in. Although, in my ideal world, WebAssembly would come out first and become the fundamental and then we built html and document tree on top of it. It’s now the other way around, but still an improvement for sure.
In 2007, while working on my 3D modeler project, I developed an OpenGL GUI library in C++, called AssortedWidgets. I recently ported this code into WebAssembly with little effort. It’s really amazing to see it running on the web!
