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

Preface....5

Who This Book Is For....5

What You Will Learn....6

What This Book Is Not....7

How This Book Is Organized....8

Conventions Used in This Book....10

Using Code Examples....10

OReilly Online Learning....11

How to Contact Us....12

Acknowledgments....13

I. Starting Your New Project....14

1. Kicking Off the Project....15

The Project Youll Build....15

Project Kickoff Meeting....16

Design Considerations....21

Data-Driven Design....24

Breaking Down Designs into Tasks....25

Refining Tasks from Feature Requirements....26

Discussing Timelines with Product and Other Teams....29

Talking to Other Development Teams....29

Coordinating with DevOps....31

Working with QA....34

Planning with Support....36

Conclusion....38

II. Building the Backend....40

2. Setting Up the Backend....41

Why NestJS?....41

Choosing a Project Approach....42

Setting Up NestJS....43

Testing the Backend Locally....45

Updating the README....47

Adding a CHANGELOG....48

Monolith and Microservice Architectures....49

Alternative Architectures to Consider....52

Selecting an API Design Pattern: REST and GraphQL....53

Conclusion....56

3. Building the Data Schema....57

Initial Considerations....58

Diagramming the Data Schema....59

Setting Up Postgres....62

Deciding What ORM to Use....65

Writing Migrations....69

Seeding the Database....71

Conclusion....74

4. REST APIs....75

Making Sure the Frontend and Backend Agree....76

Creating a Document for Conventions....78

Making the API and First Endpoint....80

Creating the Orders Endpoints....81

Working on the Orders Service....83

Checking the Database Connection....85

Conclusion....85

5. Third-Party Services....87

Choosing a Third-Party Service....88

List of Potential Services....90

Integrating Stripe....93

Writing the Controller....96

Writing the Service....99

Conclusion....100

6. Background Jobs....102

Updating the Backend Architecture....103

Using Cron Jobs....107

Alerts and Monitoring....109

Logging....110

Issues with Data Sync and Task Execution....110

Future Considerations....111

Conclusion....111

7. Backend Testing....113

Why Spend the Time on Tests....113

How to Approach Test Writing....115

Mock Data....122

Conclusion....124

8. Backend Security Considerations....126

Authentication....127

Authorization....129

OWASP Top 10....134

Other Noteworthy Practices....136

Conclusion....139

9. Backend Debugging....140

Detailed Log Messages....141

Environment Configurations....148

Strategies for Tracing Bugs....150

Helping Other Devs Debug....153

Debugging Checklist....155

Conclusion....158

10. Backend Performance....159

Metrics....160

Alerts and Monitoring....164

Caching....166

Cache Strategies....167

Types of Caching....169

Cache Implementation with Redis....170

Product Considerations....172

Conclusion....173

11. Scalability Considerations....174

Types of Scaling....174

Vertical Scaling....175

Horizontal Scaling....175

Hybrid Scaling....176

Resource Scaling....176

Scaling Best Practices....177

Make a Plan....177

Document the Plan....179

Run Tests....179

Communicate Progress....181

Start Shifting Traffic....182

Conclusion....183

12. Monitoring, Logging, and Incident Handling....185

Uses for Logs and Monitoring....185

Use Logs for Debugging....186

Use Monitoring to Inform Your Actions....188

Monitoring and Logging Tools....189

Incident Playbooks....194

Playbook Stages....195

Incident Response Template....199

Blameless Postmortems....200

Conclusion....202

III. Building the Frontend....204

13. Setting Up the Frontend....205

Frontend Architecture Decisions....206

Choosing a Frontend Framework....209

App Setup Options....212

Common Components....212

Choosing Packages....213

Working with Other Teams....218

Conclusion....219

14. Building the React App....220

Set Up the Initial React App....220

Set Up Linters and Formatters....221

Set Up the Build Configs....224

Set Up Styles....226

Set Up Testing....229

Set Up CHANGELOG and README....230

Run the App Locally....231

Build the First Feature....233

Project Structure....233

Set Up Routing....235

Update the Root of the App....236

Conclusion....238

15. State Management....240

How Component State Works....240

useState....241

useReducer....242

useContext....243

Knowing What App Level to Manage State In....244

Different Approaches to State Management....244

Setting Up the State Manager....246

Conclusion....248

16. Data Management....249

Potential Tools for Fetching Data....250

Handling API Calls with Axios and TanStack Query....252

The .env File....253

Handling Loading States....257

Handling Error States....259

Configuring Request Headers....260

When to Check on Backend Functionality....261

Conclusion....262

17. Custom Styles....263

Accessibility....263

Making an Accessible Form....265

Checking Your Accessibility Implementations....268

More Accessibility Considerations....271

Consistent Designs....271

Custom Themes....272

Responsive Design....274

Conclusion....276

18. Frontend Error Handling....278

Error Boundary Approaches....279

Error Components....282

Logging Errors....286

User Validation Errors....287

API Errors....290

Conclusion....292

19. Frontend Security Considerations....293

Common Vulnerabilities....294

Business Logic Validation....294

Session Management....295

Package Version Maintenance....297

Input Validation....298

Other Principles....300

How to Check Your Own App....301

Conclusion....302

20. Frontend Performance....303

Benchmark Metrics....304

Lighthouse Tools....305

Sitespeed.io....309

Areas for Improvement....311

Bundle Size Analysis....312

Build Configurations....313

Caching Configuration....315

Lazy Loading....317

Prefetching....320

CSS, Images, and Fonts....321

Conclusion....322

21. Frontend Testing....323

Determining Test Scenarios....323

Unit Tests....324

Jest and React Testing Library....324

Vitest....324

Mock Service Worker....328

E2E Testing with Cypress....329

Conclusion....330

22. Frontend Debugging....332

The Debugging Process....332

Looking Through Logs....333

Checking the Code....336

Using console.log Messages....337

Using Breakpoints....338

Using Unit Tests....339

Using Git....339

Using the Browser Devtools....341

The Elements Tab....341

The Sources Tab....345

The Network Tab....347

The Application Tab....349

Debugging in Other Environments....351

Debugging in Unexpected Places....351

Conclusion....353

IV. Deploying the Full Stack App....355

23. Full Stack Deployment Setup....356

Teams Involved in Deploys....357

Backend and Frontend Connection Steps....358

Backend Steps....359

Frontend Steps....362

Cleanup Steps....366

Documentation and Maintenance Steps....367

Conclusion....368

24. Integration Testing....370

The Test Cases....371

End-to-End Tests with Cypress....371

End-to-End Tests with Playwright....374

End-to-End Tests with Nightwatch....381

Comparison Between Packages....385

Conclusion....387

25. Making Deployments....388

Deploying Frontend-Only or Backend-Only Updates....389

Deploy Strategies....390

Release Dates....391

Version Releases....395

Blue-Green Deploys....397

Canary Deploys....398

Strategies for Doing Rollbacks....400

Deploying Older Versions....400

Reverting or Resetting PRs....400

Deploying a Hotfix....404

Conclusion....405

26. Integration Concerns....406

Frontend and Backend Concerns....407

Third-Party Service Concerns....409

Data and Security in Production....411

Containerization of Your App....413

Conclusion....418

27. Building a CICD Pipeline....420

Creating Your Own Pipeline....421

Speed Considerations....423

Git Hooks....424

GitHub Configs....429

CircleCI Configs....430

Environment Pipelines....434

Feature Environment....434

Development Environment....435

Staging Environment....435

Production Environment....435

Environment Variables....436

Conclusion....438

28. Git Management....439

Branching Strategies....439

Common Branches and Merge Flow....440

PR Reviews....441

Branches for Smaller Functionality....443

Feature Branches for Larger Implementations....444

Squashing Commits....446

Rebasing and Merging Branches....452

Handling Merge Conflicts....457

Discuss with the Dev Who Made Changes....457

Use git bisect to Find the Affected Files....458

Manually Compare File Changes....460

Conclusion....461

29. Project Management....463

Sprint Discussions....464

Estimates....464

Dev Capacity....465

Feature Requirements....466

Dev Team Ticket Review....470

Roadmaps....473

Defining and Managing Tasks....475

Maintain Team Awareness....475

Write and Clarify Tickets....477

Consider Overhead Tasks....478

Pace Yourself....479

Manage Context Shifting....480

Keep Communication Open....482

Conclusion....483

30. Understanding the Business Domain....485

Domain-Specific Knowledge....486

Learn from People Working Directly in the Domain....487

Take Courses....488

Work in the Domain....488

Architectural and System Design Decisions....489

Domain-Driven Design....490

C4 Design....494

Learning from Other Teams....495

Get on Sales Calls....495

Join User Research Studies....496

Talk to Marketing....497

Listen in on Customer Support Calls....497

Learn About Legal....498

Documentation Considerations....499

Define Jargon....499

Only Keep Relevant Info....500

Share Your Knowledge....500

Show How the Product Affects the Organization....500

Conclusion....501

31. Working on Different Types of Projects over Your Career....503

Considerations for Brand-New Apps....503

Understand the Problem Youre Trying to Solve....504

Build the Data Schema....506

Decide on an Architecture....506

Pick Your Cloud Provider....507

Build the Backend....507

Build the Frontend....508

Integrate the Backend and Frontend....508

Set Up Your CICD Pipeline....509

Perform QA Testing....510

Check Your App in Production....510

Considerations for Existing Apps....510

Get Access to the Services You Need....511

Get a Dev Instance Running....511

Look at the App in Production....512

Look at the App in Nonproduction....512

Read Through the Code....513

Take Notes About Potential Refactors....513

Ask Questions and Document the Answers....514

Improve the Code Quality....515

Add Tests....517

Learn What Different Alerts Mean....517

Your Career....518

The Technical Path....519

The Management Path....520

Professional Journal....523

Moving to Other Areas....525

Conclusion....526

Index....528

About the Author....636

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 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.