Proxy's Black Magic

Slides to use at FR ropp-study

Examples
* Validator
http://bit.ly/2mVPIpx
* Throw an error when accessing unknown property
http://bit.ly/2zwpaB2
* Negative index for Array
http://bit.ly/2iJ5W0u
* Immutability
http://bit.ly/2hKxp14

Measurement script: http://bit.ly/2hZnBEa

Transcript

1. Proxy’s Black Magic @yayoc FR ropp-study
2. Proxy in ES6 Proxy is a special object which allow you customize operations. var p = new Proxy(target, handler); ▣ target ◦ A target object ▣ handler ◦ An object contains operations such as set and get
3. Handler functions handler.apply() handler.construct() handler.defineProperty() handler.deleteProperty() handler.get() handler.getOwnPropertyDescriptor() handler.getPrototypeOf() handler.has() handler.isExtensible() handler.ownKeys() handler.preventExtensions() handler.set() handler.setPrototypeOf()
4. Example: traceSetter 1. “Set” trap takes Object, Property and Value. 2. Reflect can execute original setter method.
5. Use case ▣ Validator ◦ http://bit.ly/2mVPIpx ▣ Throw an error when accessing unknown property ◦ http://bit.ly/2zwpaB2 ▣ Negative index for Array ◦ http://bit.ly/2iJ5W0u ▣ Immutability ◦ http://bit.ly/2hKxp14
6. Downside... Measurement script: http://bit.ly/2hZnBEa Around 14x slower rather than Object *I used Chrome to get an above score
7. ▣ Proxy has a potential to make codes more simply ▣ Low level injecting may let us confuse ▣ As all browsers don’t support, we need a polyfill ▣ From performance perspective, It’s not so good to use Proxy for frequently usage Object. Conclusion
8. thanks! Any questions? You can find me at @yayoc hi@yayoc.com
9. Credits Special thanks to all the people who made and released these awesome resources for free: ▣ Presentation template by SlidesCarnival ▣ Photographs by Unsplash