Meta Programming Techniques in Javascript

1. Jakarta
Metaprogramming with
Javascript
Ahmad Rizqi Meydiarso

2. Jakarta
What is Metaprogramming
is the writing of computer programs that write
or manipulate other program (or themselves) as
their data, or that do part of the work at compile
time that otherwise be done at runtime
“
writing code that writes code

3. Jakarta
The Purpose
To have super power!
• More elegant code
• Less boilerplate code
• Hide the how, focus on what
• Essential in framework building

4. Jakarta
Background
• My first encounter: Prototype.js, jQuery
• Experimenting with my own parsing (zparse) and angular
like framework foo.js (2007)
• Then created chain.js batik etc. (2008-2010)
• Now maintaining Merapi and its plugins (for YesBoss /
Kata.ai)
I love Metaprogramming

5. Jakarta
Uses in Real World
• Almost every framework uses Meta
Programming in some way
• Domain Specific Languages
• Add functionalities without littering
main logic (logging, measurement,
etc.)

6. Jakarta
Two Flavours
Dynamic Language Features
Program can inspect itself using built-in features of the language.
Code Generation
Translate meta features into generated code in target language.
examples: jquery
spring (java)
rails (ruby)
merapi ;)
examples: QT (C++)
CoffeeScript
React
Babel / Typescript

7. Jakarta
Code Generation Examples

8. Jakarta
Code Generation Examples

9. Jakarta
Code Generation Examples

10. Jakarta
Dynamic Language Features
• Reflection
• Getter Setter
• Proxy
• Decorator
• Generator
• DOM Manipulation
• Eval

11. Jakarta
Reflection
• for (let i in object);
• .prototype, getPrototypeOf()
• getOwnPropertyNames(),
defineProperties()
• typeof etc…

12. Jakarta
Reflection Example

13. Jakarta
Reflection Example

14. Jakarta
Getter Setter
• {set prop() {}, get prop() {}}
• Object.defineProperty()
• Object.defineProperties()

15. Jakarta
Getter Setter Example

16. Jakarta
Getter Setter Example

17. Jakarta
Proxy
• it’s a trap!
• replace object access by function invocation
• create truly dynamic object
• warning: slow performance
• handlers:
• get(), set(), has(), ownKeys(), …

18. Jakarta
Proxy Example

19. Jakarta
Proxy Example

20. Jakarta
Generator
• Function that stops on “yield”
• Returns an Iterator

21. Jakarta
Generator Example

22. Jakarta
Generator Example

23. Jakarta
Decorator
• @Decorator
• Annotating method / property
• manipulate / give context

24. Jakarta
Decorator Example

25. Jakarta
Performance
• Code Generation (compile/transpile):
• No impact performance (however depends on
implementation)
• Runtime (processed during initialization only)
• Could lead to slower initialization (still ok in most cases)
• Runtime (heavy use)
• Be careful!

26. Jakarta
Conclusion
• It is like doing black magic:
• know what you are doing
• can have side effects if not used properly
• Performance Trade-Off
• Unclear Program Flow
• Devs not familiar with the core can get confused

27. rizqi@kata.ai