featurevisor/featurevisor-example-react-native

React Native app example using Featurevisor SDK

Feature management for developers

Manage your feature flags and experiments declaratively from the comfort of your Git workflow.

Website | Documentation | Issues | Contributing | Changelog

_{Built by @fahad19 and contributors}

---

What is Featurevisor?

Featurevisor is a solution for managing your feature flags, experiments, and remote config. It's built for developers, by developers.

Workflow can be broken down into 3 steps:

• 1️⃣ Manage feature flags, experiments, and remote config in your Git repository
• 2️⃣ Trigger CI/CD pipeline to generate and upload datafiles (static JSON files) to your CDN
• 3️⃣ Fetch and evaluate datafiles in your applications using Featurevisor SDKs

More documentation available at https://featurevisor.com.

Supported features:

• 🚩 Feature flags: classic on/off switches
• 🆎 Experimentation: a/b and multivariate tests
• 👥 Segmentation: reusable conditions for targeting groups of users
• ↗️ Gradual rollouts: avoid big bang releases, and go from 0% to 100% rollout gradually
• 🔧 Variables: store key/value pairs for remote config namespaced under each feature
• 🎯 Consistent bucketing: makes sure same user gets same variation across devices/sessions
• 🌏 Multiple environments: Go beyond just staging and production to fit your needs
• 🏷️ Tagging: Load only features relevant to your application, avoiding bloat
• 👁️ Tracking: Track experiment activations with your favourite analytics tool

SDK support:

• JavaScript (both Node.js and browser environments)
• React
• Vue.js

Swift and Kotlin SDKs are coming soon for native apps.

Quick start

You are recommended to see a more detailed quick start guide here: https://featurevisor.com/docs/quick-start/.

The whole process can be broken down into 3 steps:

Step 1: Create a Featurevisor project

Use npx to scaffold a new Featurevisor project:

$ mkdir my-featurevisor-project && cd my-featurevisor-project

$ npx @featurevisor/cli init
$ npm install

You can now create and manage your feature flags, experiments, and remote config in this directory expressed as YAMLs.

See the building block guides here:

• Attributes: building block for conditions
• Segments: conditions for targeting users
• Features: feature flags and variables with rollout rules

Step 2: Build and deploy datafiles

Once the project is ready, you can build your datafiles (JSON files containing configuration of your feature flags):

$ npx featurevisor build

You will find the output in dist directory, that you can upload to your CDN.

See further guides here:

• Building datafiles: how to build datafiles
• Deploying datafiles: how to deploy datafiles to your CDN

A fully functioning example for deploying with Cloudflare and GitHub Actions (for free) is available here.

Step 3: Consume datafiles with Featurevisor SDKs

You can now consume the datafiles from your CDN in your applications directly using Featurevisor SDKs.

For Node.js and browser environments, install the JavaScript SDK:

$ npm install --save @featurevisor/sdk

Now you can initialize the SDK with the URL of your datafile, and evaluate your feature flags:

import { createInstance } from "@featurevisor/sdk";

// Initialize the SDK
const f = createInstance({
  datafileUrl: "https://cdn.yoursite.com/datafile.json",
  onReady: () => console.log("Datafile has been fetched and SDK is ready"),
});

// Evaluate a feature flag
const featureKey = "myFeature";
const context = {
  userId: "user-123",
  country: "nl",
};

const isEnabled = f.isEnabled(featureKey, context);
const variation = f.getVariation(featureKey, context);
const variable  = f.getVariable(featureKey, "someVariableKey", context);

Learn more about SDK usage here: https://featurevisor.com/docs/sdks/.

Packages

Package	Version	Description
@featurevisor/cli		CLI package
@featurevisor/core		Core package used by CLI
@featurevisor/react		React package
@featurevisor/sdk		Universal SDK for both Node.js and browser
@featurevisor/site		Static site generator for your project
@featurevisor/types		Common typings
@featurevisor/vue		Vue.js package

License

MIT © Fahad Heylaal