Learn WebAssembly: build web applications with native performance using wasm and c/c++

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