Feature flag implementation examples in JavaScript

18 March 2019 by Appknobs

We explore four front-end implementation examples to get familiar with the Appknobs libraries and demonstrate how effortless it is to implement feature flags in React, React Native and Electron.

The examples are available in our Github repo. These stand-alone, runnable apps are intentionally minimal and straightforward. They only aim to demonstrate how implementing feature switches in your codebase using Appknobs libraries and services works. Once you understand how the components come together, you can build more elaborate implementations in your real life product.

Appknobs

Appknobs is a complete feature toggle solution that comes with dedicated UI libraries, a feature management web console, CLI tool and configuration delivery over HTTP. The service contains everything your team needs to implement feature flags or release toggles. These tools enable you to attain higher velocity and increase product quality by using continuous integration and continuous delivery workflow.

Front-end friendly

While other similar services exist, we felt that the complexities of front-end implementation receive little attention. Whether we like it or not, front-end is an increasingly complex domain. Building a bespoke feature flags solution from scratch is also a non-trivial undertaking. What engineers need instead are tools that solve feature flag related problems elegantly and free up their resources so they can focus on achieving real business goals.

By looking at the code examples, you find that Appknobs minimises the work of front-end teams. These libraries, supported by the back-end services take out the guesswork of feature flag implementation.

UI developers can focus on what they do best: create high-quality web and mobile applications.

Getting started

To run the examples, you need to grab your app ID, API key and create a single feature. You can find a quick walkthrough here or visit https://console.appknobs.io and follow the instructions. If you prefer, you can set yourself up using our CLI tool: @appknobs/cli

Once you're all set up, refer to the README for the lists the commands to run the examples

React

React is a declarative UI library. It allows the user interface to be coded as a high-level description, moving implementation details behind reusable components. This programming style lends itself to the declarative implementation of feature flags - and this is precisely how @appknobs/react works.

One can now declare - using a component - that a particular part of the user interface belongs to a managed feature instead of relying on unsemantic switch or if/else statements. A dedicated component not only makes the code easier to understand and more manageable but it enables powerful helpers like feature auto-discovery using the CLI.

Hence the high-level API becomes as simple as

<Appknobs
  client={/*optional*/}
  features={/*optional*/}
  payload={/*optional*/}
>
  <Feature name='first-feature'>
    <p>This feature is hidden behind a feature toggle!</p>
   </Feature>

  <Feature name='second-feature'>
    <p>This one too :)</p>
  </Feature>
</Appknobs>

💡Tip: once you have an <Appknobs> wrapper around your app you can introduce any number of <Feature>s anywhere.

Render props

If you know React, you might point out that this solution can be somewhat wasteful. To prevent mounting feature-managed components, we provide a render props solution too:

<Feature
  name='first-feature'
  render={(enabled) => enabled && <p>I am visible!</p>
  }
/>

Server-side rendering (SSR)

No UI solution would be viable without server-side rendering support. You can take advantage of our Node.js client to pre-render the user interface on the server:

import {newNodeClient} from '@appknobs/client'
const client = newNodeClient({appId, apiKey})

// The handler fetches the features that can be passed
// directly to <Appknobs> later:
const {features} = await client.evaluate({your: "custom payload})

You can find our React & Next.js example here and the @appknobs/react npm package here which contains more examples.

Note: to keep the bundle size small we support selective imports

React Native

Harnessing the power of React to build mobile apps, React Native can be a massive productivity boost in the right hands. What's more, you can now implement feature flags in your native apps with minimal effort.

Check out this animation to get a feel of what can is achievable by limiting select features to specific users:

There is no special SDK to build or link, the Appknobs React library works as expected and can be used to declare managed features in your codebase.

The only difference compared to React is the service client you need to import:

// Import the React Native client
import {newRNClient as newClient} from '@appknobs/client'

// In the top level component
componentDidMount() {
  this.appknobsClient = newClient({appId, apiKey})
}

From here on you can mark certain areas as managed by <Feature> and configure access to them using the feature management console

You can find our React Native example here. The @appknobs/client package has more information on the platform-specific clients.

Electron

Desktop applications written in Electron can use any UI library, so we're not focusing on React here. There other considerations to keep in mind, mainly the difference between main and renderer processes.

As a reminder:

In Electron, the process that runs package.json's main script is called the main process. The script that runs in the main process can display a GUI by creating web pages. An Electron app always has one main process, but never more.

Since Electron uses Chromium for displaying web pages, Chromium's multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process.

Due to different implementations, these two processes use different APIs for networking - to make your experience frictionless, there are dedicated Appknobs clients you can use in these two different stages.

For the main process, you use the Electron specific client:

import {newElectronClient} from '@appknobs/client/lib/newElectronClient'

The rendering process can take advantage of the generic browser client:

import {newBrowserClient} from '@appknobs/client'

Check out the full Electron example here

React Legacy

For projects that are running on older versions of React, we provide a React 15+ compatible version. We recommend using this in projects that run on React 15.0.0+ but not on 16.3.0+.

Thanks to the declarative nature of the library, the API remains the same, but you need to import the legacy components:

import {Appknobs, Feature} from '@appknobs/react/lib/legacy'

The React legacy example demonstrates both the render props and child-node solution in a client-side context.

Get the code

The examples mentioned above are available in our Github repo. Give us a star ⭐️ if you find them useful or create an issue if you've encountered any problems!

Appknobs is feature flags without the work
Read our blog, Twitter and newsletter for tips, updates, tutorials and articles.