A while back, I wrote a post about feature toggle management using Unleash. However, on exploring more about managing features, I came to know about Remote Config by Firebase. Basically, the core concept is similar with a major difference being the priority. In Feature toggle, we keep a track of features and manage them using the management software like Unleash, Launchdarkly, etc. On the other hand, we can use remote configuration software to not only manage features but also send data to our application remotely. In this post, I will be talking about Flagsmith – Remote config and feature flag management software. This is easy to set up locally using docker. For the full concept of feature toggle, check another post.
Link to Flagsmith repository: https://github.com/Flagsmith/self-hosted
Also, I am using end3r’s Breakout game in this post.
Link to the Breakout game: https://github.com/end3r/Gamedev-Canvas-workshop
Setting up Flagsmith
It’s simple to set up Flagsmith. You can follow the instructions from the repository. Also, you need to install Docker on your machine. Once you build the container, you can access it from “localhost:8000”.
Firstly, we need to create an account. We can do this using the Sign-up functionality. Once we sign up and log in, we can see a dashboard. Here, we can create an organization and a project. I did all of them to see the following page.
Set up the Breakout game
Since the Breakout game is a tutorial, I chose the finished game, i.e. 10th lesson. I renamed lesson10.html to index.html. Now, we can serve the directory however we like. But, by using the Live Server extension on VsCode, we can see the changes reflect right away.
The game looks like this:
In this game, we have a scoring mechanism, no. of lives, no. of tiles, a ball and a base. The game is simple – we need to finish all the tiles without letting the ball hit the ground. Let’s see the code.
In the script section, we have variables to control the settings of the game.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 5;
var brickColumnCount = 3;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var score = 0;
var lives = 3;Here are a couple of things, that we can tweak. The number of lives, the number of bricks, etc. We can do this by changing these variables right here. However, you need to redeploy this app again (in the real world). Furthermore, you are deciding on your own and there is no data to back up your decision to be correct. Thus, we use Flagsmith to alter these values and get them to the users in no time. In addition to this, we can also analyse the usage of the flags. Also, we can segment our users and give them different configurations. If we want, we can also, create different levels with different configurations that we can tweak remotely. Thus, it gives us a lot of possibilities.
Using Flagsmith Javascript SDK
To use Flagsmith, we need to initialize Flagsmith’s SDK. To do so, I add the initialization script as follows.
<head>
<!-- Redacted -->
<script src="https://cdn.jsdelivr.net/npm/flagsmith/index.js"></script>
<script>
flagsmith
.init({
environmentID: "<YOUR_ENVIRONMENT_KEY>",
api: "http://localhost:8000/api/v1/",
cacheFlags: true,
enableAnalytics: true,
})
.then(function () {
console.log("Flagsmith initialized");
})
.catch(function (err) {
console.log("Error initializing Flagsmith: " + err);
});
</script>
</head>
<body>In the code above, you can get the environment key from the settings.
Create our first feature
So, let’s create our first feature, that is, the number of lives. Currently, it is set to 3 which I want to make default. But I want to make an experiment and override this value to 1.
So, let’s create default values in the initialization script. If there is an error fetching the remote values, Flagsmith uses default values.
flagsmith
.init({
// redacted
defaultFlags: {
number_of_lives: 3,
}
})Now, we can retrieve the value using the “getValue” method. There is another method “hasFeature” to check if the feature is enabled. In this case, we don’t need to check the feature as it is not a feature toggle.
So, in the code, we can change the static value as follows.
// redacted
var score = 0;
var lives = flagsmith.getValue("number_of_lives");If we refresh the game or wait for some time, a new game has only 1 life.
Now, we can change this however we like. Let’s do some other changes. Now, instead of individual flags, I am going to use JSON to represent the whole setting.
With this, we can modify our code to look like follows.
flagsmith
.init({
environmentID: "aTWKDX7bcyBnFttpAHeP9n",
api: "http://localhost:8000/api/v1/",
cacheFlags: true,
enableAnalytics: true,
defaultFlags: {
game_config: JSON.stringify({
noOfLives: 1,
rowCount: 5,
speed: 2,
colCount: 3,
brickWidth: 75,
brickHeight: 20,
}),
},
})
.then(function () {
console.log("Flagsmith initialized");
})
.catch(function (err) {
console.log("Error initializing Flagsmith: " + err);
});
</script>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var game_config = JSON.parse(flagsmith.getValue("game_config"));
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = game_config.speed || 2;
var dy = -game_config.speed || -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width - paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = game_config.rowCount || 5;
var brickColumnCount = game_config.colCount || 3;
var brickWidth = game_config.brickWidth || 75;
var brickHeight = game_config.brickHeight || 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var score = 0;
var lives = game_config.noOfLives || 3;Once we refresh the game, it becomes a lot harder to play.
I hope this post gave you some insights about remote config.
