Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Learn WebAssembly
Learn WebAssembly

Learn WebAssembly: Build web applications with native performance using Wasm and C/C++

eBook
€8.99 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Learn WebAssembly

Elements of WebAssembly - Wat, Wasm, and the JavaScript API

Chapter 1, What is WebAssembly?, described the history of WebAssembly and provided a high-level overview of the technology as well as the potential use cases and limitations. WebAssembly was described as being composed of multiple elements, not just the binary instruction format specified in the official definition.

In this chapter, we will dig into the elements that correspond to the official specifications created by the WebAssembly Working Group. We will examine the Wat and the binary format in greater detail to gain a better understanding of how they relate to modules. We will review the JavaScript API and Web API to ensure you're able to utilize the WebAssembly effectively in the browser.

Our goal for this chapter is to understand the following:

  • How the text and binary formats are related
  • What Wat is and where...

Common structure and abstract syntax

In Chapter 1, What is WebAssembly?, we talked about how the binary and text formats of WebAssembly both map to a common structure in the form of an abstract syntax. Before getting into the nuts and bolts of these formats, it's worth mentioning how these are related within the Core Specification. The following diagram is a visual representation of the table of contents (with some sections excluded for clarity):

Core Specification table of contents

As you can see, the Text Format and Binary Format sections contain subsections for Values, Types, Instructions, and Modules that correlate with the Structure section. Consequently, much of what we cover in the next section for the text format have direct corollaries with the binary format. With that in mind, let's dive into the text format.

...

Wat

The Text Format section of the Core Specification provides technical descriptions for common language concepts such as values, types, and instructions. These are important concepts to know and understand if you're planning on building tooling for WebAssembly, but not necessary if you just plan on using it in your applications. That being said, the text format is an important part of WebAssembly, so there are concepts you should be aware of. In this section, we will dig into some of the details of the text format and highlight important points from the Core Specification.

Definitions and S-expressions

To understand Wat, let's start with the first sentence of the description taken directly from the WebAssembly...

Binary format and the module file (Wasm)

The Binary Format section of the Core Specification provides the same level of detail with regard to language concepts as the Text format section. In this section, we will briefly cover some high-level details about the binary format and discuss the various sections that make up a Wasm module.

Definition and module overview

The binary format is defined as a dense linear encoding of the abstract syntax. Without getting too technical, that essentially means it's an efficient form of binary that allows for fast decoding, small file size, and reduced memory usage. The file representation of the binary format is a .wasm file, which will be the compilation output from Emscripten...

The JavaScript and Web APIs

In addition to the WebAssembly Core Specification, there are two API specifications for interacting with WebAssembly modules: the WebAssembly JavaScript Interface (JavaScript API) and the WebAssembly Web API. In the previous sections, we covered pertinent aspects of the Core Specification to become familiar with the underlying technology. If you never read the Core Specification (or if you skipped the first few sections of this chapter), it wouldn't inhibit the use of WebAssembly in your application. That is not the case for the APIs, as they describe the methods and interface required to instantiate and interact with your compiled Wasm module. In this section, we will review the Web and JavaScript APIs and describe how to load and communicate with a Wasm module using JavaScript.

...

Connecting the dots with WasmFiddle

We spent this chapter reviewing the various elements of WebAssembly and the corresponding JavaScript and Web APIs, but understanding how the pieces fit together can still be confusing. As we progress through the examples in this book and you're able to see how C/C++, WebAssembly, and JavaScript interact, these concepts will become clearer.

That being said, a demonstration of this interaction may help in clearing up some of the confusion. In this section, we're going to use an online tool called WasmFiddle to demonstrate the relationship between these elements so you can see WebAssembly in action and get a high-level overview of the development workflow.

What is WasmFiddle?

WasmFiddle...

Summary

In this chapter, we discussed the elements of WebAssembly and their relationship. The structure of the Core Specification was used to describe the mapping of the text and binary formats to a common abstract syntax. We highlighted aspects of the text format (Wat) that can be useful in the context of debugging and development, as well as why s-expressions are an excellent fit for the textual representation of the abstract syntax. We also reviewed details pertaining to the binary format and the various elements that make up a module. The methods and objects within the JavaScript and Web APIs were defined with descriptions of their roles with regard to WebAssembly interaction. Finally, a simple example of the relationship between source code, Wat, and JavaScript was presented using the WasmFiddle tool. 

In Chapter 3Setting Up a Development Environment, we&apos...

Questions

  1. What kind of data are s-expressions good at representing?
  2. What are the four language concepts that are shared between the binary and text formats?
  3. What is one of the use cases for the text format?
  4. What is the only element type that can be stored in a WebAssembly Table?
  5. What does the JavaScript engine use to manage execution?
  6. Which method requires less code to instantiate a module, instantiate() or instantiateStreaming()?
  7. What error objects are available on the WebAssembly JavaScript object and what event causes each one?

Common structure and abstract syntax


In Chapter 1What is WebAssembly?, we talked about how the binary and text formats of WebAssembly both map to a common structure in the form of an abstract syntax. Before getting into the nuts and bolts of these formats, it's worth mentioning how these are related within the Core Specification. The following diagram is a visual representation of the table of contents (with some sections excluded for clarity):

Core Specification table of contents

 

As you can see, the Text Format and Binary Format sections contain subsections for Values, Types, Instructions, and Modules that correlate with the Structure section. Consequently, much of what we cover in the next section for the text format have direct corollaries with the binary format. With that in mind, let's dive into the text format.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • 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

Description

WebAssembly is a brand-new technology that represents a paradigm shift in web development. This book teaches programmers to leverage this technology to write high-performance applications that run in the browser. This book introduces you to powerful WebAssembly concepts to help you write lean and powerful web applications with native performance. You 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 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.

Who is this book 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.

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

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Sep 25, 2018
Length: 328 pages
Edition : 1st
Language : English
ISBN-13 : 9781788997379
Languages :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Sep 25, 2018
Length: 328 pages
Edition : 1st
Language : English
ISBN-13 : 9781788997379
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 115.97
CMake Cookbook
€45.99
Learn WebAssembly
€36.99
Hands-On Game Development with WebAssembly
€32.99
Total 115.97 Stars icon
Banner background image

Table of Contents

11 Chapters
What is WebAssembly? Chevron down icon Chevron up icon
Elements of WebAssembly - Wat, Wasm, and the JavaScript API Chevron down icon Chevron up icon
Setting Up a Development Environment Chevron down icon Chevron up icon
Installing the Required Dependencies Chevron down icon Chevron up icon
Creating and Loading a WebAssembly Module Chevron down icon Chevron up icon
Interacting with JavaScript and Debugging Chevron down icon Chevron up icon
Creating an Application from Scratch Chevron down icon Chevron up icon
Porting a Game with Emscripten Chevron down icon Chevron up icon
Integrating with Node.js Chevron down icon Chevron up icon
Advanced Tools and Upcoming Features Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Half star icon Empty star icon Empty star icon 2.3
(4 Ratings)
5 star 25%
4 star 0%
3 star 0%
2 star 25%
1 star 50%
Amazon Customer Dec 27, 2018
Full star icon Full star icon Full star icon Full star icon Full star icon 5
The information is very valuable and easier to follow than the website. It explains webassembly and how to use it.
Amazon Verified review Amazon
Amazon Customer Dec 26, 2018
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
An okay book to start with WebAssembly, however the quality of the book is horrible, especially at later chapters with code examples. While the idea/content could be salvaged, this book is in dire need of proof-reading and checking that their examples are valid.If you see it on sale for under 5$ - get it. Outside of that price range, you are better reading unofficial blog post with WebAssembly examples.
Amazon Verified review Amazon
MATHEUS JOSE SANTOS Jul 17, 2022
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
Awful quality control from Pack from the printing process through distribution. Is it was two or three missing pages it would be understandable, but 72 pages is just BS.
Amazon Verified review Amazon
Catherine Holloway Feb 13, 2020
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
I was hoping to gain an understanding of how to write and compile a minimal "hello world" example with C code compiled to a wasm file, and how to load this file in the browser. I've read several tutorials online and none worked, so I figured I could trust pakt to deliver something to explain what the browser expects for WebAssembly.instantiate(). Unfortunately, this book suffers from exactly the same problem as all the tutorials. Emscripten has already moved on, and the example code in this book is out of date. The author writes clearly and explains the basic concepts well, but it's not what I needed. This book was a waste of my time.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.