Learn WebAssembly

Build web applications with native performance using Wasm and C/C++

Mike Rourke

• Publisher: Packt Publishing
• Year: 2018
• Print ISBN: 9781788997379
• eBook ISBN: 9781788995467
• Edition: 1
• Topic: Informatique
• Subtopic: Programmation en C++

In the first definitive guide on WebAssembly, you'll learn how you can wield this new technology to break through the current barriers of web development and build an entirely new class of performant applications.

Key Features

• Generate WebAssembly modules from C and C++ using Emscripten and interact with these modules in the browser
• Learn how to use WebAssembly outside of the browser and load modules using Node.js
• Build a high-performance application using C and WebAssembly and port an existing C++ game to WebAssembly using Emscripten

Book Description

WebAssembly is a brand-new technology that represents a paradigm shift in web development. This book teaches programmers to leverage this technology to write high-performance applications that run in the browser. This book introduces you to powerful WebAssembly concepts to help you write lean and powerful web applications with native performance. You start with the evolution of web programming, the state of things today, and what can be done with the advent and release of WebAssembly. We take a look at the journey from JavaScript to asm.js to WebAssembly. We then move on to analyze the anatomy of a WebAssembly module and the relationship between binary and text formats, along with the corresponding JavaScript API. Further on, you'll implement all the techniques you've learned to build a high-performance application using C and WebAssembly, and then port an existing game written in C++ to WebAssembly using Emscripten. By the end of this book, you will be well-equipped to create high-performance applications and games for the web using WebAssembly.

What you will learn

• Learn how WebAssembly came to be and its associated elements (text format, module, and JavaScript API)
• Create, load, and debug a WebAssembly module (editor and compiler/toolchain)
• Build a high-performance application using C and WebAssembly
• Extend WebAssembly's feature set using Emscripten by porting a game written in C++
• Explore upcoming features of WebAssembly, Node.js integration, and alternative compilation methods

Who this book is for

If you are a web developer or C/C++ programmer keen to leverage the powerful technology of WebAssembly to build high-performance web applications, then this book is for you.

Creating an Application from Scratch

Now it's time to apply your knowledge! Since one of WebAssembly's primary design goals is to execute within and integrate well with the existing web platform, it makes sense to build a web application to test it out. Even though WebAssembly's current feature set is rather limited, we can utilize the technology at a basic level. In this chapter, we will build a single-page application from scratch that utilizes Wasm modules within the context of the Core Specification.

By the end of this chapter, you'll know how to:

• Write functions that perform simple computations with C
• Build a basic JavaScript application with Vue
• Integrate Wasm into your JavaScript application
• Identify the capabilities and limitations of WebAssembly in its current form
• Run and test a JavaScript application using browser-sync

Cook the Books – making WebAssembly accountable

As mentioned before, WebAssembly's current feature set is rather limited. We can use Emscripten to greatly extend the capabilities of a web application, but that carries the cost of noncompliance with the official specification and the addition of glue code. We can still use WebAssembly effectively today, which brings us to the application we'll build in this chapter. In this section, we will review the libraries and tools we'll use to build the application, as well as a brief overview of its functionality.

Overview and functionality

In WebAssembly's current form, we can pass numbers between a Wasm module and JavaScript code with relative ease. An accounting application seems like a logical choice in terms of real-world applicability. The only contention I have with accounting software is that it's a little boring (no offense). We're going to spice it up a bit by building in some unethical accounting practices. The application is named Cook the Books, a term associated with accounting fraud. Investopedia provides the following definition of Cook the Books:

"Cook the Books is an idiom describing fraudulent activities performed by corporations in order to falsify their financial statements. Typically, cooking the books involves augmenting financial data to yield previously nonexistent earnings. Examples of techniques used to cook the books involve accelerating revenues, delaying expenses, manipulating pension plans, and implementing synthetic leases."

The Investopedia page at https://www.investopedia.com/terms/c/cookthebooks.asp offers detailed examples of what constitutes cooking the books. We'll take a simple approach for our application. We will allow the user to enter a transaction with a raw and cooked amount. The raw amount represents the actual amount of money that was either deposited or withdrawn, while the cooked amount is what everyone else will see. The application will generate pie charts that display expenses and income by category for either the raw or cooked transactions. The user will be able to easily toggle between the two views. The application consists of the following components:

• Tabs for switching between transactions and charts
• Table that displays transactions
• Buttons that allow a user to add, edit, or remove a transaction
• Modal dialog for adding/updating a transaction
• Pie charts to display the income/expenses by category

JavaScript libraries used

The JavaScript portion of the application will use several libraries served from a CDN. It will also use one locally installed library to watch for changes in the code. The following sections will describe each library and its purpose in the application.

Vue

Vue is a JavaScript framework that allows you to split an application into individual components for ease of development and debugging. We're using it to avoid having one monolithic JavaScript file with all of our application logic and another monolithic HTML file with the entire UI. Vue was chosen because it doesn't require the added complexity of a build system and allows us to use HTML, CSS, and JavaScript without having to do any transpiling. The official website is https://vuejs.org.

UIkit

UIkit is the frontend framework we will use to add styling and layout to our application. There are dozens of alternatives, like Bootstrap or Bulma, that offer comparable components and functionality. But I chose UIkit because of the helpful utility classes and added JavaScript functionality. You can view the documentation at https://getuikit.com.

Lodash

Lodash is an excellent utility library that provides methods for performing common actions in JavaScript that aren't already built into the language. We will use it to perform calculations and manipulate the transactions data. Documentation and installation instructions can be found at https://lodash.com.

Data-driven documents

Data-driven documents (D3) is a multi-faceted library that allows you to translate data into impressive visualizations. D3's API consists of several modules that range from array manipulation to charting and transitions. We will use D3 primarily to create the pie charts, but we'll also take advantage of some of the utility methods it provides. You can find more information at https://d3js.org.

Other libraries

In order to display currency values in the correct format and ensure the user enters a valid dollar amount, we will utilize the accounting.js (http://openexchangerates.github.io/accounting.js) and vue-numeric (https://kevinongko.github.io/vue-numeric) libraries. To simplify development, we'll set up a basic npm project and use browser-sync (https://www.browsersync.io) to immediately see code changes reflected in the running application.

C and the build process

The application uses C since we're performing simple calculations with basic algebra. It wouldn't make sense to use C++ in this case. That would introduce the added step of ensuring the functions we need to call from JavaScript are wrapped in an extern block. We'll write the calculation functions in a single C file and compile it down to a single Wasm module. We can continue to use VS Code's Tasks functionality to perform the build, but the arguments will need to be updated since we'll only compile a single file. Let's move on to project configuration.

Setting up the project

WebAssembly hasn't been around long enough to have established best practices with regard to folder structure, file naming conventions, and so on. If you were to search for best practices for C/C++ or JavaScript projects, you'd encounter a great deal of conflicting advice and strongly held opinions. With that in mind, let's spend this section setting up our project with the required configuration files.

The code for this project is located in the /chapter-07-cook-the-books folder in the learn-webassembly repository. You must have this code available when we get to the JavaScript portion of the application. I won't be providing the source code for all of the Vue components in the book, so you need to copy them from the r...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• PacktPub.com
• Contributors
• Preface
• What is WebAssembly?
• Elements of WebAssembly - Wat, Wasm, and the JavaScript API
• Setting Up a Development Environment
• Installing the Required Dependencies
• Creating and Loading a WebAssembly Module
• Interacting with JavaScript and Debugging
• Creating an Application from Scratch
• Porting a Game with Emscripten
• Integrating with Node.js
• Advanced Tools and Upcoming Features
• Other Books You May Enjoy