Component driven development or CDD not TDD is the most trendy topic in UI development. Every article I search about components, React takes the credit but I could make a similar case for Angular and Vue.js too.
It a “bottom up” approach where we start with smallest possible element and progressively build the pages and screens.
Rather than overwhelmed by looking at one big screen of design element. We treat each element as distinct piece. Repeated Design Element is treated as one distinct element. It could be a button, an Input Element or Modal Dialog.
Story Time
I remember when I started with developing UI in HTML, I would take a monolith approach when designing. But that kind approach didn’t scale much,
because to name the few
- there was no consistency.
- pixel missing here and there.
- color palate started with primary, secondary and tertiary ended up with two hundred dozen of variations.
I would get into anxiety when a new design came in, because I have to reflect it each and every place. A lot of repetitive work. And repetitive work is error prone.
These are few of the problems but some smart people came with some solutions. In order to better understand the current patterns i-e component driven development let look at one of the solution
Atomic Design
Solutions that aren’t pioneered by these modern JavaScript frameworks. Brad Frost wrote a book about it called Atomic Design.
A discussion about Component Driven Development is shallow without mentioning Atomic Design
more at bradfrost.com
Brad says, “In searching for inspiration and parallels, I kept coming back to chemistry. The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.”
Button, input are atoms. When combined to shape a search form are called molecules. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
When we combine those abstract molecules and organisms, we create templates. They are like html wireframes. It’s when clients start seeing the design. Pages are when swap the placeholder text and images inside templates with real content.
To summarize, we are inadvertently using this method. It provided clear methodology to craft design system. We moved from abstract to concrete. Because of such system, we have consistency and scalability.
Modern day Components are isolated pieces that encapsulates the HTML, CSS and JavaScript. It doesn’t pollute the global environment. They can be reused without having style issues. Development driven by components greatly accelerates the development process. It increases the designer and developer communication. It allows us to consistently attain high level of product quality.
Conclusion
I will end up with following advantages we get with this new approach
- With laser focused to current component only. Designer and developer speak same language when fixated on single component.
- We can test a button component to its different state i-e active, disabled and so on.