Patterns.dev - Web App Patterns
Free catalog of JS, React, Vue & performance patterns
A free online resource on design, rendering, and performance patterns for building powerful web apps with vanilla JavaScript or modern frameworks (React, Next.js, Vue). Covers JavaScript patterns (Singleton, Proxy, Prototype, Observer, Module, Mixin, Factory), React patterns (Container/Presentational, HOC, Render Props, Hooks, Compound Components, Server Components), Vue patterns (Composables, Provide/Inject, State Management), and web performance patterns (code splitting, tree shaking, preload/prefetch, PRPL, virtual lists). Includes practical examples on CodeSandbox and animations.
Front EndFreebeginnerSelf-paced
Submitted by @yahianaimRoadmap (5 steps)
1
JavaScript patterns
Self-paced#Singleton#Proxy#Prototype#Observer#Module#Mixin#Factory
2
React patterns
Self-paced#Container/Presentational#HOC#Render Props#Hooks#Compound Components
3
Vue patterns
Self-paced#Composables#Provide/Inject#Data Provider#Render Functions#State Management
4
Rendering patterns
Self-paced#Client vs Server Rendering#Static & ISR#Streaming SSR#React Server Components
5
Performance patterns
Self-paced#Code Splitting#Tree Shaking#Preload & Prefetch#PRPL#List Virtualization