Ember Components transclude my directives

This talk was given by John K. Paul and I have to say, I learned A LOT during it. As I mentioned, components were mentioned a lot during this conference but this session gave me some interesting understanding of additional terms and a little bit of Angular.

In Angular, directives make custom widgets. They decorate existing HTML with additional functionality… essentially a piece of HTML and a piece of javascript. In directives, you can also restrict based on specific parts. For example, restrict E means restrict based on an element, restrict C means restrict based on a class.

Transclusion is the inclusion of one thing into something else. Directives are used for making a DSL in your HTML but in order to do that, there are lots of knobs and levers and you need to understand lots of stuff to make that happen. For example, you put transclude: true in a directive definition which takes whatever is inside the element and moves it into the html where “ng-transclude” is written.

Ember’s got something similar to directives and those are components… except that components are much cooler and much easier to understand and create. An ember component is a custom component that you can use in many different places. The more general form of this are web components which are discussed in the extensible web manifesto (more on that in a later post) but it is basically rolling your own reusable widget. Ember components let us do something like this now and allows us to encapsulate HTML, CSS, and JS. It lets us package together a structure and behavior.

An example John K. Paul used was ember tabs, which are also ember components. They’re reusable. More examples are x-tabs and x-pane. The best thing about components is that you can take this functionality that is encapsulated in this component and just copy and paste it into your code, change very few things and have it good to go in the app you’re working on. The last slide talked about ember component lists that Eric Berry (http://coderberry.me/) and John K. Paul (https://gist.github.com/johnkpaul/6796944) have been putting together and urged other people to add to it as they create components. I, for one, think a collective list like this would be amazing and I’m very excited to use components more and experiment with how to use them to make us more productive and make our app better!