Components, Patterns, & Page Layouts
Differentiating Components, Patterns, and Page Layouts, and why they are important.
Components
Components, also referred to as atoms in the Atomic Design System, are the simplest expression of combining colors, shapes, and fonts into an element that has a singular purpose and generally one type of interaction. This includes things like Buttons, and Checkboxes, where the element cannot be broken down to a simpler form.
However, in Forge we view components in a slightly more nuanced way. We view components as non-separable interface elements that are bound together with code. For example, FileUpload is considered a component in Forge because it comes with code that makes it work as a coherent non-separable unit, even though it is made up of other smaller components. In a pure Atomic Design sense, this type of thing would be considered a pattern.
Defined this way, components can include multiple types of sub-components in their construction. For example, while an icon can be a stand-alone representation, it can also be added to number of components, including DateRangeInput, Paginator, Modal, and many others, creating a richer element.
Some components in the Forge guide are composable. This means that they are built in such a way that they can be taken apart or added to without any code changes. As of the writing of this page, we are planning out several additions to this part of the Forge catalog. The working hypothesis for composable architecture in our components is that it will afford product teams the ability to make component changes that would normally take a request to the Forge team to accomplish. This will significantly cut down on the time it takes teams to get a portion of what they need from Forge, mitigate the need to add additional size to the Forge package, and will be an accelerator for innovation. More on this in 2025!
Patterns
Patterns are an assembly of multiple components. In Forge, these are not rigidly bound by code. Rather, they can be assembled directly by product teams from existing Forge components. They are represented in Forge in the Components section, alongside the other components, for ease of finding. However, instead of the typical component write-up, patters are a set of instructions for building a particular solution using other components. The instructions will include which components to include, how they should be laid out. Patterns used in this way will help foster consistency throughout athenaOne without the need for additional code, offering space for customization when warranted.
The Moral of the Story
Put more broadly, patterns give components meaning. Patterns are also discrete moments within a larger workflow, where patterns are chained together to perform more complex tasks. Page layouts, called templates in the Atomic Design System, are constructed of patterns, each supporting interaction needs related to a specific user objective and contextually associated to everything else on the page. Like components and patterns, page layouts are often seen many times in an application, making the creation of them as repeatable assets within Forge valuable. An example of a repeatable page layout found in athenaOne is the Admin Page.
Whether you need a component, a pattern or a page layout, you should always familiarize yourself with what is already available in Forge before starting. This will allow all of us to maximize the investments of what is already built and save you time to focus on the more interesting or complex aspects of what you do.
All components, patterns, and page layouts can be found on the Components page in Forge. There are also new assets being added to Forge each release.