Building Web Apps with Ember.js

Chapter 9. Ember Components

No matter what environment you find yourself working in, creating componentization and reuse of functionality is a common goal for development teams. Historically, achieving reuse has been difficult. First of all, building a piece of code generic enough to meet unknown requirements is rarely a complete success and takes years of experience, not to mention a wide view of the goals (past and future) of the product you are building. Also, until recently, there has not been a standard. So the technical options have been to make use of UI toolkits, iframes, or proprietary widget/gadget specifications.

The Web Components specification breathes new life into this challenge area by providing numerous related “subspecifications” (Custom Elements, Shadow DOM, HTML Imports) that can be used together to create standardized encapsulation of UI widgets.

Ember components follow the Web Components specifications closely, providing the essentials, or polyfilling, the necessary functionality in less capable browsers. The idea is that as browsers continue to adopt these specifications, Ember is smart enough to use the native functionality when it is available. So, developers can begin to write Web Components now, as “future-friendly” Ember components.

In this chapter, we will first build a simple component to demonstrate the basics. Then we will move into a more complex component that integrates a third-party library (in this case, D3.js) into the Ember application. To ...