Book Image

Hands-On JavaScript High Performance

By : Justin Scherer
1 (1)
Book Image

Hands-On JavaScript High Performance

1 (1)
By: Justin Scherer

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Hands-On JavaScript High Performance
Justin Scherer
Feb, 2020 | 376 pages
Small book image
Node.js Design Patterns
Mario Casciaro | Luciano Mammino
Jul, 2020 | 664 pages
Small book image
Practical WebAssembly
Sendil Kumar Nellaiyapen
May, 2022 | 232 pages
Table of Contents (15 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
1
Tools for High Performance on the Web
Tools for High Performance on the Web
Technical requirements
DevTools for different environments
Chrome – an in-depth look at the Performance tab
Chrome – an in-depth look at the Memory tab
Chrome – an in-depth look at the Rendering tab
jsPerf and benchmarking
Summary
Free Chapter
2
Immutability versus Mutability - The Balance between Safety and Speed
Immutability versus Mutability - The Balance between Safety and Speed
Technical requirements
The current fascination with immutability
Writing safe mutable code
Functional style programming
Summary
3
Vanilla Land - Looking at the Modern Web
Vanilla Land - Looking at the Modern Web
Technical requirements
A dive into modern JavaScript
Understanding classes and modules
Working with the DOM
Understanding the Fetch API
Summary
4
Practical Example - A Look at Svelte and Being Vanilla
Practical Example - A Look at Svelte and Being Vanilla
Technical requirements
A framework for pure speed
Build the basics – a Todo application
Getting fancier – a basic weather application
Summary
5
Switching Contexts - No DOM, Different Vanilla
Switching Contexts - No DOM, Different Vanilla
Technical requirements
Getting Node.js
Understanding the DOM-less world
Debugging and inspecting code
Summary
6
Message Passing - Learning about the Different Types
Message Passing - Learning about the Different Types
Technical requirements
Local communication using the net module
Utilizing the network
A quick glance at HTTP/3
Summary
7
Streams - Understanding Streams and Non-Blocking I/O
Streams - Understanding Streams and Non-Blocking I/O
Technical requirements
Getting started with streams
Building a custom Readable stream
Building a Writable stream
Implementing a Duplex stream
Implementing a Transform stream
Using generators with streams
Summary
8
Data Formats - Looking at Different Data Types Other Than JSON
Data Formats - Looking at Different Data Types Other Than JSON
Technical requirements
Using JSON
Implementing the encoder
Implementing the decoder
A look at data formats
Summary
9
Practical Example - Building a Static Server
Practical Example - Building a Static Server
Technical requirements
Understanding static content
Setting up our server
Adding caching and clustering
Summary
10
Workers - Learning about Dedicated and Shared Workers
Workers - Learning about Dedicated and Shared Workers
Technical requirements
Offloading work to a dedicated worker
Moving data in our application
Sending binary data in the browser
Sharing data and workers
Building a simple shared cache
Summary
11
Service Workers - Caching and Making Things Faster
Service Workers - Caching and Making Things Faster
Technical requirements
Understanding the ServiceWorker
Caching pages and templates for offline use
Saving requests for later
Summary
12
Building and Deploying a Full Web Application
Building and Deploying a Full Web Application
Technical requirements
Understanding Rollup
Integrating into CircleCI
Summary
13
WebAssembly - A Brief Look into Native Code on the Web
WebAssembly - A Brief Look into Native Code on the Web
Technical requirements
Understanding WebAssembly
Writing WebAssembly modules
Writing C/C++ for the web
A look at SQLite in the browser
Summary
Further reading
14
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Understanding the ServiceWorker

A ServiceWorker is a proxy that sits between our web applications and the server. It catches requests that are made and checks if there is a pattern that matches it. If a pattern matches it, then it will run the code that fits that pattern. Writing code for a ServiceWorker is a bit different than it is for SharedWorker and DedicatedWorker, which we looked at previously. Initially, we set it up in some code and it downloads itself. We have various events that tell us the stage that the worker is in. These run in the following order:

  1. Download: The ServiceWorker is downloading itself for the domain or subdomain.
  2. Install: The ServiceWorker is attaching itself to the domain or subdomain where it is hosted.
  3. Activate: The ServiceWorker is fully attached and is loaded up to intercept requests.

The install event is especially important. This is where we...

Previous Section
End of Section 3
Next Section