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.

1. Oleksandr Skachkov
Itera
JavaScript Metaprogramming with ES2015 Proxy

2. ABOUT ME
• Itera’s 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

7. BACKBONE
WRONG!!!!

8. BACKBONE

9. OK?

10. ANGULARJS
YES!!!!!!

11. ANGULARJS
YES!!!!!!

12. ANGULARJS
WRONG!!!!
YES!!!!!!

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

24. REFLECTION. INTROSPECTION
Object.keys()
Object.getOwnPropertyNames()

25. REFLECTION. SELF-MODIFICATION

26. REFLECTION. SELF-MODIFICATION
Object.seal()
Object.freeze()
Object.preventExtension()

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

41. TRAPS. PROPERTY ACCESS

42. TRAPS. PROPERTY ACCESS

43. TRAPS. PROPERTY ACCESS

44. TRAPS. PROPERTY ACCESS

45. TRAPS. PROPERTY ACCESS

46. TRAPS. PROPERTY ACCESS

47. TRAPS. PROPERTY ACCESS

48. TRAPS. PROPERTY ACCESS

49. TRAPS. PROPERTY ACCESS

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?