Aspect Oriented programming in react

Last week, I had to collect several event data from the various part of the code as user interact. The problem sounds like I could try aspect oriented programming to get to the solution as such features are cross cutting concerns. The context of this problem was little more interesting: the collection of data need to be done from browser through javascript and javascript code are composed of react components.

In react based application, we don't manipulate the DOM directly, as least that is what suggested. That leaves us to work around react component itself. The basic idea is: when application is loads, react creates all necessary react components if they are required in the application. Retrieve the instances of such components, know the method on such instances where you want to add the hooks( extra behavior, such as logging), decision if you want to execute such hooks before or after. You do these all outside of the code without invading the implemented methods And that's pretty much what we call aspect oriented approach.

React-aop is the npm module I created last week to do exactly the same. There are some convention and current release has a workaround solution, as I was not able to hold the react component instance( or backing instance) of created react components at various level in the component tree. May be this is because of not sufficient knowledge on react library itself or react library itself is so smartly built, there is no way to hold of instance of component externally, as it may not be required or not a recommended way to work with react. Please read through doc and source code in github.

Following is the copy of Readme file:

Senario

Suppose you have a react application, let say with flux architecture. You want to track various data as per user interaction. One way to accomplish this is add the lines of codes into the react component methods which will get executed and intented data is available. But doing so would be very invasive and violates certain clean code principles. Better way of implementing such cross-cutting concern like collecting data from various methods within react component specification is through Aspect Oriented Programming approach.

Terms
Advice – module of code to be executed (additional behavior you want to apply)
Pointcut – place in code where an advice should be applied(point of execution, like method names)
JoinPoints - before, after (will add more in future) Aspect – The combination of the pointcut and the advice is termed an aspect

JoinPoints

• before- advice will be fired before pointcut is executed. Here the arguments would be exactly same as PointCut arguments in order.
• after- advice will be fired just after pointcut is executed. Here the first argument is the return value of pointcut and remaining arguments would be initial arguments of pointcut function.

Usages
npm install --save react-aop

Add following code before requiring any react components from where you intent to collect the data and before calling ReactDOM.render function. So, in your entry js file:

var react-aop = require('react-aop');

var usuages = require('./common/usages');

react-aop.register(usuages);

In the above code usages is an array of all possible aspects you want to add. for instance: usages.js

exports.usages = [

{

  componentName: 'ReactComponentDisplayName',

  jointPoint: 'before',  

  pointCut: 'method',

  advice: adviceOnMethod

},

{

  componentName: GeneralModule,

  jointPoint: 'after',

  pointCut: 'method',

  advice: adviceOnMethod

}

]

All fields are required. joingPoint and pointCut are string, advice is a function type and componentName can be string( for react component) or object( for any generic node module);