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.
Table of Contents for
Learn WebAssembly
Learn WebAssembly
Published by
Packt Publishing, 2018
- Learn WebAssembly
- 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
- Table of Contents
- 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