{{x-foo}}

Day two started with a bang with Ryan Florence talking about {{x-foo}}. Speaking more about components, Ryan explained components as tags with a unique style and behavior. They are custom elements with an optional template, with an isolated ember view and the view is the context.

The most important part of this conference was obviously when Ryan pulled out the drone!!!! What’s a good conference without a drone demonstration?! So, in this case, Ryan flew the drone showing these ember components and using Ember. For example, the x-wing was a components and you can checkout the components which outlines all the actions.

Then we moved on to getting the components to talk to the outside world. Two ways were discussed: data binding and actions. Data binding are attributes that components will 2-way bind to. Actions are the actions that the component will outline. For data binding, he used the example of ic-tabs. The use case is to persist to query params. Basically, the controller sets the context of the template so that you can bind to those properties. You can see an example here: http://instructure.github.io/ic-tabs/. Then you can find the query param attribute on the tags. For actions, he discussed ic-menu. These components allows for a solution to the popover edge cases. It outlines on-select=“remove” and same for save and copy. And then those are saved in the controller. You can see an example here: http://instructure.github.io/ic-menu/.

Static tabs and dynamic tabs can both happen via parent and child components. Child components can handle their own state.

Sub-components are identified by events or if you need to manage a more specific class or attribute.

One interesting this that Ryan mentioned was that he is biased towards not having a template connected to a component and in his opinion, if you have a template, then you missed an opportunity for a possible abstraction in your component code.