PatternsDev/skills - Seite 2

dynamic-components

Teaches dynamic component switching with Vue's <component> element. Use when you need to render different components conditionally based on runtime state using the is attribute.

Quellsprache: Englisch

render-functions

Teaches Vue render functions and JSX for programmatic template creation. Use when templates are too limiting and you need the full power of JavaScript to construct component output dynamically.

Quellsprache: Englisch

renderless-components

Teaches the renderless component pattern for logic-only Vue components. Use when you want to encapsulate behavior without dictating markup, letting consumers control rendering via scoped slots.

Quellsprache: Englisch

bundle-splitting

Teaches bundle splitting techniques for web performance. Use when your application has a large JavaScript bundle that affects load times or when you need to reduce FCP/LCP.

Quellsprache: Englisch

factory-pattern

Teaches the factory pattern for flexible object creation. Use when you need to create objects dynamically without using the new keyword or when object creation logic should be centralized.

Quellsprache: Englisch

flyweight-pattern

Teaches the flyweight pattern for memory optimization. Use when your application creates large numbers of similar objects and memory consumption is a concern.

Quellsprache: Englisch

import-on-visibility

Teaches visibility-based lazy loading using Intersection Observer. Use when you have below-the-fold components or images that don't need to load until the user scrolls to them.

Quellsprache: Englisch

mixin-pattern

Teaches the mixin pattern for sharing functionality without inheritance. Use when you need to add reusable behavior to multiple objects or classes that don't share a common ancestor.

Quellsprache: Englisch

prefetch

Teaches resource prefetching strategies for faster navigation. Use when you can predict which resources the user will need next and want to load them during idle time.

Quellsprache: Englisch

prototype-pattern

Teaches the prototype pattern for property sharing via the prototype chain. Use when creating many objects of the same type that should share methods or properties efficiently.

Quellsprache: Englisch

prpl

Teaches the PRPL pattern for optimizing initial page load. Use when building Progressive Web Apps or when you need to push critical resources, render the initial route, pre-cache remaining routes, and lazy-load on demand.

Quellsprache: Englisch

route-based

Teaches route-based code splitting for single-page applications. Use when different routes load distinct feature sets and you want to avoid loading all route code upfront.

Quellsprache: Englisch

static-import

Teaches static ES2015 import syntax for module dependencies. Use when you need to import code that is required at load time and benefits from static analysis and tree shaking.

Quellsprache: Englisch

tree-shaking

Teaches tree shaking for dead code elimination in JavaScript bundles. Use when your bundle includes unused exports and you want to reduce the final bundle size during the build step.

Quellsprache: Englisch

streaming-ssr

Teaches streaming server-side rendering for chunked HTML delivery. Use when you need faster Time to First Byte and First Contentful Paint by streaming HTML as it's generated on the server.

Quellsprache: Englisch

composables

Teaches Vue composables for reusable stateful logic with the Composition API. Use when extracting shared reactive state, side effects, or computed logic that multiple components need.

Quellsprache: Englisch

provide-inject

Teaches Vue's provide/inject API for dependency injection across components. Use when deeply nested components need access to ancestor data without threading props through intermediate layers.

Quellsprache: Englisch

script-setup

Teaches Vue's script setup syntax for concise Composition API usage. Use when writing Vue 3 single-file components and you want a more ergonomic, less boilerplate syntax for the Composition API.

Quellsprache: Englisch