| https://www.patterns.dev/ | | No Text |
| https://www.patterns.dev/book | | Book |
| https://www.patterns.dev/about | | About |
| https://www.patterns.dev/insights | | Insights |
| /resources | | Resources |
| https://docs.google.com/forms/... | New window External Subdomain | Feedback |
| https://www.patterns.dev/ | | Read Online |
| http://largeapps.dev/ | New window External | Building Large-scale JavaScript Web Apps with React |
| https://www.patterns.dev/book | | Download eBook or PDF |
| https://www.patterns.dev/ | Anchor | Read online |
| https://www.patterns.dev/vanilla | | Introduction Introduction to Design Patterns
IMG-ALT Introduction to Design Patterns |
| /vanilla/singleton-pattern | | Singleton Pattern Share a single global instance throughout our application
IMG-ALT Share a single global instance throughout our application |
| /vanilla/proxy-pattern | | Proxy Pattern Intercept and control interactions to target objects
IMG-ALT Intercept and control interactions to target objects |
| /vanilla/prototype-pattern | | Prototype Pattern Share properties among many objects of the same type
IMG-ALT Share properties among many objects of the same type |
| /vanilla/observer-pattern | | Observer Pattern Use observables to notify subscribers when an event occurs
IMG-ALT Use observables to notify subscribers when an event occurs |
| /vanilla/module-pattern | | Module Pattern Split up your code into smaller, reusable pieces
IMG-ALT Split up your code into smaller, reusable pieces |
| /vanilla/mixin-pattern | | Mixin Pattern Add functionality to objects or classes without inheritance
IMG-ALT Add functionality to objects or classes without inheritance |
| /vanilla/mediator-pattern | | Mediator/Middleware Pattern Use a central mediator object to handle communication between components
IMG-ALT Use a central mediator object to handle communication between components |
| /vanilla/flyweight-pattern | | Flyweight Pattern Reuse existing instances when working with identical objects
IMG-ALT Reuse existing instances when working with identical objects |
| /vanilla/factory-pattern | | Factory Pattern Use a factory function in order to create objects
IMG-ALT Use a factory function in order to create objects |
| /vanilla/view-transitions | | Animating View Transitions An introduction to animating page transitions using the View Transitions API and libraries
IMG-ALT An introduction to animating page transitions using the View Transitions API and libraries |
| /vanilla/loading-sequence | | Optimize your loading sequence Learn how to optimize your loading sequence to improve how quickly your app is usable
IMG-ALT Learn how to optimize your loading sequence to improve how quickly your app is usable |
| /vanilla/static-import | | Static Import Import code that has been exported by another module
IMG-ALT Import code that has been exported by another module |
| /vanilla/dynamic-import | | Dynamic Import Import parts of your code on demand
IMG-ALT Import parts of your code on demand |
| /vanilla/import-on-visibility | | Import On Visibility Load non-critical components when they are visible in the viewport
IMG-ALT Load non-critical components when they are visible in the viewport |
| /vanilla/import-on-interaction | | Import On Interaction Load non-critical resources when a user interacts with UI requiring it
IMG-ALT Load non-critical resources when a user interacts with UI requiring it |
| /vanilla/route-based | | Route Based Splitting Dynamically load components based on the current route
IMG-ALT Dynamically load components based on the current route |
| /vanilla/bundle-splitting | | Bundle Splitting Split your code into small, reusable pieces
IMG-ALT Split your code into small, reusable pieces |
| /vanilla/prpl | | PRPL Pattern Optimize initial load through precaching, lazy loading, and minimizing roundtrips
IMG-ALT Optimize initial load through precaching, lazy loading, and minimizing roundtrips |
| /vanilla/tree-shaking | | Tree Shaking Reduce the bundle size by eliminating dead code
IMG-ALT Reduce the bundle size by eliminating dead code |
| /vanilla/preload | | Preload Inform the browser of critical resources before they are discovered
IMG-ALT Inform the browser of critical resources before they are discovered |
| /vanilla/prefetch | | Prefetch Fetch and cache resources that may be requested some time soon
IMG-ALT Fetch and cache resources that may be requested some time soon |
| /vanilla/third-party | | Optimize loading third-parties Reduce the performance impact third-party scripts have on your site.
IMG-ALT Reduce the performance impact third-party scripts have on your site. |
| /vanilla/virtual-lists | | List Virtualization Optimize list performance with list virtualization
IMG-ALT Optimize list performance with list virtualization |
| /vanilla/compression | | Compressing JavaScript Reduce the time needed to transfer scripts over the network.
IMG-ALT Reduce the time needed to transfer scripts over the network. |
| https://www.patterns.dev/react | | Overview of React.js A UI library for building reusable user interface components
IMG-ALT A UI library for building reusable user interface components |
| /react/nextjs | | Overview of Next.js Vercel's framework for hybrid React applications
IMG-ALT Vercel's framework for hybrid React applications |
| /react/presentational-containe... | | Container/Presentational Pattern Enforce separation of concerns by separating the view from the application logic
IMG-ALT Enforce separation of concerns by separating the view from the application logic |
| /react/hoc-pattern | | HOC Pattern Pass reusable logic down as props to components throughout your application
IMG-ALT Pass reusable logic down as props to components throughout your application |
| /react/render-props-pattern | | Render Props Pattern Pass JSX elements to components through props
IMG-ALT Pass JSX elements to components through props |
| /react/hooks-pattern | | Hooks Pattern Use functions to reuse stateful logic among multiple components throughout the app
IMG-ALT Use functions to reuse stateful logic among multiple components throughout the app |
| /react/compound-pattern | | Compound Pattern Create multiple components that work together to perform a single task
IMG-ALT Create multiple components that work together to perform a single task |
| /react/client-side-rendering | | Client-side Rendering Render your application's UI on the client
IMG-ALT Render your application's UI on the client |
| /react/server-side-rendering | | Server-side Rendering Generate HTML to be rendered on the server in response to a user request
IMG-ALT Generate HTML to be rendered on the server in response to a user request |
| /react/static-rendering | | Static Rendering Deliver pre-rendered HTML content that was generated when the site was built
IMG-ALT Deliver pre-rendered HTML content that was generated when the site was built |
| /react/incremental-static-rend... | | Incremental Static Generation Update static content after you have built your site
IMG-ALT Update static content after you have built your site |
| /react/progressive-hydration | | Progressive Hydration Delay loading JavaScript for less important parts of the page
IMG-ALT Delay loading JavaScript for less important parts of the page |
| /react/streaming-ssr | | Streaming Server-Side Rendering Generate HTML to be rendered on the server in response to a user request
IMG-ALT Generate HTML to be rendered on the server in response to a user request |
| /react/react-server-components | | React Server Components Server Components compliment SSR, rendering to an intermediate abstraction without needing to add to the JavaScript bundle
IMG-ALT Server Components compliment SSR, rendering to an intermediate abstraction without needing to add to the JavaScript bundle |
| /react/nextjs-vitals | | Optimize Next.js apps for the Core Web Vitals With Next.js, there are several components that can help improve Core Web Vitals metrics
IMG-ALT With Next.js, there are several components that can help improve Core Web Vitals metrics |
| https://www.patterns.dev/vue | | Introduction Introduction to Vue Patterns
IMG-ALT Introduction to Vue Patterns |
| /vue/components | | Components Self-contained modules that couple markup (HTML), logic (JS), and styles (CSS) within them
IMG-ALT Self-contained modules that couple markup (HTML), logic (JS), and styles (CSS) within them |
| /vue/async-components | | Async Components Optimize web app performance by asynchronously loading components.
IMG-ALT Optimize web app performance by asynchronously loading components. |
| /vue/composables | | Composables Functions to encapsulate and reuse stateful logic among multiple components
IMG-ALT Functions to encapsulate and reuse stateful logic among multiple components |
| /vue/container-presentational | Text duplicate | Container/Presentational Pattern Enforce separation of concerns by separating the view from the application logic
IMG-ALT Enforce separation of concerns by separating the view from the application logic |
| /vue/data-provider | | Data Provider Pattern Utilize renderless components for managing and providing data
IMG-ALT Utilize renderless components for managing and providing data |
| /vue/dynamic-components | | Dynamic Components Dynamically switch between components with the special <component> element
IMG-ALT Dynamically switch between components with the special <component> element |
| /vue/provide-inject | | Provide/Inject Have nested components access data without using props
IMG-ALT Have nested components access data without using props |
| /vue/render-functions | | Render functions Create component templates with programmatic JavaScript
IMG-ALT Create component templates with programmatic JavaScript |
| /vue/renderless-components | | Renderless components Components that don't render their own markup
IMG-ALT Components that don't render their own markup |
| /vue/script-setup | | <script setup> Compile-time syntactic sugar for using the Composition API
IMG-ALT Compile-time syntactic sugar for using the Composition API |
| /vue/state-management | | State Management Manage application level state between components
IMG-ALT Manage application level state between components |
Meta Title
(Nice to have)