From the course: Web Components and Modularization: Practical Approaches

A mental model for components

From the course: Web Components and Modularization: Practical Approaches

Start my 1-month free trial

A mental model for components

“

- [Instructor] To me the key step to not only using but embracing components in my design and development work was creating a mental model for components to start thinking of my web applications insights in terms of components. Several existing models lend themselves well to components thinking, most notably Brad Frost's atomic design, where he suggests thinking of web applications as collections of atoms, that make up molecules, that make up organisms, that are used in templates to make pages. In this model, a component can be an atom, or a molecule, or an organism, or a template, or a page, or more often than not a combination of all of these. A typical component is often an organism composed of several molecules, so smaller components, which in turn output atoms, HTML elements. Another mental model is to think of components as blocks and pieces in a modeling kit. To build the view you want, you pick different blocks to fit different purposes in different locations. And sometimes you have to either combine several blocks to create a larger block to fit your needs, or create entirely new blocks. The purpose of creating a mental model for components thinking is to develop a heuristic, a method of discovery for determining when you should build the component, what that component should do, and when you should split an existing component into several smaller components. In this chapter, I'll walk you through my mental model and how I use it and give you an exercise to experiment with this approach to see if it works for you. One important thing here before we get started, the best mental model is the one that works for you and your team. In other words, use my example as just that, an example. If it works for you, great, if not, invest some time in finding a model that makes sense to you. And that helps you do your best work. Trial and error and iteration are your friends here.

Contents