book

Professional JavaScript

Name: Professional JavaScript
ISBN: 9781838820213

by Hugo Di Francesco, Siyuan Gao, Vinicius Isola, Philip Kirkbride

September 2019

Intermediate to advanced

664 pages

11h 42m

English

Packt Publishing

Read now

Unlock full access

Preface
About the BookAbout the AuthorsLearning ObjectivesAudienceApproachHardware RequirementsSoftware RequirementsConventionsInstallation and SetupInstalling Node.js and npmAdditional Resources
Chapter 1
JavaScript, HTML, and the DOMIntroductionHTML and the DOMExercise 1: Iterating over Nodes in a DocumentDeveloper ToolsExercise 2: Manipulating the DOM from the Elements TabExercise 3: Debugging Code from the Sources TabThe Console TabActivity 1: Extracting Data from a PageNodes and ElementsExercise 4: Traversing the DOM TreeSpecial ObjectsUsing JavaScript to Query the DOMExercise 5: Querying the DOM Using querySelectorManipulating the DOMExercise 6: Filtering and Searching ProductsShadow DOM and Web ComponentsExercise 7: Replacing a Search Box with a Web ComponentActivity 2: Replacing the Tag Filter with a Web ComponentSummary
Chapter 2
Node.js and npmIntroductionWhat is Node.js?Exercise 8: Running Your First Node.js CommandsNode Version Manager (nvm)Exercise 9: Using nvm to Manage VersionsNode Package Manager (npm)Exercise 10: Creating a Command-Line HTML GeneratorDependenciesnpm ScriptsActivity 3: Creating an npm Package to Parse HTMLSummary
Chapter 3
Node.js APIs and Web ScrapingIntroductionGlobalsExercise 11: Creating a Task Reminder ApplicationFileSystem APIsExercise 12: Searching for a File through a Directory Using Glob PatternHTTP APIsExercise 13: Serving Static FilesExercise 14: Serving Dynamic ContentWhat is Scraping?Downloading and Parsing Web PagesExercise 15: Scraping Medium ArticlesActivity 4: Scraping Products and Prices from StorefrontSummary
Chapter 4
RESTful APIs with Node.jsIntroductionWhat is an API?What is REST?Express.js for RESTful APIs on Node.jsExercise 16: Creating an Express Project with an Index RouteInteracting with Your API via HTTPExercise 17: Creating and Importing a Route FileHTTP Status CodesDesigning Your APIExercise 18: Creating Action RoutesFurther ModularizingType Checking and Validating the Input Sent to an EndpointExercise 19: Creating a Route with Type Checking and ValidationUseful Defaults and Easy InputsExercise 20: Making the Duration Input OptionalMiddlewareExercise 21: Setting Up an Endpoint that Requires AuthenticationThe Contents of a JWTMongoDBActivity 5: Creating an API Endpoint for a Keypad Door LockSummary
Chapter 5
Modular JavaScriptIntroductionDependencies and SecurityOther Costs of ModularityReviewing Imports and ExportsSeparation of ConcernsES6 ModulesExercise 22: Writing a Simple ES6 ModuleObjects in JavaScriptPrototypesExercise 23: Extending the Number PrototypeES6 ClassesObject-Oriented Programming (OOP)AbstractionClasses and ConstructorsExercise 24: Converting a Light Module to a ClassDefault AttributesEncapsulationWeakMapExercise 25: WeakMap for EncapsulationGetters and SettersInheritanceExercise 26: Extending a ClassPolymorphismExercise 27: LightBulb Buildernpm Packagenpm Link CommandNpm Publish CommandESM versus CommonJSBabelwebpackExercise 28: Converting ES6 and Packages with webpack and BabelComposability and Strategies for Combining ModulesActivity 6: Creating a Lightbulb with a Flash ModeSummary
Chapter 6
Code QualityIntroductionClear NamingConventionOpinionated versus Non-OpinionatedLintingExercise 29: Setting up ESLint and Prettier to Monitor Errors in CodeUnit TestsExercise 30: Setting up Jest Tests to Test a Calculator ApplicationIntegration TestsExercise 31: Integration Testing with JestCode Performance Fibonacci ExampleExercise 32: Ensuring Performance with JestEnd-to-End TestingPuppeteerExercise 33: End-to-End Testing with PuppeteerGit HooksExercise 34: Setting up a Local Git HookSharing Git Hooks with HuskyExercise 35: Setting up a Commit Hook with HuskyExercise 36: Getting Elements by Text with PuppeteerActivity 7: Putting It All TogetherSummary
Chapter 7
Advanced JavaScriptIntroductionLanguage Features Supported in ES5, ES6, ES7, ES8, and ES9Working in the Node.js REPLExecuting the Node.js REPLArray Manipulation in JavaScriptExercise 37: Creating and Modifying an ArrayExercise 38: Adding and Removing ItemsExercise 39: Getting Information About the Items in Your ArrayActivity 8: Creating a User TrackerObject Manipulation in JavaScriptExercise 40: Creating and Modifying Objects in JavaScriptJSON.stringifyExercise 41: Creating an Efficient JSON.StringifyArray and Object DestructuringExercise 42: Using Destructuring Assignment for an ArrayExercise 43: Using Destructuring Assignment for an ObjectSpread OperatorsExercise 44: Using Spread OperatorsRest OperatorsOOP in JavaScriptDefining a Class in JavaScriptExercise 45: Declaring an Object Constructor Using FunctionsExercise 46: Creating a Class in JavaScriptCreating a Simple User Information Cache Using ObjectsExercise 47: Creating a Cache Class to Add/Update/Remove Records from the Data StoreClass InheritanceExercise 48: Implementing a SubclassPrivate and Public MethodsExercise 49: Private Methods in the Vehicle ClassArray and Object Built-in MethodsExercise 50: Using Iteration Methods on ArraysExercise 51: Lookups and Filtering the ArraySortingExercise 52: Sorting Arrays in JavaScriptArray ReduceExercise 53: Using JavaScript Reduce Method to Make Calculations for a Shopping CartActivity 9: Creating a Student Manager Using JavaScript Arrays and ClassesMaps and SetsExercise 54: Using Maps versus ObjectsExercise 55: Using Sets to Track Unique ValuesMath, Date, and StringExercise 56: Using String MethodsMath and DateExercise 57: Using Math and DateSymbols, Iterators, Generators, and ProxiesSymbolIterator and GeneratorExercise 58: Using Symbols and Exploring Their PropertiesExercise 59: Iterators and GeneratorsProxiesExercise 60: Using Proxies to Build Complex ObjectsRefactoring in JavaScriptActivity 10: Refactoring Functions to Use Modern JavaScript FeaturesSummary
Chapter 8
Asynchronous ProgrammingIntroductionHow JavaScript Handles Time-Consuming OperationsHandling Async Operations Using CallbacksExercise 61: Writing Your First CallbackEvent LoopsHow JavaScript Executes CodeActivity 11: Using Callbacks to Receive ResultsCallback HellPromisesExercise 62: Using Promises as Alternatives to CallbacksChaining PromisesExercise 63: Advanced JavaScript PromisesError Handling in PromisesExercise 64: Refactor the Bill Calculator Using PromisesAsync and AwaitExercise 65: Async and Await FunctionsAsync Await ConcurrencyWhen to Use awaitExercise 66: Complex Async ImplementationActivity 12: Refactor the Bill Calculator Using Async and AwaitMigrating Callback- and Promise-Based Code to Async and AwaitMigrating Callback-Based Code to Async and AwaitSummary
Chapter 9
Event-Driven Programming and Built-In ModulesIntroductionThe Traditional Approach versus Event-Driven ProgrammingEventingExercise 67: A Simple Event EmitterEventEmitter MethodsRemoving ListenersRemoving all ListenersAttaching a One-Time ListenerReading from Event EmittersGetting a List of Events That Have Listeners RegisteredMax ListenersPrepend ListenersConcurrency in ListenersBuilding Custom Event EmittersExercise 68: Building A Chatroom ApplicationActivity 13: Building an Event-Driven ModuleEvent-Driven Programming Best PracticesNode.js Built-In ModulespathfsExercise 69: Basic Usage of the Fs ModuleHandling Large Files in Node.jsUtilTimerActivity 14: Building a File WatcherSummary

Chapter 10
Functional Programming with JavaScriptIntroductionFunctions – First-Class CitizensFirst-Class Functions – Idiomatic JavaScript Building BlocksInversion of Control Using First-Class FunctionsFunctions that Enable Asynchronous I/O and Event-Driven Programming in JavaScriptJavaScript Built-In Array Methods that Showcase First-Class Function SupportExercise 70: Re-Implementing includes, indexOf, and join with some, findIndex, and reduceExercise 71: Computing the Price of a Basket Using Map and ReduceChild-Parent Component Communication in ReactActivity 15: onCheckout Callback PropExercise 72: Adding a Product to the BasketFirst-Class Functions in React Render PropsExercise 73: Rendering Basket Contents with a Render PropPure FunctionsRedux Reducers and ActionsExercise 74: Redux Dispatching Actions and Reducing Them into StateTesting Pure FunctionsExercise 75: Testing a ReducerRedux SelectorsExercise 76: Implementing a SelectorActivity 16: Testing a SelectorHigher-Order Functionsbind, apply, and callCurrying and Partial ApplicationLeveraging Closures React Function Components Function CompositionExercise 77: A Binary to n-ary Compose FunctionFunction Composition in the Real World with a Simple BFFExercise 78: Leveraging Compose to Simplify the Micro Server Creation StepImmutability and Side EffectsA Look at Redux Action CreatorsExercise 79: Refactoring the React/Redux Application to Use Action CreatorsReact-Redux mapStateToProps and mapDispatchToPropsExercise 80: Abstracting State Management Using the mapDispatchToProps FunctionRedux Reducers In DepthChanging JavaScript-Native Methods to an Immutable Functional StyleHandling Side Effects in a React/Redux Application React Life Cycle HooksHandling Side Effects in a React/Redux Application React HooksHandling Side Effects in a React/Redux Application Redux-ThunkIntroduction to GraphQL Language Schemas and QueriesRunning Updates with GraphQL Mutations and ResolversExercise 81: Implementing a BFF Mutation with micro and GraphQLActivity 17: Fetching the Current Basket From BFFSummary
Appendix
Chapter 1: JavaScript, HTML, and the DOMActivity 1: Extracting Data from a PageActivity 2: Replacing the Tag Filter with a Web ComponentChapter 2: Node.js and npmActivity 3: Creating a npm Package to Parse HTMLChapter 3: Node.js APIs and Web ScrapingActivity 4 Scraping Products and Prices from StorefrontChapter 4: RESTful APIs with Node.jsActivity 5: Creating an API Endpoint for a Keypad Door LockChapter 5: Modular JavaScriptActivity 6: Creating a Lightbulb with a Flash ModeChapter 6: Code QualityActivity 7: Putting It All TogetherChapter 7: Advanced JavaScriptActivity 8: Creating a User TrackerActivity 9: Creating a Student Manager Using JavaScript Arrays and ClassesActivity 10: Refactoring Functions to Use Modern JavaScript FeaturesChapter 8: Asynchronous ProgrammingActivity 11: Using Callbacks to Receive ResultsActivity 12: Refactor the Bill Calculator Using Async and AwaitChapter 9: Event-Driven Programming and Built-In ModulesActivity 13: Building an Event-Driven ModuleActivity 14: Building a File WatcherChapter 10: Functional Programming with JavaScriptActivity 15: onCheckout Callback PropActivity 16: Testing a SelectorActivity 17: Fetching the Current Basket From BFF

Content preview from Professional JavaScript

Chapter 5 Modular JavaScript

Learning Objectives

By the end of this chapter, you will be able to:

Import and export functions and objects in JavaScript for code reusability
Use JavaScript ES6 classes to reduce code complexity
Implement object-oriented programming concepts in JavaScript
Create private variables for an object using encapsulation
Convert ES6 to generic JavaScript using Babel
Create and publish an npm package in JavaScript
Combine modules using composability and strategies to create higher-level modules

In this chapter, we will learn about the importance of reusable code in modern JavaScript and how ES6 has introduced syntax for easily creating and using modules. We will create a JavaScript module that can be imported and ...

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: 9781838820213

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Professional JavaScript

by Hugo Di Francesco, Siyuan Gao, Vinicius Isola, Philip Kirkbride

Chapter 5

Modular JavaScript

Learning Objectives

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.