Our First Open Source Project
A NuclearJS A/B testing module for Optimizely
Here at Hillary For America our development group is using a number of cutting-edge JavaScript technologies, from ES6 to reactive programming. We’ve been learning from this opportunity to use them on numerous small projects, written from the ground up as fast as possible. Along the way we’ve kept an eye out for commonly-used functionality we could extract. Today, we are excited to open source one of these common modules.
Here on the campaign we have a data-driven culture, using A/B tests to guide our decisions. We found that testing, running and cleaning up that many features with this particular technical stack was a challenge, and a challenge without a common solution. FluxFeatures is our answer. This module mediates between Optimizely and NuclearJS. It makes it simple to run, manage and clean up after A/B tests, and allows us to gate new features. It is well-tested and relatively small, though obviously it depends on NuclearJS.
Inspired by this description of Tilt’s integration of Optimizely and Flux, FluxFeatures adapts the pattern for NuclearJS. It puts state about the status of features into a Feature Store and then exposes that state to the Nuclear components via Getters. To prevent flickers for features that affect the initial state of a page it supports Optimizely’s capacity to execute feature JavaScript immediately, though if you are using isomorphic rendering you still need to consider the initial page state.
This has two major advantages over using Optimizely directly: support for cross-cutting features and testing. No matter how many different pieces of behavior we want to vary in the experiment, the Optimizely code remains a single call. This makes debugging significantly easier and prevents bugs that can result from relying on jQuery selectors or the like.
For testing, because the framework isn’t reliant on Optimizely it becomes trivial to write tests covering all variations. Then when one variation wins, we just go back and clean up the now-unused tests as part of the general feature clean up. In integration tests, the Javascript calls an action to enable or disable a feature. In our selenium end-to-end tests we use the functions attached to the window, making the same calls Optimizely will. It also supports url parameters, but we find that calls to the window functions are easier to keep track of than url parameters. Url parameters are very convenient when performing manual testing or demonstrating new features to stakeholders.
To use this module, you should insert the inline script before including Optimizely’s JavaScript. We use Nunjucks, but it is easy to include it explicitly instead. Then you initialize the Feature Store wherever your stores are initialized and you’re all set!
We hope you find it useful! The code can be found at https://github.com/gitoutthevote/flux-feature and feel free to reach out on our issue tracker there. And of course, if you want to join us in building effective products to help Hillary Clinton become the 45th President of the United States, we’re hiring!
