Rich-text Reply

Hijacking React Globals

tomfuertes 03-27-15

Hijacking React Globals

[ Edited ]

Hi All! Wanted to post a tldr of our recent blog post about an interesting pattern we figured out to work around Reacy components without deploying to the actual code base.

 

Ex Code:
Ex React Sticky CTA

 

Explanation: By overriding the MobileStickyCTA React Component, we pivot off of the incoming arg prop for `caption`, replace it if the caption in question is the one being tested, and then curry the call back using `origfn.apply` so we don’t lose any of the original functionality.

 

Original Post: http://clearhead.me/post/114754807490/engineering-fridays-hijacking-react-globals

 

Hope this helps someone! I'm subscribed to the thread so ask away if you have any questions!

 

-Tom

____
- Tom Fuertes | CTO @ CROmetrics / LinkedIn
"Most Impactful Use of Personalization" and "Experience of the Year" Optie award winner.


Re: Hijacking React Globals

Hi @tomfuertes,

 

Thanks very much for highlighting this - very cool!  We've seen some of our savviest customers use this kind of strategy with other JavaScript frameworks that drive single-page apps on the web, RequireJS being one of them.  We have a customer who lazy loads their content, and checks if a testing flag exists in the global namespace before rendering a given piece of content.  Optimizely variation code is delivered if and when the flag is present.  They can now overwrite the content before it's rendered instead of waiting for it to be rendered to then overwrite.

 

Optimizely's Conditional Activation makes this even easier, as you can check for variables or define functions like yours to make changes without deploying to your code base.  You can then still use the Visual Editor to define the changes to be rendered.

 

Do you have any customer use cases you can share who are using this React strategy?

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com
 
tomfuertes 04-24-15
 

Re: Hijacking React Globals

Thanks Harrison

 

We've used the global flag/pivot approach well, but find it requires too much of a coupling between product launch and test launch to be maintainable (part of being an agency). 

 

We don't have any other use cases at the moment, but I'll respond back when we do!

 

-Tom

____
- Tom Fuertes | CTO @ CROmetrics / LinkedIn
"Most Impactful Use of Personalization" and "Experience of the Year" Optie award winner.