Develop your JavaScript programming skills by learning strategies and techniques commonly used in modern full-stack application development
Key Features
Write and deploy full-stack applications efficiently with JavaScript
Delve into JavaScript's multiple programming paradigms
Get up to speed with core concepts such as modularity and functional programming to write efficient code
Book Description
In depth knowledge of JavaScript makes it easier to learn a variety of other frameworks, including React, Angular, and related tools and libraries. This book is designed to help you cover the core JavaScript concepts you need to build modern applications.
You'll start by learning how to represent an HTML document in the Document Object Model (DOM). Then, you'll combine your knowledge of the DOM and Node.js to create a web scraper for practical situations. As you read through further lessons, you'll create a Node.js-based RESTful API using the Express library for Node.js. You'll also understand how modular designs can be used for better reusability and collaboration with multiple developers on a single project. Later lessons will guide you through building unit tests, which ensure that the core functionality of your program is not affected over time. The book will also demonstrate how constructors, async/await, and events can load your applications quickly and efficiently. Finally, you'll gain useful insights into functional programming concepts such as immutability, pure functions, and higher-order functions.
By the end of this book, you'll have the skills you need to tackle any real-world JavaScript development problem using a modern JavaScript approach, both for the client and server sides.
What you will learn
Apply the core concepts of functional programming
Build a Node.js project that uses the Express.js library to host an API
Create unit tests for a Node.js project to validate it
Use the Cheerio library with Node.js to create a basic web scraper
Develop a React interface to build processing flows
Use callbacks as a basic way to bring control back
Who this book is for
If you want to advance from being a frontend developer to a full-stack developer and learn how Node.js can be used for hosting full-stack applications, this is an ideal book for you. After reading this book, you'll be able to write better JavaScript code and learn about the latest trends in the language. To easily grasp the concepts explained here, you should know the basic syntax of JavaScript and should've worked with popular frontend libraries such as jQuery. You should have also used JavaScript with HTML and CSS but not necessarily Node.js.
DOWNLOAD FROM FREE FILE STORAGE
Author(s): Hugo Di Francesco, Siyuan Gao, Vinicius Isola, Philip Kirkbride
Publisher: Packt
Year: 2019
Language: English
Pages: 664
Cover
FM
Copyright
Table of Contents
Preface
Chapter 1: JavaScript, HTML, and the DOM
Introduction
HTML and the DOM
Exercise 1: Iterating over Nodes in a Document
Developer Tools
Exercise 2: Manipulating the DOM from the Elements Tab
Exercise 3: Debugging Code from the Sources Tab
The Console Tab
Activity 1: Extracting Data from a Page
Nodes and Elements
Exercise 4: Traversing the DOM Tree
Special Objects
Using JavaScript to Query the DOM
Exercise 5: Querying the DOM Using querySelector
Manipulating the DOM
Exercise 6: Filtering and Searching Products
Shadow DOM and Web Components
Exercise 7: Replacing a Search Box with a Web Component
Activity 2: Replacing the Tag Filter with a Web Component
Summary
Chapter 2: Node.js and npm
Introduction
What is Node.js?
Exercise 8: Running Your First Node.js Commands
Node Version Manager (nvm)
Exercise 9: Using nvm to Manage Versions
Node Package Manager (npm)
Exercise 10: Creating a Command-Line HTML Generator
Dependencies
npm Scripts
Activity 3: Creating an npm Package to Parse HTML
Summary
Chapter 3: Node.js APIs and Web Scraping
Introduction
Globals
Exercise 11: Creating a Task Reminder Application
FileSystem APIs
Exercise 12: Searching for a File through a Directory Using Glob Pattern
HTTP APIs
Exercise 13: Serving Static Files
Exercise 14: Serving Dynamic Content
What is Scraping?
Downloading and Parsing Web Pages
Exercise 15: Scraping Medium Articles
Activity 4: Scraping Products and Prices from Storefront
Summary
Chapter 4: RESTful APIs with Node.js
Introduction
What is an API?
What is REST?
Express.js for RESTful APIs on Node.js
Exercise 16: Creating an Express Project with an Index Route
Interacting with Your API via HTTP
Exercise 17: Creating and Importing a Route File
HTTP Status Codes
Designing Your API
Exercise 18: Creating Action Routes
Further Modularizing
Type Checking and Validating the Input Sent to an Endpoint
Exercise 19: Creating a Route with Type Checking and Validation
Useful Defaults and Easy Inputs
Exercise 20: Making the Duration Input Optional
Middleware
Exercise 21: Setting Up an Endpoint that Requires Authentication
The Contents of a JWT
MongoDB
Activity 5: Creating an API Endpoint for a Keypad Door Lock
Summary
Chapter 5: Modular JavaScript
Introduction
Dependencies and Security
Other Costs of Modularity
Reviewing Imports and Exports
Separation of Concerns
ES6 Modules
Exercise 22: Writing a Simple ES6 Module
Objects in JavaScript
Prototypes
Exercise 23: Extending the Number Prototype
ES6 Classes
Object-Oriented Programming (OOP)
Abstraction
Classes and Constructors
Exercise 24: Converting a Light Module to a Class
Default Attributes
Encapsulation
WeakMap
Exercise 25: WeakMap for Encapsulation
Getters and Setters
Inheritance
Exercise 26: Extending a Class
Polymorphism
Exercise 27: LightBulb Builder
npm Package
npm Link Command
Npm Publish Command
ESM versus CommonJS
Babel
webpack
Exercise 28: Converting ES6 and Packages with webpack and Babel
Composability and Strategies for Combining Modules
Activity 6: Creating a Lightbulb with a Flash Mode
Summary
Chapter 6: Code Quality
Introduction
Clear Naming
Convention
Opinionated versus Non-Opinionated
Linting
Exercise 29: Setting up ESLint and Prettier to Monitor Errors in Code
Unit Tests
Exercise 30: Setting up Jest Tests to Test a Calculator Application
Integration Tests
Exercise 31: Integration Testing with Jest
Code Performance Fibonacci Example
Exercise 32: Ensuring Performance with Jest
End-to-End Testing
Puppeteer
Exercise 33: End-to-End Testing with Puppeteer
Git Hooks
Exercise 34: Setting up a Local Git Hook
Sharing Git Hooks with Husky
Exercise 35: Setting up a Commit Hook with Husky
Exercise 36: Getting Elements by Text with Puppeteer
Activity 7: Putting It All Together
Summary
Chapter 7: Advanced JavaScript
Introduction
Language Features Supported in ES5, ES6, ES7, ES8, and ES9
Working in the Node.js REPL
Executing the Node.js REPL
Array Manipulation in JavaScript
Exercise 37: Creating and Modifying an Array
Exercise 38: Adding and Removing Items
Exercise 39: Getting Information About the Items in Your Array
Activity 8: Creating a User Tracker
Object Manipulation in JavaScript
Exercise 40: Creating and Modifying Objects in JavaScript
JSON.stringify
Exercise 41: Creating an Efficient JSON.Stringify
Array and Object Destructuring
Exercise 42: Using Destructuring Assignment for an Array
Exercise 43: Using Destructuring Assignment for an Object
Spread Operators
Exercise 44: Using Spread Operators
Rest Operators
OOP in JavaScript
Defining a Class in JavaScript
Exercise 45: Declaring an Object Constructor Using Functions
Exercise 46: Creating a Class in JavaScript
Creating a Simple User Information Cache Using Objects
Exercise 47: Creating a Cache Class to Add/Update/Remove Records from the Data Store
Class Inheritance
Exercise 48: Implementing a Subclass
Private and Public Methods
Exercise 49: Private Methods in the Vehicle Class
Array and Object Built-in Methods
Exercise 50: Using Iteration Methods on Arrays
Exercise 51: Lookups and Filtering the Array
Sorting
Exercise 52: Sorting Arrays in JavaScript
Array Reduce
Exercise 53: Using JavaScript Reduce Method to Make Calculations for a Shopping Cart
Activity 9: Creating a Student Manager Using JavaScript Arrays and Classes
Maps and Sets
Exercise 54: Using Maps versus Objects
Exercise 55: Using Sets to Track Unique Values
Math, Date, and String
Exercise 56: Using String Methods
Math and Date
Exercise 57: Using Math and Date
Symbols, Iterators, Generators, and Proxies
Symbol
Iterator and Generator
Exercise 58: Using Symbols and Exploring Their Properties
Exercise 59: Iterators and Generators
Proxies
Exercise 60: Using Proxies to Build Complex Objects
Refactoring in JavaScript
Activity 10: Refactoring Functions to Use Modern JavaScript Features
Summary
Chapter 8: Asynchronous Programming
Introduction
How JavaScript Handles Time-Consuming Operations
Handling Async Operations Using Callbacks
Exercise 61: Writing Your First Callback
Event Loops
How JavaScript Executes Code
Activity 11: Using Callbacks to Receive Results
Callback Hell
Promises
Exercise 62: Using Promises as Alternatives to Callbacks
Chaining Promises
Exercise 63: Advanced JavaScript Promises
Error Handling in Promises
Exercise 64: Refactor the Bill Calculator Using Promises
Async and Await
Exercise 65: Async and Await Functions
Async Await Concurrency
When to Use await
Exercise 66: Complex Async Implementation
Activity 12: Refactor the Bill Calculator Using Async and Await
Migrating Callback- and Promise-Based Code to Async and Await
Migrating Callback-Based Code to Async and Await
Summary
Chapter 9: Event-Driven Programming and Built-In Modules
Introduction
The Traditional Approach versus Event-Driven Programming
Eventing
Exercise 67: A Simple Event Emitter
EventEmitter Methods
Removing Listeners
Removing all Listeners
Attaching a One-Time Listener
Reading from Event Emitters
Getting a List of Events That Have Listeners Registered
Max Listeners
Prepend Listeners
Concurrency in Listeners
Building Custom Event Emitters
Exercise 68: Building A Chatroom Application
Activity 13: Building an Event-Driven Module
Event-Driven Programming Best Practices
Node.js Built-In Modules
path
fs
Exercise 69: Basic Usage of the Fs Module
Handling Large Files in Node.js
Util
Timer
Activity 14: Building a File Watcher
Summary
Chapter 10: Functional Programming with JavaScript
Introduction
Functions – First-Class Citizens
First-Class Functions – Idiomatic JavaScript Building Blocks
Inversion of Control Using First-Class Functions
Functions that Enable Asynchronous I/O and Event-Driven Programming in JavaScript
JavaScript Built-In Array Methods that Showcase First-Class Function Support
Exercise 70: Re-Implementing includes, indexOf, and join with some, findIndex, and reduce
Exercise 71: Computing the Price of a Basket Using Map and Reduce
Child-Parent Component Communication in React
Activity 15: onCheckout Callback Prop
Exercise 72: Adding a Product to the Basket
First-Class Functions in React Render Props
Exercise 73: Rendering Basket Contents with a Render Prop
Pure Functions
Redux Reducers and Actions
Exercise 74: Redux Dispatching Actions and Reducing Them into State
Testing Pure Functions
Exercise 75: Testing a Reducer
Redux Selectors
Exercise 76: Implementing a Selector
Activity 16: Testing a Selector
Higher-Order Functions
bind, apply, and call
Currying and Partial Application
Leveraging Closures React Function Components
Function Composition
Exercise 77: A Binary to n-ary Compose Function
Function Composition in the Real World with a Simple BFF
Exercise 78: Leveraging Compose to Simplify the Micro Server Creation Step
Immutability and Side Effects
A Look at Redux Action Creators
Exercise 79: Refactoring the React/Redux Application to Use Action Creators
React-Redux mapStateToProps and mapDispatchToProps
Exercise 80: Abstracting State Management Using the mapDispatchToProps Function
Redux Reducers In Depth
Changing JavaScript-Native Methods to an Immutable Functional Style
Handling Side Effects in a React/Redux Application React Life Cycle Hooks
Handling Side Effects in a React/Redux Application React Hooks
Handling Side Effects in a React/Redux Application Redux-Thunk
Introduction to GraphQL Language Schemas and Queries
Running Updates with GraphQL Mutations and Resolvers
Exercise 81: Implementing a BFF Mutation with micro and GraphQL
Activity 17: Fetching the Current Basket From BFF
Summary
Appendix
Index
