Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Jakarta
Metaprogramming with
Javascript
Ahmad Rizqi Meydiarso
Jakarta
What is Metaprogramming
is the writing of computer programs that write
or manipulate other program (or themselves)...
Jakarta
The Purpose
To have super power!
• More elegant code
• Less boilerplate code
• Hide the how, focus on what
• Essen...
Jakarta
Background
• My first encounter: Prototype.js, jQuery
• Experimenting with my own parsing (zparse) and angular
lik...
Jakarta
Uses in Real World
• Almost every framework uses Meta
Programming in some way
• Domain Specific Languages
• Add fu...
Jakarta
Two Flavours
Dynamic Language Features
Program can inspect itself using built-in features of the language.
Code Ge...
Jakarta
Code Generation Examples
Jakarta
Code Generation Examples
Jakarta
Code Generation Examples
Jakarta
Dynamic Language Features
• Reflection
• Getter Setter
• Proxy
• Decorator
• Generator
• DOM Manipulation
• Eval
Jakarta
Reflection
• for (let i in object);
• .prototype, getPrototypeOf()
• getOwnPropertyNames(),
defineProperties()
• t...
Jakarta
Reflection Example
Jakarta
Reflection Example
Jakarta
Getter Setter
• {set prop() {}, get prop() {}}
• Object.defineProperty()
• Object.defineProperties()
Jakarta
Getter Setter Example
Jakarta
Getter Setter Example
Jakarta
Proxy
• it’s a trap!
• replace object access by function invocation
• create truly dynamic object
• warning: slow ...
Jakarta
Proxy Example
Jakarta
Proxy Example
Jakarta
Generator
• Function that stops on “yield”
• Returns an Iterator
Jakarta
Generator Example
Jakarta
Generator Example
Jakarta
Decorator
• @Decorator
• Annotating method / property
• manipulate / give context
Jakarta
Decorator Example
Jakarta
Performance
• Code Generation (compile/transpile):
• No impact performance (however depends on
implementation)
• R...
Jakarta
Conclusion
• It is like doing black magic:
• know what you are doing
• can have side effects if not used properly
...
rizqi@kata.ai
Upcoming SlideShare
Loading in …5
×

Metaprogramming with javascript

546 views

Published on

Meta Programming Techniques in Javascript

Published in: Software
  • Be the first to comment

Metaprogramming with javascript

  1. 1. Jakarta Metaprogramming with Javascript Ahmad Rizqi Meydiarso
  2. 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. 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. 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. 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. 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. 7. Jakarta Code Generation Examples
  8. 8. Jakarta Code Generation Examples
  9. 9. Jakarta Code Generation Examples
  10. 10. Jakarta Dynamic Language Features • Reflection • Getter Setter • Proxy • Decorator • Generator • DOM Manipulation • Eval
  11. 11. Jakarta Reflection • for (let i in object); • .prototype, getPrototypeOf() • getOwnPropertyNames(), defineProperties() • typeof etc…
  12. 12. Jakarta Reflection Example
  13. 13. Jakarta Reflection Example
  14. 14. Jakarta Getter Setter • {set prop() {}, get prop() {}} • Object.defineProperty() • Object.defineProperties()
  15. 15. Jakarta Getter Setter Example
  16. 16. Jakarta Getter Setter Example
  17. 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. 18. Jakarta Proxy Example
  19. 19. Jakarta Proxy Example
  20. 20. Jakarta Generator • Function that stops on “yield” • Returns an Iterator
  21. 21. Jakarta Generator Example
  22. 22. Jakarta Generator Example
  23. 23. Jakarta Decorator • @Decorator • Annotating method / property • manipulate / give context
  24. 24. Jakarta Decorator Example
  25. 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. 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. 27. rizqi@kata.ai

×