A lightweight A/B Testing and Feature Flag React library focused on performance ⚡️
Tesfy provides a simple but complete solution to develop A/B Tests and Feature Flags on both server and client side without relying in any storage layer. The main features of this library are:
- Lightweight and focused on performance
- Experiments
- Feature Flags
- Audience definition using jsonLogic
- Traffic Allocation
- Sticky Bucketing
Usage
Installation
npm install react-tesfy --save
Initialization
Render the provider with a datafile. A datafile is a json
that defines the experiments and features avaliable. Ideally this file should be hosted somewhere outside your application (for example in S3), so it could be fetched during boostrap or every certain time. This will allow you to make changes to the file without deploying the application.
import TesfyProvider from 'react-tesfy'; const datafile = experiments: 'experiment-1': id: 'experiment-1' percentage: 90 variations: id: '0' percentage: 50 id: '1' percentage: 50 'experiment-2': id: 'experiment-2' percentage: 100 variations: id: '0' percentage: 100 audience: '==' : var : 'countryCode' 'us' features: 'feature-1': id: 'feature-1' percentage: 50 ;const userId = '676380e0-7793-44d6-9189-eb5868e17a86'; const App = <TesfyProvider = => children </TesfyProvider>;
Experiments
Check which variation of an experiment is assigned to a user.
import useExperiment Experiment Variation from 'react-tesfy'; const Hook = const variationId = ; // '1'; const Simple = <Experiment ="experiment-1"> <Variation> Not rendered </Variation> <Variation ="0"> Not rendered </Variation> <Variation ="1"> Rendered </Variation> </Experiment>;
Feature Flags
Check if a feature is enabled for a user.
import Feature from 'react-tesfy'; const Hook = const isEnabled = ; // true; const Simple = <Feature ="feature-1"> isEnabled ? 'enabled' : 'disabled' </Feature>;
Audiences
Use attributes to target an specific audience.
import useExperiment Experiment Variation from 'react-tesfy'; const Hook = const id = 'experiment-2'; const variationId1 = ; // null const variationId2 = ; // '0'; const Simple = <Fragment> <Experiment ="experiment-2" => <Variation> Rendered </Variation> <Variation ="0"> Not rendered </Variation> </Experiment> <Experiment ="experiment-2" => <Variation> Not endered </Variation> <Variation ="0"> Rendered </Variation> </Experiment> </Fragment>;
Feedback
Pull requests, feature ideas and bug reports are very welcome. We highly appreciate any feedback.