Something smells IF-y (NodeJS Israel)

April 22nd, 2018

Transcript

1. Something smells IF-y A cleaner approach to Feature Toggles nodeJS Israel / April 2018 / Also it’s my B-day
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
18. Off the shelf solutions
19. 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 }
20. header.js episodesList.js header.js footer.js show.js gallery.js
21. header.js episodesList.js header.js footer.js show.js gallery.js if (feature) { } else { }
22. header.js episodesList.js header.js footer.js show.js gallery.js if (feature) { } else { } if (feature) { } else { }
23. header.js episodesList.js header.js footer.js show.js gallery.js if (feature) { } else { } if (feature) { } else { } 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 { } Unreadable
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 Unmaintainable
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 Untestable
27. Abstraction Layers
28. Abstraction Layers • Provides a uniform interface
29. Abstraction Layers • Provides a uniform interface • on runtime decide which implementation to use
30. show page generation
31. show page generation request
32. show page generation Model request
33. show page generation Model request Template
34. show page generation Model request Template Context
35. show page generation Model request Template Context Response response
36. show page generation Model request Template Context Response response
37. show page generation Model request Template Context Response response
38. show page generation Model request Template Context Response response const getShowModel = require('./model/show'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowModel(request); await getShowTemplate(request); await getShowContext(request); return getShowResponse(request) }
39. show page generation Model request Template Context Response response const getShowModel = require('./model/show'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowModel(request); await getShowTemplate(request); await getShowContext(request); return getShowResponse(request) }
40. show page generation Model request Template Context Response response const getShowModel = require('./model/show'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowModel(request); await getShowTemplate(request); await getShowContext(request); return getShowResponse(request) }
41. show page generation Model const getShowModel = require('./model/show'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowModel(request); … } /model/show.js module.exports = async function(request) { request.model = await getModelFromDB(); }
42. Let’s use factories Model const getShowModel = require(‘./model/show'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowModel(request); … }
43. Let’s use factories Model const getShowModel = require(‘./model/showFactory'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowModel(request); … }
44. Let’s use factories Model const getShowModel = require(‘./model/showFactory'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowModel(request); … }
45. Let’s use factories Model const getShowModel = require(‘./model/showFactory'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowModel(request); … } /model/showFactory.js const showModel = require('./show'); const subsectionsShowModel = require('./subsectionsShowModels'); module.exports = async function(request) { var treatment = client.getTreatment(request.userData, 'subsectionsShowPage'); if (treatment) { request.model = await subsectionsShowModel(request); } else { request.model = await showModel(request); } }
46. show page generation Model const getShowModel = require(‘./model/showFactory'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowInfo(request); … } /model/showFactory.js const showModel = require('./show'); const subsectionsShowModel = require('./subsectionsShowModels'); module.exports = async function(request) { var treatment = client.getTreatment(request.userData, 'subsectionsShowPage'); if (treatment) { request.model = await subsectionsShowModel(request); } else { request.model = await showModel(request); } }
47. show page generation Model const getShowModel = require(‘./model/showFactory'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowInfo(request); … } /model/showFactory.js const showModel = require('./show'); const subsectionsShowModel = require('./subsectionsShowModels'); module.exports = async function(request) { var treatment = client.getTreatment(request.userData, 'subsectionsShowPage'); if (treatment) { request.model = await subsectionsShowModel(request); } else { request.model = await showModel(request); } }
48. show page generation Model const getShowModel = require(‘./model/showFactory'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowInfo(request); … } /model/showFactory.js const showModel = require('./show'); const subsectionsShowModel = require('./subsectionsShowModels'); module.exports = async function(request) { var treatment = client.getTreatment(request.userData, 'subsectionsShowPage'); if (treatment) { request.model = await subsectionsShowModel(request); } else { request.model = await showModel(request); } }
49. CommonJS
50. New Feature == Feature Branch image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
51. New Feature == Feature Branch • Add the ‘subsections’ feature in a new branch image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
52. New Feature == Feature Branch • Add the ‘subsections’ feature in a new branch image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
53. New Feature == Feature Branch • Add the ‘subsections’ feature in a new branch • change /model/show.js image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
54. New Feature == Feature Branch • Add the ‘subsections’ feature in a new branch • change /model/show.js • Merge back to master / trunk image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
55. New Feature == Feature Branch • Add the ‘subsections’ feature in a new branch • change /model/show.js • Merge back to master / trunk image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
56. New Feature == Feature Branch • Add the ‘subsections’ feature in a new branch • change /model/show.js • Merge back to master / trunk image source: http://endoflineblog.com/oneflow-a-git-branching-model-and-workflow
57. show_subsections.js show.js
58. Our solution - Multiquire
59. Our solution - Multiquire • Duplicate show.js to a new file show_subsections.js
60. Our solution - Multiquire • Duplicate show.js to a new file show_subsections.js • Make the changes you want in show_subsections.js
61. Our solution - Multiquire • Duplicate show.js to a new file show_subsections.js • Make the changes you want in show_subsections.js • load both show.js and show_subsections.js to memory
62. Our solution - Multiquire • Duplicate show.js to a new file show_subsections.js • Make the changes you want in show_subsections.js • load both show.js and show_subsections.js to memory • In runtime use the appropriate module according to feature toggle state
63. const getShowModel = require(‘./model/show’); using require() Our solution - Multiquire
64. const getShowModel = require(‘./model/show’); using require() Our solution - Multiquire loads ‘show.js’ to memory
65. const getShowModel = require(‘./model/show’); using require() Our solution - Multiquire const getShowModel = multiquire(‘./model/show’); using multirequire() loads ‘show.js’ to memory
66. const getShowModel = require(‘./model/show’); using require() Our solution - Multiquire const getShowModel = multiquire(‘./model/show’); using multirequire() loads ‘show.js’ to memory loads both ‘show.js’ and ‘show_subsections.js’ to memory
67. Our solution - Multiquire Server Side Client Side
68. show_subsections.js show.js userData => { } show_subsections.js show.js
69. show page generation Model Template Context Response const getShowModel = require('./model/show'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowModel(request); await getShowTemplate(request); await getShowContext(request); return getShowResponse(request) }
70. show page generation const getShowModel = require('./model/show'); const getShowTemplate = require('./template/show'); const getShowContext = require('./context/show'); const getShowResponse = require('./response/show'); async (request) => { await getShowModel(request); await getShowTemplate(request); await getShowContext(request); return getShowResponse(request) }
71. now with multiquire const getShowModel = multiquire('./model/show'); const getShowTemplate = multiquire('./template/show'); const getShowContext = multiquire('./context/show'); const getShowResponse = multiquire('./response/show'); async (request) => { await getShowModel(userData)(request); await getShowTemplate(userData)(request); await getShowContext(userData)(request); return getShowResponse(userData)(request); }
72. behind the scenes multiquire.js function multiquire(moduleName) { const modulePath = getAbsolutePath(moduleName); const variants = readVariantFiles(modulePath, moduleName); const moduleVersions = loadVersions(variants); const originalModule = require(modulePath + moduleName); return function(userData) { const selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant] || originalModule; }; }
73. behind the scenes multiquire.js function multiquire(moduleName) { const modulePath = getAbsolutePath(moduleName); const variants = readVariantFiles(modulePath, moduleName); const moduleVersions = loadVersions(variants); const originalModule = require(modulePath + moduleName); return function(userData) { const selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant] || originalModule; }; }
74. behind the scenes multiquire.js function multiquire(moduleName) { const modulePath = getAbsolutePath(moduleName); const variants = readVariantFiles(modulePath, moduleName); const moduleVersions = loadVersions(variants); const originalModule = require(modulePath + moduleName); return function(userData) { const selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant] || originalModule; }; } modulePath = ‘~/myRepo/model/
75. behind the scenes multiquire.js function multiquire(moduleName) { const modulePath = getAbsolutePath(moduleName); const variants = readVariantFiles(modulePath, moduleName); const moduleVersions = loadVersions(variants); const originalModule = require(modulePath + moduleName); return function(userData) { const selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant] || originalModule; }; } modulePath = ‘~/myRepo/model/
76. behind the scenes multiquire.js function multiquire(moduleName) { const modulePath = getAbsolutePath(moduleName); const variants = readVariantFiles(modulePath, moduleName); const moduleVersions = loadVersions(variants); const originalModule = require(modulePath + moduleName); return function(userData) { const selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant] || originalModule; }; } variants = [’subsections’] modulePath = ‘~/myRepo/model/
77. behind the scenes multiquire.js function multiquire(moduleName) { const modulePath = getAbsolutePath(moduleName); const variants = readVariantFiles(modulePath, moduleName); const moduleVersions = loadVersions(variants); const originalModule = require(modulePath + moduleName); return function(userData) { const selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant] || originalModule; }; } variants = [’subsections’] modulePath = ‘~/myRepo/model/
78. behind the scenes multiquire.js function multiquire(moduleName) { const modulePath = getAbsolutePath(moduleName); const variants = readVariantFiles(modulePath, moduleName); const moduleVersions = loadVersions(variants); const originalModule = require(modulePath + moduleName); return function(userData) { const selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant] || originalModule; }; } moduleVersions = { subsections: func(request) } variants = [’subsections’] modulePath = ‘~/myRepo/model/
79. behind the scenes multiquire.js function multiquire(moduleName) { const modulePath = getAbsolutePath(moduleName); const variants = readVariantFiles(modulePath, moduleName); const moduleVersions = loadVersions(variants); const originalModule = require(modulePath + moduleName); return function(userData) { const selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant] || originalModule; }; } moduleVersions = { subsections: func(request) } variants = [’subsections’] modulePath = ‘~/myRepo/model/
80. behind the scenes multiquire.js function multiquire(moduleName) { const modulePath = getAbsolutePath(moduleName); const variants = readVariantFiles(modulePath, moduleName); const moduleVersions = loadVersions(variants); const originalModule = require(modulePath + moduleName); return function(userData) { const selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant] || originalModule; }; } moduleVersions = { subsections: func(request) } variants = [’subsections’] modulePath = ‘~/myRepo/model/ originalModule = func(request)
81. behind the scenes multiquire.js function multiquire(moduleName) { const modulePath = getAbsolutePath(moduleName); const variants = readVariantFiles(modulePath, moduleName); const moduleVersions = loadVersions(variants); const originalModule = require(modulePath + moduleName); return function(userData) { const selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant] || originalModule; }; } moduleVersions = { subsections: func(request) } variants = [’subsections’] modulePath = ‘~/myRepo/model/ originalModule = func(request)
82. behind the scenes multiquire.js function multiquire(moduleName) { const modulePath = getAbsolutePath(moduleName); const variants = readVariantFiles(modulePath, moduleName); const moduleVersions = loadVersions(variants); const originalModule = require(modulePath + moduleName); return function(userData) { const selectedVariant = client.getTreatment(userData, variants); return moduleVersions[selectedVariant] || originalModule; }; }
83. 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
84. Questions?
85. Questions?
86. Thank you!