Isolated React Components as a Black Box with Automated UI Testing
Why - At Housing.com, when we moved to react from BackboneJS, we started gradually, creating components like just home page then list view, and so on. But we soon realised that, components(reusable components) are getting messier, since there are so many components just because everything is component in React. Components started growing like crazy. Problem - Since we have our mobile website and desktop website separate (though we serve both with housing.com), we had to write same react components in desktop as well as mobile, maybe with just styling / css changes, but the logical flow & business use case of a software feature used to remain same. Solution - Isolating bunch of components as a black box. We started creating npm modules, and including them in a code as a feature. So our isolated react component is not just a dump component, but it takes care of executing entire feature. Going further and decoupling things - it was easy for us to figure it out, what should be isolated component, what should not be. I will be showing when to make Isolated component and when not to. Using React storybook to build components in isolation. Redux Store - Since its isolated component, we don’t share data, actions, store. Every isolated component works on its own store.