book

The Complete Developer

Name: The Complete Developer
Author: Martin Krause
ISBN: 9781718503281

by Martin Krause

March 2024

Intermediate to advanced

344 pages

8h 26m

English

No Starch Press

Read now

Unlock full access

Praise for The Complete Developer
Title Page
Copyright
Dedication
About the Author and Technical Reviewer
Acknowledgments
Introduction
Who Should Read This Book?What’s in This Book?The Parts of a Full-Stack ApplicationThe FrontendThe MiddlewareThe BackendA Brief History of JavaScript and Full-Stack DevelopmentSetting Up
Part I: The Technology Stack
1. Node.JS
Installing Node.jsWorking with npmThe package.json FileRequired FieldsDependenciesDevelopment DependenciesThe package-lock.json FileCreating a ProjectInitializing a New Module or ProjectInstalling the DependenciesInstalling the Development DependenciesAuditing the package.json FileCleaning Up the node_modules FolderUpdating All PackagesRemoving a DependencyInstalling a DependencyUsing npx to Execute a Script Only OnceExercise 1: Build a “Hello World” Express.js ServerSetting UpWriting the Server CodeSummary
2. Modern Javascript
ES.Next ModulesUsing Named and Default ExportsImporting ModulesDeclaring VariablesHoisted VariablesScope-Abiding VariablesConstant-Like DataArrow FunctionsWriting Arrow FunctionsUnderstanding Lexical ScopeExploring Practical Use CasesCreating StringsAsynchronous ScriptsAvoiding Traditional CallbacksUsing PromisesSimplifying Asynchronous ScriptsLooping Through an ArrayDispersing Arrays and ObjectsExercise 2: Extend Express.js with Modern JavaScriptEditing the package.json FileWriting an ES.Next Module with Asynchronous CodeAdding the Modules to the ServerSummary

3. Typescript
Benefits of TypeScriptSetting Up TypeScriptInstallation in Node.jsThe tsconfig.json FileDynamic Feedback with TypeScriptType AnnotationsDeclaring a VariableDeclaring a Return ValueDeclaring a Function’s ParametersBuilt-in TypesPrimitive JavaScript TypesThe union TypeThe array TypeThe object TypeThe tuple TypeThe any TypeThe void TypeCustom Types and InterfacesDefining Custom TypesDefining InterfacesUsing Type Declaration FilesExercise 3: Extend Express.js with TypeScriptSetting UpCreating the tsconfig.json FileDefining Custom TypesAdding Type Annotations to the routes.ts FileAdding Type Annotations to the index.ts FileTranspiling and Running the CodeSummary
4. React
The Role of ReactSetting Up ReactThe JavaScript Syntax ExtensionAn Example JSX ExpressionThe ReactDOM PackageOrganizing Code into ComponentsWriting Class ComponentsProviding Reusable Behavior with HooksWorking with Built-in HooksManaging the Internal State with useStateHandling Side Effects with useEffectSharing Global Data with useContext and Context ProvidersExercise 4: Create a Reactive User Interface for the Express.js ServerAdding React to the ServerCreating the Endpoint for the Static HTML FileRunning the ServerSummary
5. Next.JS
Setting Up Next.jsProject StructureDevelopment ScriptsRouting the ApplicationSimple Page RoutesNested Page RoutesAPI RoutesDynamic URLsStyling the ApplicationGlobal StylesComponent StylesBuilt-in Next.js ComponentsThe next/head ComponentThe next/link ComponentThe next/image ComponentPre-rendering and PublishingServer-Side RenderingStatic Site GenerationIncremental Static RegenerationClient-Side RenderingStatic HTML ExportingExercise 5: Refactor Express.js and React to Next.jsStoring Custom Interfaces and TypesCreating the API RoutesCreating the Page RoutesRunning the ApplicationSummary
6. Rest and Graphql APIs
REST APIsThe URLThe SpecificationState and AuthenticationHTTP MethodsWorking with RESTReading DataUpdating DataGraphQL APIsThe SchemaThe ResolversComparing GraphQL to RESTOver-FetchingUnder-FetchingExercise 6: Add a GraphQL API to Next.jsCreating the SchemaAdding DataImplementing ResolversCreating the API RouteUsing the Apollo SandboxSummary
7. Mongodb and Mongoose
How Apps Use Databases and Object-Relational MappersRelational and Non-Relational DatabasesSetting Up MongoDB and MongooseDefining a Mongoose ModelThe InterfaceThe SchemaThe ModelThe Database-Connection MiddlewareQuerying the DatabaseCreating a DocumentReading a DocumentUpdating a DocumentDeleting a DocumentCreating an End-to-End QueryExercise 7: Connect the GraphQL API to the DatabaseConnecting to the DatabaseAdding Services to GraphQL ResolversSummary
8. Testing With the Jest Framework
Test-Driven Development and Unit TestingUsing JestCreating an Example Module to TestAnatomy of a Test CaseArrangeAct AssertUsing TDDRefactoring CodeEvaluating Test CoverageReplacing Dependencies with Fakes, Stubs, and MocksCreating a Module with DependenciesCreating a Doubles FolderUsing a StubUsing a FakeUsing a MockAdditional Types of TestsFunctional TestsIntegration TestsEnd-to-End TestsSnapshot TestsExercise 8: Add Test Cases to the Weather AppTesting the Middleware with SpiesCreating Mocks to Test the ServicesPerforming an End-to-End Test of the REST APIEvaluating the User Interface with a Snapshot TestSummary
9. Authorization With OAuth
How OAuth WorksAuthentication vs. AuthorizationThe Role of OAuthGrant TypesBearer TokensThe Authorization Code FlowCreating a JWT TokenThe HeaderThe PayloadThe SignatureExercise 9: Access a Protected ResourceSetting Up the ClientLogging In to Receive the Authorization GrantUsing the Authorization Grant to Get the Access TokenUsing the Access Token to Get the Protected ResourceSummary
10. Containerization With Docker
The Containerization ArchitectureInstalling DockerCreating a Docker ContainerWriting the DockerfileBuilding the Docker ImageServing the Application from the Docker ContainerLocating the Exposed Docker PortInteracting with the ContainerCreating Microservices with Docker ComposeWriting the docker-compose.yml FileRunning the ContainersRerunning the TestsInteracting with Docker ComposeSummary
Part II: The Full-Stack Application
11. Setting Up the Docker Environment
The Food Finder ApplicationBuilding the Local Environment with DockerThe Backend ContainerThe Frontend ContainerSummary
12. Building the Middleware
Configuring Next.js to Use Absolute ImportsConnecting MongooseWriting the Database ConnectionFixing the TypeScript WarningThe Mongoose ModelCreating the SchemaCreating the Location ModelThe Model’s ServicesCreating the Location Service’s Custom TypesCreating the Location ServicesTesting the ServicesSummary
13. Building the Graphql API
Setting UpThe SchemasThe Custom Types and DirectivesThe Query SchemaThe Mutation SchemaMerging the Typedefs into the Final SchemaThe GraphQL ResolversAdding the API Endpoint to Next.jsSummary
14. Building the Frontend
Overview of the User InterfaceThe Start PageThe List ItemThe Locations ListThe PageThe Global Layout ComponentsThe LogoThe HeaderThe LayoutThe Location Details PageThe ComponentThe PageSummary
15. Adding OAuth
Adding OAuth with next-authCreating a GitHub OAuth AppAdding the Client CredentialsInstalling next-authCreating the Authentication CallbackSharing the Session Across Pages and ComponentsThe Generic Button ComponentThe AuthElement ComponentAdding the AuthElement Component to the HeaderThe Wish List Next.js PageAdding the Button to the Location Detail ComponentSecuring the GraphQL MutationsSummary
16. Running Automated Tests in Docker
Adding Jest to the ProjectSetting Up DockerWriting Snapshot Tests for the Header ElementSummary
A. Typescript Compiler Options
B. The Next.JS App Directory
Server Components vs. Client ComponentsServer ComponentsClient ComponentsRendering ComponentsFetching DataStatic RenderingDynamic RenderingExploring the Project StructureUpdating the CSSDefining a LayoutAdding the Content and RouteCatching ErrorsShowing an Optional Loading InterfaceAdding a Server Component That Fetches Remote DataCompleting the Application with the NavigationReplacing API Routes with Route Handlers
C. Common Matchers
Built-in MatchersThe JEST-DOM Matchers
Index

Overview

Whether you’ve been in the developer kitchen for decades or are just taking the plunge to do it yourself, The Complete Developer will show you how to build and implement every component of a modern stack—from scratch.

You’ll go from a React-driven frontend to a fully fleshed-out backend with Mongoose, MongoDB, and a complete set of REST and GraphQL APIs, and back again through the whole Next.js stack.

The book’s easy-to-follow, step-by-step recipes will teach you how to build a web server with Express.js, create custom API routes, deploy applications via self-contained microservices, and add a reactive, component-based UI. You’ll leverage command line tools and full-stack frameworks to build an application whose no-effort user management rides on GitHub logins.

You’ll also learn how to:

Work with modern JavaScript syntax, TypeScript, and the Next.js framework
Simplify UI development with the React library
Extend your application with REST and GraphQL APIs
Manage your data with the MongoDB NoSQL database
Use OAuth to simplify user management, authentication, and authorization
Automate testing with Jest, test-driven development, stubs, mocks, and fakes

Whether you’re an experienced software engineer or new to DIY web development, The Complete Developer will teach you to succeed with the modern full stack. After all, control matters.

Covers: Docker, Express.js, JavaScript, Jest, MongoDB, Mongoose, Next.js, Node.js, OAuth, React, REST and GraphQL APIs, and TypeScript

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781098168810Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills