Lydia Hallie
A Tour of JavaScript & React Patterns
3 hours, 29 minutes
CC
Course Description
Learn a suite of design patterns to improve the code architecture of your web apps! You’ll get an overview of more traditional design patterns with JavaScript, such as the Singleton and Proxy patterns. Then see React patterns such as the Hooks and Higher Order Component patterns. Lastly, we’ll cover Performance patterns and Rendering Patterns.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
I just completed 'A Tour of JavaScript & React Patterns' by Lydia Hallie on Frontend Masters! 🚀 What an incredible learning journey! Thank you, Lydia, and Frontend Masters, for this invaluable course. 🙌💡
Ahmed Eid
Ahmed3Eid3
A great course by Lydia Hallie on Frontend Masters‼️ 👏
I really enjoyed the journey, from the definition of design patterns: “Design patterns are concepts to performantly solve commonly recurring problems in software architecture.”
Lydia Hallie goes through a collection of patterns, indicating the pros and cons for each and presenting scenarios where these could be implemented, accompanied by practical exercises for each lesson.
💡 A great resource for an even deeper dive into patterns
Radu Cimpian
Senior React | React Native Engineer
Course Details
Published: August 18, 2022
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 2 minutes
Lydia Hallie begins the course by sharing the course website and briefly describing how to consider incorporating JavaScript design patterns into an application. Exercises within the course website use embedded StackBlitz examples so no tooling or environment setup is required.
JavaScript Patterns
Section Duration: 1 hour, 21 minutes
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.
Lydia demonstrates the solution to the Module Pattern challenge.
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.
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.
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.
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.
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.
Lydia codes the solution to the Observer Pattern challenge.
Lydia answers questions about when to use the observer pattern, when to unsubscribe, dependent subscribers, Rx.js, and using multiple observables.
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.
Lydia demonstrates the solution to the Factory Pattern challenge. The differences between factory functions and classes are also discussed in this segment.
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.
Lydia codes the solution to the Prototype Pattern challenge.
React Patterns
Section Duration: 1 hour, 6 minutes
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.
Lydia codes the solution to the Container Presentation Pattern challenge.
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.
Lydia codes the solution to the Higher-Order Component Pattern challenge.
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.
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.
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.
Lydia codes the solution to the Hooks Pattern challenge.
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.
Lydia codes the solution to the Provider Pattern challenge.
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.
Lydia codes the solution to the Compound Pattern challenge.
Performance Patterns
Section Duration: 30 minutes
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.
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.
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
Section Duration: 18 minutes
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.
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.
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.
Wrapping Up
Section Duration: 10 minutes
Lydia concludes the course by sharing some resources and answering audience questions about static vs server-side rendering and measuring performance.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops