So this weekend I wanted to configure storybook in a JS codebase that was using Meteor.JS, Flow, Eslint, React, Stylus, Babel.
I thought it would be pretty easy given storybook even has a tool that configures it for your existing codebase! It wasn’t.
I spent a surprising amount of time to make it work.
That made me wonder why it took me so much time.
Turns out I shouldn’t be surprised at all it took so much time, even for a tool like storybook that advertises ease of use.
Why? It’s a classic problem of combinatorial explosion.
Let me illustrate.
Let’s assume your JS tech stack contains:
- A css preprocessor such as stylus, Sass
- A type system such as Typescript or flow
- A lint tool such as eslint
- A testing framework such as Jest
- A front-end library such as React, Svelte
- A toolchain such as Babel
- A visual component testing framework such as storybook
Let’s say that for each layer you can choose between 5 possible tools — I’m defining tool very broadly — and that each tool can have 3 configurations.
In our example, how many different tech stacks can we make? 170,859,375 (each tool has 3 possible configurations, each layer has 5 possible tools, each tech stack has 7 layers)
And that’s a very conservative number. You probably have:
- node modules that could also interfere (which was the case with me)
- More than 7 layers (for example I forgot the monorepo scaffolding layer!)
The developers of this new tool you’re integrating in your codebase haven’t tested that the tool works out of the box with these 170,859,375 different tech stacks.
Therefore It’s pretty much impossible to have a tool that works perfectly out of the box with your specific tech stack.
Therefore you need to roll up your sleeves when things don’t work out of the box.
Some points to consider when faced with the task of integrating a layer in your tech stack:
- There is no substitute for first principles thinking.
- Expect it to be hard. Worthy goals are often hard.
- Don’t keep doing the same thing without a hypothesis. That’s just programming by accident.
- Read the errors! If you have a module missing, install it. If that doesn’t solve the problem, check you have the right version.