Feature Toggles: The Preferred Way to Test New UI Features

Have you ever said to yourself: “Gee, I wish I could deploy this new feature to just a few of my users at a time. I want to test if they like it and it works well before I open it up to the entire user base.”?

Then you shrug, deploy to production and the site crashes when 250 users find that one unhappy path you didn’t even contemplate it was so far outside the scope of how to logically use the site (because that’s what users excel at).

This kind of scenario (and the ensuing mad scramble to code up a fast fix) could have been prevented with feature toggles.

What are Feature Toggles?

Well, aside from the scenario I described above, according to Wikipedia:

A feature toggle is a technique in software development that attempts to provide an alternative to maintaining multiple source-code branches (known as feature branches), such that a feature can be tested even before it is completed and ready for release. Feature toggle is used to hide, enable or disable the feature during run time. For example, during the development process, a developer can enable the feature for testing and disable it for other users. — Wikipedia, Feature Toggle

Feature toggles allow developers to introduce new features to a small group of users (beta testers), ensure that all the kinks and bugs are worked out, and the feature is solid and well liked by the users before letting everyone have access to it.

It also allows for multiple versions of an application to exist at once. Although feature toggles are generally thought of as impermanent, used for testing features then releasing them to the general public once they’ve been vetted, they could also be used maintain multiple versions of an application, with different versions available to different users.

If you’d like to read more about how to go about setting up a config server, you can read an article I wrote a while back about setting one up with the help of Spring Boot’s Cloud Configuration package.

And if you’d like to see another way of setting up feature toggles in a slightly older JavaScript application, I wrote an article about that as well. That implementation, though, required a redeployment of the total application every time a new user or group was added with a feature toggle, but with this new solution, that’s unnecessary.

In this blog, I’ll show you how to add new information to existing feature toggles in a React UI without having to redeploy the whole application.

The best part? It’s not terribly complicated.

Please note: this article does not eliminate the need to modify and redeploy UI code to implement brand new feature toggles, but it does make it possible to modify existing feature toggles with new information (like new users or user groups).

Rebuilding and Redeploying UIs is Not Always a Must

Back in the olden days of JavaScript development, when Grunt and Gulp tasks rebuilt jQuery fueled applications, if you wanted to modify feature toggles in the UI with new information, the whole application had to be rebuilt from the Node.js server up. Recompiled, re-minified, re-uglified, rebuilt and redeployed to the server or the cloud.

It didn’t really take too long in the grand scheme of things, but it was still a pain. And for my business partners who wanted the relative ease of clicking a button to enable or disable a feature toggle for certain user groups, it made that impossible.