The main sell of this model for our team is simple: no code changes are needed to run the tests. This lets product and marketing teams launch tests in production faster and without involvement of engineers.
There is one problem however: Optimizely usage is inherently problematic with React apps. React re-renders components every time state or store are changed. So, Optimizely changes don’t stick — they are removed by React diffing mechanism on re-render.
There has lately been a number of articles that introduced different solutions for React+Optimizely usage.
[UPDATE: Tilt blog seems to have since been taken down] Tilt engineering team designed a pretty intricate system using Store to hold experiment information. Looks like a well structured approach for client side rendering where big changes are necessary (like removing/adding components).
Milan talks about a different angle to the problem — server-side rendered apps and using Optimizely REST API to fetch experiment information on the server. Not just React, but any server side AB testing will pretty much always require a deploy. To me though, this approach seems to under-utilize Optimizely — I would rather use its GUI for client-side AB testing or not use it at all.
A lot of good ideas here. However, it bothers me quite a lot that all of the above solutions require a deploy for every new AB test.
Here is a lightweight approach. Things to note:
What this looks like:
window.optimizelyHook would be a global function that gets called immediately after the component mounts on the page. Utilize your top level component’s
componentDidUpdate lifecycle methods, like so:
optimizelyHook() function. Then, perform all DOM alteration inside of this function.
componentDidMount is called once on the initial mount
componentDidUpdate is called on every consecutive update of props
optimizelyHook() will run on every props update, resulting in experiment that persists through re-renders triggered by Redux actions.
Deploy once, and use many times across multiple AB tests. 🎉
Level up your reading game by joining Hacker Noon now!