PatternsDev/skills

When building a modern web application, bundlers such as [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/guide/en/) take an application's source code, and bundle this together into one or more bundles. When a user visits

JavaScript engines such as [V8](https://v8.dev/docs) are able to parse and compile data that's been requested by the user as it's being loaded. Although modern browsers have evolved to parse and compile the code as quickly and performantly 

- [patterns.dev/vanilla/bundle-splitting](https://patterns.dev/vanilla/bundle-splitting)

- [patterns.dev/vanilla/command-pattern](https://patterns.dev/vanilla/command-pattern)

- [Command Design Pattern](https://sourcemaking.com/design_patterns/command) - SourceMaking

- [Command Pattern](https://refactoring.guru/design-patterns/command) - Refactoring Guru

- [Command Pattern](https://www.carloscaballero.io/design-patterns-command/) - Carlos Caballero

JavaScript is the second biggest [contributor to page size](https://almanac.httparchive.org/en/2020/page-weight#fig-2) and the second most [requested web resource](https://almanac.httparchive.org/en/2020/page-weight#fig-4) on the internet a

- **Gzip** and **Brotli** are the most common ways to compress JavaScript and are widely supported by modern browsers. - **Brotli** offers a **better compression ratio** at similar compression levels. - **Next.js** provides [Gzip compressio

- **Brotli** offers a **better compression ratio** at similar compression levels. - **Next.js** provides [Gzip compression by default](https://nextjs.org/docs/api-reference/next.config.js/compression) but recommends enabling it on an HTTP p

- **Next.js** provides [Gzip compression by default](https://nextjs.org/docs/api-reference/next.config.js/compression) but recommends enabling it on an HTTP proxy like Nginx.

- If you use **Webpack** to bundle your code, you can use the **[CompressionPlugin](https://github.com/webpack-contrib/compression-webpack-plugin)** for Gzip compression or the [BrotliWebpackPlugin](https://github.com/mynameiswhm/brotli-web

Compression reduces the size of documents and files, so they take up less disk space than the originals. Smaller documents consume lower bandwidth and can be transferred over a network quickly. HTTP compression uses this simple concept to c

To reduce payload sizes, you can minify JavaScript before compression. [Minification](https://web.dev/reduce-network-payloads-using-text-compression/#minification) complements compression by removing whitespace and any unnecessary code to c

Multiple tools are available for [the minification of HTML, CSS, and JS](https://developers.google.com/speed/docs/insights/MinifyResources) resources. [Terser](https://github.com/terser-js/terser) is a popular JavaScript compression tool fo

[Gzip](https://datatracker.ietf.org/doc/html/rfc1952) and [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html) are the two [most common algorithms](https://almanac.httparchive.org/en/2020/compression#f

The Gzip compression format has been around for almost 30 years and is a lossless algorithm based on the [Deflate algorithm](https://www.youtube.com/watch?v=whGwm0Lky2s&t=851s). The deflate algorithm itself uses a combination of the [LZ77 a

All major browsers support Gzip. The [Zopfli](https://github.com/google/zopfli) compression algorithm is a slower but improved version of Deflate/Gzip, producing smaller GZip compatible files. It is most suitable for static compression, whe

In 2015, Google introduced the [Brotli algorithm](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html) and the [Brotli compressed data format](https://datatracker.ietf.org/doc/html/rfc7932). Like GZip, [Brotli]

Brotli is [supported](https://caniuse.com/?search=brotli) by all major servers and browsers today and is becoming increasingly [popular](https://almanac.httparchive.org/en/2020/compression#fig-5). It is also supported and can be easily enab

Websites with a large user base, such as [OYO](https://tech.oyorooms.com/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4) and [Wix](https://web.dev/wix/#brotli-compression-(vs.-gzip)), have improved their performance cons

You can enable static compression as part of the build. If you use Webpack to bundle your code, you can use the [CompressionPlugin](https://github.com/webpack-contrib/compression-webpack-plugin) for Gzip compression or the [BrotliWebpackPlu

Next.js provides [Gzip compression by default](https://nextjs.org/docs/api-reference/next.config.js/compression) but recommends enabling it on an HTTP proxy like Nginx. Both Gzip and Brotli are supported on the [Vercel platform](https://ver

You can enable dynamic lossless compression on servers (including Node.js) that support different compression algorithms. The browser communicates the compression algorithms it supports through the [Accept-Encoding](https://developer.mozill

This indicates that the browser supports Gzip and Brotli. You can enable different types of compression on your server by following instructions for the specific server type. For example, you can find instructions for enabling Brotli on the

Brotli is recommended over other compression algorithms because it generates smaller file sizes. You can enable Gzip as a fallback for browsers that don't support Brotli. If successfully configured, the server will return the [Content-Encod

To fully grasp the effects of JavaScript compression, you must also consider other aspects of JavaScript optimization, such as [route-based splitting](https://www.patterns.dev/posts/route-based/), [code-splitting](https://webpack.js.org/gui

1. **Module**: Modules are discrete chunks of functionality designed to provide solid abstractions and encapsulation. See [Module pattern](https://www.patterns.dev/posts/module-pattern/) for more detail.

2. **Bundle**: Group of distinct modules that contain the final versions of source files and have already undergone the loading and compilation process in the bundler. 3. **Bundle splitting**: The process utilized by bundlers to split the a

4. **Chunk**: Adopted from Webpack terminology, a chunk is the final output of the bundling and code-splitting process. Webpack can split bundles into chunks based on the [entry](https://webpack.js.org/configuration/entry-context/) configur

Every byte of the chunks required by a page needs to be downloaded and parsed/executed by user devices. This is the code that [directly affects](https://v8.dev/blog/cost-of-javascript-2019) the application performance. Since chunks are the 

A potential solution that addresses these requirements is still in the works. However, Webpack v4's [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/) and a granular chunking strategy can help increase the loading gran

Next.js adopted the SplitChunksPlugin and implemented the following [Granular Chunking](https://web.dev/granular-chunking-nextjs/) strategy to generate Webpack chunks that address the granularity trade-off.

The granular chunking strategy helped several Next JS apps reduce the total JavaScript used by the site. The granular chunking strategy was also implemented in [Gatsby](https://github.com/gatsbyjs/gatsby/pull/22253) with similar benefits ob

- [patterns.dev/vanilla/compression](https://patterns.dev/vanilla/compression)

Server-side rendering doesn't support React Suspense (yet). A good alternative to React Suspense is the [`loadable-components`](https://loadable-components.com/docs/getting-started/) library, which can be used in SSR applications.

- [patterns.dev/vanilla/dynamic-import](https://patterns.dev/vanilla/dynamic-import)

- [patterns.dev/vanilla/factory-pattern](https://patterns.dev/vanilla/factory-pattern)

- [JavaScript Factory Functions with ES6+](https://medium.com/javascript-scene/javascript-factory-functions-with-es6-4d224591a8b1) - Eric Elliott

In JavaScript, we can easily solve this problem through [prototypal inheritance](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). Nowadays, hardware has GBs of RAM, which makes the flyweight patt

- [patterns.dev/vanilla/flyweight-pattern](https://patterns.dev/vanilla/flyweight-pattern)

- [Flyweight](https://refactoring.guru/design-patterns/flyweight) - Refactoring Guru

- [Flyweight Design Pattern](https://howtodoinjava.com/design-patterns/structural/flyweight-design-pattern) - How To Do In Java

Loading these resources eagerly (i.e right away) can [block the main thread](https://web.dev/long-tasks-devtools/) if they are costly, pushing out how soon a user can interact with more critical parts of a page. This can impact interaction 

- When the user clicks to interact with that component for the first time - Scrolls the component into view - or deferring load of that component until the browser is idle (via [requestIdleCallback](https://developer.mozilla.org/en-US/docs/

- or deferring load of that component until the browser is idle (via [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)).

- Lazy (On interaction) - load when the user clicks UI (e.g Show Chat) - Lazy (In viewport) - load when the user scrolls towards the component - [Prefetch](https://web.dev/link-prefetch/) - load prior to needed, but after critical resources

- Lazy (In viewport) - load when the user scrolls towards the component - [Prefetch](https://web.dev/link-prefetch/) - load prior to needed, but after critical resources are loaded - [Preload](https://web.dev/preload-critical-assets/) - eag

- [Prefetch](https://web.dev/link-prefetch/) - load prior to needed, but after critical resources are loaded

- [Preload](https://web.dev/preload-critical-assets/) - eagerly, with a greater level of urgency

You might be importing a third-party script and have less control over what it renders or when it loads code. One option for implementing load-on-interaction is straight-forward: use a [facade](https://github.com/patrickhulce/third-party-we

When a user clicks on the "preview" (the facade), the code for the resource is loaded. This limits users needing to pay the experience cost for a feature if they're not going to use it. Similarly, facades can [preconnect](https://web.dev/us

A good example of a "facade" is the [YouTube Lite Embed](https://github.com/paulirish/lite-youtube-embed) by Paul Irish. This provides a Custom Element which takes a YouTube Video ID and presents a minimal thumbnail and play button. Clickin

Calibre app [improved performance of their Intercom-based live chat by 30%](https://calibreapp.com/blog/fast-live-chat) through usage of a similar facade approach. They implemented a "fake" fast loading live chat button using just CSS and H

[Postmark](https://wildbit.com/blog/2020/09/30/getting-postmark-lighthouse-performance-score-to-100) noted that their Help chat widget was always eagerly loaded, even though it was only occasionally used by customers. The widget would pull 

[Ne-digital](https://medium.com/ne-digital/how-to-reduce-next-js-bundle-size-68f7ac70c375) used a React library for animated scrolling back to the top of a page when a user clicks on a "scroll to top" button. Rather than eagerly loading the

In JavaScript, [dynamic import()](https://v8.dev/features/dynamic-import) enables lazy-loading modules and returns a promise and can be quite powerful when applied correctly. Below is an example where dynamic import is used in a button even

Let's imagine we have a Chat application which has a `<MessageList>`, `<MessageInput>` and an `<EmojiPicker>` component (powered by [emoji-mart](https://bundlephobia.com/result?p=emoji-mart@3.0.0), which is 98KB minified and gzipped). It ca

Breaking the loading of this work up is relatively straight-forward with [code-splitting](https://web.dev/reduce-javascript-payloads-with-code-splitting/). The `React.lazy` method makes it easy to code-split a React application on a compone

The import-on-interaction pattern should be possible with most frameworks and libraries that support dynamic component loading, including [Angular](https://johnpapa.net/angular-9-lazy-loading-components/).

In the framework stack used by these Google teams, we can track clicks early because the first chunk of HTML includes a small event library ([JSAction](https://github.com/google/jsaction)) which tracks all clicks before the framework is boo

For a walkthrough of the above example, see [Elevating the Web Platform with the JavaScript Community](https://www.youtube.com/watch?v=-xZHWK-vHbQ).

- [patterns.dev/vanilla/import-on-interaction](https://patterns.dev/vanilla/import-on-interaction)

As we're not requesting all images instantly, we can reduce the initial loading time. We can do the same with components! In order to know whether components are currently in our viewport, we can use the [`IntersectionObserver` API](https:/

- [patterns.dev/vanilla/import-on-visibility](https://patterns.dev/vanilla/import-on-visibility)

The core principle for SSR is that HTML is rendered on the server and shipped with necessary JavaScript to rehydrate it on the client. Rehydration is the process of regenerating the state of UI components on the client-side after the server

The term [Islands architecture](https://jasonformat.com/islands-architecture/) was popularized by Katie Sylor-Miller and Jason Miller to describe a paradigm that aims to reduce the volume of JavaScript shipped through "islands" of interacti

The Island architecture borrows concepts from different sources and aims to combine them optimally. Template-based static site generators such as [Jekyll](https://jekyllrb.com/) and [Hugo](https://gohugo.io/) support the rendering of static

Jason's post suggests the use of [`requestIdleCallback()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback) to implement a scheduling approach for hydrating components. Static isomorphic rendering and scheduling 

1. **Marko**: [Marko](https://markojs.com/) is an open-source framework [developed](https://tech.ebayinc.com/engineering/the-future-of-marko/) and [maintained](https://tech.ebayinc.com/engineering/ebay-launches-marko-5/) by eBay to improve 

2. **Astro**: [Astro](https://astro.build/) is a static site builder that can generate lightweight static HTML pages from UI components built in other frameworks such as React, Preact, Svelte, Vue, and others. Components that need client-si

3. **Eleventy + Preact:** [Markus Oberlehner](https://markus.oberlehner.net/blog/building-partially-hydrated-progressively-enhanced-static-websites-with-isomorphic-preact-and-eleventy/#lazy-hydration) demonstrates the use of Eleventy, a sta

1. The only options available to developers to implement Islands are to use one of the few frameworks available or develop the architecture yourself. Migrating existing sites to Astro or Marko would require additional efforts. 2. Besides Ja

2. Besides Jason's initial post, there is little discussion available on the idea. 3. [New frameworks](https://github.com/bensmithett/tropical-utils/tree/main/packages/tropical-islands) claim to support the Islands architecture making it di

3. [New frameworks](https://github.com/bensmithett/tropical-utils/tree/main/packages/tropical-islands) claim to support the Islands architecture making it difficult to filter the ones which will work for you.

- [patterns.dev/vanilla/islands-architecture](https://patterns.dev/vanilla/islands-architecture)

- [Islands Architecture](https://jasonformat.com/islands-architecture/)

- [Is 0KB of JavaScript in your future](https://dev.to/this-is-learning/is-0kb-of-javascript-in-your-future-48og)

- [Modernizing Etsy's codebase with React](https://changelog.com/jsparty/105)

For complex cases, use `requestAnimationFrame` to defer writes to the next frame, or use a library like [fastdom](https://github.com/wilsonpage/fastdom).

Patterns from [patterns.dev](https://www.patterns.dev/) — JavaScript performance guidance for the broader web engineering community.

In every successful web page load, some critical components and resources become available at just the right time to give you a smooth loading experience. This ensures users perceive the performance of the application to be excellent. This 

Key [metrics](https://web.dev/metrics/) such as [First Content Paint](https://web.dev/fcp/), [Largest Contentful Paint](https://web.dev/lcp/), [First Input Delay](https://web.dev/fid/), etc used to measure performance are directly dependent

[Web Vitals](https://web.dev/vitals) optimization requires not only a good understanding of what each metrics stands for but also the order in which they occur and how they relate to different critical resources. FCP occurs before LCP which

An example of this is the [preload bug](https://bugs.chromium.org/p/chromium/issues/detail?id=788757) on the chromium platform. The [Preload](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) (`<link rel=p

The protocol itself does not provide many options or knobs for adjusting the order and priority of resources. Even if better prioritization primitives were to be made available, there are underlying [problems with HTTP2 prioritization](http

[Critical CSS](https://web.dev/extract-critical-css/) refers to the minimum CSS required for FCP. It is better to inline such CSS within HTML rather than import it from another CSS file. Only the CSS required for the route should be downloa

Like critical CSS, the CSS for [critical fonts](https://web.dev/font-best-practices/) should also be inlined. If inlining is not possible the script should be loaded with a [preconnect](https://web.dev/uses-rel-preconnect/) specified. Delay

Inlining fonts can bloat the HTML significantly and delay initiating other critical resource fetches. [Font fallback](https://css-tricks.com/css-basics-fallback-font-stacks-robust-web-typography/) may be used to unblock FCP and make the tex

- CSS and Fonts are loaded with the highest priority. This should help us prioritize critical CSS and fonts. - Scripts get different priorities based on where they are in the document and whether they are async, defer, or blocking. Blocking

- Scripts get different priorities based on where they are in the document and whether they are async, defer, or blocking. Blocking scripts requested before the first image (or an image early in the document) are given higher priority over 

With that background, we can now propose a loading sequence that should optimize the loading of both 1P and 3P resources. The proposed sequence uses [Next.js](https://nextjs.org/) Server Side Rendering (SSR) as a reference for optimization.

- [patterns.dev/vanilla/loading-sequence](https://patterns.dev/vanilla/loading-sequence)

[Express.js](https://expressjs.com) is a popular web application server framework. We can add callbacks to certain routes that the user can access.

- [patterns.dev/vanilla/mediator-pattern](https://patterns.dev/vanilla/mediator-pattern)

- [Docs - Express](https://expressjs.com)

- [Mediator Pattern - OO Design](https://www.oodesign.com/mediator-pattern.html)

An example of a mixin in the real world is visible on the `Window` interface in a browser environment. The `Window` object implements many of its properties from the [`WindowOrWorkerGlobalScope`](https://developer.mozilla.org/en-US/docs/Web

Mixins were often used to add functionality to React components before the introduction of ES6 classes. The React team [discourages the use of mixins](https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html) as it easily adds unn

- [patterns.dev/vanilla/mixin-pattern](https://patterns.dev/vanilla/mixin-pattern)

- [Functional Mixins](https://medium.com/javascript-scene/functional-mixins-composing-software-ffb66d5e731c) - Eric Elliott

- [Mixins](https://javascript.info/mixins) - JavaScript Info

With the module pattern, we can encapsulate parts of our code that should not be publicly exposed. This prevents accidental name collision and global scope pollution, which makes working with multiple dependencies and namespaces less risky.

- [patterns.dev/vanilla/module-pattern](https://patterns.dev/vanilla/module-pattern)

- [patterns.dev/vanilla/observer-pattern](https://patterns.dev/vanilla/observer-pattern)

- [RxJS](https://rxjs-dev.firebaseapp.com)

- [JavaScript Design Patterns: The Observer Pattern](https://www.sitepoint.com/javascript-design-patterns-observer-pattern)

Prefetch (`<link rel="prefetch">`) is a browser optimization which allows us to fetch resources that may be needed for subsequent routes or pages before they are needed. Prefetching can be achieved in a few ways. It can be done declarativel

Components or resources that we know are likely to be used at some point in the application can be **prefetched**. We can let Webpack know that certain bundles need to be prefetched, by adding a [magic comment](https://webpack.js.org/api/mo

- [patterns.dev/vanilla/prefetch](https://patterns.dev/vanilla/prefetch)

- [Preload, prefetch and priorities in Chrome](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)

- [Faster navigations with predictive prefetching](https://web.dev/predictive-prefetching/)

- [Prefetching heuristics](https://blog.mgechev.com/2021/02/07/prefetching-strategies-heuristics-faster-web-apps/)

- [What not to prefetch](https://addyosmani.com/blog/what-not-to-prefetch-prerender/)

[Preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) (`<link rel="preload">`) is a [browser optimization](https://web.dev/uses-rel-preload/) that allows critical resources (that may be discovered late) to be reque

When optimizing for metrics like [Time To Interactive](https://web.dev/tti) or [First Input Delay](https://web.dev/fid), preload can be useful to load JavaScript bundles (or chunks) that are necessary for interactivity. Keep in mind that gr

> Webpack 4.6.0+ allows preloading of resources by adding `/* webpackPreload: true */` to the import. In order to make preloading work in older versions of webpack, you'll need to add the [`preload-webpack-plugin`](https://github.com/Google

Thanks to some [fixes](https://twitter.com/patmeenan/status/1436374668450177026) to preload's [queue-jumping](https://docs.google.com/document/d/1ZEi-XXhpajrnq8oqs5SiW-CXR3jMc20jWIzN5QRy1QA/edit?usp=sharing) behavior in Chrome 95+, the feat

Again, use preload sparingly and measure its impact in production. If the preload for your image is earlier in the document than it is, this can help browsers discover it (and order relative to other resources). When used incorrectly, prelo

You may also find `<link rel="preload">` to be helpful for cases where you need to fetch scripts [without executing](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#scripting_and_preloads) them.

- [Preload key scripts required for interactivity](https://web.dev/uses-rel-preload/)

- [Preload your Largest Contentful Paint image](https://web.dev/preload-responsive-images/)

- [Load fonts while preventing layout shifts](https://web.dev/preload-optional-fonts/)

- [patterns.dev/vanilla/preload](https://patterns.dev/vanilla/preload)

- [patterns.dev/vanilla/prototype-pattern](https://patterns.dev/vanilla/prototype-pattern)

- [Object.create - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create)

- [Prototype - ECMA](https://www.ecma-international.org/ecma-262/5.1/#sec-4.3.5)

Some libraries provide built-in providers, which values we can use in the consuming components. A good example of this, is [styled-components](https://styled-components.com/docs/advanced).

- [patterns.dev/vanilla/provider-pattern](https://patterns.dev/vanilla/provider-pattern)

- [Context - React](https://reactjs.org/docs/context.html)

- [How To Use React Context Effectively - Kent C. Dodds](https://kentcdodds.com/blog/how-to-use-react-context-effectively)

The second argument of `Proxy` is an object that represents the _handler_. In the handler object, we can define specific behavior based on the type of interaction. Although there are [many methods](https://developer.mozilla.org/en-US/docs/W

- [patterns.dev/vanilla/proxy-pattern](https://patterns.dev/vanilla/proxy-pattern)

- [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) - MDN

- [JavaScript Proxy](https://davidwalsh.name/javascript-proxy) - David Walsh

- [Awesome ES2015 Proxy](https://github.com/mikaelbr/awesome-es2015-proxy) - GitHub @mikaelbr

- [Thoughts on ES6 Proxies Performance](http://thecodebarbarian.com/thoughts-on-es6-proxies-performance) - Valeri Karpov

Although pushing resources reduces the amount of time to receive additional resources, server push is not HTTP cache aware! The pushed resources won't be available to us the next time we visit the website, and will have to be requested agai

- [patterns.dev/vanilla/prpl](https://patterns.dev/vanilla/prpl)

- [patterns.dev/vanilla/route-based](https://patterns.dev/vanilla/route-based)

- [patterns.dev/vanilla/singleton-pattern](https://patterns.dev/vanilla/singleton-pattern)

- [Do React Hooks replace Redux](https://medium.com/javascript-scene/do-react-hooks-replace-redux-210bab340672) - Eric Elliott

- [JavaScript Design Patterns: The Singleton](https://www.sitepoint.com/javascript-design-patterns-singleton/) - Samier Saeed

- [Singleton](https://refactoring.guru/design-patterns/singleton) - Refactoring Guru

- [patterns.dev/vanilla/static-import](https://patterns.dev/vanilla/static-import)

- A/B testing and personalization scripts - Utility libraries that provide ready-to-use helper functions such as those used for data visualization or animations. - [reCAPTCHA](https://www.google.com/recaptcha/about/) or CAPTCHA for bot dete

- [reCAPTCHA](https://www.google.com/recaptcha/about/) or CAPTCHA for bot detection.

You can use third-parties to integrate other features that add value to your content or to reduce some drudgery involved in building a site from scratch. As per the Web Almanac report for 2021, more than [94% of the pages](https://almanac.h

- They make heavy usage of JavaScript (impacting download and execution time) or are bulky in size because of unoptimized images/videos. - Individual site owners cannot influence the implementation, and their behavior can be unpredictable. 

- They can block the rendering of other critical resources on the page and affect [Core Web Vitals](https://web.dev/vitals/) (CWV).

- The following Lighthouse audits help identify slow third-party scripts that affect CWV:   - [Reduce the impact of third-party code](https://web.dev/third-party-summary/) for scripts that block the main thread.

- [Reduce the impact of third-party code](https://web.dev/third-party-summary/) for scripts that block the main thread.

- [Reduce JavaScript execution time](https://web.dev/bootup-time/) for scripts that take long to execute

- [Avoid enormous network payloads](https://web.dev/total-byte-weight/) for large scripts

- Use the WebPageTest (WPT) waterfall chart to identify [third-party blocking scripts](https://nooshu.com/blog/2019/10/02/how-to-read-a-wpt-waterfall-chart/#third-party-blocking-javascript) or WPT side-by-side comparison to [measure the imp

- Sites like [Bundlephobia](https://bundlephobia.com/) help to assess the cost of adding available npm packages to your bundles. You can also find size and dependencies included in any package using [npm package search](https://www.npmjs.co

JavaScript download and execution is synchronous by default and can block the HTML parser and DOM construction on the main thread. Use of [async](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async) or [defer](https:

<script src="https://example.com/deferthis.js" defer></script>

<script src="https://example.com/asyncthis.js" async></script>

One caveat worth mentioning here is that async and defer lower the browser assigned priority of the resources causing it to load significantly later. A new feature for [priority hints](https://web.dev/priority-hints/) can help to work aroun

Including a [dns-prefetch](https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch) resource hint corresponding to a domain will perform the DNS lookup early, thus reducing the latency associated with dns lookups. You can pair

<head>   <link rel="preconnect" href="http://example.com" />

<link rel="preconnect" href="http://example.com" />

<link rel="dns-prefetch" href="http://example.com" />

Benefits of using resource hints are evident in this case study where Andy Davies discusses how using [preconnect helped reduce the loading time](https://andydavies.me/blog/2019/03/22/improving-perceived-performance-with-a-link-rel-equals-p

1. The [loading](https://web.dev/iframe-lazy-loading/) attribute can be used with images and iframes commonly used to load third-party embeds like those for YouTube or Google Maps.

2. A custom implementation using the [IntersectionObserver API](https://developers.google.com/web/updates/2016/04/intersectionobserver) allows you to detect when the observed element enters or exits the browser's viewport.

3. [Lazy-sizes](https://github.com/aFarkas/lazysizes) - a popular JavaScript library that implements lazy-loading for you.

A variation of lazy-loading embeds uses a static or dynamic facade displayed to users on page loads. Instead of the map embed, you can use a static image of the actual embed. Solutions include the [Map Static API](https://developers.google.

Self-hosting a copy of the scripts on the same origin offers you more control over the loading and caching process used for the scripts. Self-hosting reduces the time required for DNS lookup and allows you to improve the caching strategy fo

With self-hosted copies of third-party scripts, you have to ensure that you update your copy regularly based on changes to the original. Without updates, the script may become outdated, missing important fixes or changes corresponding to de

Advertising or analytics teams may worry about the impact of deferring scripts on the visibility and advertising revenue of the app. The [Telegraph case study](https://medium.com/the-telegraph-engineering/improving-third-party-web-performan

1. Load it only on a few pages with form inputs from the user that may get spammed by a bot. 2. [Lazy load the script](https://dev.to/uf4no/improve-page-performance-lazy-loading-recaptcha-442o) when the user interacts with form elements, fo

2. [Lazy load the script](https://dev.to/uf4no/improve-page-performance-lazy-loading-recaptcha-442o) when the user interacts with form elements, for example, on form focus.

Large sites often provide [Google Tag Manager](https://marketingplatform.google.com/about/resources/tag-manager-product-overview/) access to marketing teams or agencies. This allows them to add new marketing tags to all pages on the site fo

Sites conduct [A/B tests](https://www.optimizely.com/optimization-glossary/ab-testing/) to check which version of the webpage performs better. A/B tests can significantly affect the performance of pages on which they are run, with each test

[Site personalization](https://www.dynamicyield.com/lesson/web-personalization/) is a related concept which involves running scripts to provide a tailored experience for different users based on known data. These scripts are again heavy and

To optimize third-party A/B testing scripts, you can limit the number of users who receive the script. Google's Optimize allows the configuration of [rules for targeting users](https://support.google.com/optimize/answer/6283420#zippy=%2Cin-

These embeds are heavy, and developers must explore lazy-loading or click-to-load patterns to load the embeds to optimize them. Use of solutions like [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) is encouraged while 

Some social media embeds provide an option to lazy-load their scripts (e.g., [data-lazy in Facebook](https://developers.facebook.com/docs/plugins/embedded-posts/) embeds). You can explore this to improve performance. Another alternative is 

[Partytown created by Builder.io](https://github.com/BuilderIO/partytown) is an experimental library that helps run resource-intensive scripts on a [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) instead of th

Next.js 11 was released in mid-2021 with components based on the [Conformance](https://web.dev/conformance/) methodology introduced by Google's Aurora team. The [Next.js Script component](https://nextjs.org/docs/basic-features/script) uses 

<>       <Head>         <script async src="https://example.com/samplescript.js" />

<Head>         <script async src="https://example.com/samplescript.js" />       </Head>

<script async src="https://example.com/samplescript.js" />

return (    <>      <Script src="https://example.com/samplescript.js" />

<>      <Script src="https://example.com/samplescript.js" />    </>

<Script src="https://example.com/samplescript.js" />

<>       <Script         src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"

<Script         src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"         strategy="beforeInteractive"

src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"

<>       <Script         src="https://connect.facebook.net/en_US/sdk.js"

<Script         src="https://connect.facebook.net/en_US/sdk.js"         strategy="lazyOnload"

src="https://connect.facebook.net/en_US/sdk.js"

<>       <Script         src="https://www.google-analytics.com/analytics.js"

<Script         src="https://www.google-analytics.com/analytics.js"         id="analytics"

src="https://www.google-analytics.com/analytics.js"

new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefo

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);            })(window,document,'script','dataLayer', '${GTM_ID}');

'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

- [patterns.dev/vanilla/third-party](https://patterns.dev/vanilla/third-party)

The Webpack documentation gives a [clear explanation on tree-shaking](https://webpack.js.org/guides/tree-shaking/#clarifying-tree-shaking-and-sideeffects) and how to avoid breaking it.

- [patterns.dev/vanilla/tree-shaking](https://patterns.dev/vanilla/tree-shaking)

The [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) offers a simple way to transition any visual DOM change from one state to the next. This might include small changes such as toggling some content,

That's the basics of the API. [Jake Archibald's excellent View Transitions article](https://developer.chrome.com/docs/web-platform/view-transitions) covers the details well. For now, let's see how we might transition full page navigations.

**Note:** The [Next.js App Router](https://beta.nextjs.org/docs/app-directory-roadmap) is in beta at the time of writing and best-practices around it and the pages directory may be subject to change.

View the [Next.js demonstration](https://frolicking-dusk-29be0a.netlify.app/), the [live Next.js demo](https://photography-view-transitions-nextjs.vercel.app/) and its [source](https://github.com/domchristie/photography-view-transitions-nex

To implement this, we'll need to hook into routing events, which will depend on the framework or library you're using. In particular, we'll need to be notified when the user navigates. With Next.js, we can use the [`routeChangeStart` router

[Turbo](https://turbo.hotwired.dev/), part of the [Hotwire](https://hotwired.dev/) suite of libraries (not to be confused with [Vercel's Turbo](https://turbo.build/)), offers a rendering approach that progressively enhances multi-page appli

[Turn](https://github.com/domchristie/turn) is a library for animating page navigations using Turbo. It supports both animation approaches (although currently view transitions are experimental). Turn adds `turn-before-exit`, `turn-exit`, an

- [patterns.dev/vanilla/view-transitions](https://patterns.dev/vanilla/view-transitions)

If you use React and need to **display large lists of data efficiently**, you may be familiar with [react-virtualized](https://bvaughn.github.io/react-virtualized/). It's a windowing library by [Brian Vaughn](https://twitter.com/brian_d_vau

[react-window](https://react-window.now.sh/) is a rewrite of react-virtualized by the same author aiming to be **smaller**, faster and more [tree-shakeable](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tr

Lists render a **windowed list (row) of elements** meaning that only the visible rows are displayed to users (e.g [FixedSizeList](https://react-window.now.sh/#/examples/list/fixed-size), [VariableSizeList](https://react-window.now.sh/#/exam

You can try out `FixedSizeList` on [CodeSandbox](https://codesandbox.io/s/github/bvaughn/react-window/tree/master/website/sandboxes/fixed-size-list-vertical).

Grid renders **tabular data** with virtualization along the vertical and horizontal axes (e.g [FixedSizeGrid](https://react-window.now.sh/#/examples/grid/fixed-size), [VariableSizeGrid](https://react-window.now.sh/#/examples/grid/variable-s

You can also try out `FixedSizeGrid` on [CodeSandbox](https://codesandbox.io/s/github/bvaughn/react-window/tree/master/website/sandboxes/fixed-size-grid).

[Scott Taylor](https://github.com/staylor) implemented an open-source [Pitchfork music reviews scraper](http://pitchfork.highforthis.com/) [(src)](https://github.com/staylor/pitchfork-scraper) using `react-window` and `FixedSizeGrid`.

Pitchfork scraper uses [react-window-infinite-loader](https://github.com/bvaughn/react-window-infinite-loader) ([demo](https://codesandbox.io/s/5wqo7z2np4)) which helps break large data sets down into chunks that can be loaded as they are s

You might find the [commit](https://github.com/staylor/pitchfork-scraper/commit/d9bff69e332ad9de8351c67f4848fc7968209eff) porting the app over from `react-virtualized` useful.

For even more complex needs, a [The Movie Database](https://www.themoviedb.org/) [demo app](https://tmdb-viewer.surge.sh/) used react-virtualized and Infinite Loader under the hood. [Porting](https://github.com/addyosmani/tmdb-viewer/blob/m

react-window does not yet have the complete API surface of react-virtualized, so do check the [comparison docs](https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized) if considering it. What's missing?

- [WindowScroller](https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md) - This is a `react-virtualized` component that enables Lists to be scrolled based on the window's scroll positions. There are currently [no 

- [AutoSizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md) - HOC that grows to fit all of the available space, automatically adjusting the width and height of a single child. Brian implemented this as a [stand

- [CellMeasurer](https://github.com/bvaughn/react-virtualized/blob/master/docs/CellMeasurer.md) - HOC automatically measuring a cell's content by rendering it in a way that is not visible to the user. Follow [here](https://github.com/bvaugh

Some modern browsers now support [CSS content-visibility](https://web.dev/content-visibility/). `content-visibility:auto` allows you to skip rendering & painting offscreen content until needed. If you have a long HTML document with costly r

- [patterns.dev/vanilla/virtual-lists](https://patterns.dev/vanilla/virtual-lists)

- [Rendering performant lists with react-window](https://alligator.io/react/lists-with-react-window/)

- [Creating More Efficient React Views with Windowing](https://www.youtube.com/watch?v=t4tuhg7b50I)

- [Rendering lists with react-virtualized](https://css-tricks.com/rendering-lists-using-react-virtualized/)

- [Rendering large lists with react-virtualized](https://blog.logrocket.com/rendering-large-lists-with-react-virtualized-82741907a6b3)

[Credential-related source omitted]

# .env.production VITE_FEATURE_NEW_DASHBOARD=true VITE_API_URL=https://api.example.com

VITE_API_URL=https://api.example.com

proxy: {       '/api': {         target: 'http://localhost:3001',

'/api': {         target: 'http://localhost:3001',         changeOrigin: true,

target: 'http://localhost:3001',

},       '/auth': {         target: 'http://localhost:3001',

'/auth': {         target: 'http://localhost:3001',         changeOrigin: true,

target: 'http://localhost:3001',

In your app code, use relative paths (`fetch('/api/users')`) — they hit Vite's dev server which proxies to your backend. In production, configure your reverse proxy (Nginx, Caddy) to do the same routing.

Patterns from [patterns.dev](https://www.patterns.dev/) — Vite-specific optimization guidance for the broader React web engineering community.

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

app.listen(6000, () => console.log('API server listening on http://localhost:6000'));

During development, you can configure the Vite dev server to proxy `/api` calls to this backend (e.g. in `vite.config.js`, set `server.proxy['/api'] = 'http://localhost:6000'`). The key is that the React app calls a **relative `/api/chat` e

const res = await fetch('/api/chat', { method: 'POST', body: JSON.stringify({ messages }) });

- [patterns.dev/react/ai-ui-patterns](https://patterns.dev/react/ai-ui-patterns)

- [Vercel AI SDK Documentation](https://ai-sdk.dev/)

- [Vercel Academy: Basic Chatbot](https://vercel.com/academy/ai-sdk/basic-chatbot)

- [Vercel Academy: AI Elements](https://vercel.com/academy/ai-sdk/ai-elements)

- [Building Chatbot in Next.js using Vercel AI SDK](https://blog.saeloun.com/2023/07/13/building-chatbot-in-next-js-using-vercel-ai-sdk/)

- [Build a Docs-Aware Chatbot with React, Vite, Node and OpenAI](https://dev.to/cloudinary/build-a-docs-aware-chatbot-with-react-vite-node-and-openai-plus-fun-dalle-avatars-1chi)

- **Code Splitting**: To avoid a large bundle of JavaScript code, you could start splitting your bundles. Code-Splitting is supported by bundlers like [Webpack](https://webpack.js.org/guides/code-splitting/) where it can be used to create m

- [patterns.dev/react/client-side-rendering](https://patterns.dev/react/client-side-rendering)

Using the Compound component pattern with React's [Context API](https://reactjs.org/docs/context.html) is perfect for this example!

The compound pattern is great when you're building a component library. You'll often see this pattern when using UI libraries like [Semantic UI](https://react.semantic-ui.com/modules/dropdown/#types-dropdown).

- [patterns.dev/react/compound-pattern](https://patterns.dev/react/compound-pattern)

- [Render Props - React](https://reactjs.org/docs/render-props.htm)

- [React Hooks: Compound Components - Kent C. Dodds](https://kentcdodds.com/blog/compound-components-with-react-hooks)

export default withLoader(   DogImages,   "https://dog.ceo/api/breed/labrador/images/random/6"

DogImages,   "https://dog.ceo/api/breed/labrador/images/random/6" );

"https://dog.ceo/api/breed/labrador/images/random/6"

> A well-known library used for composing HOCs is [recompose](https://github.com/acdlite/recompose). Since HOCs can largely be replaced by React Hooks, the recompose library is no longer maintained.

_"In most cases, Hooks will be sufficient and can help reduce nesting in your tree."_ - [React Docs](https://reactjs.org/docs/hooks-faq.html#do-hooks-replace-render-props-and-higher-order-components)

Some libraries that relied on the HOC pattern added Hooks support after the release. A good example of this is [Apollo Client](https://www.apollographql.com/docs/react).

- [patterns.dev/react/hoc-pattern](https://patterns.dev/react/hoc-pattern)

- [Higher-Order Components - React](https://reactjs.org/docs/higher-order-components.html)

React 16.8 introduced a new feature called [**Hooks**](https://react.dev/reference/react/hooks). Hooks make it possible to use React state and lifecycle methods, without having to use an ES2015 class component.

You may have noticed that all hooks start with `use`. It's important to start your hooks with `use` in order for React to check if it violates the [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks).

- [React Use](https://github.com/streamich/react-use)

- [useHooks](https://usehooks.com/)

- [Collection of React Hooks](https://nikgraf.github.io/react-hooks/)

- [patterns.dev/react/hooks-pattern](https://patterns.dev/react/hooks-pattern)

To re-render an existing page, a suitable timeout is defined for the page. This will ensure that the page is revalidated whenever the defined timeout period has elapsed. The user will continue to see the previous version of the page, till t

- [patterns.dev/react/incremental-static-rendering](https://patterns.dev/react/incremental-static-rendering)

useEffect(() => {     fetch("https://dog.ceo/api/breed/labrador/images/random/6")

fetch("https://dog.ceo/api/breed/labrador/images/random/6")

- [patterns.dev/react/presentational-container-pattern](https://patterns.dev/react/presentational-container-pattern)

- [Presentational and Container Components - Dan Abramov](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)

- [Server Components](https://github.com/reactjs/rfcs/blob/bf51f8755ddb38d92e23ad415fc4e3c02b95b331/text/0000-server-components.md). This will allow you to refetch components from the server and render them on the client as they stream in i

- [patterns.dev/react/progressive-hydration](https://patterns.dev/react/progressive-hydration)

- [patterns.dev/react/react-2026](https://patterns.dev/react/react-2026)

Patterns from [patterns.dev](https://www.patterns.dev/) — composition guidance for the broader React community.

useEffect(() => {     setLoading(true)     fetch(`/api/users/${userId}`)

setLoading(true)     fetch(`/api/users/${userId}`)       .then(r => r.json())

fetch(`/api/users/${userId}`)

const { data: user, isLoading } = useQuery({     queryKey: ['user', userId],     queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),

queryKey: ['user', userId],     queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),   })

queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),

const { mutate: toggleLike } = useMutation({     mutationFn: () => fetch(`/api/posts/${postId}/like`, { method: 'POST' }),

mutationFn: () => fetch(`/api/posts/${postId}/like`, { method: 'POST' }),

Patterns from [patterns.dev](https://www.patterns.dev/) — framework-agnostic React data fetching guidance for the broader web engineering community.

Patterns from [patterns.dev](https://www.patterns.dev/) — framework-agnostic React performance guidance for the broader web engineering community.

- [patterns.dev/react/react-selective-hydration](https://patterns.dev/react/react-selective-hydration)

- [New Suspense SSR Architecture in React 18](https://github.com/reactwg/react-18/discussions/37)

React's [Server Components](https://react.dev/reference/rsc/server-components) enable **modern UX with a server-driven mental model**. This is quite different from Server-side Rendering (SSR) of components and results in significantly small

- The [React Server Components reference](https://react.dev/reference/rsc/server-components) is the best current overview.

- The [RFC](https://github.com/reactjs/rfcs/blob/bf51f8755ddb38d92e23ad415fc4e3c02b95b331/text/0188-server-components.md) is still useful for deeper implementation context.

- [Next.js App Router documentation](https://nextjs.org/docs/app) for the modern approach to Server Components

- [Shopify Hydrogen and Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components)

- [patterns.dev/react/react-server-components](https://patterns.dev/react/react-server-components)

- [React Server Components reference](https://react.dev/reference/rsc/server-components)

- [Server Functions reference](https://react.dev/reference/rsc/server-functions)

- [RFC](https://github.com/reactjs/rfcs/blob/bf51f8755ddb38d92e23ad415fc4e3c02b95b331/text/0188-server-components.md)

- [Server components demo](https://github.com/reactjs/server-components-demo)

In some cases, we can replace render props with Hooks. A good example of this is [Apollo Client](https://www.apollographql.com/docs/react).

- [patterns.dev/react/render-props-pattern](https://patterns.dev/react/render-props-pattern)

- [Render Props - React](https://reactjs.org/docs/render-props.html)

- [React, Inline Functions, and Performance - Ryan Florence](https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578)

- [Use a Render Prop! - Michael Jackson](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)

The Next.js framework also supports SSR. This pre-renders a page on the server on every request. It can be accomplished by exporting an async function called [`getServerSideProps()`](https://nextjs.org/docs/basic-features/data-fetching#gets

try {    // Fetch data from external API    const res = await fetch("https://jsonplaceholder.typicode.com/users");

// Fetch data from external API    const res = await fetch("https://jsonplaceholder.typicode.com/users");    const data = await res.json();

const res = await fetch("https://jsonplaceholder.typicode.com/users");

A complete example of SSR with React can be found [here](https://www.digitalocean.com/community/tutorials/react-server-side-rendering).

- [patterns.dev/react/server-side-rendering](https://patterns.dev/react/server-side-rendering)

- [patterns.dev/react/static-rendering](https://patterns.dev/react/static-rendering)

- [patterns.dev/react/streaming-ssr](https://patterns.dev/react/streaming-ssr)

This is where Vue allows us to divide an app into smaller chunks by loading components asynchronously with the help of the [`defineAsyncComponent()`](https://vuejs.org/api/general.html#defineasynccomponent) function.

The `defineAsyncComponent()` function accepts a loader function that returns a Promise that resolves to the imported component. However, instead of defining our async component function like the above, we can leverage [dynamic imports](http

The `defineAsyncComponent()` function accepts further options like `delay`, `timeout`, `suspensible`, and `onError()` which provide developers with more granular control over the asynchronous loading behavior and user experience. Be sure to

- [patterns.dev/vue/async-components](https://patterns.dev/vue/async-components)

- [Async Components | Vue Documentation](https://vuejs.org/guide/components/async.html#async-components)

> Note: Single-file components in Vue are made possible due to build tools like [Vite](https://vitejs.dev/). These tools help compile `.vue` components to plain JavaScript modules that can be understood in browsers.

- [patterns.dev/vue/components](https://patterns.dev/vue/components)

- [Components Basics | Vue Documentation](https://vuejs.org/guide/essentials/component-basics.html#components-basics)

- [Reactivity Fundamentals | Vue Documentation](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)

- [patterns.dev/vue/composables](https://patterns.dev/vue/composables)

- [Composables | Vue Documentation](https://vuejs.org/guide/reusability/composables.html)

- [Collection of Vue Composition Utilities | VueUse](https://vueuse.org/)

In 2015, Dan Abramov wrote an article titled ["Presentational and Container Components"](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) that changed the way many developers thought about component architecture in Re

onMounted(async () => {     const response = await fetch(

const response = await fetch(

"https://dog.ceo/api/breed/labrador/images/random/6"

onMounted(async () => {     const response = await fetch(

const response = await fetch(

"https://dog.ceo/api/breed/labrador/images/random/6"

- [patterns.dev/vue/container-presentational](https://patterns.dev/vue/container-presentational)

- [Presentational and Container Components - Dan Abramov](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)

- [Composables | Vue Documentation](https://vuejs.org/guide/reusability/composables.html)

- [patterns.dev/vue/data-provider](https://patterns.dev/vue/data-provider)

- [Scoped Slots | Vue Documentation](https://vuejs.org/guide/components/slots.html#scoped-slots)

- [Renderless Components | Vue Documentation](https://vuejs.org/guide/components/slots.html#renderless-components)

When clicking between the tabs, we want components to be dynamically unmounted and mounted without the use of routing. Though something like this could be achieved by conditionally rendering child templates with the help of directives like 

In the `App` component template, we'll look to render three separate tab buttons — one for each component we intend to display. We'll use the [`v-for` directive](https://vuejs.org/api/built-in-directives.html#v-for) to help achieve this.

- [patterns.dev/vue/dynamic-components](https://patterns.dev/vue/dynamic-components)

- [Dynamic Components | Vue Documentation](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)

- [KeepAlive | Vue Documentation](https://vuejs.org/guide/built-ins/keep-alive.html)

Since app-level provides make data available to _all_ components, they are often helpful when creating [plugins](https://vuejs.org/guide/reusability/plugins.html) — self-contained code that adds functionality to the entire Vue app.

- [patterns.dev/vue/provide-inject](https://patterns.dev/vue/provide-inject)

- [Provide / Inject | Vue Documentation](https://vuejs.org/guide/components/provide-inject.html)

Vue's JSX support isn't built in like in React. We need to use a specific Babel plugin — [`@vue/babel-plugin-jsx`](https://github.com/vuejs/babel-plugin-jsx) — to have our JSX code transformed into the appropriate `h()` function calls.

- [patterns.dev/vue/render-functions](https://patterns.dev/vue/render-functions)

- [Render Functions & JSX | Vue Documentation](https://vuejs.org/guide/extras/render-function.html)

- [`@vue/babel-plugin-jsx` | GitHub](https://github.com/vuejs/babel-plugin-jsx)

- [patterns.dev/vue/renderless-components](https://patterns.dev/vue/renderless-components)

- [Renderless Components | Vue Documentation](https://vuejs.org/guide/components/slots.html#renderless-components)

- [Composables | Vue Documentation](https://vuejs.org/guide/reusability/composables.html)

- [patterns.dev/vue/script-setup](https://patterns.dev/vue/script-setup)

- [`<script setup>` | Vue Documentation](https://vuejs.org/api/sfc-script-setup.html)

[Pinia](https://pinia.vuejs.org/) is a state management pattern and library for Vue.js that provides a more structured and scalable way to handle application-level state.

Pinia is an alternative to other state management solutions like [Vuex](https://vuex.vuejs.org/) and is now the official state management library for Vue. It provides a simple and efficient way to create and manage stores, which encapsulate

- [patterns.dev/vue/state-management](https://patterns.dev/vue/state-management)

- [Props | Vue Documentation](https://vuejs.org/guide/components/props.html#props)

- [Component Events | Vue Documentation](https://vuejs.org/guide/components/events.html#component-events)

- [Simple State Management with Reactivity API | Vue Documentation](https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api)

- [Core concepts | Pinia](https://pinia.vuejs.org/core-concepts/)