Hands-On JavaScript High Performance

Build faster web apps using Node.js, Svelte.js, and WebAssembly

Justin Scherer

• Publisher: Packt Publishing
• Year: 2020
• Print ISBN: 9781838821098
• eBook ISBN: 9781838825867
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

An example-driven guide covering modern web app development techniques and emerging technologies such as WebAssembly, Service Workers, and Svelte.js to build faster, secure, and scalable apps

Key Features

• Discover effective techniques for accessing DOM, minimizing painting, and using a V8 engine to optimize JavaScript
• Understand what makes the web tick and create apps that look and feel like native desktop applications
• Explore modern JavaScript frameworks like Svelte.js for building next-gen web apps

Book Description

High-performance web development is all about cutting through the complexities in different layers of a web app and building services and APIs that improve the speed and performance of your apps on the browser. With emerging web technologies, building scalable websites and sustainable web apps is smoother than ever.

This book starts by taking you through the web frontend, popular web development practices, and the latest version of ES and JavaScript. You'll work with Node.js and learn how to build web apps without a framework. The book consists of three hands-on examples that help you understand JavaScript applications at both the server-side and the client-side using Node.js and Svelte.js. Each chapter covers modern techniques such as DOM manipulation and V8 engine optimization to strengthen your understanding of the web. Finally, you'll delve into advanced topics such as CI/CD and how you can harness their capabilities to speed up your web development dramatically.

By the end of this web development book, you'll have understood how the JavaScript landscape has evolved, not just for the frontend but also for the backend, and be ready to use new tools and techniques to solve common web problems.

What you will learn

• Explore Vanilla JavaScript for optimizing the DOM, classes, and modules, and querying with jQuery
• Understand immutable and mutable code and develop faster web apps
• Delve into Svelte.js and use it to build a complete real-time Todo app
• Build apps to work offline by caching calls using service workers
• Write C++ native code and call the WebAssembly module with JavaScript to run it on a browser
• Implement CircleCI for continuous integration in deploying your web apps

Who this book is for

This JavaScript book is for web developers, C/C++ programmers, and anyone who wants to build robust web applications using advanced web technologies. This book assumes a good grasp of Vanilla JavaScript and an understanding of web development tools, such as Chrome Developer tools or Mozilla's developer tools.

WebAssembly - A Brief Look into Native Code on the Web

The past few chapters have been all about how to leverage JavaScript in the modern web landscape. We have looked at frontend development, backend development, and even building and deploying applications through continuous integration and continuous deployment (CI/CD). Now, we are going to take a step back and look at two topics that can help enhance our development with native speed code.

WebAssembly is a specification for assembly for the web. Assembly is a one-to-one mapping for the language that computers understand. WebAssembly, on the other hand, is a one-to-one mapping for a virtual computer that can run these instructions. In this chapter, we will explore WebAssembly and how we can port native applications to the browser.

Overall, we will explore the following topics:

• Understanding WebAssembly
• Setting up our environment to write WebAssembly
• Writing WebAssembly modules
• Porting C applications
• Taking a look at a major application

By the end of this chapter, we should be able to develop not only in the WebAssembly text format but also in C for the web. We will also be able to turn binary WebAssembly into its text format in order to diagnose possible issues with our ported applications.

Technical requirements

We will need the following tools for this chapter:

• An editor, such as VS Code.
• Access to build and compile programs on our computer. This may mean needing administrator privileges in some environments.
• This chapter's code, which can be found at https://github.com/PacktPublishing/Hands-On-High-Performance-Web-Development-with-JavaScript/tree/master/Chapter13.

Understanding WebAssembly

WebAssembly is a specification for an instruction set that can be run on a machine. In our case, this machine is virtual. To comprehend how this translates into native speed applications and why the instructions are written the way they are, we need to have a basic understanding of how a program functions inside our computer. To understand WebAssembly, we will look at the following topics:

• Understanding the flow of a basic program
• Setting up our environment to code WebAssembly

Understanding a program

Let's take a look at a very basic C program:

#include <stdio.h>
int main() {
 printf("Hello, World!");
 return 0;
}

This program has an entry point. In our case, it is the main function. From here, we utilize a function that is declared in the stdio header file (a header file gives us function declarations so that we don't have to fully import all of the code into this file). We utilize the printf function to print out Hello, World! to the console and then we return with a 0 to signify that we have a successful program.

Since we won't be talking about the C/C++ code that we will be writing in depth, for those that are interested, a great resource is https://www.learn-c.org/.

While this is a program in a format that we, as programmers, generally understand, it needs to be turned into a format that the computer will actually understand. This means it needs to be compiled. This compilation process involves bringing in any external files (stdio, in this case) and linking them in. This also means we need to turn each of our instructions into one or more computer instructions.

Once the process of linking and compilation happens, we will usually get a binary file that can be read by our computer. If we opened this file in a byte reader, we would see a bunch of hexadecimal numbers. Each of these numbers corresponds to the instructions, data points, and so on, that we put in our file.

Now, this is just a basic understanding of how a program gets turned into something our computer understands and how the binary we created is understood by the computer. On most machines, a program runs as a stack of instructions and data. This means that it pulls instructions off of the top of the stack one at a time. These instructions can be anything from loading this number into a location or adding these two numbers together. As it peels these instructions off, it discards them.

We can store various pieces of data local to this stack, or we can store data at a global level. Those local to the stack are held on exactly that—the stack. Once that stack has been exhausted, we no longer have access to those variables.

The global ones are put into a location called the heap. The heap allows us to grab the data from anywhere in our system. Once the stack of our program has been exhausted, those heap objects can be left there if our program is still running.

Finally, we get a stack per function that we write. Because of this, we can treat each function as a mini-program. This means it will perform one task or a couple of tasks and then it will be exhausted, and we will go back to the stack of the function that called us. We can do two things when we exhaust this stack. The first thing we can do is go back to the stack of the function that called us with no data. Alternatively, we could give some data back (this is the return statement that we see in most languages).

Here, we can share data through these two mechanisms either by returning values from one of our subfunctions or by putting our results onto the heap so that others can access them. Putting it on the heap means that it will last for the duration of our program, but it also needs to be managed by us, whereas if we return values from the stack, it will be cleaned up as soon as the function that called us is exhausted. Most of the time, we will use simple data and return it through the stack. For complicated data, we will put it on the heap.

Before we look at WebAssembly, there's one final note you should know about: if we put data on the heap, we need to tell other parts of our program where to find that data. To do this, we pass a pointer to that location. This pointer is just an address that tells us where to find this data. We will be utilizing this in our WebAssembly code.

The topic of computers and how programs work is quite interesting. For those of you who are interested, it may be beneficial to take a formal course at a community college. For those that like to self-learn, the following resource is of great help: https://www.nand2tetris.org/.

Now, let's set up our environment so that we can program in WebAssembly.

Setting up our environment

To program in WebAssembly, we need to get the wat2wasm program on our machine. The best way to do this is to download the repository for the WebAssembly suite of programs and get them compiled for our computer. Follow these steps to do so:

1. We need to get a program called CMake onto our system. For Linux/OS X, this just means going to https://cmake.org/download/ and running the installer. For those of you who are on Windows, this is a bit lengthier. Go to https://visualstudio.microsoft.com/vs/ and get Visual Studio. Make sure to get the C/C++ modules for it. With both CMake and Visual Studio on our machines, we can now move on and compile the WebAssembly suite of tools.
2. Head to https://github.com/WebAssembly/wabt and clone to an easily accessible location.
3. Open the CMake GUI tool. It should loo...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• About Packt
• Contributors
• Preface
• Tools for High Performance on the Web
• Immutability versus Mutability - The Balance between Safety and Speed
• Vanilla Land - Looking at the Modern Web
• Practical Example - A Look at Svelte and Being Vanilla
• Switching Contexts - No DOM, Different Vanilla
• Message Passing - Learning about the Different Types
• Streams - Understanding Streams and Non-Blocking I/O
• Data Formats - Looking at Different Data Types Other Than JSON
• Practical Example - Building a Static Server
• Workers - Learning about Dedicated and Shared Workers
• Service Workers - Caching and Making Things Faster
• Building and Deploying a Full Web Application
• WebAssembly - A Brief Look into Native Code on the Web
• Other Books You May Enjoy