DEV Community: Alex G. Mircean

Best Practices to Follow with ConfigCat's Feature Flags

Alex G. Mircean — Tue, 19 Apr 2022 18:25:07 +0000

Do you want to learn how to work with ConfigCat's feature toggles better and more efficiently? You've come to the right place! Let's take a look at the benefits of using some good practices when managing feature flags with ConfigCat.

A little bit about feature flags

You've probably heard about the concept of feature flags or feature toggles before, but let's summarize it really quick. A feature flag acts as a switch for enabling and disabling certain parts of an application.

For example, a company can use a feature flag to limit the use of an experimental feature to certain demographics or user groups.

Best practices

ConfigCat's feature flag management system is versatile and widely available. It can be set up and used with a variety of technologies (see ConfigCat's Docs). Let's take a look at what the best approaches are when working with this service. My examples will be in JavaScript, but they should still be relevant in most other languages.

Naming Conventions and Sorting

Case styles

Depending on preferences, naming conventions may vary from company to company. A development team would benefit from keeping the flags' name case consistent. This makes it easier to find the flag that you're looking for or to add a new flag.

For example, the first feature flag that appears when you open the ConfigCat dashboard is in camelCase, but that's not the only option. You could also use snake_case, PascalCase, or kebab-case ("could" doesn't mean that you "should" though, so it's advised to use camelCase like everybody else). Also, give your flags a suggestive name to avoid any misunderstandings or time wasted searching for a specific flag.

Space sorting

In larger apps, you'll probably have a large number of feature flags. Let's say you have a flag that's more important than the others and you always want to have that right at the top of your dashboard feature flag list. To achieve that, you can sneakily start the flag name with a space character and it will be automatically brought to the top because of the ASCII character order.

Feature flag tags

To group a selection of flags, simply click the +tag button next to each flag you want to group. You will now be able to see all the flags associated with that specific tag when you search for it. You can do it in a jiffy.

Watching a flag

Users can toggle the option to watch a flag in ConfigCat. When you watch a flag, you'll receive an email notification if the flag is not active for a certain time. Clicking on the little zombie icon next to the watch/unwatch button also allows you to set the time interval and a couple of other handy settings. Braaaains!

Keeping your SDK key safe

You've probably seen something similar in the official documentation. Creating the configCatClient in the manner presented below is great for getting to know the API and it works perfectly well.

var configCatClient = configcat.createClient("#YOUR-SDK-KEY#");

For safety reasons though, it's better to save the SDK key string in a constant (yourSdkKey) that won't be available in the production source code. One suitable option is storing it in a file that's included in .gitignore. Storing it in the backend rather than on the client-side to make it less accessible is also a good solution.

var configCatClient = configcat.createClient(yourSdkKey);

Flag configuration

In addition to the SDK Key, you can pass a few option parameters when creating the client. One of them is pollIntervalSeconds. It tells your app how often it should check the feature flag value updates. If you are developing an app where time is of the essence like a trading or betting app, you'd then want to check for your feature flag values quite often. This checking interval default is 60 seconds, which is enough for most applications, but you can always overwrite it if you need to.

User targeting

Targeting users comes in handy when you want to make your feature available only to a specific audience. Rather than making complicated checks in your code, you can get the flag's value along with the users that it targets. Here's an example of a user object which could be passed as a parameter to the getValue function:

var userObject = {
  identifier: "1234",
  email: "alex@f1.com",
  country: "Indonesia",
  custom: {
    subscriptionType: "Pro",
    userRole: "Administrator",
  },
};

Clean code

As you can see in the code example above, I've chosen to store the user options in an object. Passing a function parameter instead of a long object will improve readability.

Similarly, you can apply this concept when fetching your flag's value. Let's say you want to do something when the feature flag value changes. Rather than writing all of the code that needs to be executed inside getValue, you can move it into another function.

configCatClient.getValue("isMyFirstFeatureEnabled", false, (flagValue) => {
  if (flagValue) {
    doSomething();
  } else {
    doSomethingElse();
  }
});

Conclusion

Writing clean code, flags that follow a naming scheme, and proper configuration can go a long way to make your work more effective. The tips provided here are just suggestions and they are by no means mandatory. They aim to make life a bit easier for everyone working with feature flags in their project.

You can check out ConfigCat on LinkedIn, Facebook, and Twitter pages.

Playing with ConfigCat's Feature Flags in a Phaser.io application

Alex G. Mircean — Sat, 05 Feb 2022 19:27:53 +0000

Let's take a look at how practical a feature flag can be in a Phaser.io application. Phaser is one of the most popular browser game libraries and with its help, I'll build a simple game that replicates the experience of being in a music studio. Let's get started!

An introduction to Feature Flags

What is a feature flag, exactly? You can think of a feature flag as an On/Off button for features. When pressed, the selected feature becomes available, and vice versa. Typically, these buttons are useful for targeting a specific audience or number of users, releasing an experimental feature, releasing it gradually, or customizing the product experience based on permission.

How will the app use a Feature Flag?

To begin with, why would I want a feature flag in my game? Let's assume that my game is a success and users love it. I still want to keep the application free to play and ad-free, so to monetize it, I'll add another feature (a paid one) that only premium users will have access to. In the free version of my Beatmaking Simulator, the player has access to an on-screen drum machine controlled by the keyboard, while the full version offers a piano with playable keys as well. Therefore, I am intending to integrate ConfigCat's feature management service to control which version of the game I would like to display.

Getting started with Phaser 3

Let's get to the most exciting part - developing the application. I'll create a new folder for it that contains a plain index.html file. There are several ways to get started with Phaser: you can clone it, you can get it via npm, or download pre-built versions of it. For the sake of simplicity, I'll use the last option. I'll download the phaser.js file from Phaser's downloads page and just drag it into my project folder. In order to import it, I'll include the following script in my index.html file:

<script type="text/javascript" src="phaser.js"></script>

And it's that easy - I'm ready to use the Phaser library! First, let's create a new Phaser.game object with the help of the initial configuration, containing mostly visual stuff such as the game's width, height, and background color. I now see an empty game canvas if I open my index.html file in a browser.
Hot tip: If you're a newbie to web development, Visual Studio Code's Live Server extension will allow you to see your changes instantly in the browser.

const config = {
  width: 1200,
  height: 900,
  renderer: Phaser.AUTO,
  backgroundColor: '#d4feff',
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  scene: { preload: preload, create: create, update: update },
};

const game = new Phaser.Game(config);

The most relevant part of the config object is the scene, which contains the following functions:

preload, which is used for loading sounds and images
create, used for generating game content
update, responsible for redrawing game objects

Loading assets

Next up, I'm going to preload (hence the function name) a drum machine image and the drum sounds that I want to play.

function preload() {
  this.load.image('drumpad', 'assets/images/drumpad.png');
  this.load.setPath('assets/sounds');
  this.load.audio('kick', 'kick.wav');
  this.load.audio('clap', 'clap.wav');
  this.load.audio('hat', 'hat.wav');
}

I have implemented the following logic to load the image on the canvas and make the kick pad playable:

function create() {
  //loading the drum pad image and the kick sound
  const drumpad = this.add.sprite(340, 280, 'drumpad');
  const kick = this.sound.add('kick');

  //linking the A key to the kick sound
  this.input.keyboard.on('keydown-A', function () {
    kick.play();
  });
}

Now, let's do this a couple more times for the clap and hi-hat sounds. Let's add some text over the pads as well so I know which one's which, maybe some user instructions, and boom! I have a working drum machine right at my fingertips.

Importing ConfigCat for my feature flag

I'm going to load the piano image and sounds in the same manner, and now I can view it and play as well! However, as I mentioned before, I only want to display the piano in the full version of the game. For that, I'm intending to use a ConfigCat feature flag: if the feature flag holds a truthy value, the piano keys will be shown and otherwise only the drum pad will be available.

If I navigate to the ConfigCat dashboard, I can see a feature flag already created for me. From here I can change my flag's value, change some targeting options, view my SDK key, and more.

Let's import ConfigCat via CDN in our index.html file:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/configcat-js@latest/dist/configcat.min.js"></script>

Next, I will need to create a configcatClient, which will link my application to the actual feature flag. I will need my SDK key from the dashboard for this. The createClient function also supports various options such as pollIntervalSeconds, which is pretty self-explanatory, configChanged - a callback that notifies you when a change occurs, and logger, which lets you choose what log level you want to use. These (and more) options are described in more detail in the ConfigCat docs. Here's an example of a level 3 logger, that will log pretty much everything: warnings, errors, and feature flag evaluation:

const logger = configcat.createConsoleLogger(3);

let configCatClient = configcat.createClient('YOUR_SDK_KEY', { logger: logger });

And that's pretty much it! Now that my game is hooked up to ConfigCat, if I open the console, I can see the logger giving me some information about the feature flag. But how can I put the flag to proper use for what I want to display?

Making use of the feature flag

Before moving any further let's move all the logic for the drum pad and piano in separate functions (initializeDrumpad and initializePiano) to tidy up the code and allow for a better understanding of how feature flags work. Finally, I need the actual value of the feature flag. I can get it via the callback way or the asynchronous way, using the getValueAsync function.

function create() {
  this.add.text(20, 560, 'Keyboard controls', { font: '44px Courier', fill: '#000000' });

  initializeDrumpad(this);

  let configCatClient = configcat.createClient('YOUR_SDK_KEY');

  configCatClient.getValueAsync('isMyFirstFeatureEnabled', false).then((flagValue) => {
    if (flagValue) {
      initializePiano(this);
    }
  });
}

This function has two parameters: the name of the feature flag and the default flag value. Now we have access to the value of the flag, and depending on it, I can choose if I want to display the piano. Lastly, let's head back to the dashboard and set the flag value to a truthy one. The game will display the piano keys by flipping the switch!

Summary

To sum it up, we got to learn a little bit about two awesome pieces of technology today - Phaser.io and Feature Flags. Here's a walkthrough of what I did:

installing Phaser and ConfigCat and importing them via CDN
developing a small game
creating a ConfigCat client that links the app to the feature flag service
handling what the game will display based on the flag value

I also did a short demo video on this because I figured screenshots wouldn't do justice to a music creation app, right? You can check it out here.

Conclusion

ConfigCat’s feature flag management service can be practical in a Phaser application as well. It is also easy to understand and use, with its 10 minutes trainable user interface. I hope you've enjoyed this article, and if you want to take a peek at the source code from this demo, it's available on GitHub.

For more informative and fun articles, you can also check out ConfigCat's blog. You can also stay in the loop with all the latest developments by following ConfigCat on: