The first definitive guide on WebAssembly to help you break through the 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
Book Description
WebAssembly is a brand new technology that represents a paradigm shift in web development. This book will teach you how to leverage this technology to write high performance applications that run in the browser. You'll be introduced to powerful WebAssembly concepts that will help you write lean and powerful web applications with native performance. Learn WebAssembly begins by getting you acquainted with the evolution of web programming, the state of things today, and what can be done with the advent and release of WebAssembly. You'll then take a look at the journey from JavaScript to asm.js to WebAssembly. As you progress, you'll 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
Understand how WebAssembly and its associated elements (text format, module, and the JavaScript API) came to be
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 the upcoming features of WebAssembly, Node.js integration, and alternative compilation methods
Port an existing C++ game to WebAssembly using Emscripten
Who this book is for
If you are a web developer or C/C++ programmer keen to leverage the powerful WebAssembly to build high performance web applications, this book is for you.
Author(s): Mike Rourke
Year: 2018
Language: English
Pages: 328
Cover
Title Page
Copyright and Credits
Dedication
PacktPub.com
Contributors
Table of Contents
Preface
Chapter 1: What is WebAssembly?
The road to WebAssembly
The evolution of JavaScript
Google and Native Client
Mozilla and asm.js
WebAssembly is born
What exactly is WebAssembly and where can I use it?
Official definition
Binary instruction format
Portable target for compilation
The core specification
Language concepts
Semantic phases
The JavaScript and Web APIs
So will it replace JavaScript?
Where can I use it?
What languages are supported?
C and C++
Rust
Other languages
What are the limitations?
No garbage collection
No direct DOM access
No support in older browsers
How does it relate to Emscripten?
Emscripten's role
The EMSDK and Binaryen
Summary
Questions
Further reading
Chapter 2: Elements of WebAssembly - Wat, Wasm, and the JavaScript API
Common structure and abstract syntax
Wat
Definitions and S-expressions
Values, types, and instructions
Role in the development process
Binary format and the module file (Wasm)
Definition and module overview
Module sections
The JavaScript and Web APIs
WebAssembly store and object caches
Loading a module and the WebAssembly namespace methods
WebAssembly objects
WebAssembly.Module
WebAssembly.Instance
WebAssembly.Memory
WebAssembly.Table
WebAssembly errors (CompileError, LinkError, RuntimeError)
Connecting the dots with WasmFiddle
What is WasmFiddle?
C code to Wat
Wasm to JavaScript
Summary
Questions
Further reading
Chapter 3: Setting Up a Development Environment
Installing the development tooling
Operating systems and hardware
macOS
Ubuntu
Windows
Package managers
Homebrew for macOS
Apt for Ubuntu
Chocolatey for Windows
Git
Installing Git on macOS
Installing Git on Ubuntu
Installing Git on Windows
Node.js
nvm
Installing nvm on macOS
Install nvm on Ubuntu
Installing nvm on Windows
Installing Node.js using nvm
GNU make and rimraf
GNU Make on macOS and Ubuntu
Installing GNU Make on macOS
Installing GNU Make on Ubuntu
Installing GNU make on Windows
Installing rimraf
VS Code
Installing Visual Studio Code on macOS
Installing Visual Studio Code on Ubuntu
Installing VS Code on Windows
Configuring VS Code
Managing settings and customization
Extensions overview
Configuration for C/C++ and WebAssembly
Installing C/C++ for VS Code
Configuring C/C++ for VS Code
WebAssembly Toolkit for VSCode
Other useful extensions
Auto rename tag
Bracket pair colorizer
Material Icon theme and Atom One Light theme
Setting up for the web
Cloning the book examples repository
Installing a local server
Validating your browser
Validating Google Chrome
Validating Mozilla Firefox
Validating other browsers
Other tools
iTerm2 for macOS
Terminator for Ubuntu
cmder for Windows
Zsh and Oh-My-Zsh
Summary
Questions
Further reading
Chapter 4: Installing the Required Dependencies
The development workflow
Steps in the workflow
Integrating Tooling into the workflow
Emscripten and the EMSDK
Emscripten overview
Where does the EMSDK fit in?
Installing the prerequisites
Common prerequisites
Installing the prerequisites on macOS
Installing the prerequisites on Ubuntu
Installing the prerequisites on Windows
Installing and configuring the EMSDK
Installation process across all platforms
Installation on macOS and Ubuntu
Installation and configuration on Windows
Configuration in VS Code
Testing the compiler
The C code
Compiling the C code
Summary
Questions
Further reading
Chapter 5: Creating and Loading a WebAssembly Module
Compiling C with Emscripten glue code
Writing the example C code
Compiling the example C code
Outputting HTML with glue code
Outputting glue code with no HTML
Loading the Emscripten module
Pre-generated loading code
Writing custom loading code
Compiling C without the glue code
C code for WebAssembly
Compiling with a Build Task in VS Code
Fetching and instantiating a Wasm file
Common JavaScript loading code
The HTML page
Serving it all up
Summary
Questions
Further reading
Chapter 6: Interacting with JavaScript and Debugging
The Emscripten module versus the WebAssembly object
What is the Emscripten module?
Default methods in the glue code
Differences with the WebAssembly object
Calling compiled C/C++ functions from JavaScript
Calling functions from a Module
Module.ccall()
Module.cwrap()
C++ and name mangling
Calling functions from a WebAssembly instance
Calling JavaScript functions from C/C++
Interacting with JavaScript using glue code
Executing strings with emscripten_run_script()
Executing inline JavaScript with EM_ASM()
Reusing inline JavaScript with EM_JS()
Examples of using glue code
The C code
The HTML code
Compiling and serving the result
Interacting with JavaScript without glue code
Passing JavaScript to C/C++ using the import object
Calling imported functions in C/C++
An example without glue code
The C++ code
The HTML code
Compiling and serving the result
Advanced Emscripten features
Embind
File System API
Fetch API
Debugging in the browser
High-level overview
Using source maps
Summary
Questions
Further reading
Chapter 7: Creating an Application from Scratch
Cook the Books – making WebAssembly accountable
Overview and functionality
JavaScript libraries used
Vue
UIkit
Lodash
Data-driven documents
Other libraries
C and the build process
Setting up the project
Configuring for Node.js
Adding files and folders
Configuring the build step
Setting up a mock API
Downloading the C stdlib Wasm
The final result
Building the C portion
Overview
A note regarding workflow
C file contents
Declarations
Linked list operations
transactions operations
transactions calculations
Category calculations
Compiling to Wasm
Building the JavaScript portion
Overview
A note about browser compatibility
Creating a Wasm instance in initializeWasm.js
Interacting with Wasm in WasmTransactions.js
Utilizing the API in api.js
Managing global state in store.js
The import and store declarations
Transactions operations
TransactionModal management
Balances calculation
Store initialization
Loading the application in main.js
Adding the web assets
Creating the Vue components
The structure of a Vue component
The App component
The BalancesBar
The TransactionsTab
The ChartsTab
Running the application
Validating the /src folder
Start it up!
Testing it out
Changing initial balances
Creating a new transaction
Deleting an existing transaction
Editing an existing transaction
Testing the Charts tab
Wrap up
Summary
Questions
Further reading
Chapter 8: Porting a Game with Emscripten
Overview of the game
What is Tetris?
The source of the source
A note about porting
Getting the code
Building the native project
The game in action
The code base in depth
Breaking the code into objects
The constants file
The piece class
The constructor and draw() function
The move(), rotate(), and isBlock() functions
The getColumn() and getRow() functions
The Board class
The constructor and draw() function
The isCollision() function
The unite() function
The displayScore() function
The Game class
The constructor and destructor
The loop() function
The main file
Porting to Emscripten
Preparing for porting
What's changing?
Adding the web assets
Porting the existing code
Updating the constants file
Building and running the game
Building with VS Code tasks
Building with a Makefile
Running the game
Summary
Questions
Further reading
Chapter 9: Integrating with Node.js
Why Node.js?
Seamless integration
Complementary technologies
Development with npm
Server-side WebAssembly with Express
Overview of the project
Express configuration
Instantiating a Wasm module with Node.js
Creating a mock database
Interacting with the WebAssembly module
Wrapping interaction in Transaction.js
Transaction operations in assign-routes.js
Building and running the application
Building the application
Starting and testing out the application
Client-side WebAssembly with Webpack
Overview of the project
What is Webpack?
Installing and configuring Webpack
Dependencies overview
Configuring loaders and plugins in webpack.config.js
The C code
Definitions and declarations
The start() function
The updateRectLocation() function
The JavaScript code
The import statements
Component state
Wasm initialization
Component mounting
Component rendering
Building and running the application
Testing the build
Running the start script
Testing WebAssembly modules with Jest
The code being tested
Testing configuration
Tests file review
Running the tests
Summary
Questions
Further reading
Chapter 10: Advanced Tools and Upcoming Features
WABT and Binaryen
WABT – the WebAssembly binary toolkit
Binaryen
Compiling with LLVM
The installation process
The example code
The C++ file
The HTML file
Compiling and running the example
Online tooling
WasmFiddle
WebAssembly Explorer
WebAssembly Studio
Parallel Wasm with Web Workers
Web Workers and WebAssembly
Creating a worker
The WebAssembly workflow
Limitations in Google Chrome
Overview of the code
The C code
The JavaScript code
Defining thread execution in worker.js
Interacting with Wasm in WasmWorker.js
Loading the application in index.js
The web assets
Building and running the application
Compiling the C files
Interacting with the application
Debugging Web Workers
Upcoming features
The standardization process
Threads
Host bindings
Garbage collection
Reference types
Summary
Questions
Further reading
Other Books You May Enjoy
Index