JavaScript Metaprogramming with ES 2015 Proxy
Download as PPTX, PDF
1 like249 views
Metaprogramming refers to manipulating or extending a program from within itself. ES2015 introduced the Proxy API for metaprogramming in JavaScript. A Proxy allows defining custom behavior for fundamental operations like property lookup, assignment, and enumeration. It works by wrapping a target object and defining traps (functions) for operations. While proxies enable powerful abstractions, they can impact performance due to the added layer of indirection. However, use cases like validation, logging, and virtual objects demonstrate how proxies can extend functionality transparently.
JavaScript Metaprogramming with ES 2015 Proxy
- 1. Oleksandr Skachkov Itera JavaScript Metaprogramming with ES2015 Proxy
- 2. ABOUT ME Iteras FrontEnd Tech Lead WebKit contributor & JS hacker: Arrow function Async iterator & generators Promise.finally Twitter: @alSkachkov
- 3. ES2015 PROXY JAVASCRIPT METAPROGRAMMING WITH Metaprogramming before ES2015 Metaprogramming with ES2015 Proxy Use cases
- 4. BACKBONE Backbone my first MV* framework
- 5. BACKBONE
- 6. BACKBONE
- 8. BACKBONE
- 9. OK?
- 13. ANGULARJS
- 14. REACT
- 15. REACT WRONG!!!!
- 16. REACT
- 17. VUE
- 18. WHY?
- 20. Metaprogramming
- 21. THEORY Metaprogramming refers to a variety of ways a program has knowledge of itself or can manipulate itself stackoverflow
- 22. METAPROGRAMMING. HOW? eval the best strategy to do metaprogramming in JS :-)
- 23. METAPROGRAMMING. HOW? Reflection is key strategy to do metaprogramming: Introspection - read the structure of a program Self-modification - change program structure Intercession - change the semantics of some language operations
- 27. REFLECTION. INTERCESSION Is not supported by ES5 Some browsers do __noSuchMethod__ (deprecated)
- 28. PROXY API Mirror-based architecture Tom Van Cutsem 2007 Proxy API : Tom Van Cutsem and Mark S. Miller 2010
- 29. MDN ES2015 PROXY
- 30. PROXY
- 31. PROXY
- 32. PROXY target - can be any sorts of objects, or another proxy
- 33. PROXY handler - An object whose properties are functions which define the behavior of the proxy when an operation is performed on it.
- 35. PROXY traps: The methods that provide property access. This is analogous to the concept of traps in operating systems
- 36. PROXY. HOW IT WORKS
- 37. PROXY. HOW IT WORKS
- 38. PROXY. HOW IT WORKS
- 39. PROXY. HOW IT WORKS
- 40. PROXY. HOW IT WORKS
- 50. TRAPS. CALL AND CONSTRUCT
- 51. TRAPS. CALL AND CONSTRUCT
- 52. PROXY. INVARIANTS Semantics that remain unchanged when implementing custom operations are called invariants.
- 53. PROXY. REVOCABLE
- 54. PERFORMANCE
- 55. PERFORMANCE PROXY SLOWER IN 3-5X TIMES
- 56. WHY PROXY IS SLOW?
- 57. WHY PROXY IS SLOW?
- 58. CAN WE USE ES2015 PROXY? Yes we can
- 59. CAN WE USE ES2015 PROXY? from 6.5 Not fully supported in
- 60. REACT
- 61. VUE
- 62. USAGE SCENARIOS
- 63. SYNC OBSERVABLE Use set, deleteProperty traps
- 64. VALIDATION OR ACCESS CONTROL Use set trap with check conditions
- 65. PROFILING OR LOGGING Use get, set, deleteProperty traps
- 66. VIRTUAL OBJECT Virtual objects are proxies that emulate other objects without those objects needing to be in the same address space. Use set, get, defineProperty, deleteProperty traps
- 67. MORE CASES Firefox uses ES2015 Proxy to protect Host object
- 68. MORE CASES Firefox uses ES2015 Proxy to protect Host object
- 69. SUMMARY Powerful abstraction Adding functionality transparently Magic Slow in most of the browsers
- 70. QUESTIONS?
Editor's Notes
- #27: TheObject.seal()method seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable TheObject.freeze()method freezes an object: that is, prevents new properties from being added to it; prevents existing properties from being removed; and prevents existing properties, or their enumerability, configurability, or writability, from being changed, it also prevents the prototype from being changed. TheObject.preventExtensions()method prevents new properties from ever being added to an object (i.e. prevents future extensions to the object).
- #53: invariants
- #54: invariants