Ember Component Patterns

This guide intends to be aligned with the idioms and syntax of the Octane edition of Ember.

The goal of this guide is to cultivate a set of patterns that are practical and can reasonably be used by any Ember developer in their application. It is intended to be made publicly available with the preview release of Ember Octane.

The component patterns here will, at least initially, be without CSS styling. This is to help clearly delineate form and function. "First, make it useful; then make it beautiful" as the saying goes. When necessary to demonstrate the validity of the approach, however, a sub-section on styling may be added to the pattern if it helps to demonstrate what might otherwise be thought of as impossible.

As this project matures, the anti-patterns will be explored by adding more prose and explains to demonstrate why other options were not chosen, providing both a well-lit path for success and a knowledge base for the shadows.

Finally, references are included at the bottom of each page. Some of these are references from which information was gathered for the guide; others are more in-depth reading about a related topic. This supports a more comprehensive deep-dive into the subject matter for the Ember developer, or anyone wishing to gain more thorough knowledge on the specific topic.

What one can obtain from this collection of patterns depends on the reader; however a few potential types of readers, and possible goals, have been kept in mind. Some examples:

For Developers

  • write more technically accurate code

  • worry a little bit less about writing code that is not accessible

  • have easy-to-reference base requirements for common component patterns

  • have confidence in the code you produce

For Designers

  • understand what components really need to have from a functional perspective

  • ensure that designs will include the necessary functionality and accessibility

  • focus on design within clear technical constraints

For BAs & TPMs

  • reference to help you more accurately know base requirements for the new feature(s) you want to add to your project

  • confidently plan out projects more accurately by reducing "unknown unknowns"

Feedback is welcome! Visit the GitHub repository for this project to raise an issue.