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

Chrome – an in-depth look at the Performance tab

As stated before, except for a select few tools inside Firefox, Chrome has become widely ubiquitous as the browser of choice for users and developers. For developers, this can be in large part thanks to its wonderful developer tools. The following sections are going to take a look at three critical tools that are important to any developer when designing web applications. We will start with the performance tool.

This tool allows us to run performance tests while our application is running. This is great if we want to see how our application behaves when certain things are done. For example, we can profile our application's launch state and see where possible bottlenecks are located. Or, when user interaction happens, such as a submit on a form, we can see the call hierarchy that we go through to post the information...

Previous Section
End of Section 4
Next Section