Title Page Copyright and Credits Learn WebAssembly Dedication PacktPub.com Why subscribe? PacktPub.com Contributors About the author About the reviewers Packt is searching for authors like you Preface Who this book is for What this book covers To get the most out of this book Download the example code files Download the color images Conventions used Get in touch Reviews 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 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 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 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 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 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 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 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 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 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 Leave a review - let other readers know what you think