Implementing Feature Toggling in 2024

4 minggu yang lalu

Implementing characteristic flags pinch Bit and Bit Platform: A step-by-step guide

Feature flags are an integral portion of immoderate platform engineering. They connection a elastic measurement to negociate and deploy features without altering codification directly.

Feature toggles tin beryllium sorted into 3 types:

Release toggles, which power characteristic merchandise timing. These let teams to merge codification into nan main branch without releasing it instantly to users.
Experiment toggles, besides known arsenic A/B testing toggles, which alteration teams to trial caller features pinch a subset of users.
Ops toggles, which let operations teams to move features connected aliases disconnected without deploying caller code, are often utilized to negociate operational aspects.

Highly composable package built pinch loosely coupled Bit components makes it acold easier to instrumentality characteristic toggles astatine immoderate granularity.

When integrating characteristic toggles pinch Bit components, nan 3 types mentioned earlier construe into:

Using definite Bit components versus not utilizing them.
Swapping Bit components pinch different replacement components.
Making nan latest type of a Bit constituent disposable only to a definite group of users while others proceed to usage a erstwhile version.

We’ll commencement by creating an “entity component.” This will beryllium a Bit constituent shared among each related teams and projects wrong nan organization.

It serves arsenic a cardinal grounds for each disposable characteristic flags, their imaginable statuses, and types, making it easier for different parts of nan package to respond appropriately to nan authorities of each flag.

bit create entity feature-flag-entity

Our feature-flag entity will see a azygous characteristic flag: an SSO authentication mechanism. The enabled spot is near undefined arsenic it should beryllium populated by nan server controlling nan toggling.

const availableFeatureFlags = {
sso: {
description: 'Enable login pinch SSO',
enabled: undefined,
},
};

export people Features {
constructor(public readonly flags: FeatureFlags) {}
// ...
fixed readonly availableFlags = availableFeatureFlags;

fixed fromApi(flagsObj: FeatureFlags) {

const configuredFeatureFlags = {};

for (let flagObjName successful flagsObj) {
configuredFeatureFlags[flagObjName] = {
...Features.availableFlags,
enabled: flagsObj[flagObjName].enabled,
};
}

return caller Features(configuredFeatureFlags);
}
}

To merchandise this Bit component, we’ll tally nan following:

bit tag -m "add SSO to disposable characteristic flags"
bit export

The constituent is built and shared connected nan Bit platform. Note that, astatine immoderate point, a squad maintaining a work tin import nan Bit constituent to their repository, update it pinch caller characteristic flags, and merchandise a caller version.

The shared Bit components pinch each disposable characteristic flags

Using Ripple CI connected nan Bit platform, limited components will automatically beryllium tested, built, and released pinch a caller version. This ensures that each teams are successful sync pinch nan latest change.

The “entity” Bit constituent built connected Ripple CI

For nan liking of simplicity, we’ll create a basal definitive work that communicates to different services and frontend applications whether nan characteristic flags are enabled aliases not. In this case, we’ll randomly move betwixt SSO and nary SSO:

/**
* usage nan 'features' entity constituent to enactment in-sync pinch nan disposable
* characteristic flags, their names and their types
*/
import { Features } from '@my-org/my-scope.feature-flag-entity';

// ...

const enableFiftyPercentOfTheTime = () => Math.random() < 0.5;

router.get('/feature-flags', (req, res) => {
const features = caller Features({
sso: {
enabled: enableFiftyPercentOfTheTime(),
},
});

res.send(features);
});

See nan charismatic docs to study really to implement this work arsenic a Bit component.

A squad processing a sign-in shape is now capable to usage nan caller SSO characteristic emblem successful their form.

For example:

/**
* usage nan 'features' entity constituent to enrich and validate nan information recieved,
* bask intellisense and type support.
*/
import { Features } from '@learnbit-react.feature-flag-entity';

export const SignIn = ({ children }) => {
// ...

useEffect(() => {
(async () => {
effort {
const information = await fetch('path/to/feature-flags-service')
// ...
const features = Features.fromApi(data);

})();
}, []);

return (
<>
/**
* SEE THE FOLLOWING SECTIONS FOR ALTERNATIVE IMPLEMENTATIONS!
*/
</>
);
};

Real applications will evidently usage a much optimized implementation of nan feature-flags information fetching.

We now person respective alternatives to implementing nan sign-in shape pinch nan SSO characteristic emblem condition.

Update nan sign-in shape to render an SSO fastener conditionally

In this alternative, nan squad processing nan sign-in shape decides to update their sign-in shape constituent to render nan OSS action conditionally, based connected nan information received from nan feature-flags service:

const ConditionalSso = () => {
if (!features.flags.sso.enabled) return null;
return (
<>
<Text>
<Link href="#">Connect pinch SSO</Link>
</Text>
<Separator />
</>
);

export usability SignInForm() {
return (
<div>
// ...
<div className={styles.linksSection}>
<ConditionalSso />
// ...
</div>
);
}

Update nan page to switch betwixt components conditionally

In this alternative, nan squad processing nan sign-in page returns 1 of 2 different Bit components. One pinch SSO and different without SSO (in this circumstantial case, nan ‘extended sign-in form’ will astir most apt beryllium composed of nan guidelines sign-in form):

import { SignInForm } from '@my-org.my-scope/forms/sign-in';
import { ExtendedSignInForm} from '@my-org.my-scope/forms/extended-sign-in';

export usability SignInPage() {
if (features.flags.sso.enabled) return <ExtendedSignInForm />;
return <SignInForm />
);
}

Update nan page to switch betwixt different versions of nan aforesaid Bit constituent conditionally

This action uses different versions of aforesaid Bit component. One of this type will astir most apt see a pre-release tag. For example:

bit tag forms/sign-in --unmodified -m "add SSO option" --increment prerelease --prerelease-id beta

Which results successful nan pursuing constituent ID: my-org.my-scope/forms/sign-in@0.0.2-beta.0 and correspondingly, nan pursuing package name: @my-org/my-scope.forms.sign-in .

To usage these 2 versions successful an existing project, we’ll first adhd “dependency aliases” aliases “package aliases” to our package.json :

{
"dependencies": {
"@my-org/my-scope.forms.sign-in": "0.0.1",
"@my-org/my-scope.forms.sign-in-sso": "npm:@my-org/my-scope.forms/sign-in@0.0.2-beta.0",
}

We tin now usage some versions successful nan aforesaid file:

import { SignInForm } from "@my-org/my-scope.forms.sign-in";
import { SignInForm arsenic SignInFormWithSso } from "npm:@my-org/my-scope.forms/sign-in@0.0.2-beta.0"

export usability SignInPage() {
if (features.flags.sso.enabled) return <SignInFormWithSso />;
return <SignInForm />
);
}

For example, spot these 2 versions of nan aforesaid Bit component. One is simply a unchangeable merchandise whilethe different is simply a pre-release: