Set Up Your First Feature Toggle

Setting up a feature toggle

One of the requirements we set out was “Develop a Svelte component to deal with the potential complexity.” Let’s do that now, and connect it to Remote Config so it can read the feature toggles and hide/show content on the web application.

The best way to approach a requirement is by focusing on the end-user experience. The end-user in the case of a Svelte component is any developer who works on our web application. How would you personally, or anyone else who uses that component, want to use it? We want to define which feature can be toggled, and if that toggle is “on”, you want to show the feature. If it is “off”, you don’t want it to be visible on screen or in the DOM. As a result, hiding an element with CSS is not a solution. Let’s try to see what this could look like:

<FeatureToggle name={"feature_vip_welcome"}>
  <p>Some people see this, others don't!</p>
</FeatureToggle>

That looks easy enough to use. The name prop defines the name of the feature toggle. If it’s “on”, the paragraph is displayed, otherwise, it’s hidden. Let’s develop the component.

Create a directory services/web/src/components and a feature-toggle.svelte file in it, and open it:

touch services/web/src/components/feature-toggle.svelte

nano $_

Add the following code to this file:

<script>
  export let name;
</script>

{#if ???}
  <slot />
{/if}