Setting Up Feature Flags with React

As developers, we release features daily – but how do you ensure those features are working properly in production before you release them to all your users? If you ask me, the answer is feature flags! Feature flags are beneficial because they allow you to test your code in production, perform canary releases, and even conduct A/B testing. The power of React makes it easy to implement these flags. We will walk through how to easily create a feature flag in the UI, install dependencies with npm, and implement your feature flag in your react app.

Transcript

1. SET UP FEATURE FLAGS WITH REACT Talia Nassi @talia_nassi
3. const allowDelete = false if(allowDelete){ renderWithDelete(); }else{ renderWithoutDelete(): }
4. const allowDelete = true if(allowDelete){ renderWithDelete(); } else{ renderWithoutDelete(): }
5. FEATURE FLAG USE CASES TESTING IN PROD KILL SWITCH SUBSCRIPTION MANAGEMENT MIGRATION TO MICROSERVICES A/B TESTING CANARY RELEASES EXPERIMENTATION
6. Why? • feature flags improve your ability to develop, test, and deliver new features while minimizing risk throughout the process. • Provides a good foundation for Continuous Delivery
7. IMPACT
8. “IT’S NOT MAGIC, IT’S FEATURE FLAGS” ~TALIA NASSI
10. User is able to delete tasks User is not able to delete tasks
11. const allowDelete = false if(allowDelete){ renderWithDelete(); }else{ renderWithoutDelete(): }
12. {this.props.allowDelete && <button onClick={() => this.delete(item.key)}>x</button> }
13. PROCESS CREATE A FEATURE FLAG INSTANTIATE AND USE THE SDK INSTALL DEPENDENCIES AND CONFIGURE YOUR REACT APP
14. 01 CREATE THE FEATURE FLAG
18. 02 INSTALL DEPENDENCIES AND CONFIGURE YOUR REACT APP
19. create-react-app npm install --save @splitsoftware/splitio-react@1.1.0
20. 03 INSTANTIATE AND USE THE SDK
21. import { SplitTreatments, withSplitFactory } from "@splitsoftware/splitio-react"
22. <SplitTreatments names={['talia_todolist_delete']} > {({ treatments }) => { return this.renderContent(treatments['talia_todolist_ delete']) }} </SplitTreatments>
23. renderContent(deleteTreatment) { const allowDelete = deleteTreatment.treatment === 'on'; return ( <div className= "todoListMain" > <div className= "header"> <form onSubmit={ this.addItem}> <input ref={(a) => this._inputElement = a} placeholder= "Enter Task"> </input> <button type= "submit">Add</button> </form> </div> < TodoItems entries={this.state.items} allowDelete={allowDelete} delete={this.deleteItem} /> </div> ) }
24. createTasks(item) { return <li key={item.key}>{item.text} {this.props.allowDelete && <button onClick={() => this.delete(item.key)}>x</button>} </li> } render() { var todoEntries = this.props.entries; var listItems = todoEntries.map(this.createTasks); return ( <ul className="theList"> {listItems} </ul> ); }
25. const sdkConfig = { core: { authorizationKey: 'myauthkey', key: 'talia.nassi@split.io' }, debug: true };
26. const sdkConfig = { core: { authorizationKey: 'myauthkey', key: 'test.user@split.io' }, debug: true };
27. BEST PRACTICES
28. CLEANUP ROLLOUT IMPLEMENTATION CREATION Feature Flag Life Cycle
29. CLEANUP ROLLOUT IMPLEMENTATION CREATION Feature Flag Life Cycle
30. 1. INCLUDE TICKET NUMBER 2. INCLUDE THE NAME OF THE SERVICE 3. INCLUDE THE NAME OF THE TEAM THAT THE FLAG BELONGS TO 4. INCLUDE THE NAME OF THE FUNCTIONALITY 5. ENGAGE WITH THE DIFFERENT STAKEHOLDERS 6. BE SURE THERE IS CLEAR OWNERSHIP CREATION
31. CONSISTENCY = KEY
32. CLEANUP ROLLOUT IMPLEMENTATION CREATION Feature Flag Life Cycle
33. 1. CHANGES TO FF SHOULD BE TREATED LIKE CODE DEPLOYS 2. MAKE FLAGGING DECISIONS ON THE SERVER 3. DON’T CHANGE THE SCOPE OF YOUR COMPONENTS JUST TO SUPPORT FEATURE FLAGGING DECISIONS IMPLEMENTATION
34. IMPLEMENTATION - TESTING Choose the most important flows to automate and test Work with your product owner to prioritize what these flows are Target your automation bots inside the feature flags
35. CLEANUP ROLLOUT IMPLEMENTATION CREATION Feature Flag Life Cycle
36. 1. USERS SHOULD CONSISTENTLY HAVE THE SAME EXPERIENCE 2. BUILD A FEEDBACK LOOP 3. SET UP ALERTS TO PAGE YOU WHEN YOU GET ANY STATISTICALLY SIGNIFICANT CHANGES ROLLOUT
37. CLEANUP ROLLOUT IMPLEMENTATION CREATION Feature Flag Life Cycle
38. 1. ASSIGN AN EXPIRATION DATE FOR EACH FLAG 2. SET UP ALERTS THAT WILL POKE YOU WHEN A FLAG IS STALE 3. ADD A SUBTASK TO YOUR BACKLOG TO RETIRE THE FLAG AT THE SAME TIME THE FLAG IS CREATED 4. BE SURE TO REMOVE THE OLD CODE WHEN YOU DELETE THE FEATURE FLAG CLEANUP
40. USEFUL LINKS: Feature Flag Maintenance - https://www.youtube.com/watch?v=qb-VNbMSzy0 Free Split Account - www.split.io (try feature flagging for free!) Link to Repo - https://github.com/talianassi921/todolist
41. TALIA NASSI @talia_nassi Developer Advocate at Split.io talia.nassi@split.io