Releasing JavaScript Applications Faster with Feature Flags

Rate this content
Bookmark

Do you want to release your applications more rapidly with lower risk? Feature flags make this possible. This talk will concretely demonstrate that this is possible and easily within your reach.

This talk has been presented at DevOps.js Conf 2022, check out the latest edition of this JavaScript Conference.

FAQ

Incremental rollout using feature flags allows developers to release a feature to a small percentage of users initially. This gradual process helps in monitoring the impact, gathering user feedback, and ensuring system stability before a full-scale release.

A feature flag is a tool used in software development that allows developers to enable or disable functionality at runtime without deploying new code. This facilitates safer code deployments, A/B testing, and can help in managing the feature rollout process.

Feature flags help speed up the development process by eliminating the need for long-lived feature branches, reducing merge conflicts, and allowing features to be merged directly to the main branch and deployed into production with low risk, as the new features can be toggled off by default.

Feature flags address several common problems in software development: reducing the tedium of branch merges, minimizing bureaucracy around deployment processes, and decreasing panic when issues occur in production by allowing features to be quickly toggled on or off.

Yes, feature flags can be configured to provide user-specific experiences. For example, a feature flag could be set to show a new feature only to specific users, like displaying a new emoji feature only to a user named David, enabling tailored testing and feedback collection.

Testing features in production with feature flags allows for real-world testing without affecting all users. This method helps in identifying unforeseen bugs or issues, ensuring that the feature works perfectly in the production environment before a full rollout.

In case of an emergency or when a new feature causes issues in production, feature flags can be quickly turned off. This capability allows developers to revert changes without deploying new code, significantly reducing downtime and mitigating potential negative impacts on users.

David Burrowes
David Burrowes
10 min
25 Mar, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Welcome to the Releasing React Apps Faster with Feature Flags talk. Feature flags alleviate problems in the development process by allowing for the creation of feature flags instead of branches. By using feature flags, incomplete versions can be deployed, reviewed, approved, merged, and deployed without errors for customers. Feature flags also enable low-risk deployments, testing in production, gradual release processes, and the ability to quickly turn off features if issues arise.

1. Introduction to Feature Flags

Short description:

Welcome to the Releasing React Apps Faster with Feature Flags talk. If you're using a normal development process, you're being impeded on at least three fronts. First, when you create a new feature, you create a feature branch, which can get tedious by constantly merging main and resolving conflicts. Second, deploying to production involves high risk and a lot of process. Lastly, when problems occur in production, it can lead to panic. Feature flags can alleviate these problems. In a new feature with feature flags, instead of creating a branch, you create a feature flag. You can then access the feature flag information in your code and make decisions based on it. By using feature flags, you can deploy incomplete versions, get them reviewed, approved, merged to main, and deployed without causing errors for customers.

Welcome to the Releasing React Apps Faster with Feature Flags talk. My name is David Burrows and I'm a software engineer at Split Software. If you're using a normal development process, you're being impeded on at least three fronts.

First of all, when you create a new feature, you probably create a feature branch, which means that as you're adding code, you are also needing to keep your branch up to date with main. This can get pretty tedious, pretty fast by constantly merging main and resolving the conflict.

Second problem is when you go to deploy, you're going to get all kinds of process questions has QA signed off, has all the testing happened, is stage and prod, are they about the same? Are you sure that that's going to be okay, etc. This is because putting something in prod is very high risk. And so there has to be a lot of process to make sure you don't break the business.

Next problem is when something happens, then you need decide what do you do? Do you roll back? Do you roll forward? Do you take the time to fix the bug? Do you not? This is a problem. When there's a problem with prod, you tend to get panicked. So what the traditional process brings you are three problems, tedium, bureaucracy and panic. Feature flags can alleviate or remove all of these problems, and I'm going to walk through that now.

So I've got here a simple application, and I'm going to start adding to it. Now if I'm doing a new feature with feature flags, the first thing I do is not create a new feature branch. Instead, I go create a feature flag. In this case, we want to add a feature to allow people to get a list of emojis. So I will say, I will call my feature flag Emoji, and I will create it. And I will add some rules here, which I will now save. And what this says now is I've got an on version and an off version of this feature flag, and by default, it is off.

Now I can come over to my code. And here, you can see I have added a React component which takes, which creates the feature flag library and puts it in the context. So I can access it anywhere below it in the component tree. I then have my actual component here where I'm going to say, let me get the information about my feature flag, specifically let me get the current treatment for this feature flags. If this treatment is on, then I'm going to show a link to the emoji page and otherwise not. Last thing I'm going to do here is actually add the emoji page to my code. This is an incomplete version of the emoji page. But that's okay. I can now take my change, put up a review, get it approved, merge that directly to main and deploy. Now you might be thinking, wait a minute, what are you doing deploying an incomplete version of your code to prod? That's pretty scary. We're going to get errors from customers.

2. Benefits of Feature Flags and Testing in Prod

Short description:

By using feature flags, you can deploy incomplete versions, get them reviewed, approved, merged to main, and deployed without causing errors for customers. This allows for faster development time and reduces the need for maintaining multiple branches. Additionally, feature flags enable low-risk deployments and the ability to test features in a production environment. Testing in prod allows for thorough validation at each step of the development process, ensuring a higher quality end result. Finally, feature flags provide the flexibility to tailor the release process and selectively roll out features to different user groups.

Are you are you out of your mind? But I can come up here to the application, sign in and I still do not see a link to emojis. This is because remember, by default, the feature flag is off. And I have set my code up to say if the treatment is on, then show this. So I don't show this. This alleviates at least one and a half of the problems we talked about earlier.

First thing is, I don't have to have a feature branch. I can instead make one change on one PR, put up for review, merge you to main and deploy to prod. I do not have a long lasting branch. This will speed up my development time because I'm not trying to keep two branches in parallel.

Second thing is, because all these new changes are behind a feature flag, putting bits into prod is very, very low risk. You need a lot less process, which means you could be going to prod multiple times a day. Ok, but you might be thinking, well, this is great, I'm putting my bits in prod, but so what? Well, part of the so what is we've already mentioned it, we've gotten our process smoothed down some. But there's a benefit beyond that because my release process is no longer either on or off. It can now be highly tailored.

In this case, I'm going to create a rule here which says when the current user ID is David, that is me, then show the on version. So I can come back here to the application, refresh it, sign in as me, and you see I get the emojis. Now it's incomplete, but I can see that. In contrast, if I log in as Emily, Emily doesn't. So now I've gotten another feature I didn't even know I was missing before when I was doing the traditional development, which is I can do testing in prod. By that I don't mean put the feature out and let my customers test it. What I mean is I can put the feature out in the prod environment, and I can test it, my QA team can test it, my automation can test it, my engineering team, my company can test it. I can completely validate this at each step of the development process, every PR I put out, someone can be trying in your prod and making sure it's okay, so that when we eventually get to the point of doing release, we've already been testing this for like the weeks or months it took to build this feature.

So now that I have this, let's go finish this off. I'm now going to take my emoji page, and I'm going to actually instead of having this little simple thing, let's add a full emoji page here, and again, deploy it. Right? So that will take a moment to go. So now you can see that while I'm doing my development, I'm actually building up a much, much higher quality situation, because I'm constantly testing prod, because I am constantly putting stuff into prod and constantly incrementally checking that, it is much, much safer. So when I get to the point of having a release, I can come in here and try it out, and it would say, feature looks good, I can get some emojis. Now we can decide who to release this to beyond the engineering team. I could, for example, decide, let's by default, give this to 50% of the users and 50% not. So I'm going to save this change, come back here.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Principles for Scaling Frontend Application Development
React Summit 2023React Summit 2023
25 min
Principles for Scaling Frontend Application Development
Top Content
Watch video: Principles for Scaling Frontend Application Development
This Talk discusses scaling front-end applications through principles such as tearing down barriers, sharing code in a monorepo, and making it easy to delete code. It also emphasizes incremental migration, embracing lack of knowledge, and eliminating systematic complexity. The Talk highlights the use of automation in code migration and the importance of removing barriers to enable smoother code migration.
Fighting Technical Debt With Continuous Refactoring
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Watch video: Fighting Technical Debt With Continuous Refactoring
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.
Automating All the Code & Testing Things with GitHub Actions
React Advanced 2021React Advanced 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
We will learn how to automate code and testing with GitHub Actions, including linting, formatting, testing, and deployments. Automating deployments with scripts and Git hooks can help avoid mistakes. Popular CI-CD frameworks like Jenkins offer powerful orchestration but can be challenging to work with. GitHub Actions are flexible and approachable, allowing for environment setup, testing, deployment, and custom actions. A custom AppleTools Eyes GitHub action simplifies visual testing. Other examples include automating content reminders for sharing old content and tutorials.
Fine-tuning DevOps for People over Perfection
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Top Content
DevOps is a journey that varies for each company, and remote work makes transformation challenging. Pull requests can be frustrating and slow, but success stories like Mateo Colia's company show the benefits of deploying every day. Challenges with tools and vulnerabilities require careful consideration and prioritization. Investing in documentation and people is important for efficient workflows and team growth. Trust is more important than excessive control when deploying to production.

Workshops on related topic

Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
MERN Stack Application Deployment in Kubernetes
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Joel Lord
Joel Lord
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
Azure Static Web Apps (SWA) with Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Juarez Barbosa Junior
Juarez Barbosa Junior
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.
From Engineer to Leader: A Workshop for First-Time Tech Leaders
TechLead Conference 2024TechLead Conference 2024
144 min
From Engineer to Leader: A Workshop for First-Time Tech Leaders
Workshop
Andrew Murphy
Andrew Murphy
Transitioning from an individual contributor role to a leadership position, especially in the fast-paced tech industry, is hugely challenging. Most new leaders don't receive any training at all in the first 10 years of their new responsibilities.Our comprehensive workshop is designed to assist new and emerging tech leaders in understanding their new roles and gaining the skills to make them confident, happy and effective leaders.