Something smells IF-y (Javascript Israel)

A cleaner approach to Feature Toggles (using a webpack loader)

Transcript

1. Something smells IF-y A cleaner approach to Feature Toggles Javascript Israel / March 2018
2. Kruvi
7. Eko Shows
10. The movie Studio
11. The movie Studio
12. The creator
13. The creator
14. The production company
15. Us
16. Identifying the problem
17. Feature Toggles
19. Off the shelf solutions
20. 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 }
21. header.js episodesList.js header.js footer.js show.js gallery.js
22. header.js episodesList.js header.js footer.js show.js gallery.js if (feature) { } else { }
23. header.js episodesList.js header.js footer.js show.js gallery.js if (feature) { } else { } if (feature) { } else { }
24. header.js episodesList.js header.js footer.js show.js gallery.js if (feature) { } else { } if (feature) { } else { } if (feature) { } else { } if (feature) { } else { }
25. header.js episodesList.js header.js footer.js show.js gallery.js if (feature) { } else { } if (feature) { } else { } if (feature) { } else { } if (feature) { } else { } Unreadable
26. header.js episodesList.js header.js footer.js show.js gallery.js if (feature) { } else { } if (feature) { } else { } if (feature) { } else { } if (feature) { } else { } Unreadable Unmaintainable
27. header.js episodesList.js header.js footer.js show.js gallery.js if (feature) { } else { } if (feature) { } else { } if (feature) { } else { } if (feature) { } else { } Unreadable Unmaintainable Untestable
28. Abstraction Layers
29. Abstraction Layers • Provides a uniform interface
30. Abstraction Layers • Provides a uniform interface • on runtime decide which implementation to use
31. show page components
32. show page gallery
33. show page gallery factory
34. CommonJS
35. New Feature == Feature Branch image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
36. New Feature == Feature Branch • Add the feature in a new branch image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
37. New Feature == Feature Branch • Add the feature in a new branch image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
38. New Feature == Feature Branch • Add the feature in a new branch • change gallery.js image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
39. New Feature == Feature Branch • Add the feature in a new branch • change gallery.js • Merge back to master / trunk image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
40. New Feature == Feature Branch • Add the feature in a new branch • change gallery.js • Merge back to master / trunk image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
41. New Feature == Feature Branch • Add the feature in a new branch • change gallery.js • Merge back to master / trunk image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
42. gallery.js gallery_bigThumbs.js
43. Our solution - Multiquire
44. Our solution - Multiquire • Duplicate gallery.js to a new file gallery_bigThumbs.js
45. Our solution - Multiquire • Duplicate gallery.js to a new file gallery_bigThumbs.js • Make the changes you want in gallery_bigThumbs.js
46. Our solution - Multiquire • Duplicate gallery.js to a new file gallery_bigThumbs.js • Make the changes you want in gallery_bigThumbs.js • load both gallery.js and gallery_bigThumbs.js to memory
47. Our solution - Multiquire • Duplicate gallery.js to a new file gallery_bigThumbs.js • Make the changes you want in gallery_bigThumbs.js • load both gallery.js and gallery_bigThumbs.js to memory • In runtime use the appropriate module according to feature toggle state
48. var gallery = require('./gallery.js'); using require() Our solution - Multiquire
49. var gallery = require('./gallery.js'); using require() Our solution - Multiquire loads ‘gallery.js’ to memory
50. var gallery = require('./gallery.js'); using require() Our solution - Multiquire var gallery = multiquire('./gallery.js'); using multirequire() loads ‘gallery.js’ to memory
51. var gallery = require('./gallery.js'); using require() Our solution - Multiquire var gallery = multiquire('./gallery.js'); using multirequire() loads ‘gallery.js’ to memory loads both ‘gallery.js’ and ‘gallery_bigThumbs.js’ to memory
52. Our solution - Multiquire Server Side Client Side
53. gallery_bigThumbs.js gallery.js
54. gallery_bigThumbs.js gallery.js gallery.js gallery_bigTh
55. the “merged” gallery.js var moduleVersions = { bigThumbs: require('./gallery_bigThumbs.js') }; var activeToggle = getActiveFeatureToggle(); if (activeToggle && moduleVersions[activeToggle]) { module.exports = moduleVersions[activeToggle]; } else { module.exports = /// original gallery.js } gallery.js
56. What we want var moduleVersions = { bigThumbs: require('./gallery_bigThumbs.js') }; var activeToggle = getActiveFeatureToggle(); if (activeToggle && moduleVersions[activeToggle]) { module.exports = moduleVersions[activeToggle]; } else { module.exports = /// original gallery.js } gallery.js
57. What we want var moduleVersions = { bigThumbs: require('./gallery_bigThumbs.js') }; var activeToggle = getActiveFeatureToggle(); if (activeToggle && moduleVersions[activeToggle]) { module.exports = moduleVersions[activeToggle]; } else { module.exports = /// original gallery.js } gallery.js
58. What we want var moduleVersions = { bigThumbs: require('./gallery_bigThumbs.js') }; var activeToggle = getActiveFeatureToggle(); if (activeToggle && moduleVersions[activeToggle]) { module.exports = moduleVersions[activeToggle]; } else { module.exports = /// original gallery.js } gallery.js
59. Webpack Loaders
60. Webpack Loaders
61. Webpack Loaders babel-loader
62. Webpack Loaders babel-loader
63. Webpack Loaders babel-loader sass-loader
64. webpack loaders 101 // the identity loader module.exports = function(source) { return source }
65. webpack loaders 101 // the identity loader module.exports = function(source) { console.log(this.resourcePath); // output: '~/full/path/to/gallery.js' return source }
66. webpack loaders 101 // the identity loader module.exports = function(source) { console.log(this.resourcePath); // output: '~/full/path/to/gallery.js' console.log(this.context); // output '~/full/path/to' return source }
67. webpack loaders 101 // the identity loader module.exports = function(source) { console.log(this.resourcePath); // output: '~/full/path/to/gallery.js' console.log(this.context); // output: '~/full/path/to' console.log(this.options); return source }
68. What we want var moduleVersions = { bigThumbs: require('./gallery_bigThumbs.js') }; var activeToggle = getActiveFeatureToggle(); if (activeToggle && moduleVersions[activeToggle]) { module.exports = moduleVersions[activeToggle]; } else { module.exports = /// original gallery.js } gallery.js
69. multiquire webpack loader module.exports = function(source) { const options = this.options; const moduleName = path.basename(this.resourcePath, '.js'); const variants = getVariants(moduleName, options); };
70. multiquire webpack loader module.exports = function(source) { const options = this.options; const moduleName = path.basename(this.resourcePath, '.js'); const variants = getVariants(moduleName, options); }; variants = [ 'bigThumbs' ]
71. module.exports = function(source) { const options = this.options; const moduleName = path.basename(this.resourcePath, '.js'); const variants = getVariants(moduleName, options); if (variants.length < 1) { return source; } }; variants = [ 'bigThumbs' ] multiquire webpack loader
72. module.exports = function(source) { const options = this.options; const moduleName = path.basename(this.resourcePath, '.js'); const variants = getVariants(moduleName, options); if (variants.length < 1) { return source; } let requireStr = buildVersionsObject(variants, moduleName); }; variants = [ 'bigThumbs' ] multiquire webpack loader
73. module.exports = function(source) { const options = this.options; const moduleName = path.basename(this.resourcePath, '.js'); const variants = getVariants(moduleName, options); if (variants.length < 1) { return source; } let requireStr = buildVersionsObject(variants, moduleName); }; variants = [ 'bigThumbs' ] requireStr = 'var moduleVersions = { bigThumbs: require('./gallery_bigThumbs.js') }’; multiquire webpack loader
74. module.exports = function(source) { const options = this.options; const moduleName = path.basename(this.resourcePath, '.js'); const variants = getVariants(moduleName, options); if (variants.length < 1) { return source; } let requireStr = buildVersionsObject(variants, moduleName); }; variants = [ 'bigThumbs' ] requireStr = 'var moduleVersions = { bigThumbs: require('./gallery_bigThumbs.js') }’; multiquire webpack loader What about getActiveFeatureToggles?
75. module.exports = function(source) { const options = this.options; const moduleName = path.basename(this.resourcePath, '.js'); const variants = getVariants(moduleName, options); if (variants.length < 1) { return source; } let requireStr = buildVersionsObject(variants, moduleName); let toggleFuncStr = getActiveFeatureToggles.toString(); }; variants = [ 'bigThumbs' ] requireStr = 'var moduleVersions = { bigThumbs: require('./gallery_bigThumbs.js') }’; multiquire webpack loader
76. module.exports = function(source) { const options = this.options; const moduleName = path.basename(this.resourcePath, '.js'); const variants = getVariants(moduleName, options); if (variants.length < 1) { return source; } let requireStr = buildVersionsObject(variants, moduleName); let toggleFuncStr = getActiveFeatureToggles.toString(); return `${requireStr}${toggleFuncStr} var activeToggle = getActiveFeatureTogglesFunc(); if (activeToggle && moduleVersions[activeToggle]) { module.exports = moduleVersions[activeToggle]; } else { ${source} }`; }; variants = [ 'bigThumbs' ] requireStr = 'var moduleVersions = { bigThumbs: require('./gallery_bigThumbs.js') }’; multiquire webpack loader
77. module.exports = function(source) { const options = this.options; const moduleName = path.basename(this.resourcePath, '.js'); const variants = getVariants(moduleName, options); if (variants.length < 1) { return source; } let requireStr = buildVersionsObject(variants, moduleName); let toggleFuncStr = getActiveFeatureToggles.toString(); return `${requireStr}${toggleFuncStr} var activeToggle = getActiveFeatureTogglesFunc(); if (activeToggle && moduleVersions[activeToggle]) { module.exports = moduleVersions[activeToggle]; } else { ${source} }`; }; multiquire webpack loader
78. 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
79. Future Features • Run two variants at the same time • Use it for other file types as well (.scss / .jsx …) • Support ‘import’ ‘export’
80. Last Note There’s always a risk
81. Questions?
82. Questions? jobs.tlv@helloeko.com
83. Thank you!