Interested in our next book? Learn more about Building Large-scale JavaScript Web Apps with React

Community Patterns

Community resources on patterns for React, Angular, Vue and TypeScript

Advanced React Patterns
Advanced React Patterns
Angular Component Patterns
Angular Component Patterns
TypeScript/React Component Patterns
TypeScript/React Component Patterns
Web Component Patterns
Web Component Patterns
Node.js Design Patterns
Node.js Design Patterns
Clean Code JavaScript
Clean Code JavaScript
Clean Code Angular
Clean Code Angular
RxJs Reactive Patterns
RxJs Reactive Patterns

Videos

A curated list of recommended talks

Rendering on the Web: Performance Implications of Application Architecture (Google I/O '19)
Rendering on the Web: Performance Implications of Application Architecture
CSR / SSR / SSG / ISR with Next.js – Explained!
CSR / SSR / SSG / ISR with Next.js – Explained!
Bringing Excellent UX to the React Ecosystem via Strong Defaults in Next.js
Bringing Excellent UX to the React Ecosystem via Strong Defaults in Next.js
Have Single-Page Apps Ruined the Web? | Transitional Apps with Rich Harris, NYTimes
Have Single-Page Apps Ruined the Web? | Transitional Apps with Rich Harris, NYTimes
Addy Osmani :: The Cost of JavaScript :: #PerfMatters Conference 2019
Addy Osmani :: The Cost of JavaScript :: #PerfMatters Conference
Lydia Hallie: JavaScript Visualized: A Script's Life
Lydia Hallie: JavaScript Visualized: A Script's Life
Malte Ubl - Designing very large JavaScript applications
Malte Ubl - Designing very large JavaScript applications
Designing Even Larger (JavaScript) Applications - Malte Ubl | JSConf Hawaii 2020
Designing Even Larger (JavaScript) Applications - Malte Ubl
CSR, SSR, and SSG on NextJS
CSR, SSR, and SSG on NextJS
Optimise your code: load code at the right time
Optimise your code: load code at the right time
Building The New Facebook With React and Relay | Ashley Watkins
Building The New Facebook With React and Relay | Ashley Watkins
Keynote: Production Loading Performance 10 Years Later-Nicole Sullivan and Shubhie Panicker, Google
Production Loading Performance 10 Years Later-Nicole Sullivan and Shubhie Panicker, Google
Code Splitting with React, React.lazy, and React Router v5
Code Splitting with React, React.lazy, and React Router v5
How to analyze your JavaScript bundles
How to analyze your JavaScript bundles
Adaptive Loading - Improving web performance on slow devices (Chrome Dev Summit 2019)
Adaptive Loading - Improving web performance on slow devices (Chrome Dev Summit)
Web Frameworks: SEO Mythbusting
Web Frameworks: SEO Mythbusting
Loading performance - lessons from the trenches of the React ecosystem (BlinkOn 13)
Loading performance - lessons from the trenches of the React ecosystem (BlinkOn)
What is Incremental Static Regeneration? (ISR)
What is Incremental Static Regeneration? (ISR)
Next.js Image Component and Image Optimization
Next.js Image Component and Image Optimization
Data Fetching with React Server Components
Data Fetching with React Server Components
Incrementally Adopting Next.js - Lydia Hallie
Incrementally Adopting Next.js - Lydia Hallie
Paul Irish :: Investigating LCP: Largest Contentful Paint :: #PerfMatters Conference 2020
Paul Irish :: Investigating LCP: Largest Contentful Paint :: #PerfMatters Conference
Web Performance Trivia - Lydia Hallie
Web Performance Trivia - Lydia Hallie
What is Server-Side Rendering? (Server-side Rendering with JavaScript Frameworks)
What is Server-Side Rendering? (Server-side Rendering with JavaScript Frameworks)
Progressive Rendering: Improve Performance on Slower Networks - Dinesh Pandiyan | JSConf Hawaii 2020
Progressive Rendering: Improve Performance on Slower Networks - Dinesh Pandiyan | JSConf
Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O '19)
Speed at Scale: Web Performance Tips and Tricks from the Trenches
Beyond fast with new performance features
Beyond fast with new performance features
Yoav Weiss - Caches All the Way Down!
Yoav Weiss - Caches All the Way Down!
Fast By Default: Modern Loading Best Practices (Chrome Dev Summit 2017)
Fast By Default: Modern Loading Best Practices (Chrome Dev Summit)
Patrick Meenan | HTTP/2 priorities | performance.now() 2019
Patrick Meenan | HTTP/2 priorities | performance.now()
Harry Roberts: “More Than You Ever Wanted to Know About Resource Hints” — Clarity 2019
Harry Roberts: “More Than You Ever Wanted to Know About Resource Hints” — Clarity
Optimize for interactivity using Web Vitals (FID/TBT)
Optimize for interactivity using Web Vitals (FID/TBT)
Planning for Performance: PRPL (Chrome Dev Summit 2016)
Planning for Performance: PRPL (Chrome Dev Summit)
How to convince your boss to fix technical debt in your React app by Paul Armstrong
How to convince your boss to fix technical debt in your React app by Paul Armstrong
How to use the React Profiler to find and fix Performance Problems
How to use the React Profiler to find and fix Performance Problems
How to optimize a React JS app bundle performance to load under 3s | Code splitting | Lazy loading
How to optimize a React JS app bundle performance to load under 3s | Code splitting | Lazy loading
Improving React App Performance : A Case Study
Improving React App Performance : A Case Study
Concurrent Rendering in React - Andrew Clark and Brian Vaughn - React Conf 2018
Concurrent Rendering in React - Andrew Clark and Brian Vaughn - React Conf
Houssein Djirdeh: Progressive React / React Boston 2018
Houssein Djirdeh: Progressive React / React Boston 2018
Use React.lazy and Suspense to Code-Split Your App
Use React.lazy and Suspense to Code-Split Your App
Once you go PRPL... (Houssein Djirdeh)
Once you go PRPL... (Houssein Djirdeh)
Nuxt Server, Nuxt Static, SSR true or false
Nuxt Server, Nuxt Static, SSR true or false
Monica Powell - Keeping Static Site Rendering Cool with React Hydration
Monica Powell - Keeping Static Site Rendering Cool with React Hydration
Making things fast in world of build tools by Surma & Jake Archibald | JSConf Budapest 2019
Making things fast in world of build tools by Surma & Jake Archibald | JSConf Budapest 2019
Moving To React Suspense - Jared Palmer - React Conf 2018
Moving To React Suspense - Jared Palmer - React Conf
Web Performance Mini Series: Load
Web Performance Mini Series: Load
Web Performance Mini Series: Idle
Web Performance Mini Series: Idle
Rendering large lists with react-virtualized or react-window
Rendering large lists with react-virtualized or react-window
90% Cleaner React With Hooks - Ryan Florence - React Conf 2018
90% Cleaner React With Hooks - Ryan Florence - React Conf 2018
5 Design Patterns Every Engineer Should Know
5 Design Patterns Every Engineer Should Know
React Today and Tomorrow and 90% Cleaner React With Hooks
React Today and Tomorrow and 90% Cleaner React With Hooks
“Animation on the Bleeding Edge” by Sarah Drasner—An Event Apart video
“Animation on the Bleeding Edge” by Sarah Drasner—An Event Apart video
Mastering Typescript for React Hooks - Live!
Mastering Typescript for React Hooks - Live!
React Advanced Patterns by Manjula Dube at FrontCon 2019
React Advanced Patterns by Manjula Dube at FrontCon 2019
Let's Learn Modern Redux! (with Mark Erikson) — Learn With Jason
Let's Learn Modern Redux! (with Mark Erikson) — Learn With Jason
Props from Child to Parent Component (Hack)
Props from Child to Parent Component (Hack)
Using React Hooks, Context and State
Using React Hooks, Context and State
Mark Erikson: Hooks, HOCS, and Tradeoffs (⚡️) / React Boston 2019
Mark Erikson: Hooks, HOCS, and Tradeoffs (⚡️) / React Boston 2019
Fun with React Hooks - Michael Jackson and Ryan Florence
Fun with React Hooks - Michael Jackson and Ryan Florence
Building Resilient Frontend Architecture • Monica Lent • GOTO 2019
Building Resilient Frontend Architecture • Monica Lent • GOTO 2019
Async React Hooks
Async React Hooks

Courses

A curated list of recommended courses

A Tour of JavaScript & React Patterns
A Tour of JavaScript & React Patterns

Demos

Movies app

A non-trivial learning app in Next.js, Angular or Nuxt.js

The Movies App is a non-trivial demo application built on top of the TMDB (The Movie Database) API. It features multiple routes and views, authentication, dark mode and a range of performance optimizations.
Movies app

Compare Patterns

Compare a number of React.js performance patterns

Visually compare different approaches to writing React.js components and loading them. Approaches include static and dynamic import, streaming rendering, progressive hydration, SSR with Loadable Components and others.
Patterns Compare

Wallpapers