Something Smells IF-y

A cleaner approach to Feature Toggles

Transcript

1. Something smells IF-y A cleaner approach to Feature Toggles TechToKnow / February 2018
2. Product Team wants to roll out a feature gradually • Have it tested first by internal users before being released • Make sure it doesn’t hurt performance • A/B Testing
3. New Feature == Feature Branch • Add the feature in a new branch. • Test in new branch. • Merge back to master / trunk • Release to production
4. New Feature == Feature Branch • Add the feature in a new branch. • Test in new branch. • Merge back to master / trunk • Release to production
5. Feature Toggles under 128 chars • Put the branch in the code • Decide which branch to use on runtime • when test is over - clean it up
6. Modern Feature Toggles Tools
7. toggle example setup code var treatment = client.getTreatment(userData, toggleName); if (treatment) { // insert code here to show on treatment } else { // insert code here to show off treatment }
8. Before const toppingsFactory = require('./toppings'); module.exports = function(userData) { // .... response.dough = 'thick'; response.toppings = toppingsFactory(); // module business logic // ........ return response; } pizzaOptions.js
9. A simple toggle pizzaOptions.js const toppingsFactory = require('./toppings'); const doughFactory = require('./dough'); module.exports = function(userData) { // .... var treatment = client.getTreatment(userData, 'doughOptions'); if (treatment) { response.dough = doughFactory(); } else { response.dough = 'thick'; } response.toppings = toppingsFactory(); // module business logic // ........ return response; }
10. A simple toggle pizzaOptions.js const toppingsFactory = require('./toppings'); const doughFactory = require('./dough'); module.exports = function(userData) { // .... var treatment = client.getTreatment(userData, 'doughOptions'); if (treatment) { response.dough = doughFactory(); } else { response.dough = 'thick'; } response.toppings = toppingsFactory(); // module business logic // ........ return response; }
11. A simple toggle pizzaOptions.js const toppingsFactory = require('./toppings'); const doughFactory = require('./dough'); module.exports = function(userData) { // .... var treatment = client.getTreatment(userData, 'doughOptions'); if (treatment) { response.dough = doughFactory(); } else { response.dough = 'thick'; } response.toppings = toppingsFactory(); // module business logic // ........ return response; }
12. “Just one more thing” pizzaOptions.js const toppingsFactory = require('./toppings'); const doughFactory = require('./dough'); module.exports = function(userData) { // .... var treatment = client.getTreatment(userData, 'doughOptions'); if (treatment) { response.dough = doughFactory(); } else { response.dough = 'thick'; } response.toppings = toppingsFactory(userData); // module business logic // ........ return response; }
13. “Just one more thing” toppings.js // toppings.js module.exports = function() { return getToppings(); }
14. “Just one more thing” toppings.js module.exports = function(userData) { var treatment = client.getTreatment(userData, 'doughOptions'); if (treatment) { return getLightToppings(); } else { return getAllToppings(); } }
15. “Just one more thing” toppings.js module.exports = function(userData) { var treatment = client.getTreatment(userData, 'doughOptions'); if (treatment) { return getLightToppings(); } else { return getAllToppings(); } }
16. “Just one more thing” toppings.js module.exports = function(userData) { var treatment = client.getTreatment(userData, 'doughOptions'); if (treatment) { return getLightToppings(); } else { return getAllToppings(); } }
17. “We need to fix this!” pizzaOptions.js const toppingsFactory = require('./toppings'); const doughFactory = require('./dough'); module.exports = function(userData) { // .... var treatment = client.getTreatment(userData, 'doughOptions'); if (treatment) { response.dough = doughFactory(); } else { response.dough = 'thick'; } response.toppings = toppingsFactory(); // module business logic // ........ return response; }
18. “We need to fix this!” pizzaOptions.js const toppingsFactory = require('./toppings'); const doughFactory = require('./dough'); module.exports = function(userData) { // .... var treatment = client.getTreatment(userData, 'doughOptions'); if (treatment) { response.dough = doughFactory(); } else { response.dough = 'thick'; } response.toppings = toppingsFactory(); // module business logic // ........ if (!treatment) { // remove irrelevant toppings } return response; }
19. “We need to fix this!” pizzaOptions.js const toppingsFactory = require('./toppings'); const doughFactory = require('./dough'); module.exports = function(userData) { // .... var treatment = client.getTreatment(userData, 'doughOptions'); if (treatment) { response.dough = doughFactory(); } else { response.dough = 'thick'; } response.toppings = toppingsFactory(); // module business logic // ........ if (!treatment) { // remove irrelevant toppings } return response; }
20. Ugh resHandler.js const pizzaOptionsFactory = require('./pizzaOptions'); module.exports = function(userData) { response = pizzaOptionsFactory(userData); var treatment = client.getTreatment(userData, 'doughOptions'); if (treatment) { response.deliveryOptions = ['delivery', 'pickup']; } else { response.deliveryOptions = ['delivery'] } return response; } Unreadable Unmaintainable Untestable
21. Abstraction Layers • Whenever we want different behaviours - we need a layer on top with a uniform interface. • The interface is making the choice which implementation to use on runtime.
22. Back to Feature Branches
23. Our Project index.js pizza Options.js res Handler.js payment.js delivery.js email.js toppings.js
24. Our Project index.js moduleF.js payment.js delivery.js email.js res Handler.js toppings.js pizza Options.js dough.js
25. We need an abstraction layer • We can start adding them to our code • Or… Maybe we already have one?
26. CommonJS
27. Enter Multiquire • Instead of writing temporary code - write the final code, in a variant of the file
 • On load time - load (require) both versions to memory • On runtime - automatically decide which one should be used

28. Our Project index.js moduleF.js payment.js delivery.js email.js response Handler.js toppings.js pizza Options.js dough.js
29. Our Project index.js payment.js delivery.js email.js dough.js pizzaOptions.js pizzaOptions _doughOptions.js toppings.js toppings _doughOptions.js resHandler.js resHandler _doughOptions.js
30. Our Project index.js moduleG.js moduleE.js moduleH.js moduleD.js moduleB.js moduleB _var1.js moduleA.js moduleA _var1.js moduleF.js moduleF.js moduleF_ var1.js
31. Let’s try this again const toppingsFactory = require('./toppings'); module.exports = function(userData) { // .... response.dough = 'thick'; response.toppings = toppingsFactory(); // module business logic // ........ return response; } pizzaOptions.js
32. Let’s try this again pizzaOptions_doughOptions.js const toppingsFactory = require('./toppings'); const doughFactory = require('./dough'); module.exports = function(userData) { // .... response.dough = doughFactory(); response.toppings = toppingsFactory(); // module business logic // ........ return response; }
33. Let’s try this again pizzaOptions_doughOptions.js const toppingsFactory = require('./toppings'); const doughFactory = require('./dough'); module.exports = function(userData) { // .... response.dough = doughFactory(); response.toppings = toppingsFactory(); // module business logic // ........ return response; }
34. Let’s try this again resHandler.js const pizzaOptionsFactory = require('./pizzaOptions'); module.exports = function(userData) { response = pizzaOptionsFactory(userData); response.deliveryOptions = ['delivery'] return response; }
35. Let’s try this again resHandler.js const getPizzaOptionsFactory = multiquire('./pizzaOptions'); module.exports = function(userData) { pizzaOptionsFactory = getPizzaOptionsFactory(userData) response = pizzaOptionsFactory(userData); response.deliveryOptions = ['delivery'] return response; }
36. Let’s try this again resHandler.js const getPizzaOptionsFactory = multiquire('./pizzaOptions'); module.exports = function(userData) { pizzaOptionsFactory = getPizzaOptionsFactory(userData) response = pizzaOptionsFactory(userData); response.deliveryOptions = ['delivery'] return response; }
37. Let’s try this again resHandler.js const getPizzaOptionsFactory = multiquire('./pizzaOptions'); module.exports = function(userData) { pizzaOptionsFactory = getPizzaOptionsFactory(userData) response = pizzaOptionsFactory(userData); response.deliveryOptions = ['delivery'] return response; }
38. Let’s try this again resHandler.js const getPizzaOptionsFactory = multiquire('./pizzaOptions'); module.exports = function(userData) { pizzaOptionsFactory = getPizzaOptionsFactory(userData) response = pizzaOptionsFactory(userData); response.deliveryOptions = ['delivery'] return response; }
39. Inside Multiquire multiquire.js function multiquire(moduleName) { var path = getAbsolutePath(moduleName); // ['doughOptions'] var variants = readVariantFiles(path); var moduleVersions = loadVersions(variants); return function(userData) { let selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant]; }; }
40. Inside Multiquire multiquire.js function multiquire(moduleName) { var path = getAbsolutePath(moduleName); // ['doughOptions'] var variants = readVariantFiles(path); var moduleVersions = loadVersions(variants); return function(userData) { let selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant]; }; }
41. Inside Multiquire multiquire.js function multiquire(moduleName) { var path = getAbsolutePath(moduleName); // ['doughOptions'] var variants = readVariantFiles(path); var moduleVersions = loadVersions(variants); return function(userData) { let selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant]; }; }
42. Inside Multiquire multiquire.js function multiquire(moduleName) { var path = getAbsolutePath(moduleName); // ['doughOptions'] var variants = readVariantFiles(path); var moduleVersions = loadVersions(variants); return function(userData) { let selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant]; }; }
43. Inside Multiquire multiquire.js function multiquire(moduleName) { var path = getAbsolutePath(moduleName); // ['doughOptions'] var variants = readVariantFiles(path); var moduleVersions = loadVersions(variants); return function(userData) { let selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant]; }; }
44. Summary • Feature Toggles are cool • But they can get messy if we’re not using abstraction layers to manage our branching • CommonJS already gives us a very good start point • Using multiquire we can create variation files and use the relevant file on runtime
45. Questions?