Cover image for Learn WebAssembly

Learn WebAssembly

Author Mike Rourke
Release Date: 2018/09/01
ISBN: 9781788997379
Topic:
0%
393
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Create unbelievably fast, robust and secure web apps with Django Web Framework and Python 3.6

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 aims to teaches programmers how to leverage this technology to write high- performance applications that run in the browser.

This book will introduces you to the powerful WebAssembly concepts of WebAssembly that willto help you write lean and powerful web applications with native performance.

You will 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 analyzinge the anatomy of a WebAssembly module and the relationship between the binary and text formats, along with the corresponding JavaScript API.

Further on, weyou'll implement all the techniques you've learned by to building 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 would 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.

Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

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