Hello 👋

Last week, I’ve mentioned React, among others, as one of the most popular front-end libraries of today. React’s career in an astonishing success story. Today, I want to talk to you about one of React’s core concepts that helped it conquer the world of modern web development: composability.

What is composability?

Composability means building complex systems of smaller, modular pieces. We often call them components. Components should be:

• reusable – you can use the same component in multiple places while maintaining a single source of truth

• self-contained – they include all the logic and resources necessary for them to work; you should be able to move them around without breaking things as long as a component maintains its access to the same data

• interchangeable – they should be designed to be swapped with other components, making it easy to update and improve existing systems.

What makes you instantly recognise React code? Components. For example <Button tone=“critical”> is a component. You’ll find similar concepts in design tools. The approach might not be fully consistent though. In React, tone=“critical” is what we call a prop (a shorthand for property). In Figma, it’s called a variant. But the overarching idea is similar.

However, (and fortunately,) there are similarities between them too. If we look at React and Figma, one thing they get fairly well aligned is a focus on composability.

What’s the alternative?

Most of people entering the industry in past few years take composability for granted (often not even knowing the term or being able to explain it). But it wasn’t always like that.

Not that long ago, the most popular frontend library was jQuery and the most popular tool to design user interfaces was Photoshop. They were made for for we usually refer to as monolithic design.

If composable is a salad, then monolith is a loaf of bread. The recipe for making bread has many variations but it usually is very specific. You don’t want to forget an ingredient or mix up the order of the required steps. In the end, if everything goes well, you get a single, undividable loaf of bread. With a salad, that’s quite the opposite. If you mix things up, the consequences are rarely severe. Forgot some ingredients? Added too much? Too little? Didn’t have capers so used olives? No big deal, you just made a bit different salad this time. Moreover, even in the final version of the salad, its elements are still interchangeable – you can add, remove, and change their order. However, in the case of a salad, this might be a bit tedious.

Just to get things straight, a monolithic design is not always bad. It has certain advantages. For instance, a loaf of bread can boast impressive robustness, at least in comparison with a salad. But if you realize you forgot to add salt to the dough once the bread is already done… there’s little you can do. This is where a salad shines bright.

TL;DR

Composability is a key concept in modern web development and design, allowing for the creation of complex systems from smaller, reusable parts. It's the driving force behind tools like React and Figma.

Why should you care?

By grasping the concept of composability, and how it’s different from a monolith, you'll be better equipped to create flexible, maintainable designs that developers will appreciate and users will benefit from.

🔥 This week Mikolaj’s favourites

• [career development] Tommy from UX Tools explains who the heck is a Design Engineer and how to become a one

• [communication + writing] Readability Guidelines – a fantastic wiki that will help you to write better (nothing related to AI, just actual knowledge), very useful both for writing copy and for your Slack messages

That's all, thanks for reading and see you next week!

Mikolaj