A Tour of JavaScript & React Patterns

Lydia Hallie

Lydia Hallie

Lydia Hallie
3 hours, 29 minutes CC
A Tour of JavaScript & React Patterns

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
Close

Course Details

Published: August 18, 2022

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 2 minutes
  • Introduction
    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

React Patterns

Section Duration: 1 hour, 6 minutes

Performance Patterns

Section Duration: 30 minutes
  • 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

Section Duration: 18 minutes
  • 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.

Wrapping Up

Section Duration: 10 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now