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
   

   View Slide

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
   

   View Slide

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()
   

   View Slide

4. Example: traceSetter
   1. “Set” trap takes Object, Property and Value.
   2. Reflect can execute original setter method.
   

   View Slide

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
   

   View Slide

6. Downside...
   Measurement script: http://bit.ly/2hZnBEa
   Around 14x slower rather than Object
   *I used Chrome to get an above score
   

   View Slide

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
   

   View Slide

8. thanks!
   Any questions?
   You can find me at
   @yayoc
   hi@yayoc.com
   

   View Slide

9. Credits
   Special thanks to all the people who made and
   released these awesome resources for free:
   ▣ Presentation template by SlidesCarnival
   ▣ Photographs by Unsplash
   

   View Slide