Patterns

Stay up to date on the latest design and performance patterns.

Design Patterns

  • Architecture
  • State

Introduction

Introduction to Design Patterns

  • Architecture
  • State

Singleton Pattern

Share a single global instance throughout our application

  • Architecture
  • State

Proxy Pattern

Intercept and control interactions to target objects

  • Architecture
  • State

Provider Pattern

Make data available to multiple child components

  • Architecture
  • State

Prototype Pattern

Share properties among many objects of the same type

  • Architecture
  • State

Container/Presentational Pattern

Enforce separation of concerns by separating the view from the application logic

  • Architecture
  • State

Observer Pattern

Use observables to notify subscribers when an event occurs

  • Architecture
  • State

Module Pattern

Split up your code into smaller, reusable pieces

  • Architecture
  • State

Mixin Pattern

Add functionality to objects or classes without inheritance

  • Architecture
  • State

Mediator/Middleware Pattern

Use a central mediator object to handle communication between components

  • Architecture
  • State

HOC Pattern

Pass reusable logic down as props to components throughout your application

  • Architecture
  • State

Render Props Pattern

Pass JSX elements to components through props

  • Architecture
  • State

Hooks Pattern

Use functions to reuse stateful logic among multiple components throughout the app

  • Architecture
  • State

Flyweight Pattern

Reuse existing instances when working with identical objects

  • Architecture
  • State

Factory Pattern

Use a factory function in order to create objects

  • Architecture
  • State

Compound Pattern

Create multiple components that work together to perform a single task

  • Architecture
  • State

Command Pattern

Decouple methods that execute tasks by sending commands to a commander

  • Architecture

Learning JavaScript Design Patterns

The classic JavaScript design patterns book, updated to ES2015+ syntax.

Rendering Patterns

    Introduction

    Rendering Patterns

      Overview of React.js

      A UI library for building reusable user interface components

        Overview of Next.js

        Vercel's framework for hybrid React applications

          Client-side Rendering

          Render your application's UI on the client

            Server-side Rendering

            Generate HTML to be rendered on the server in response to a user request

              Static Rendering

              Deliver pre-rendered HTML content that was generated when the site was built

                Incremental Static Generation

                Update static content after you have built your site

                  Progressive Hydration

                  Delay loading JavaScript for less important parts of the page

                    Streaming Server-Side Rendering

                    Generate HTML to be rendered on the server in response to a user request

                      React Server Components

                      Server Components compliment SSR, rendering to an intermediate abstraction without needing to add to the JavaScript bundle

                        Selective Hydration

                        How to use combine streaming server-side rendering with a new approach to hydration, selective hydration

                          Islands Architecture

                          The islands architecture encourages small, focused chunks of interactivity within server-rendered web pages

                          Performance Patterns

                          • Loading

                          Optimize your loading sequence

                          Learn how to optimize your loading sequence to improve how quickly your app is usable

                          • Loading
                          • Bundles

                          Static Import

                          Import code that has been exported by another module

                          • Loading
                          • Bundles

                          Dynamic Import

                          Import parts of your code on demand

                          • Loading

                          Import On Visibility

                          Load non-critical components when they are visible in the viewport

                          • Loading

                          Import On Interaction

                          Load non-critical resources when a user interacts with UI requiring it

                          • Loading

                          Route Based Splitting

                          Dynamically load components based on the current route

                          • Loading
                          • Bundles

                          Bundle Splitting

                          Split your code into small, reusable pieces

                          • Loading

                          PRPL Pattern

                          Optimize initial load through precaching, lazy loading, and minimizing roundtrips

                          • Loading
                          • Bundles

                          Tree Shaking

                          Reduce the bundle size by eliminating dead code

                          • Loading

                          Preload

                          Inform the browser of critical resources before they are discovered

                          • Loading

                          Prefetch

                          Fetch and cache resources that may be requested some time soon

                          • Loading

                          Optimize loading third-parties

                          Reduce the performance impact third-party scripts have on your site.

                          • Loading

                          List Virtualization

                          Optimize list performance with list virtualization

                          • Loading

                          Compressing JavaScript

                          Reduce the time needed to transfer scripts over the network.

                          Case Studies

                            Airbnb Case Study

                            Optimizing Airbnb Listings

                              Hey.com

                              Minimal JavaScript at Hey.com

                                Optimizing Core Web Vitals on a Next.js app

                                A case study optimizing performance