03 May

Integrating Feature Flags in Angular v4

A little while ago, we blogged about eliminating risk in your AngularJS applications by leveraging feature flags. Like all good web frameworks Angular continues to release new versions providing opportunities to tweak and update your code. The benefits of Angular over its predecessor include a built-in compiler,type enforcement, and a complete re-write in Typescript. All valuable of updates for reducing agony within the software development lifecycle.

If you’re thinking of making the switch to Angular, or are already using it, LaunchDarkly is here to help you eliminate the risk all the way from your initial migration to future successful launches. In this article, we’ll discuss how to eliminate risk and deliver value in your Angular project.

We’ll build on Tour of Heroes (which we’ll refer to as TOH from here on out), a demonstrative Angular app which showcases the framework’s basic concepts. Essentially, TOH is a live roster of superheroes, including search functionality and the ability to modify hero details. To learn more about TOH, and to get familiar with Angular, check out the official tutorial.

Creating our Feature Flags
Suppose we want to limit the usage of our search and modify features to a certain subset of our users. To achieve this, we’ll create two feature flags, toh-search  and toh-modify . In our case, we’ll allow logged in users access to search, and only the administrator will be able modify heroes.

An implementation of toh-search in the LaunchDarkly console

Integrating

Now, we’ll create a service which handles everything LaunchDarkly’s JavaScript SDK will throw at us. Note: for simplicity, we use a dummy user-switching feature (located in the user component of the project folder).

LaunchDarklyService’s constructor starts by initializing the SDK, and follows up by calling the built-in on method, which will update the feature flag values within our app whenever the user is changed, or the feature flag configurations are modified. This is handled by a Subject-typed variable,   flagChange , which will later be subscribed to by in the app’s components.
With our service functional, we’re now able inject it as a provider into TOH’s “search” and “hero” components, granting them full access to our feature flags!

In the hero-search component, we subscribe to the aforementioned flagChange , which will let Angular know that the search component should be toggled whenever the respective feature flag configuration is changed. The hero component is modified in a similar fashion to introduce the toh-modify  flag.

See it in action!

Search:

Modify:

Be sure to check out the complete project on GitHub, we’d love to see what other features you can build into Tour of Heroes!

01 Mar

Implementing Feature Flags in an Angular E-commerce App

E-commerce applications can take on many forms. Whether they’re retail, goods exchange, or an auction website, online commerce is becoming more common than offline. Modern front-end frameworks, such as Angular and React, provide the tools necessary for creating fast and responsive single-page e-commerce apps. In this article, we’ll delve into the process of using the LaunchDarkly JavaScript SDK to introduce new functionality in an AngularJS e-commerce application.

E-Commerce + Real-Time Feature Flags

With the growing demand for quicker, more reliable releases, development teams should consider having feature toggles in their toolbox. The user-facing nature of web stores facilitates the perfect environment in which feature flagging promotes granular control and feature visibility.  Some of the use cases include:

  • Rolling out storewide discounts with minimal overhead
  • Gradually rolling out new checkout and payment systems and assessing performance and revenue impact before fully rolling out
  • Allowing customers to personalize their shopping experience
  • Serve promotions and recommend items based on a customer’s preferences and previous behavior

Having these implementations wrapped in feature flags creates a safety net for catching even the smallest discrepancies, such as outdated seasonal discounts and conflicting pricing rules.

Using Feature Flags in an E-commerce Environment

Feature flags prove to be incredibly valuable in an online store. In such a fast-paced environment, product pricing is constantly changing, with various discounts and markdowns being put into effect. We’ve created an open-source Angular application (based on Code Project’s ShoppingCart) demonstrating the power of feature flagging in an e-commerce application. In our app, we implement a multivariate feature flag named “store-discount” which returns a number indicating a percentage discount on all products.

Integrating

To integrate LaunchDarkly feature flags with our Angular app, we will need to begin by creating a service which will initialize the LaunchDarkly client. Using Angular’s $q dependency allows us to return a promise which will resolve when the client has prepared its initial set of feature flags.

Now, our main controller can use our newly defined LaunchDarklyService to initialize the feature flag client, and save it in the application’s root scope (a set of data available to any page in our app) once the client is ready.

Also, the controller starts a listener within the LaunchDarkly client to change the current value of the store’s universal discount whenever a flag is modified. This allows the app to dynamically render new information. In our case, prices are slashed, and a notification pops up, alerting the user of “amazing new discounts!” This is achieved by using an ngIf directive to slash through the original price, if a discount has been applied.

Here is a video showcasing our completed multivariate flag in action:

Try it out

This demo was built on top of Code Project’s ShoppingCart, and the code is available for your use on GitHub. You can checkout the JavaScript SDK functionality here.

—-

Primary Contributor:  Arnold Trakhtenberg, Engineering Content Consultant at LaunchDarkly

14 Feb

Implementing feature flags in single page apps, using React and Redux Saga

Built on frameworks like React, Angular, and Ember, single page apps (SPA) are becoming the new norm for modern applications. They center around dynamically updating a single HTML page via AJAX and HTML5 to deliver a more fluid and faster user experience. This introduces some new complexity when it comes to controlling access to front-end features, specifically via feature flags.

Feature flags (toggles) are used to gate access to particular code snippets, allowing you to control a feature’s rollout, target specific users, and kill a feature in production. The challenge with feature flagging single page apps is handling the state transformations (the changes in a webpage’s DOM) in a way that maintains performance and a fluid user experience.

This article discusses how to feature flag in a React single page app to show best practices. More specifically, we demonstrate feature flagging using LaunchDarkly’s JavaScript SDK.

Feature Flagging in Single Page Apps

With the help of React Router, creating a single page application can be a very quick and easy process, allowing developers to minimize risk and test features without degrading the user experience. We use Redux Sagas to handle asynchronous actions, which is perfect for integrating our app with the LaunchDarkly JavaScript SDK.

Feature Flags

In our app, we use two feature flags, user-type and header-bar-color. The user-type feature flag controls the content that is displaying depending on the group of current logged in user, while header-bar-color returns a hex code to toggle the color of the navigation bar.

An implementation of header-bar-color might look something like this:

Integrating Feature Flags with Redux Sagas

We handle the asynchronous process of requesting a LaunchDarkly feature flag by using Redux Sagas. The workflow begins in the App component of our SPA, where we dispatch an action to initialize the LaunchDarkly client.

Then, we can use a saga as middleware to wait for an initialization request to be received, using redux-saga’s takeEvery module, which will call an effect, initLD.

The effect will call getLD, a function which creates a promise, waiting for the LaunchDarkly client to be ready for flag requests. Since the user is anonymous, we can generate a random token to be used as their key.

Once the client is ready, the effect will send the action off to our reducer, to store the client and current feature flag state in props.

Now that the LD client is initialized, and stored in our props, we can define a process to update our flag whenever the current user changes (logging in or out, for example). We take advantage of the fact that we’re already using sagas to asynchronously handle user authentication. When logging in, the authorize effect is called to ensure the login data is correct. When authorization is complete, we’ll make a call to idLD. This will identify a new user in our LaunchDarkly client, and send the correct flag to the reducer for our newly logged in user. Logging out works in a similar fashion. (Note: We make use of some utility functions defined in auth, which return user information from our local storage.)

So, what do we do with the flags stored in our props? Well, in our Home component, we’ll render a different page depending on the flag that was received. In our case, if a fallback flag is received, the “Anonymous” page will be shown no matter who is logged in.

Meanwhile, every time a page is loaded, the Nav component takes in the headerColor prop and changes the background of our navbar to said color.

See it in action

What’s next?
There are many ways to feature flag within a single page app, depending on your case and the complexity of your features. You can also check out this repo by TrueCar, which provides another avenue for feature flagging in React Redux.

Want to try out this feature flagging in React for yourself? Check out the open source repo!

—-

Primary Contributor:  Arnold Trakhtenberg, Engineering Content Consultant at LaunchDarkly