Feature flag strategies with static sites

The following examples explore the strategies described in Using feature flags on static sites. There are four examples on this page. Each example is a separate page in a Glitch app displayed in an iframe. To make best use of these examples, click on the refresh button on the upper right of each example to refresh the iframe in each box.

If you have a fast internet connection, you may not see much of a difference between these examples. To see a more pronounced effect of these strategies, you can simulate a slow network connection using the Chrome Developer Tools. Firefox has a similar tool.

Example 1: Render page first then initialize client source

The following page renders the contents of the page in parallel to loading and initializing the LaunchDarkly SDK/client. You'll notice the header and body background colors change shortly after the LaunchDarkly client initializes. In most cases this is within 100-200ms. This delay is more pronounced when you have less bandwidth available. If you can accept a page that renders progressively rather than all at once, then this technique is best for you. It doesn't slow down the initial render, but your users may see some flickering due to asyncronous loading of parts of the page hidden behind feature flags.

Example 2: Same as example 1, but with localStorage bootstrap source

This is example is almost identical to example 1, but with the addition of the { "bootstrap": "localstorage" } option added to ldclient.initialize(). If the localStorage is empty (first visit), the experience will be similar to the first example, but subsequent visits will retreive the cached flag variation from localStorage.

Example 3: Delay rendering until initialized source

In this strategy, we delay the full rendering of the page until the LaunchDarkly client is initialized. You'll notice a blank page during the 100-200ms delay while the client is being initialized, but then the page is rendered all at once when the client is ready. This technique works best on single page apps since you're guaranteed that all components on the page will be in the state you expect when rendered.

Example 4: Delayed rendering with placeholder source

This next example is the same as EX2, but with a placeholder to simulate the actual content that will appear once the client is loaded. The benefits of this are the same as EX2, but with less time spent waiting on blank page. This is a technique popularized by Facebook.

Example 5: Delay rendering using the LD React SDK source

This strategy is almost exactly like example 2, but utilizes the React SDK's asyncWithLDProvider function to guarantee that flags are available before your components mount. This is similar to example 3, but using the React SDK.