March 2, 2017 // By Jason Bock
How Web Development has Changed
In the 20 years that I’ve been doing software development, I’ve been fortunate to have diverse experiences in the applications that I’ve been a part of creating. From the front end all the way to the database and everything in between, I’ve been able to experience how to get code to do what users needed it to do. That doesn’t mean I’m an expert in every aspect of software development – far from it. However, that experience has been valuable in terms of seeing how software has changed over the years, and this included web development. Here are some tales from applications I was a part of that made me see the possibilities and opportunities in writing web applications.
1997 – Perl
2001 – ActiveXObject
I may have just sent shivers up some reader’s spines with that word:
ActiveXObject. Some of you may have no idea what I’m referring. Essentially,
ActiveXObject lets you create an object of any type, provided it’s an ActiveX object (more shivers!). This is what I used to create a dynamic page in a web application. This page had 4 drop-down lists, and a selection in one of them changes the values in the ones to the right of that list. We did this by getting a reference to an
XMLHttpRequest object via an
2003 – Video Handling and Multi-browser Support
2005 – Asynchronous Processing
ActiveXObject to do this). When the work was completed, the client substantially reduced the amount of servers needed to host the site.
What Is WebAssembly?
WebAssembly defines a binary format for code to run in the browser. You can visit the WebAssembly site by clicking on the link in the previous section and learn as much as you want about this new standard, but here are the main aspects of WebAssembly:
- Efficient and fast
- Open and debuggable
- Part of the open web platform
If you ever heard of asm.js and Emscripten, you can think of WebAssembly as the agreed-upon standard for binary code on the web. At the end of the day, what WebAssembly provides is a structure (WebAssembly files typically have the extension “.wasm”) that you can load in a web page and execute its code.
Sounds interesting? Let’s look at a simple example to see how this works in C. Yes, I said “C” – not C# or Ruby or Python. Why? Because for the first version of WebAssembly (which, at the time of writing this article, has passed the “Browser Preview“ milestone), there aren’t a lot of features available that modern languages need, like access to a garbage collector. Compilers for C and Rust already have functionality in place to target WebAssembly, so to show an example of WebAssembly, we have to use a systems programming language. Don’t worry, though – I’ll keep the code nice and simple so the focus will primarily be on WebAssembly itself and not the language of origin.
Here’s the C code we’ll run in the browser:
Now, if you’re like me, you don’t have a C compiler on your machine. However, if all you want to do is play with WebAssembly, a great site lets you do your compilation in the browser. WasmExplorer is its name, and it looks like this:
Again, to keep things simple, I’ll copy my
multiply() function in the “C++ 11” pane, and then I’ll click on the Compile button in the “C++ 11” pane:
This isn’t quite WebAssembly at this point. What you get is the textural format of the eventual binary output that uses s-expressions, called WebAssembly Text, or Wast. If you’re a .NET developer, think of this format as being similar to the IL that you see in a tool like the Intermediate Disassembler, or ILDasm. Here’s what that looks like for
Even if you’ve never see this format before, you can probably read that code and see a function (denoted with
func) that has two parameters. The
f32 text means the parameters are a
float32 type. It also returns an
f32 to the caller. Within the method, it multiplies the two arguments together and returns the result when the method finishes.
Now, why this tool decides to mangle the function name is kind of a mystery to me. Fortunately you can edit any of the Wast, so let’s change the exported name to “multiply”. Then, click the Assemble button – you should see entries in the Console section that state the creation of the .wasm file is complete:
Finally, you can click Download, which will let you get the .wasm file on to your machine.
Now that we have our C code, let’s execute it! Here’s a simple HTML page that will call
multiply() when the button is clicked:
wasmExports? That’s an object created when the script for the page executes. Here’s what that looks like (you’d put this within the
fetch()), compile the bytes (
WebAssembly.compile()), and then get a reference to the instantiated module (
WebAssembly.Instance() and then use the
exports property). Once you do that, you can reference the exported functions. Now, you should be able to click the Multiply! button and see the glorious results in an alert window:
This is C code running natively in the browser. How slick is that?
Now, before you try this on your machine, there’s a couple of things to keep in mind. First, as of the writing of this article, WebAssembly’s initial MVP design has reached consensus and this first version should be shipping in browsers in the near future. However, WebAsssembly doesn’t ship with the latest version of all the modern browsers, such as Chrome, Edge, Firefox and Safari. If you want to try WebAssembly out right now, here’s what you need to do:
- Chrome: Use Chrome Canary, open chrome://flags/#enable-webassembly and enable the switch.
- Edge: Go here for details on using WebAssembly
- Safari: Go here for details on the status of this feature
In addition, I usually run Windows 10, so to get my .wasm file to load in the browser correctly, I configured a web site in IIS and ensured that I had an
application/octet-stream MIME type mapping for .wasm files.
The Impact of WebAssembly
It’s encouraging to see the web evolve this way. Providing a standardized code format such that other languages can empower web applications is a fantastic feature. However, keep in mind that right now, the features in WebAssembly are somewhat limited. While languages like C and Rust are targeting WebAssembly, it’s not available for C#...yet. As new features are added in the near future, this should make it possible to target Wasm in C#, though it might be a somewhat limited version where certain language features and/or APIs are not available. It’s just too hard to tell now. There are encouraging developments in the .NET space that C# will at some point work in the browser.
In this article, you received a brief tour of the evolution of web development. Then, you saw what WebAssembly is and how it currently work. We finished with a discussion of the potential for WebAssembly to change how we write software for the web. Personally, I am extremely excited to see this standard take shape. I would love to write code in C# and have my project emit a .wasm file as its binary result. What do you think? Do you see WebAssembly changing the world, or will it be relegated to small, performance-based corner cases? Let me know by e-mailing me at firstname.lastname@example.org – I’d love to hear your opinions on WebAssembly. Until next time, happy coding!