Clarke's third law in action: having fun ES proxies - Christophe Porteneuve - dotJS 2025

Summary

In this engaging presentation, the speaker introduces ES proxies in JavaScript, highlighting their use for advanced meta-programming. ES proxies act as wrappers around objects, enabling developers to intercept and modify interactions with them, such as property accesses and function calls. The talk covers various use cases, including type safety, reactive programming, and building domain-specific languages (DSLs). The speaker showcases practical examples and demonstrates how proxies can improve development workflows. Ultimately, the speaker emphasizes the flexibility and power of proxies, urging developers to explore their potential in creating innovative solutions.

Takeaways

• 😀 Proxies in JavaScript are a powerful feature for meta-programming, enabling the creation of wrappers around objects to intercept interactions.
• 😀 ESProxies are not network proxies but are instead used to intercept and manipulate object behavior, such as property access and method calls.
• 😀 ESProxies are natively supported in JavaScript and cannot be polyfilled, meaning they must be available in your runtime environment.
• 😀 Proxies are widely supported across modern browsers and Node.js environments, making them reliable for use in production code.
• 😀 The 'proxy' object is created using a 'target' object and a 'handler' object that defines specific traps (methods) to intercept various interactions.
• 😀 The most common traps are 'get' and 'set' for property access, but other traps like 'apply' and 'construct' can be used for functions.
• 😀 Proxies can be used to enforce type safety, such as throwing errors when a property is assigned a value of the wrong type.
• 😀 A fun example of a proxy is TPIO, a library that uses Levenshtein distance to find and correct property names, creating humorous but impractical results.
• 😀 Proxies enable the creation of Domain-Specific Languages (DSLs) and URL builders, enhancing developer experience by allowing elegant, concise code construction.
• 😀 Vue.js 3 uses proxies for its reactivity system, offering improved performance and flexibility over Vue.js 2's property descriptors.
• 😀 ESProxies are ideal for creating mock objects, VCR-style interaction logging, and immutable state management, enhancing both code functionality and maintainability.

Q & A

What are ES Proxies in JavaScript?

ES Proxies are not network proxies but are objects in JavaScript that act as intermediaries between the actual object and the code interacting with it. They can intercept interactions with objects and modify or extend their behavior.

What is the main purpose of using ES Proxies?

The main purpose of using ES Proxies is to create dynamic, customizable behavior for objects in JavaScript. They allow for intercepting and modifying operations like property access, function calls, or object construction, offering a way to add custom logic or enhance object behavior.

How does a Proxy work in JavaScript?

A Proxy works by wrapping an object (called the target) and intercepting interactions with that object through handler methods known as traps. These traps can modify or control how properties are accessed, modified, or called.

What are the common traps available in ES Proxies?

Common traps in ES Proxies include 'get' for property access, 'set' for property assignments, 'apply' for function calls, and 'construct' for the new operator on functions. Each trap has a specific purpose for handling interactions with the proxied object.

Can ES Proxies be polyfilled in older JavaScript environments?

No, ES Proxies cannot be polyfilled because they require native support from the runtime. However, they have been widely available for over nine years, and modern JavaScript environments like Node.js and browsers support them natively.

What is an example use case for using a Proxy to enforce type safety?

One example of using a Proxy for type safety is intercepting the 'set' trap to ensure that only values matching the expected type are assigned to properties. If an incorrect type is assigned, an error is thrown to enforce type constraints.

What is a potential drawback of using Proxies in production code?

One potential drawback of using Proxies in production code is that they can introduce additional complexity and performance overhead, especially if not used wisely. For example, libraries like 'TPO' that find the closest property based on Levenshtein distance can be amusing but are not suitable for production due to unpredictable results.

How does Vue.js utilize ES Proxies for reactivity?

Vue.js uses ES Proxies to implement reactivity in version 3. Proxies allow for faster and more versatile reactivity compared to Vue.js 2, which used property descriptors. Proxies enable dynamic property access and modification without the need for pre-declared properties.

What is the purpose of 'reflect' in the context of ES Proxies?

The 'reflect' API in JavaScript is used with Proxies to call the original behavior of a method. When modifying a Proxy's behavior, the 'reflect' API ensures that the original method or behavior can be invoked if needed, preserving the expected functionality.

How can ES Proxies be used to create custom DSLs (Domain-Specific Languages)?

ES Proxies can be used to create custom DSLs by intercepting method calls on objects and dynamically building strings or executing specific logic. For example, a URL builder can use Proxies to accumulate segments and query parameters, creating a flexible and readable DSL.