Full Stack JavaScript Strategies (Milecia McGregor) (Z-Library)

Full Stack JavaScript Strategies The Hidden Parts Every Mid-Level Developer Needs to Know Milecia McGregor

Full Stack JavaScript Strategies by Milecia McGregor Copyright © 2025 Milecia McGregor. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com. Acquisitions Editor: Amanda Quinn Development Editor: Virginia Wilson Production Editor: Christopher Faucher Copyeditor: Shannon Turlington Proofreader: Vanessa Moore Indexer: Ellen Troutman-Zaig Interior Designer: David Futato Cover Designer: Karen Montgomery Illustrator: Kate Dullea January 2025: First Edition Revision History for the First Edition

2025-01-09: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781098122256 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Full Stack JavaScript Strategies, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. The views expressed in this work are those of the author and do not represent the publisher’s views. While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights. 978-1-098-12225-6 [LSI]

Preface My goal with this book is to give you a reference—kind of a sanity check— for when you’re working on either greenfield or legacy projects across the frontend and backend and handling deployments. Some questions are relevant for both types of projects, like how you’ll handle testing, performance, and security. Many applications have core commonalities that you can use regardless of the industry you work in. When those moments come where you find yourself questioning why you’ve never heard of something, hopefully this book will make you feel more confident asking those “simple” questions.

Who This Book Is For If you are trying to figure out how senior devs seem to magically know how everything works and how they understand complex concepts so quickly, I’m going to show you how. At this point in your career, you’ve probably been working as a software developer for a few years. You know how to complete your tasks with solid code regardless of whether it’s on the frontend or backend. While you may have some knowledge across the full stack, it’s likely you focus on one part of the stack over the other. On the frontend, you should be familiar with making responsive layouts, fetching data from APIs, and using some of the frameworks, such as React, Astro, or Svelte. On the backend, you’ve done some database migrations, built some APIs, and handled some basic authentication flows. You also have skills like using Git with any of the repo hosting services, such as GitHub or GitLab, and using different tools to test your changes. You may have worked on one project for years, or you may have hopped around projects, but the scope of your work has typically fallen under some of the concepts mentioned. Now you’re ready to move to the next level in your career. That means learning how the whole system works and why technical decisions are made. That’s what will be covered in this book. What You Will Learn At the highest level, what you’re going to learn in this book is everything it takes to create a full stack web application hosted on a cloud platform. You’re going to learn how to find where the business logic for every app comes from. You’re going to gain some intuition for how to decide between different architectures, third-party services, and tools to create a maintainable application. You’re going to learn the subtle yet deep skills it takes to become a senior developer. This book is going to give you strategies for working with different teams and understanding how product

decisions are made. You’ll also deepen your existing skills to cover the full stack confidently. Regardless of whether you start on the frontend or backend, you’re going to learn about design and development principles and when to apply them. You’ll learn all these things as you go through the software development lifecycle (SDLC) of a project in this book and build a production-like application. Think of this book as a reference you can pick up at any point in the SDLC and use as a checklist. You will learn all the essential parts that need to be considered for app development so that you know exactly what to do when a question comes up. By the time you finish, you’ll know how, why, and when to make technical decisions and how the business requirements evolve.

What This Book Is Not This book is not a deep dive into any specific set of tools, and it will not teach you general JavaScript programming. A large range of topics will be covered in this book, with accompanying examples to demonstrate senior- level considerations, but it is expected that you know how to read code, debug issues, and find additional learning resources. Since so many topics are covered, strategies will be discussed along with the code. These strategies are meant to be tools you can bring to any project you work on, although they may not work on every project. There isn’t a single approach that would work for any two projects because everything has its own nuances. So the goal is to give you a number of options you can choose from as needed. Some parts of the book will need a much deeper explanation than a chapter or section can provide. No book can adequately cover all the topics presented here, and I want to make sure you get all the information you need. So while some topics will be light on the full implementation details, there will always be links to complementary resources.

How This Book Is Organized Part I, “Starting Your New Project”, will be relatively short and will cover how you translate designs into tasks and questions that you’ll have to ask the Product team and other teams. This is when you’ll get your first introduction to where the business logic comes from. Part II, “Building the Backend”, focuses on creating the backend of this project. You’ll work with NestJS as we walk through a number of considerations, like security and third-party services, for development. After you have the backend ready, you’ll switch over to Part III, “Building the Frontend”, where you’ll work with a React project. You’ll build the UI for this project and cover concerns associated with frontend apps, such as responsiveness and performance. Finally, in Part IV, “Deploying the Full Stack App”, you’ll dive into the details of connecting the frontend, backend, and other systems to build and deploy a full stack app to production. By the time you finish this book, you should feel comfortable jumping into any part of a project and asking questions that will help clarify tasks as well as provide technical advice. You’ll notice that each part of the book varies in length. That’s because it’s supposed to help break down where a lot of time really gets spent during development. Some parts of a project take more time than others or have different feedback cycles. This book is trying to reflect real-world conditions as closely as possible. To add to the real-world feel of this book, I’ve incorporated some opinions and thoughts from other software engineers throughout the chapters. Ethan Brown is the founder of OptionLab and author of Learning JavaScript, 3rd Edition (O’Reilly) and Web Development with Node and Express, 2nd Edition (O’Reilly). Jeff Graham is the Head of Engineering at Proxima AI and previously worked in financial technology (fintech), education technology (edtech), media, and ecommerce.

Conventions Used in This Book The following typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. Constant width Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords. Constant width italic Shows text that should be replaced with user-supplied values or by values determined by context. TIP This element signifies a tip or suggestion. NOTE This element signifies a general note. WARNING This element indicates a warning or caution. Using Code Examples

Supplemental material (code examples, exercises, etc.) is available for download at https://github.com/flippedcoder/dashboard-web and https://github.com/flippedcoder/dashboard-server. If you have a technical question or a problem using the code examples, please send email to support@oreilly.com. This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission. We appreciate, but generally do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Full Stack JavaScript Strategies by Milecia McGregor (O’Reilly). Copyright 2025 Milecia McGregor, 978-1-098-12225-6.” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com. O’Reilly Online Learning NOTE For more than 40 years, O’Reilly Media has provided technology and business training, knowledge, and insight to help companies succeed. Our unique network of experts and innovators share their knowledge and expertise through books, articles, and our online learning platform.

O’Reilly’s online learning platform gives you on-demand access to live training courses, in-depth learning paths, interactive coding environments, and a vast collection of text and video from O’Reilly and 200+ other publishers. For more information, visit https://oreilly.com. How to Contact Us Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-889-8969 (in the United States or Canada) 707-827-7019 (international or local) 707-829-0104 (fax) support@oreilly.com https://oreilly.com/about/contact.html We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at https://oreil.ly/full- stack-javascript. For news and information about our books and courses, visit https://oreilly.com. Find us on LinkedIn: https://linkedin.com/company/oreilly-media. Watch us on YouTube: https://youtube.com/oreillymedia.

Acknowledgments First, I’d like to thank my grandma, Carol Matthews, for listening to me endlessly rant about writing this book for the past 2 years. Any time I needed to vent, she was always there. I want to thank all of the people I’ve worked with at O’Reilly that have made this experience so smooth. Virginia Wilson, I couldn’t have made it through all of the edits and feedback without you! Amanda Quinn, thank you for handling all of the behind-the-scenes things and coordinating with everyone! A big, big thank you to Ethan Brown for all of the very thoughtful, thorough feedback you gave me over the course of writing this book. I learned a lot from your comments and resources you showed me. Another thank you to Adam Scott for all the feedback and suggestions throughout the book. I also want to thank my sister, Soleil Gibbs, and close friends for listening to me talk about this book when I was low on energy or I ran into a difficult section. They helped me push through when I really didn’t want to. Another huge source of motivation was my husband who gave me the time and space I needed to get through this journey. This definitely wasn’t a solo process and I couldn’t be more thankful for everyone that was a part of this journey, in big and small ways.

Part I. Starting Your New Project

Chapter 1. Kicking Off the Project Welcome to the team! If you’re like most readers of this book, you’re a frontend or backend developer, but you would like to be a senior-level full stack developer. Now imagine fast-forwarding to that point in your career: you’re a new, senior, full stack JavaScript developer. That means you’re responsible for helping drive the technical direction of the project and coordinating efforts across different teams to get software to users. Your task is to start a greenfield app, a project you get to build from scratch with no existing code, based on designs and conversations with a number of teams. Let’s break down what you’ll learn in this chapter: How to work with several other teams to fully define features How to take a design and break it into small, actionable tasks How to determine the data you’ll need to work with The Project You’ll Build The project you’ll be building as you work through the book will be an ecommerce platform that has access to a lot of user data, including some personally identifiable information (PII), and that connects with multiple third-party services. You and your team have been tasked with creating a user dashboard so that customers can make purchases, see information about their order history and other actions they have taken, and interact with their digital purchases, like ebooks. They’ll also be able to take different actions based on their permissions within the app.

You’re starting with a fresh Product team and a Design team that you’ll work with to make this dashboard a reality. The Product team will be responsible for talking with different stakeholders to decide what features should be built. The Design team will be responsible for making the UI for those features and doing the first pass at the user experience. The first part of the project will likely involve the Product and Design teams working closely together to make some mock screens for you and some behavioral docs. These mocks will be shown to you and discussed in a project kickoff meeting. Project Kickoff Meeting The kickoff meeting typically involves the Product team going through the mocks the Design team has made. It’s very likely that these mocks will change as you go through development, but they should be about 80% of the way there. They’ll take you through the user flow, show you how users interact with the app, and give you an idea of the data you need. At this point in the project, get comfortable asking a lot of questions. Usually, you’ll think of things when you start looking at the designs from a technical perspective that the Product or Design teams haven’t considered. TIP Make sure that in this initial meeting you do some introductions so that everyone knows who they’re working with. It’s easy to dive into the work immediately, but remember that it’s just as important to get to know your coworkers. Remember, this whole process is very collaborative. Asking questions early and often will make things go more smoothly as the project moves forward. Right now, only two screens need to be built for a proof of concept, although Product has told you that the functionality will expand over time. Let’s take a look at these screens and go through the user flow.

The screenshots are from a commonly used design tool called Figma. There’s usually a design somewhere that visually describes how the app flows. As you move through the engineering process, you’ll focus on one of these views at a time, like the user info screen in Figure 1-1. Figure 1-1. User info screen design in Figma Figure 1-2 shows a screen where users can see their information, such as orders, suggested products, and other details. This is also where users edit their information, such as their address, and where they can cancel orders and see their digital purchases.

Figure 1-2. User actions screen design in Figma The design in Figure 1-3 shows how these views should look on mobile devices. Most projects that interact with external users will have mobile designs. If you don’t see these designs, make sure you ask about them!

Figure 1-3. App designs with mobile view in Figma A lot of designers use Figma when they create the mocks for an app or a particular feature. Some other tools you might run into include InVision (now Miro) or the newer alternative, Penpot. The Figma designs also have the HTML and CSS in them, so they can be useful for developers when they want to check dimensions while arranging elements on the page.

Although the CSS is there, it’s not always completely accurate. You can use them as a starting point, but make sure to modify the styles to meet the requirements. By the time you see these mock designs, Product and Design will have had several meetings to iron out as much detail as they can. That doesn’t mean they’ll have everything figured out, and that’s where you come in. Based on these designs and the explanations of how a user will interact with the app, you have to work with your team to decide the technical approach you want to take. Let’s walk through these designs just as you would with your Product team. On the first screen (Figure 1-1), there are: A navigation bar on the side of the page with links to other areas in the app A search bar at the top of the page to help find products A featured products section, along with the user’s most recent order A sortable, paginated table with several columns that displays all the user’s orders Several sections on the second screen (Figure 1-2) have fields that the user can interact with. Users can toggle a few settings, update fields, and take actions based on their purchases. This screen has more complexity than the first screen, so you’ll want to take the time to really go through this with the team. Product and Design will often turn to you as the senior developer on the team for the final say on technical decisions.