Hands On JavaScript High Performance: Build faster web apps using Node.js, Svelte.js and WebAssembly

Explore the advancements in web development like WebAssembly, Service Workers, and Svelte.js for building faster and secure web applications 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 About 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. 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 Cover Title Page Copyright and Credits Dedication About Packt Contributors Table of Contents Preface Chapter 1: Tools for High Performance on the Web Technical requirements DevTools for different environments Edge Safari Firefox Chrome 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 Chapter 2: Immutability versus Mutability - The Balance between Safety and Speed Technical requirements The current fascination with immutability A dive into Redux Immutable.js Writing safe mutable code Resource allocation is initialization (RAII) Functional style programming Lazy evaluation Tail-end recursion optimization Currying Summary Chapter 3: Vanilla Land - Looking at the Modern Web Technical requirements A dive into modern JavaScript Let/const and block scoping Arrow functions Collection types Reflection and proxies Other notable changes Spread operator Destructuring Power operator Parameter defaults String templates Typed arrays BigInt Internationalization Understanding classes and modules Other notable features Modules Working with the DOM Query selector Document fragments Shadow DOM Web components Templates Understanding the Fetch API Promises Back to fetch Stopping fetch requests Summary Chapter 4: 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 Chapter 5: Switching Contexts - No DOM, Different Vanilla Technical requirements Getting Node.js Overview of the package.json file Understanding the DOM-less world A first look at streams A high-level look at modules fs module net module http module Debugging and inspecting code Summary Chapter 6: Message Passing - Learning about the Different Types Technical requirements Local communication using the net module Understanding the cluster module Common pitfalls for new developers Utilizing the network TCP/UDP HTTP/2 A quick glance at HTTP/3 The QUIC protocol A look at node-quic Summary Chapter 7: Streams - Understanding Streams and Non-Blocking I/O Technical requirements Getting started with streams Building a custom Readable stream Understanding the Readable stream interface Implementing the Readable stream Building a Writable stream Understanding the Writable stream interface Implementing the Writable stream Implementing a Duplex stream Implementing a Transform stream Understanding the Transform stream interface Implementing a Transform stream Using generators with streams Summary Chapter 8: 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 Chapter 9: Practical Example - Building a Static Server Technical requirements Understanding static content Starting our application Setting up our templating system Setting up our server Adding caching and clustering Summary Chapter 10: 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 Chapter 11: Service Workers - Caching and Making Things Faster Technical requirements Understanding the ServiceWorker Caching pages and templates for offline use Saving requests for later Summary Chapter 12: Building and Deploying a Full Web Application Technical requirements Understanding Rollup Building our static server into a single distributable Adding other file types to our distribution Bringing rollup into Node.js commands Integrating into CircleCI Adding our build steps Deploying our build Summary Chapter 13: WebAssembly - A Brief Look into Native Code on the Web Technical requirements Understanding WebAssembly Understanding a program Setting up our environment Writing WebAssembly modules Sharing memory between WebAssembly and JavaScript Writing FizzBuzz in WebAssembly Writing C/C++ for the web Writing a hamming code generator A look at SQLite in the browser Summary Further reading Other Books You May Enjoy Index 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 appsKey FeaturesDiscover effective techniques for accessing DOM, minimizing painting, and using a V8 engine to optimize JavaScriptUnderstand what makes the web tick and create apps that look and feel like native desktop applicationsExplore modern JavaScript frameworks like Svelte.js for building next-gen web appsBook DescriptionHigh-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 learnExplore Vanilla JavaScript for optimizing the DOM, classes, and modules, and querying with jQueryUnderstand immutable and mutable code and develop faster web appsDelve into Svelte.js and use it to build a complete real-time Todo appBuild apps to work offline by caching calls using service workersWrite C++ native code and call the WebAssembly module with JavaScript to run it on a browserImplement CircleCI for continuous integration in deploying your web appsWho this book is forThis 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. 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 developmen..