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.

10 min
25 Mar, 2022

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.

Available in Español

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.

3. Benefits of Gradual Release and Issue Mitigation

Short description:

By using gradual release processes with feature flags, you can deploy features to a percentage of users and gather feedback early in the release process. This allows for catching unexpected issues and ensuring higher quality. Additionally, feature flags provide the ability to quickly turn off features if problems arise, avoiding panic and allowing for continued testing. Try out feature flags to experience their life-changing benefits.

Now if I log in as Emily, Emily won't see this. If I log, and it's George, however, George does see it. So 50% of the people out there see it, 50% don't. Great. So now I can be doing this gradual release process. Instead of doing 50, I can do 5% or 1%, and I can get feedback. Am I doing something, something unexpected happening? Am I overheating the databases, for example? And I can catch that early in this release process.

So not only am I making the development process faster with higher quality by constantly deploying and testing in prod, but I can also increase the quality by gradually rolling out to my users. Great. So now we decide we're done. Ready to release it. And then we get a call from customer support saying, if you go and do certain things here, it blows up. If I'm doing traditional development process, now I panic, but because I'm using feature flags, I don't panic, I just say, okay, we've got a problem. Let's turn this off. I'm just gonna kill his feature flags, means immediately shut it off. I come back here. If I log in as George, I don't see the new feature. If I log in as me, I don't see the new feature. Notice it took seconds for me to turn this off. I didn't actually have to do a deploy. I just turned the feature off.

This in turn alleviates a third problem, which is panic. With feature flags, big problem in prod is not a culture panic. You just back out the feature flag. That can take seconds, and you're good to then to continue doing testing on your own. Thank you for listening. I hope you found this useful. Try out feature flags. They will change your life.

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
React Summit 2023React Summit 2023
26 min
Principles for Scaling Frontend Application Development
After spending over a decade at Google, and now as the CTO of Vercel, Malte Ubl is no stranger to being responsible for a team’s software infrastructure. However, being in charge of defining how people write software, and in turn, building the infrastructure that they’re using to write said software, presents significant challenges. This presentation by Malte Ubl will uncover the guiding principles to leading a large software infrastructure.
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.

Workshops on related topic

DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
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.
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
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.
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
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.
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
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.