A Tour of JavaScript & React Patterns
Learning Paths:
Topics:
Table of Contents
Introduction
JavaScript Patterns
Module Pattern
Lydia explains that ES2015 introduced built-in JavaScript modules. The module pattern splits larger files into smaller reusable pieces that are imported with a script tag by adding the type="module" attribute. In Node.js, modules can use the .mjs file extension or use the .js extension with type="module" added to the package.json file.
Module Pattern Solution
Lydia demonstrates the solution to the Module Pattern challenge.
Singleton Pattern
Lydia explains the singleton pattern restricts the instantiation of a class or object to one instance. The instance is unmodifiable and can be accessed globally throughout the application.
Singleton Pattern Solution
Lydia demonstrates the solution to the Singleton Pattern challenge. Questions about the pros/cons for instantiating from a class versus an object and ES2015 default singleton modules are also covered in this segment.
Proxy Pattern
Lydia demonstrates how the proxy pattern is used to intercept requests to a targeted object and decide whether or not to forward on those requests. Proxies make it easy to add functionality such as validation, logging, formatting, notifications, and debugging.
Proxy Pattern Solution
Lydia codes the solution to the Proxy Pattern challenge. Questions about higher-order functions, creating proxies for nested objects, and using the Reflect.set method are also covered in this segment.
Observer Pattern
Lydia explains the observer pattern consists of an observable object and subscribers that will be notified by the observable object. This creates an efficient separation of concerns because the observable object has no knowledge of the subscribers. The subscribers are not aware of the underlying implementation that leads to the notification.
Observer Pattern Solution
Lydia codes the solution to the Observer Pattern challenge.
Observer Pattern Q&A
Lydia answers questions about when to use the observer pattern, when to unsubscribe, dependent subscribers, Rx.js, and using multiple observables.
Factory Pattern
Lydia explains the factory pattern is a function that returns an object. The function may accept parameters and use those parameters to create more properties on the returned object. This pattern is useful when creating multiple objects that share the same set of properties.
Factory Pattern Solution
Lydia demonstrates the solution to the Factory Pattern challenge. The differences between factory functions and classes are also discussed in this segment.
Prototype Pattern
Lydia outlines the prototype pattern which is more memory efficient than the factory pattern because it avoids the duplication of shared properties and methods by elevating them up the prototype chain. The prototype pattern can be used with the Object.create method or with ES6 classes.
Prototype Pattern Solution
Lydia codes the solution to the Prototype Pattern challenge.
React Patterns
Container/Presentation Pattern
Lydia explains how the container presentation pattern enforces a separation of concerns by abstracting the view from the application logic. Presentational components focus on how the data is shown to the user. Container components are responsible for the data passed to the presentational component.
Container/Presentation Pattern Solution
Lydia codes the solution to the Container Presentation Pattern challenge.
Higher-Order Component Pattern
Lydia demonstrates how higher-order components pass reusable logic down as a prop in React applications. This pattern is useful for maintaining a separate of concerns, however, naming collisions can occur and it can be difficult to understand which component is responsible for certain functionality.
Higher-Order Component Pattern Solution
Lydia codes the solution to the Higher-Order Component Pattern challenge.
Render Props Pattern
Lydia introduces the render props pattern and explains why it is more flexible than the higher-order pattern. With the render props pattern, a component is passed as props and is able to receive props. These props are explicitly passed so they are visible in the argument list and developers can easily see what the component expects.
Render Props Pattern Solution
Lydia codes the solutions to the Render Props Pattern challenge. A question about the performance of rendering when there's a change in state is also discussed in this segment.
Hooks Pattern
Lydia demonstrates that React hooks are special types of functions that can add state to a functional component, reuse stateful logic among multiple components, or manage a component's life cycle. Hooks simplify components by abstracting stateful logic.
Hooks Pattern Solution
Lydia codes the solution to the Hooks Pattern challenge.
Provider Pattern
Lydia explains how the provider pattern uses React's Context API to share data between components. This eliminates the need to "prop drill", or pass props from parent-to-child anytime a shared context is required. Components will re-render whenever a value changes so developers will want to be careful which components are consuming the context.
Provider Pattern Solution
Lydia codes the solution to the Provider Pattern challenge.
Compound Pattern
Lydia introduces the compound pattern and compares it to the provider pattern. With the compound pattern, multiple components work together to perform a single task. The wrapper component can be implemented either with a Provider or using the React.Children.map API.
Compound Pattern Solution
Lydia codes the solution to the Compound Pattern challenge.
Performance Patterns
Bundling & Compiling
Lydia provides some background information about performance tools like bundlers, compilers, minifiers, and tree-shaking techniques. These tools can reduce the size of the code base, split the code base into pieces, and remove sections of code that are not being used.
Static & Dynamic Imports
Lydia explains the difference between static and dynamic imports. Static imports are immediately available in the application bundle and are easy to optimize and tree shake. Dynamic imports provide a faster initial load but can lead to layout shifts or a decreased user experience if they are not loaded by the time they are needed. The React useInView hook and route-based splitting are also demonstrated in this segment.
Browser Hints: Prefetch & Preload
Lydia demonstrates how browser hints inform the browser about critical resources. The prefetch hint tells the browser to fetch and cache resources that will be used soon. The preload hint can be used to fetch resources that are critical to the current page navigation.
Rendering Patterns
Core Web Vitals
Lydia introduces the core web vitals which include the time to first byte, first contentful paint, largest contentful paint, time to interactive, cumulative layout shift, and first input delay.
Client-Side & Static Rendering
Lydia shares the benefits and tradeoffs of client-side and static rendering. Client-side rendering only needs a single request from the server and allows content to be immediately interactive. Static rendering utilizes the server to pre-render the html which is more beneficial for SEO and cachability since the client is not waiting for any additional requests to the backend.
Incremental Rerendering & SSR
Lydia explains that static rendering might lead to long build times if pages need to be pre-rendered. Incremental static generation allows developers to only pre-render a subset of pages. If the user requests a page that hasn't been pre-rendered, the page get server-rendered and then cached by the CDN. Server-side rendering and streaming server-side rendering are also discussed in this segment.
