WebAssembly in Action With examples using C++ and Emscripten (Gerard Gallant) (z-library.sk, 1lib.sk, z-lib.sk)

📄 File Format: PDF

💾 File Size: 20.0 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

M A N N I N G Gerard Gallant With examples using C++ and Emscripten

📄 Page 2

WebAssembly in Action A browser’s JavaScript engine monitors the code until it’s satisfied it knows the variable types before it can convert that section of JavaScript into machine code. With WebAssembly, your code is compiled into the WebAssembly binary format ahead of time. Because the variable types are all known in advance, when the browser loads the WebAssembly file, the JavaScript engine doesn’t need to monitor the code. It can compile the binary format straight into machine code. JavaScript Browser function add(a, b){ return (a + b); } 01110001001... JavaScript compiled to machine code C++ Wasm Developer C++ compiled to WebAssembly binary Wasm Browser WebAssembly binary compiled to machine code 01110001001...

📄 Page 3

WebAssembly in Action

📄 Page 4

(This page has no text content)

📄 Page 5

WebAssembly in Action WITH EXAMPLES USING C++ AND EMSCRIPTEN C. GERARD GALLANT M A N N I N G SHELTER ISLAND

📄 Page 6

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Email: orders@manning.com © 2019 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine. Acquisitions editor: Brian Sawyer Development editor: Toni Arritola Technical development editor: Ian LovellManning Publications Co. 20 Baldwin Road Review editor: Ivan Martinović PO Box 761 Production editor: Anthony Calcara Shelter Island, NY 11964 Copy editor: Rebecca Deuel-Gallegos Proofreader: Tiffany Taylor Technical proofreader: Arno Bastenof Typesetter: Dottie Marsico Cover designer: Marija Tudor ISBN 9781617295744 Printed in the United States of America

📄 Page 7

brief contents PART 1 FIRST STEPS...................................................................... 1 1 ■ 3Meet WebAssembly 2 ■ 17A look inside WebAssembly modules 3 ■ 24Creating your first WebAssembly module PART 2 WORKING WITH MODULES............................................... 53 4 ■ 55Reusing your existing C++ codebase 5 ■ Creating a WebAssembly module 85that calls into JavaScript 6 ■ Creating a WebAssembly module that talks to JavaScript using 105function pointers PART 3 ADVANCED TOPICS........................................................ 133 7 ■ 135Dynamic linking: The basics 8 ■ 163Dynamic linking: The implementation 9 ■ 195Threading: Web workers and pthreads 10 ■ 219WebAssembly modules in Node.js PART 4 DEBUGGING AND TESTING ............................................ 247 11 ■ 249WebAssembly text format 12 ■ 300Debugging 13 ■ 327Testing—and then what?v

📄 Page 8

(This page has no text content)

📄 Page 9

contents preface xiii acknowledgments xv about this book xvii about the author xx about the cover illustration xxi PART 1 FIRST STEPS.......................................................1 1 Meet WebAssembly 3 1.1 What is WebAssembly? 4 Asm.js, the forerunner to WebAssembly 4 ■ From asm.js to MVP 5 1.2 What problems does it solve? 5 Performance improvements 5 ■ Faster startup times compared with JavaScript 7 ■ Ability to use languages other than JavaScript in the browser 7 ■ Opportunity for code reuse 7 1.3 How does it work? 8 Overview of how compilers work 9 ■ Loading, compiling, and instantiating a module 10 1.4 Structure of a WebAssembly module 11 Preamble 12 ■ Known sections 13 ■ Custom sections 13 1.5 WebAssembly text format 13vii

📄 Page 10

CONTENTSviii1.6 How is WebAssembly secure? 14 1.7 What languages can I use to create a WebAssembly module? 14 1.8 Where can I use my module? 15 2 A look inside WebAssembly modules 17 2.1 Known sections 19 2.2 Custom sections 23 3 Creating your first WebAssembly module 24 3.1 The Emscripten toolkit 25 3.2 WebAssembly modules 26 When would you not use a WebAssembly module? 27 3.3 Emscripten output options 28 3.4 Compiling C or C++ with Emscripten and using the HTML template 29 3.5 Having Emscripten generate the JavaScript plumbing code 34 Compiling C or C++ with Emscripten-generated JavaScript 34 Creating a basic HTML web page for use in browsers 37 3.6 Having Emscripten generate only the WebAssembly file 40 Compiling C or C++ as a side module with Emscripten 41 Loading and instantiating in a browser 43 3.7 Feature detection: How to test if WebAssembly is available 50 PART 2 WORKING WITH MODULES................................53 4 Reusing your existing C++ codebase 55 4.1 Using C or C++ to create a module with Emscripten plumbing 58 Making the C++ modifications 58 ■ Compiling the code into a WebAssembly module 63 ■ Creating the web page 64 Creating the JavaScript that will interact with the module 66 Viewing the results 71

📄 Page 11

CONTENTS ix4.2 Using C or C++ to create a module without Emscripten 72 Making the C++ modifications 72 ■ Compiling the code into a WebAssembly module 78 ■ Creating the JavaScript that will interact with the module 78 ■ Viewing the results 83 5 Creating a WebAssembly module that calls into JavaScript 85 5.1 Using C or C++ to create a module with Emscripten plumbing 88 Adjusting the C++ code 90 ■ Creating the JavaScript that you want included in Emscripten’s generated JavaScript file 92 Compiling the code into a WebAssembly module 93 ■ Adjusting the web page’s JavaScript code 94 ■ Viewing the results 96 5.2 Using C or C++ to create a module without Emscripten plumbing 97 Making the C++ modifications 99 ■ Compiling the code into a WebAssembly module 100 ■ Adjusting the JavaScript that will interact with the module 100 ■ Viewing the results 103 6 Creating a WebAssembly module that talks to JavaScript using function pointers 105 6.1 Using C or C++ to create a module with Emscripten plumbing 107 Using a function pointer given to the module by JavaScript 107 Adjusting the C++ code 108 ■ Compiling the code into a WebAssembly module 112 ■ Adjusting the web page’s JavaScript code 113 ■ Viewing the results 119 6.2 Using C or C++ to create a module without Emscripten plumbing 119 Using function pointers given to the module by JavaScript 120 Making the C++ modifications 121 ■ Compiling the code into a WebAssembly module 122 ■ Adjusting the JavaScript that will interact with the module 122 ■ Viewing the results 131 PART 3 ADVANCED TOPICS.........................................133 7 Dynamic linking: The basics 135 7.1 Dynamic linking: Pros and cons 136

📄 Page 12

CONTENTSx7.2 Dynamic linking options 137 Side modules and main modules 138 ■ Dynamic linking: dlopen 139 ■ Dynamic linking: dynamicLibraries 149 Dynamic linking: WebAssembly JavaScript API 153 7.3 Dynamic linking review 160 8 Dynamic linking: The implementation 163 8.1 Creating the WebAssembly modules 166 Splitting the logic in the validate.cpp file into two files 168 Creating a new C++ file for the Place Order form’s logic 171 Using Emscripten to generate the WebAssembly side modules 173 Defining a JavaScript function to handle an issue with the validation 177 ■ Using Emscripten to generate the WebAssembly main module 178 8.2 Adjusting the web page 180 Adjusting your web page’s JavaScript 183 ■ Viewing the results 192 9 Threading: Web workers and pthreads 195 9.1 Benefits of web workers 196 9.2 Considerations for using web workers 197 9.3 Prefetching a WebAssembly module using a web worker 198 Adjusting the calculate_primes logic 200 ■ Using Emscripten to generate the WebAssembly files 202 ■ Copying files to the correct location 203 ■ Creating the HTML file for the web page 203 Creating the JavaScript file for the web page 204 ■ Creating the web worker’s JavaScript file 207 ■ Viewing the results 207 9.4 Using pthreads 208 Adjusting the calculate_primes logic to create and use four pthreads 210 ■ Using Emscripten to generate the WebAssembly files 213 ■ Viewing the results 214 10 WebAssembly modules in Node.js 219 10.1 Revisiting what you know 220 10.2 Server-side validation 220 10.3 Working with Emscripten-built modules 222 Loading a WebAssembly module 222 ■ Calling functions in the WebAssembly module 223 ■ Calling into the JavaScript 227 Calling JavaScript function pointers 229

📄 Page 13

CONTENTS xi 10.4 Using the WebAssembly JavaScript API 231 Loading and instantiating a WebAssembly module 232 ■ Calling functions in the WebAssembly module 234 ■ The WebAssembly module calling into JavaScript 238 ■ The WebAssembly module calling JavaScript function pointers 241 PART 4 DEBUGGING AND TESTING .............................247 11 WebAssembly text format 249 11.1 Creating the game’s core logic using WebAssembly text format 252 The module’s sections 253 ■ Comments 255 ■ Function signatures 255 ■ The module node 256 ■ The import nodes 257 ■ The global nodes 261 ■ The export nodes 262 The start node 264 ■ The code nodes 264 ■ The type nodes 283 ■ The data node 285 11.2 Generating a WebAssembly module from the text format 286 11.3 The Emscripten-generated module 287 Creating the C++ file 288 ■ Generating a WebAssembly module 289 11.4 Creating the HTML and JavaScript files 290 Modifying the HTM8L file 290 ■ Creating the JavaScript file 291 11.5 Viewing the results 297 12 Debugging 300 12.1 Extending the game 301 12.2 Adjusting the HTML 302 12.3 Displaying the number of tries 304 The generateCards JavaScript function 305 ■ Adjusting the text format 306 ■ Generating the Wasm file 307 ■ Testing the changes 308 12.4 Incrementing the number of tries 310 The updateTriesTotal JavaScript function 311 ■ Adjusting the text format 311 ■ Generating the Wasm file 313 ■ Testing the changes 314 12.5 Updating the summary screen 321 The levelComplete JavaScript function 322 ■ Adjusting the text format 323 ■ Generating the Wasm file 324 ■ Testing the changes 325

📄 Page 14

CONTENTSxii13 Testing—and then what? 327 13.1 Installing the JavaScript testing framework 329 The package.json file 330 ■ Installing Mocha and Chai 330 13.2 Creating and running tests 331 Writing the tests 331 ■ Running the tests from the command line 335 ■ An HTML page that loads your tests 336 Running the tests from a browser 338 ■ Making the tests pass 338 13.3 Where do you go from here? 340 343Installation and tool setupappendix A ccall, cwrap, anappendix B 353d direct function calls 360Emscripten macrosappendix C 375Exercise solutionsappendix D 395Text format extrasappendix E index 411

📄 Page 15

preface Compared to my friends, I was a late bloomer when it came to programming. I only discovered it in high school by chance because I needed another computer course, and my guidance counselor suggested Computer Ed. I was expecting to learn about how computers work, but, much to my surprise, the course was about programming. It didn’t take long before I was hooked, and I adjusted my career direction from one dealing with building architecture to one in software architecture. In 2001, I landed a job with Dovico Software helping it maintain and improve its C++ client/server application. The winds of change were blowing, and in 2004, Dovico decided to switch to a software-as-a-service model, and I moved to the web application product. I still helped maintain the C++ applications, but my core focus became web development with C# and JavaScript. These days, I still do web development, but my focus has shifted to the architecture side of things—building APIs, working with data- bases, and exploring new technologies. I enjoy being able to give back to the developer community through blogs and pub- lic speaking. In September 2017, I was asked if I’d be interested in giving a presenta- tion at a local user group. As I was browsing for ideas on what I could talk about, I ran across an article from PSPDFKit that talked about a technology called WebAssembly (https://pspdfkit.com/blog/2017/webassembly-a-new-hope/). I had read about Google’s Native Client (PNaCI) technology, in which C or C++ compiled code could run in the Chrome web browser at near-native speeds. I’d also read about Mozilla’s asm.js technology, where you could compile C or C++ code to a subset of JavaScript and have it run really fast in browsers that supported it. In brows- ers that didn’t support asm.js, it would still run, but at normal speed, because it’s just JavaScript. Somehow, this was the first I’d heard of WebAssembly. xiii

📄 Page 16

PREFACExivWebAssembly takes the improvements that asm.js brought and aims to address its shortcomings. Not only can you write code in a number of different languages and compile it into something that works safely in a browser, but it’s already available in all major desktop and mobile browsers! It’s also available outside the browser, in places like Node.js! I was blown away by its potential and spent every spare moment from then on digging into the technology and blogging about it. Late in 2017, my blog posts were noticed by Manning Publications, and I was con- tacted to see if I would be interested in writing a book about WebAssembly. At first, the book was going to cover multiple languages as well as show you how to work with the technology from both a backend and frontend developer perspective. By the first review, however, it became obvious that the book wasn’t focused enough, so we decided that it would be best to narrow the scope to the C++ programming language and focus more on backend developers. The WebAssembly community and working groups haven’t been sitting still while I’ve been working on this book. In fact, several advancements to the technology are in the works. Recently, the ability to use multithreaded WebAssembly modules in the desktop version of Google Chrome became possible without the need to turn on a developer flag! WebAssembly has the potential to help bring web development to a whole new level, and I’m excited to see where things go.

📄 Page 17

acknowledgments I was told that writing a book took work and time, but I wasn’t expecting it to take as much work as it did! With help from my editors and reviewers, and feedback from those who purchased an early copy, I believe this has turned out to be a great book that will help you get started with WebAssembly. I need to thank a lot of people who made this book possible. First and foremost, I need to thank my family for their patience with me as I worked long into the evenings and on weekends and holidays, and even used up some vacation time to meet dead- lines. My wife Selena and my girls Donna and Audrey—I love you all very much! Next, thank you to my first editor at Manning, Kevin Harreld, who helped me get up and running with writing this book. Kevin later accepted a job at another company, giving me the opportunity and pleasure to work with Toni Arritola for the remainder of the book. Toni, thank you for your patience while working with me, your profes- sionalism, your honesty where you didn’t beat around the bush and told it like it was, and your desire for quality. Thank you to everyone at Manning who has played a role in this book, from mar- keting to production. Your tireless work is appreciated. Thank you to all the reviewers who took time out of their busy lives to read this book at the various stages of its development and gave constructive feedback, includ- ing Christoffer Fink, Daniel Budden, Darko Bozhinovski, Dave Cutler, Denis Kreis, German Gonzalez-Morris, James Dietrich, James Haring, Jan Kroken, Jason Hales, Javier Muñoz, Jeremy Lange, Jim Karabatsos, Kate Meyer, Marco Massenzio, Mike Rourke, Milorad Imbra, Pavlo Hodysh, Peter Hampton, Reza Zeinali, Ronald Borman, Sam Zaydel, Sander Zegveld, Satej Kumar Sahu, Thomas Overby Hansen, Tiklu Gan- guly, Timothy R. Kane, Tischliar Ronald, Kumar S. Unnikrishnan, Viktor Bek, and Wayne Mather.xv

📄 Page 18

ACKNOWLEDGMENTSxviSpecial thanks to my technical editor, Ian Lovell, who gave lots of invaluable feed- back throughout the process, and my technical proofreader, Arno Bastenhof, who gave the code one last review before the book went into production. And finally, a huge thank you to the browser makers that have worked together to bring a technology to market that will benefit the web for years to come. Thank you to the many people around the world continuing to work on improving WebAssembly and extend its reach. The possibilities are enormous for this technology, and I can’t wait to see where WebAssembly takes us.

📄 Page 19

about this book WebAssembly in Action was written to help you understand what WebAssembly is, how it works, and what you can and can’t do with it. It leads you through the various options for how you can build a WebAssembly module depending on your needs. It starts with simple examples and builds up to more advanced topics, like dynamic linking, parallel processing, and debugging. Who should read this book WebAssembly in Action is for developers with a basic understanding of C or C++, Java- Script, and HTML. While there’s WebAssembly information online, some of it is out- of-date and typically doesn’t go into a lot of detail or cover advanced topics. This book presents the information in an easy-to-follow format that will help both beginner and expert developers create and interact with WebAssembly modules. How this book is organized This book has 13 chapters that are divided into four parts. Part 1 explains what WebAssembly is and how it works. It also introduces you to the Emscripten toolkit, which you’ll use throughout this book to create WebAssembly modules:  Chapter 1 discusses what WebAssembly is, the problems it solves, and how it works. It also explains what makes it secure, which languages can be used to cre- ate WebAssembly modules, and where the modules can be used.  Chapter 2 explains how a WebAssembly module is structured and what each section of the module is responsible for.xvii

📄 Page 20

ABOUT THIS BOOKxviii Chapter 3 introduces you to the Emscripten toolkit and teaches you about the different output options available when creating a WebAssembly module. You’re also introduced to the WebAssembly JavaScript API. Part 2 leads you through the process of creating a WebAssembly module and interact- ing with it in a web browser:  Chapter 4 teaches you how to take an existing C or C++ codebase and adjust it so that it can also be compiled into a WebAssembly module. You’ll also learn how to interact with the module from your web page’s JavaScript.  Chapter 5 teaches you how to adjust the code you built in chapter 4 so that the WebAssembly module can now call into your web page’s JavaScript code.  Chapter 6 walks you through the process of modifying the WebAssembly mod- ule to work with function pointers passed to the module from your JavaScript code. This allows your JavaScript to specify functions on-demand and take advantage of JavaScript promises. Part 3 introduces advanced topics like dynamic linking, parallel processing, and work- ing with WebAssembly modules in places other than a web browser:  Chapter 7 introduces you to the basics of dynamic linking, in which two or more WebAssembly modules can be linked together at runtime to act as one.  Chapter 8 takes what you learned in chapter 7 and expands on it, teaching you how to create multiple instances of the same WebAssembly module and have each instance dynamically link to another WebAssembly module on-demand.  Chapter 9 teaches you about web workers and pthreads. In this chapter, you’ll learn how to prefetch WebAssembly modules as needed in a background thread of your browser using web workers. You’ll also learn how to do parallel process- ing in a WebAssembly module using pthreads.  Chapter 10 demonstrates that WebAssembly isn’t limited to a web browser. In this chapter, you’ll learn how to use several of your WebAssembly modules in Node.js. Part 4 digs into debugging and testing:  Chapter 11 teaches you about the WebAssembly text format by having you build a card-matching game.  Chapter 12 extends the card-matching game to show you the various options that are available to debug a WebAssembly module.  Chapter 13 teaches you how to write integration tests for your modules. Each chapter builds on what was learned in the previous chapters, so it’s best if they’re read in order. Developers should read chapters 1, 2, and 3 in sequence to understand what WebAssembly is, how it works, and how to use the Emscripten toolkit. Appendix A is also important so that you can get the tooling set up properly in order to follow along with the code in this book. The first two parts of the book cover the core