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