0%

Book Description

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.

Downloading the example code for this ebook: You can download the example code files for this ebook on GitHub at the following link: https://github.com/TrainingByPackt/Professional-JavaScript. If you require support please email: [email protected]

Table of Contents

  1. Preface
    1. About the Book
      1. About the Authors
      2. Learning Objectives
      3. Audience
      4. Approach
      5. Hardware Requirements
      6. Software Requirements
      7. Conventions
      8. Installation and Setup
      9. Installing Node.js and npm
      10. Additional Resources
  2. Chapter 1
  3. JavaScript, HTML, and the DOM
    1. Introduction
    2. HTML and the DOM
      1. Exercise 1: Iterating over Nodes in a Document
    3. Developer Tools
      1. Exercise 2: Manipulating the DOM from the Elements Tab
      2. Exercise 3: Debugging Code from the Sources Tab
      3. The Console Tab
      4. Activity 1: Extracting Data from a Page
      5. Nodes and Elements
      6. Exercise 4: Traversing the DOM Tree
      7. Special Objects
      8. Using JavaScript to Query the DOM
      9. Exercise 5: Querying the DOM Using querySelector
      10. Manipulating the DOM
      11. Exercise 6: Filtering and Searching Products
      12. Shadow DOM and Web Components
      13. Exercise 7: Replacing a Search Box with a Web Component
      14. Activity 2: Replacing the Tag Filter with a Web Component
    4. Summary
  4. Chapter 2
  5. Node.js and npm
    1. Introduction
    2. What is Node.js?
      1. Exercise 8: Running Your First Node.js Commands
    3. Node Version Manager (nvm)
      1. Exercise 9: Using nvm to Manage Versions
    4. Node Package Manager (npm)
      1. Exercise 10: Creating a Command-Line HTML Generator
      2. Dependencies
      3. npm Scripts
      4. Activity 3: Creating an npm Package to Parse HTML
    5. Summary
  6. Chapter 3
  7. Node.js APIs and Web Scraping
    1. Introduction
    2. Globals
      1. Exercise 11: Creating a Task Reminder Application
    3. FileSystem APIs
      1. Exercise 12: Searching for a File through a Directory Using Glob Pattern
    4. HTTP APIs
      1. Exercise 13: Serving Static Files
      2. Exercise 14: Serving Dynamic Content
    5. What is Scraping?
      1. Downloading and Parsing Web Pages
      2. Exercise 15: Scraping Medium Articles
      3. Activity 4: Scraping Products and Prices from Storefront
    6. Summary
  8. Chapter 4
  9. RESTful APIs with Node.js
    1. Introduction
    2. What is an API?
    3. What is REST?
      1. Express.js for RESTful APIs on Node.js
      2. Exercise 16: Creating an Express Project with an Index Route
      3. Interacting with Your API via HTTP
      4. Exercise 17: Creating and Importing a Route File
      5. HTTP Status Codes
      6. Designing Your API
      7. Exercise 18: Creating Action Routes
      8. Further Modularizing
    4. Type Checking and Validating the Input Sent to an Endpoint
      1. Exercise 19: Creating a Route with Type Checking and Validation
    5. Useful Defaults and Easy Inputs
      1. Exercise 20: Making the Duration Input Optional
    6. Middleware
      1. Exercise 21: Setting Up an Endpoint that Requires Authentication
    7. The Contents of a JWT
    8. MongoDB
      1. Activity 5: Creating an API Endpoint for a Keypad Door Lock
    9. Summary
  10. Chapter 5
  11. Modular JavaScript
    1. Introduction
      1. Dependencies and Security
      2. Other Costs of Modularity
      3. Reviewing Imports and Exports
      4. Separation of Concerns
    2. ES6 Modules
      1. Exercise 22: Writing a Simple ES6 Module
      2. Objects in JavaScript
      3. Prototypes
      4. Exercise 23: Extending the Number Prototype
      5. ES6 Classes
    3. Object-Oriented Programming (OOP)
      1. Abstraction
      2. Classes and Constructors
      3. Exercise 24: Converting a Light Module to a Class
      4. Default Attributes
      5. Encapsulation
      6. WeakMap
      7. Exercise 25: WeakMap for Encapsulation
      8. Getters and Setters
      9. Inheritance
      10. Exercise 26: Extending a Class
      11. Polymorphism
      12. Exercise 27: LightBulb Builder
    4. npm Package
      1. npm Link Command
      2. Npm Publish Command
      3. ESM versus CommonJS
      4. Babel
      5. webpack
      6. Exercise 28: Converting ES6 and Packages with webpack and Babel
      7. Composability and Strategies for Combining Modules
      8. Activity 6: Creating a Lightbulb with a Flash Mode
    5. Summary
  12. Chapter 6
  13. Code Quality
    1. Introduction
    2. Clear Naming
      1. Convention
      2. Opinionated versus Non-Opinionated
      3. Linting
      4. Exercise 29: Setting up ESLint and Prettier to Monitor Errors in Code
    3. Unit Tests
      1. Exercise 30: Setting up Jest Tests to Test a Calculator Application
    4. Integration Tests
      1. Exercise 31: Integration Testing with Jest
      2. Code Performance Fibonacci Example
      3. Exercise 32: Ensuring Performance with Jest
    5. End-to-End Testing
    6. Puppeteer
      1. Exercise 33: End-to-End Testing with Puppeteer
      2. Git Hooks
      3. Exercise 34: Setting up a Local Git Hook
      4. Sharing Git Hooks with Husky
      5. Exercise 35: Setting up a Commit Hook with Husky
      6. Exercise 36: Getting Elements by Text with Puppeteer
      7. Activity 7: Putting It All Together
    7. Summary
  14. Chapter 7
  15. Advanced JavaScript
    1. Introduction
    2. Language Features Supported in ES5, ES6, ES7, ES8, and ES9
      1. Working in the Node.js REPL
      2. Executing the Node.js REPL
      3. Array Manipulation in JavaScript
      4. Exercise 37: Creating and Modifying an Array
      5. Exercise 38: Adding and Removing Items
      6. Exercise 39: Getting Information About the Items in Your Array
      7. Activity 8: Creating a User Tracker
      8. Object Manipulation in JavaScript
      9. Exercise 40: Creating and Modifying Objects in JavaScript
      10. JSON.stringify
      11. Exercise 41: Creating an Efficient JSON.Stringify
      12. Array and Object Destructuring
      13. Exercise 42: Using Destructuring Assignment for an Array
      14. Exercise 43: Using Destructuring Assignment for an Object
      15. Spread Operators
      16. Exercise 44: Using Spread Operators
      17. Rest Operators
    3. OOP in JavaScript
      1. Defining a Class in JavaScript
      2. Exercise 45: Declaring an Object Constructor Using Functions
      3. Exercise 46: Creating a Class in JavaScript
      4. Creating a Simple User Information Cache Using Objects
      5. Exercise 47: Creating a Cache Class to Add/Update/Remove Records from the Data Store
      6. Class Inheritance
      7. Exercise 48: Implementing a Subclass
      8. Private and Public Methods
      9. Exercise 49: Private Methods in the Vehicle Class
      10. Array and Object Built-in Methods
      11. Exercise 50: Using Iteration Methods on Arrays
      12. Exercise 51: Lookups and Filtering the Array
    4. Sorting
      1. Exercise 52: Sorting Arrays in JavaScript
      2. Array Reduce
      3. Exercise 53: Using JavaScript Reduce Method to Make Calculations for a Shopping Cart
      4. Activity 9: Creating a Student Manager Using JavaScript Arrays and Classes
    5. Maps and Sets
      1. Exercise 54: Using Maps versus Objects
      2. Exercise 55: Using Sets to Track Unique Values
    6. Math, Date, and String
      1. Exercise 56: Using String Methods
      2. Math and Date
      3. Exercise 57: Using Math and Date
    7. Symbols, Iterators, Generators, and Proxies
      1. Symbol
      2. Iterator and Generator
      3. Exercise 58: Using Symbols and Exploring Their Properties
      4. Exercise 59: Iterators and Generators
      5. Proxies
      6. Exercise 60: Using Proxies to Build Complex Objects
      7. Refactoring in JavaScript
      8. Activity 10: Refactoring Functions to Use Modern JavaScript Features
    8. Summary
  16. Chapter 8
  17. Asynchronous Programming
    1. Introduction
      1. How JavaScript Handles Time-Consuming Operations
      2. Handling Async Operations Using Callbacks
      3. Exercise 61: Writing Your First Callback
      4. Event Loops
      5. How JavaScript Executes Code
      6. Activity 11: Using Callbacks to Receive Results
    2. Callback Hell
      1. Promises
      2. Exercise 62: Using Promises as Alternatives to Callbacks
      3. Chaining Promises
      4. Exercise 63: Advanced JavaScript Promises
      5. Error Handling in Promises
      6. Exercise 64: Refactor the Bill Calculator Using Promises
    3. Async and Await
      1. Exercise 65: Async and Await Functions
      2. Async Await Concurrency
      3. When to Use await
      4. Exercise 66: Complex Async Implementation
      5. Activity 12: Refactor the Bill Calculator Using Async and Await
      6. Migrating Callback- and Promise-Based Code to Async and Await
      7. Migrating Callback-Based Code to Async and Await
    4. Summary
  18. Chapter 9
  19. Event-Driven Programming and Built-In Modules
    1. Introduction
    2. The Traditional Approach versus Event-Driven Programming
    3. Eventing
      1. Exercise 67: A Simple Event Emitter
      2. EventEmitter Methods
      3. Removing Listeners
      4. Removing all Listeners
      5. Attaching a One-Time Listener
      6. Reading from Event Emitters
      7. Getting a List of Events That Have Listeners Registered
      8. Max Listeners
      9. Prepend Listeners
      10. Concurrency in Listeners
      11. Building Custom Event Emitters
      12. Exercise 68: Building A Chatroom Application
      13. Activity 13: Building an Event-Driven Module
      14. Event-Driven Programming Best Practices
    4. Node.js Built-In Modules
      1. path
      2. fs
      3. Exercise 69: Basic Usage of the Fs Module
    5. Handling Large Files in Node.js
      1. Util
      2. Timer
      3. Activity 14: Building a File Watcher
    6. Summary
  20. Chapter 10
  21. Functional Programming with JavaScript
    1. Introduction
    2. Functions – First-Class Citizens
      1. First-Class Functions – Idiomatic JavaScript Building Blocks
      2. Inversion of Control Using First-Class Functions
      3. Functions that Enable Asynchronous I/O and Event-Driven Programming in JavaScript
      4. JavaScript Built-In Array Methods that Showcase First-Class Function Support
      5. Exercise 70: Re-Implementing includes, indexOf, and join with some, findIndex, and reduce
      6. Exercise 71: Computing the Price of a Basket Using Map and Reduce
      7. Child-Parent Component Communication in React
      8. Activity 15: onCheckout Callback Prop
      9. Exercise 72: Adding a Product to the Basket
      10. First-Class Functions in React Render Props
      11. Exercise 73: Rendering Basket Contents with a Render Prop
    3. Pure Functions
      1. Redux Reducers and Actions
      2. Exercise 74: Redux Dispatching Actions and Reducing Them into State
      3. Testing Pure Functions
      4. Exercise 75: Testing a Reducer
      5. Redux Selectors
      6. Exercise 76: Implementing a Selector
      7. Activity 16: Testing a Selector
    4. Higher-Order Functions
      1. bind, apply, and call
      2. Currying and Partial Application
      3. Leveraging Closures React Function Components
    5. Function Composition
      1. Exercise 77: A Binary to n-ary Compose Function
      2. Function Composition in the Real World with a Simple BFF
      3. Exercise 78: Leveraging Compose to Simplify the Micro Server Creation Step
    6. Immutability and Side Effects
      1. A Look at Redux Action Creators
      2. Exercise 79: Refactoring the React/Redux Application to Use Action Creators
      3. React-Redux mapStateToProps and mapDispatchToProps
      4. Exercise 80: Abstracting State Management Using the mapDispatchToProps Function
      5. Redux Reducers In Depth
      6. Changing JavaScript-Native Methods to an Immutable Functional Style
      7. Handling Side Effects in a React/Redux Application React Life Cycle Hooks
      8. Handling Side Effects in a React/Redux Application React Hooks
      9. Handling Side Effects in a React/Redux Application Redux-Thunk
    7. Introduction to GraphQL Language Schemas and Queries
      1. Running Updates with GraphQL Mutations and Resolvers
      2. Exercise 81: Implementing a BFF Mutation with micro and GraphQL
      3. Activity 17: Fetching the Current Basket From BFF
    8. Summary
  22. Appendix
    1. Chapter 1: JavaScript, HTML, and the DOM
      1. Activity 1: Extracting Data from a Page
      2. Activity 2: Replacing the Tag Filter with a Web Component
    2. Chapter 2: Node.js and npm
      1. Activity 3: Creating a npm Package to Parse HTML
    3. Chapter 3: Node.js APIs and Web Scraping
      1. Activity 4 Scraping Products and Prices from Storefront
    4. Chapter 4: RESTful APIs with Node.js
      1. Activity 5: Creating an API Endpoint for a Keypad Door Lock
    5. Chapter 5: Modular JavaScript
      1. Activity 6: Creating a Lightbulb with a Flash Mode
    6. Chapter 6: Code Quality
      1. Activity 7: Putting It All Together
    7. Chapter 7: Advanced JavaScript
      1. Activity 8: Creating a User Tracker
      2. Activity 9: Creating a Student Manager Using JavaScript Arrays and Classes
      3. Activity 10: Refactoring Functions to Use Modern JavaScript Features
    8. Chapter 8: Asynchronous Programming
      1. Activity 11: Using Callbacks to Receive Results
      2. Activity 12: Refactor the Bill Calculator Using Async and Await
    9. Chapter 9: Event-Driven Programming and Built-In Modules
      1. Activity 13: Building an Event-Driven Module
      2. Activity 14: Building a File Watcher
    10. Chapter 10: Functional Programming with JavaScript
      1. Activity 15: onCheckout Callback Prop
      2. Activity 16: Testing a Selector
      3. Activity 17: Fetching the Current Basket From BFF
44.222.225.12