AOP-ing your JavaScript
Brian Cavalier / @briancavalier
SpringJS at Pivotal / cujoJS Co-lead

© 2013 SpringOne 2GX. All ri...
Aspect Oriented Programming
AOP refresher
How to do it in JavaScript (hint: it’s easy)
Application composition

2
AOP
• Program transformation that combines separate, and possibly
unrelated, concerns
• Huh?

3
3
AOP
• Non-invasively augment or modify the behavior of existing
code
• AOP is a composition strategy
• “Advice” is a commo...
Stereotypical AOP Examples
• Logging
• Profiling
• Transaction boundaries
• Security

5
5
Composition strategies
• Inheritance
• Delegation
• AOP

6
6
Composition strategies
• Add profiling to all instances of class X
–Using inheritance breaks the “is-a” mental model
–Usin...
Composition strategies
• AOP can apply behavior from the outside
• controlled - guarantees about not breaking your stuff
•...
Typical AOP approaches
• Can require some sophisticated machinery
• Source code transformation
• Byte code transformation
...
AOP in JavaScript

10
AOP in JavaScript
• JavaScript doesn’t have Proxies*, byte code access, or VM
level support for AOP
• Source code transfor...
Method replacement
// Save the original function
var orig = thing.method;
// Replace it with one that does what we want
th...
Method replacement
var orig = thing.method;
thing.method = function() {
try {
return orig.apply(this, arguments);
} catch(...
Method replacement
• Pros
–Easy to implement
–Dynamic - add and remove advice at runtime

• Cons
– Changes the hasOwnPrope...
Examples
• Logging
–https://github.com/briancavalier/aop-s2gx-2013/blob/master/
examples/logging.js

• Profiling
–https://...
If it’s so easy ...
• why isn’t it more common in JS?
–Don't know AOP exists
–Apply AOP without knowing it
–Know about AOP...
AOP in JavaScript
• AOP in 50 LOC - https://github.com/briancavalier/aops2gx-2013/tree/master/src
• cujoJS’s meld - https:...
Neato, but yawn
• Guess what? Users don’t actually care about logging,
profiling, or memoization.
• If that’s all we could...
Can we ...
• use this kind of approach to connect more interesting things
together?
• What about Views, Controllers, Model...
Application composition
• Connecting reusable components together to make a
particular application
• Now that sounds usefu...
Let’s make a simple app
• Product list and shopping cart
• https://github.com/briancavalier/aop-s2gx-2013/tree/master/
dem...
Let’s make a simple app

Product List

Shopping Cart

22
22
Let’s make a simple app

Product List

Shopping Cart

Mediator

23
23
Let’s make a simple app

Product List

Shopping Cart

Mediator

24
24
Let’s make a simple app
• Delegation - https://github.com/briancavalier/aop-s2gx-2013/
blob/master/demo-app/vanilla
• Even...
Coupled

Product List

Shopping Cart
Mediator

26
26
Inseparable

Product List
Shopping Cart
Mediator

27
27
Noooooo!
This Thing
That Thing

That Thing

Other Thing

This Thing

This Thing
That Thing

Other Thing
Other Thing

Other...
Bad
• Components coupled directly to each other, or directly to a
connection lib API, or both.

29
29
Bad
• Lots of mocking to unit test
• Components easily break one another
• Adding new components -> changing source code o...
Application Composition

31
Application composition
• The act of connecting components together to make a
complete application
• Often a separate, and...
Composition plan
• A dedicated place to compose application components
• It owns the lines in your box and line diagrams
•...
Composition plan
Composition Plan
Product List

Shopping Cart

Mediator

34
34
Composition plan
• Let’s re-make our app using AOP and composition
• Simple AOP - https://github.com/briancavalier/aop-s2g...
Good
• Components have no knowledge of each other
–unit tests are easy, less mocking

• Change the plan w/o changing the c...
Composition
• If we're always connecting components in similar ways, can
we create a DSL to do it?

37
37
Yes
• Let’s re-make our simple app again
• cujoJS 1 (w/Controller) - https://github.com/briancavalier/aops2gx-2013/tree/ma...
AOP
• Add/modify behavior
• Compose components
• Controlled, non-invasive
• Don't need a lib, but they help!

39
39
Application composition
• Separate connection from components
• Make a composition plan
• Test & refactor components easil...
Links - AOP
• AOP @ Wikipedia: http://en.wikipedia.org/wiki/Aspectoriented_programming
• Spring AOP: http://static.springs...
Links - AOP in JavaScript
• AOP in 50 LOC - https://github.com/briancavalier/aops2gx-2013/tree/master/src
• cujoJS’s meld ...
Links - Application composition
• cujoJS wire - http://github.com/cujojs/wire
• Other JS IOC containers popping up recentl...
Links - Examples
• Examples from this talk - http://github.com/briancavalier/aops2gx-2013
• cujoJS.com - http://cujojs.com...
Learn More. Stay Connected.

Talk to us on Twitter: @springcentral
Find session replays on YouTube: spring.io/video
45
Upcoming SlideShare
Loading in …5
×

AOP-ing your JavaScript

2,329 views

Published on

Speaker: Brian Cavalier
Loose coupling. Your web front-end has that, right? Your JavaScript is using pubsub, event emitters, and message buses! Guess again, you can do better.
Aspect Oriented Programming (AOP) is a technique for augmenting the behavior of objects, methods, and functions non-invasively. AOP adds new behaviors and modifies existing behaviors "from the outside". Using AOP, it's possible to create connections between components without either having any knowledge of the other and without any extra library dependencies in your code.
While you may be familiar with AOP in Spring, you may not yet have applied it in JavaScript. In this talk, we'll do just that. We'll introduce simple techniques for applying AOP in pure JavaScript using no additional libraries, and then look at meld.js (https://github.com/cujojs/meld), the AOP library that powers Cujo.js (http://cujojs.com). We'll work from simple examples of making connections between components to more sophisticated examples that integrate pubsub, message buses, etc. in a truly loosely coupled way.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,329
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

AOP-ing your JavaScript

  1. 1. AOP-ing your JavaScript Brian Cavalier / @briancavalier SpringJS at Pivotal / cujoJS Co-lead © 2013 SpringOne 2GX. All rights reserved. Do not distribute without permission. 1
  2. 2. Aspect Oriented Programming AOP refresher How to do it in JavaScript (hint: it’s easy) Application composition 2
  3. 3. AOP • Program transformation that combines separate, and possibly unrelated, concerns • Huh? 3 3
  4. 4. AOP • Non-invasively augment or modify the behavior of existing code • AOP is a composition strategy • “Advice” is a common approach –before, around, afterReturning, afterThrowing, after 4 4
  5. 5. Stereotypical AOP Examples • Logging • Profiling • Transaction boundaries • Security 5 5
  6. 6. Composition strategies • Inheritance • Delegation • AOP 6 6
  7. 7. Composition strategies • Add profiling to all instances of class X –Using inheritance breaks the “is-a” mental model –Using inheritance means changing the code that creates instances of X to create instances of ProfiledX –Using either delegation or inheritance -> must account for profiling code in unit tests! • Add profiling to all instances of classes X, Y, and Z –Multiply all above problems by 3 7 7
  8. 8. Composition strategies • AOP can apply behavior from the outside • controlled - guarantees about not breaking your stuff • non-invasive - without changing the source code 8 8
  9. 9. Typical AOP approaches • Can require some sophisticated machinery • Source code transformation • Byte code transformation • Language-level Proxies • VM or runtime support 9 9
  10. 10. AOP in JavaScript 10
  11. 11. AOP in JavaScript • JavaScript doesn’t have Proxies*, byte code access, or VM level support for AOP • Source code transformation • AST transformation • Or something easier ... * ECMAScript 6 will have language-level Proxies 11 11
  12. 12. Method replacement // Save the original function var orig = thing.method; // Replace it with one that does what we want thing.method = function() { doAdditionalStuff(); return orig.apply(this, arguments); } 12 12
  13. 13. Method replacement var orig = thing.method; thing.method = function() { try { return orig.apply(this, arguments); } catch(e) { doAdditionalStuff(e); throw e; } }; 13 13
  14. 14. Method replacement • Pros –Easy to implement –Dynamic - add and remove advice at runtime • Cons – Changes the hasOwnProperty landscape –Harder to do app-wide weaving (e.g. classpath scanning and global pointcuts) 14 14
  15. 15. Examples • Logging –https://github.com/briancavalier/aop-s2gx-2013/blob/master/ examples/logging.js • Profiling –https://github.com/briancavalier/aop-s2gx-2013/blob/master/ examples/around.js • Memoization –https://github.com/briancavalier/aop-s2gx-2013/blob/master/ examples/around.js#L170 15 15
  16. 16. If it’s so easy ... • why isn’t it more common in JS? –Don't know AOP exists –Apply AOP without knowing it –Know about AOP, but don't know how to apply it in JS 16 16
  17. 17. AOP in JavaScript • AOP in 50 LOC - https://github.com/briancavalier/aops2gx-2013/tree/master/src • cujoJS’s meld - https://github.com/cujojs/meld • Dojo’s dojo/aspect - http://dojotoolkit.org • Twitter Flight - http://twitter.github.io/flight/) • javascript-hooker - https://github.com/cowboy/javascripthooker) • dcl - https://github.com/uhop/dcl 17 17
  18. 18. Neato, but yawn • Guess what? Users don’t actually care about logging, profiling, or memoization. • If that’s all we could do, this would be lame 18 18
  19. 19. Can we ... • use this kind of approach to connect more interesting things together? • What about Views, Controllers, Models, or any application components? 19 19
  20. 20. Application composition • Connecting reusable components together to make a particular application • Now that sounds useful • It also sounds a lot like AOP: "composing units of behavior" 20 20
  21. 21. Let’s make a simple app • Product list and shopping cart • https://github.com/briancavalier/aop-s2gx-2013/tree/master/ demo-app 21 21
  22. 22. Let’s make a simple app Product List Shopping Cart 22 22
  23. 23. Let’s make a simple app Product List Shopping Cart Mediator 23 23
  24. 24. Let’s make a simple app Product List Shopping Cart Mediator 24 24
  25. 25. Let’s make a simple app • Delegation - https://github.com/briancavalier/aop-s2gx-2013/ blob/master/demo-app/vanilla • Events - https://github.com/briancavalier/aop-s2gx-2013/blob/ master/demo-app/events • Pubsub - https://github.com/briancavalier/aop-s2gx-2013/ blob/master/demo-app/pubsub 25 25
  26. 26. Coupled Product List Shopping Cart Mediator 26 26
  27. 27. Inseparable Product List Shopping Cart Mediator 27 27
  28. 28. Noooooo! This Thing That Thing That Thing Other Thing This Thing This Thing That Thing Other Thing Other Thing Other Thing Product List That Thing Shopping Cart Mediator This Thing This Thing That Thing Other Thing Other Thing Other Thing That Thing 28 28
  29. 29. Bad • Components coupled directly to each other, or directly to a connection lib API, or both. 29 29
  30. 30. Bad • Lots of mocking to unit test • Components easily break one another • Adding new components -> changing source code of existing components • Changing one component may require –updating many mocks –re-unit testing all components! 30 30
  31. 31. Application Composition 31
  32. 32. Application composition • The act of connecting components together to make a complete application • Often a separate, and very different activity than implementing the stuff inside components 32 32
  33. 33. Composition plan • A dedicated place to compose application components • It owns the lines in your box and line diagrams • Example: Spring Application Context 33 33
  34. 34. Composition plan Composition Plan Product List Shopping Cart Mediator 34 34
  35. 35. Composition plan • Let’s re-make our app using AOP and composition • Simple AOP - https://github.com/briancavalier/aop-s2gx-2013/ blob/master/demo-app/aop-simple • meld AOP - https://github.com/briancavalier/aop-s2gx-2013/ blob/master/demo-app/aop-meld 35 35
  36. 36. Good • Components have no knowledge of each other –unit tests are easy, less mocking • Change the plan w/o changing the components' source –no need to re-run unit tests • Add new behavior to existing applications –minimize regressions • Create a new plan (i.e. app variant) easily –build faster 36 36
  37. 37. Composition • If we're always connecting components in similar ways, can we create a DSL to do it? 37 37
  38. 38. Yes • Let’s re-make our simple app again • cujoJS 1 (w/Controller) - https://github.com/briancavalier/aops2gx-2013/tree/master/demo-app/cujojs-1 • cujoJS 2 (Controller-less) - https://github.com/briancavalier/ aop-s2gx-2013/tree/master/demo-app/cujojs-2 38 38
  39. 39. AOP • Add/modify behavior • Compose components • Controlled, non-invasive • Don't need a lib, but they help! 39 39
  40. 40. Application composition • Separate connection from components • Make a composition plan • Test & refactor components easily • Reduce collateral damage • Build faster 40 40
  41. 41. Links - AOP • AOP @ Wikipedia: http://en.wikipedia.org/wiki/Aspectoriented_programming • Spring AOP: http://static.springsource.org/spring/docs/2.5.5/ reference/aop.html • meld docs: https://github.com/cujojs/meld/blob/master/docs/ TOC.md 41 41
  42. 42. Links - AOP in JavaScript • AOP in 50 LOC - https://github.com/briancavalier/aops2gx-2013/tree/master/src • cujoJS’s meld - https://github.com/cujojs/meld • Dojo’s dojo/aspect - http://dojotoolkit.org • Twitter Flight - http://twitter.github.io/flight/) • javascript-hooker - https://github.com/cowboy/javascripthooker) • dcl - https://github.com/uhop/dcl 42 42
  43. 43. Links - Application composition • cujoJS wire - http://github.com/cujojs/wire • Other JS IOC containers popping up recently 43 43
  44. 44. Links - Examples • Examples from this talk - http://github.com/briancavalier/aops2gx-2013 • cujoJS.com - http://cujojs.com • cujoJS sample apps - http://know.cujojs.com/samples 44 44
  45. 45. Learn More. Stay Connected. Talk to us on Twitter: @springcentral Find session replays on YouTube: spring.io/video 45

×