Table Of ContentModern Frontend Development
with Node.js
A compendium for modern JavaScript web development
within the Node.js ecosystem
Florian Rappl
BIRMINGHAM—MUMBAI
Modern Frontend Development with Node.js
Copyright © 2022 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted
in any form or by any means, without the prior written permission of the publisher, except in the case
of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information
presented. However, the information contained in this book is sold without warranty, either express
or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable
for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and
products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot
guarantee the accuracy of this information.
Group Product Manager: Pavan Ramchandani
Publishing Product Manager: Bhavya Rao
Senior Editor: Divya Anne Selvaraj
Technical Editor: Joseph Aloocaran
Copy Editor: Safis Editing
Project Coordinator: Manthan Patel
Proofreader: Safis Editing
Indexer: Hemangini Bari
Production Designer: Joshua Misquitta
Marketing Coordinator: Anamika Singh
First published: November 2022
Production reference: 1171122
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-80461-829-5
www.packt.com
Dedicated to every web developer out there. Always keep learning, keep innovating, and keep sharing.
Thanks for all your efforts and hard work!
– Florian Rappl
Contributors
About the author
Florian Rappl is a solution architect working on distributed web applications for digital transformation
and IoT projects. His main interest lies in the implementation of micro frontends and their impact on
teams and business models. In this area, he has led several teams, realizing many successful projects
over the last few years.
As the lead architect, he has helped to create outstanding web applications for many industry-
leading companies. He regularly gives lectures on software design patterns and web development.
Florian has won multiple prizes for his work over the years and is recognized as a Microsoft MVP
for development technologies.
He started his career in software engineering before studying physics and helping to build an energy-
efficient supercomputer. Florian currently lives in Munich, Germany, with his wife and their two daughters.
About the reviewers
Israel Antonio Rosales Laguan is an experienced full stack software engineer using JavaScript, React,
and Node.js with a focus on process improvement, developer ergonomics, systems integration, and
pipeline automation. He also has strong experience in international SCRUM teams and mentoring
others, working in Equinox, OnDeck, and Lazard, among others. Other expertise includes OWASP
compliance, GraphQL, CI/CD with Docker, and advanced CSS.
Abhishek Kumar Maurya is a senior software engineer with 12+ years of industry experience. He
currently works at Rippling, but has worked at various organizations such as Oracle India Pvt Ltd and
founded his own start-up. He graduated from Banaras Hindu University, Varanasi, and post-graduated
from NIT Trichy. He has worked on both the backend and frontend and is currently focusing on the
frontend with Node.js and React.
Table of Contents
Preface xi
Part 1: Node.js Fundamentals
1
Learning about the Internals of Node.js 3
Technical requirements 4 Using Node.js from the
Looking at the Node.js command line 10
architecture in detail 4 CommonJS 13
Understanding the event loop 7 Summary 15
2
Dividing Code into Modules and Packages 17
Technical requirements 18 Understanding SystemJS and
Using the ESM standard 18 import maps 26
Learning the AMD Knowing package.json
specification 20 fundamentals 29
Being universal with UMD 23 Summary 31
3
Choosing a Package Manager 33
Technical Requirements 33 Using Yarn 37
Using npm 34 Using pnpm 43
viii Table of Contents
More alternatives 46 Summary 47
Part 2: Tooling
4
Using Different Flavors of JavaScript 51
Technical requirements 52 Using TypeScript 61
Integrating Babel 52 Summary 64
Using Flow 59
5
Enhancing Code Quality with Linters and Formatters 65
Technical requirements 66 Introducing Stylelint 73
Understanding auxiliary Setting up Prettier and
tooling 66 EditorConfig 75
Using ESLint and alternatives 67 Summary 78
6
Building Web Apps with Bundlers 79
Technical requirements 80 Using esbuild 95
Understanding bundlers 80 Using Parcel 99
Comparing available bundlers 83 Using Vite 102
Using Webpack 89 Summary 104
7
Improving Reliability with Testing Tools 105
Technical requirements 106 Comparing test runners
Considering the testing versus frameworks 109
pyramid 106 Using the Jest framework 110
Table of Contents ix
Using the Mocha framework 114 Using Cypress for end-to-end
Using the AVA test runner 116 testing 120
Using Playwright for visual Summary 123
tests 118
Part 3: Advanced Topics
8
Publishing npm Packages 127
Technical requirements 127 Setting up Verdaccio 134
Publishing to the official Writing isomorphic libraries 136
registry 128 Publishing a cross-platform
Selecting another npm registry tool 139
via .npmrc 133 Summary 141
9
Structuring Code in Monorepos 143
Technical requirements 144 Working with Rush for larger
Understanding monorepos 144 repositories 152
Using workspaces to Integrating Turborepo instead
implement monorepos 147 of or with Lerna 154
Working with Lerna to Managing a monorepo with
manage monorepos 149 Nx to enhance Lerna 157
Summary 158
10
Integrating Native Code with WebAssembly 159
Technical requirements 159 Running WASM in Node.js 163
Advantages of using Writing WASM with
WebAssembly 160 AssemblyScript 164
Summary 167
