Modules, Components and Systems

The building blocks of the web are small components, but you need a systemic view to win his inherent complexity

In the last months, the idea of “modularisation” has spread in both the web development and web design.

We can see the dizzying rise of React as a new paradigm in the building of web pages and applications, together with the discussion around the adoption of web-components and Polymer as “production-ready” technologies (definitely one of the hot-topics at the last Edge Conference).

We can see approaches like Atomic Design and Modular Design spread across the design community (the talk given by Alla Kholmatova at Responsive Day Out is one the best I have seen in the last months: you can view it here) while pattern libraries and style guides are adopted as best practices.

I have always adopted a similar approach when developing and coding web pages in my job. So while I was trying to explain its basic principles to one of my colleagues, I found myself thinking that – at the end – “atomic design” is not so complex or new, as idea. It can be easily understood, and is in some way obvious.

But I have also realised something less obvious (and this come straight out of experience): when you have to make it work, when you have to use your nice “Lego blocks” to build real pages, the reality kicks in. It’s not anymore a matter of nice diagrams or simple dots to connect: the real complexity lies in the relations, the connections between the atoms, the elements, the components.

Think Sass: it’s easy to write simple, clear, well-isolated code for the components “A”, “B” and “C”. The hard part is to write the code for “A followed by B” or “B inside C” in a modular, generic, isolated way. Not easy, not obvious at all. It’s there where we need to really understand how to build the whole page in a solid way. And there’s no BEM or OOCSS that helps in that. That kind of complexity can’t be solved: it’s irreducible.

But today I watched this video, a talk that Claudina Sarahe presented at CSSConf Australia this year, and it was an enlightenment for me: the title “It’s About systems” tells everything.

She explains – in a better and less simplistic way than me – exactly what I was thinking: we deal with a complex system, and if we reduce it to just its basic components – that is reductionism – everything becomes messy, and we limit our possibilities to understand it. You can’t have best practice in a system, because systems can change. So you have to embrace “systems thinking”. And good systems design requires time, discussions & accepting failure (a complicated problem is solvable, a complex problem may not have a solution).

I strongly recommend to watch the video: it related and resonated so much with what I am thinking in these days.