Design patterns, performance patterns, and rendering patterns for JavaScript and TypeScript. From patterns.dev/vanilla.
| Skill | Type | Description |
|---|---|---|
singleton-pattern |
Design | Share a single global instance throughout our application |
observer-pattern |
Design | Use observables to notify subscribers when an event occurs |
proxy-pattern |
Design | Intercept and control interactions to target objects |
prototype-pattern |
Design | Share properties among many objects of the same type |
module-pattern |
Design | Split up your code into smaller, reusable pieces |
mixin-pattern |
Design | Add functionality to objects or classes without inheritance |
mediator-pattern |
Design | Use a central mediator object to handle communication between components |
flyweight-pattern |
Design | Reuse existing instances when working with identical objects |
factory-pattern |
Design | Use a factory function in order to create objects |
command-pattern |
Design | Decouple methods that execute tasks by sending commands to a commander |
provider-pattern |
Design | Make data available to multiple child components |
loading-sequence |
Performance | Optimize your loading sequence to improve how quickly your app is usable |
static-import |
Performance | Import code that has been exported by another module |
dynamic-import |
Performance | Import parts of your code on demand |
import-on-visibility |
Performance | Load non-critical components when they are visible in the viewport |
import-on-interaction |
Performance | Load non-critical resources when a user interacts with UI requiring it |
route-based |
Performance | Dynamically load components based on the current route |
bundle-splitting |
Performance | Split your code into small, reusable pieces |
prpl |
Performance | Optimize initial load through precaching, lazy loading, and minimizing roundtrips |
tree-shaking |
Performance | Reduce the bundle size by eliminating dead code |
preload |
Performance | Inform the browser of critical resources before they are discovered |
prefetch |
Performance | Fetch and cache resources that may be requested some time soon |
third-party |
Performance | Reduce the performance impact third-party scripts have on your site |
virtual-lists |
Performance | Optimize list performance with list virtualization |
compression |
Performance | Reduce the time needed to transfer scripts over the network |
islands-architecture |
Rendering | Small, focused chunks of interactivity within server-rendered web pages |
view-transitions |
Rendering | Animate page transitions using the View Transitions API |