The document discusses Ember components and the direction of Ember 2.0. It provides an overview of what components are in Ember today, best practices for organizing and coordinating components, and new features coming in Ember 2.0 like tagless components and improved action handling. It emphasizes that components simplify building user interfaces in Ember and encourages organizing components early and favoring a data down, actions up approach.

1. { { E M B E R - C O M P O N E N T S
D E E P D I V E = T R U E } }
@ R A Y T I L E Y

2. B A C K I N M Y
D A Y
MODEL
VIEW
CONTROLLER

3. M O D E L L A Y E R
I S R E A L L Y T H E
R O U T E R
MODEL
VIEW
CONTROLLER

4. U S E A
C O M P O N E N T
MODEL
VIEW
CONTROLLER

5. W H A T I S
E M B E R
B E C O M I N G ?

6. W H A T E M B E R
I S B E C O M I N G
ROUTER

7. W H A T E M B E R
B E C O M I N G
ROUTER
GLUE

8. R O U T E R
G L U E D
C O M P O N E N T S
ROUTER
GLUE
COMPONENTS

11. 2.0

12. H T T P : / / W 3 C . G I T H U B . I O / W E B C O M P
O N E N T S / S P E C / C U S T O M /
W3C Spec

13. Custom Element Spec Ember
createdCallback init
attatchedCallback didInsertElement
detachedCallback willDestroyElement
attributeChangedCallback * data binding *

14. – @ W Y C A T S V I A @ M I X O N I C
“Components are
akin to functions
with callbacks”

15. U S I N G A C O M P O N E N T

16. W H A T I S A C O M P O N E N T
Markup
Javascript

17. W H A T I S A C O M P O N E N T
Markup
Javascript
Styles

18. W H A T I S A C O M P O N E N T
template
class
css

19. O R G A N I Z A T I O N
• Use Pods
• Organize components by route where appropriate
• Components can be nested in directories
• Organize Early
• Put styles in pod structure
• https://github.com/ebryn/ember-component-css
• https://github.com/petehunt/jsxstyle

20. ps://github.com/dockyard/styleguides/blob/master/ember.md#use-pods-structu

23. ISOLATION

26. // components/sweet-component/component.js
import Ember from 'ember';
export default Ember.Component.extend({
foo: null,
actions: {
save: function() {
this.sendAction('on-save', this.get('foo'));
},
delete: function() {
this.sendAction('on-delete', this.get('foo'));
}
}
});

28. B U G

32. W R A P P I N G A T H I R D
P A R T Y L I B R A R Y

33. import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'input',
attributeBindings: ['value'],
classNames: ['date-picker'],
didInsertElement: function() {
var options = {};
var picker = new Pikaday(options);
picker.setDate(this.get('value'), true);
this.set('_picker', picker);
},
willDestroyElement: function() {
this.get('_picker').destroy();
}
});

34. format: 'YYYY-MM-DD',
didInsertElement: function() {
var self = this;
var options = {
field: this.$()[0],
format: this.get('format'),
onSelect: function() {
Ember.run(function() {
var date = self.get('_picker').getDate();
self.set('value', date);
self.sendAction('on-select', date);
});
}
};

36. D A T A D O W N - A C T I O N S
U P
Action Checkbox

38. C O O R D I N A T I N G
C O M P O N E N T S

39. C O O R D I N A T I N G
C O M P O N E N T S
- W I T H B L O C K P A R A M S

40. ( D E M O )

43. //Draggable Item
import Ember from 'ember';
export default Ember.Component.extend({
mouseDown: function() {
this.startDrag();
},
touchStart: function() {
this.startDrag();
}
startDrag: function() {
this.get('canvas').send('startDrag', this.get('dragData'));
}
dragData: Ember.computed(...)
});

44. H A N D L I N G B R O W S E R E V E N T S
http://emberjs.com/api/classes/Ember.View.html

45. //Drag Canvas
import Ember from 'ember';
export default Ember.Component.extend({
dragging: false,
touchMove: function() {...},
mouseMove: function() {...}
mouseUp: function() {...},
touchEnd: function() {...}
endDrag: function() {...},
updatePosition: function() {...}
actions: {
startDrag: function(dragData) {
this.setProperties({
dragging: true,
dragData: dragData
});
},
doDrop: function(dropData) {
this.sendAction('on-drop', dropData, this.get('dragData'));
}
}
});

46. C O O R D I N A T I N G
C O M P O N E N T S
- W I T H S E R V I C E S

48. // services/drag-coordinator.js
import Ember from 'ember';
export default Ember.Component.extend({
canvas: null,
registerCanvas: function() {...},
unregisterCanvas: function() {...}
});

49. // Any component that needs access to drag canvas
import Ember from 'ember';
export default Ember.Component.extend({
dragCoordinator: Ember.inject.service(),
canvas: Ember.computed.alias('dragCoordinator.canvas')
});

50. D Y N A M I C C O M P O N E N T S
W I T H { { C O M P O N E N T } }

51. ( D E M O )

52. var title =
{
field: 'title',
component: 'text-search-filter',
placeholder: 'Title',
display: 'Title',
operators: [
{
operator: 'equals',
display: 'Contains'
},
{
operator: 'notEquals',
display: 'Does Not Contain'
}
]
};

53. H T T P : / / V I C T O R A R I A S . C O M . B R / I M A G E S / D U C K _ T Y P I N G . J P G

55. 2.0

56. T H A N K S F O R
R E M I N D I N G M E
https://github.com/emberjs/ember.js/pull/10461

57. ISOLATION

58. L O O K ! I P U T A N U N D E R S C O R E I N
F R O N T O F I T

60. import Ember from 'ember';
export default Ember.Component.extend({
_superSecretInternalState: 'safe and secure',
actions: {
doSomething: function() {
var userValue = this.attrs.someValue;
...
}
}
}
});

61. E M B E R 2 . 0
import Ember from 'ember';
export default Ember.Route.extend({
attributes: function(params, queryParams) {
return {
model: this.model(params);
}
}
});

64. T O O M A N Y O F M Y C O M P O N E N T S
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'span',
classNames: ['sweet-component']
attributeBindings: ['some-attribute']
actions: {
save: function() {
this.sendAction('save')
}
}
}
});

65. E L E M E N T A N D F R A G M E N T R F C

66. T A G L E S S C O M P O N E N T = = =
F R A G M E N T

67. C O M B I N E D W I T H B E T T E R A C T I O N
H A N D L I N G
http://emberjs.jsbin.com/rwjblue/394/edit?html,js,output

68. A L L T H E O T H E R R O A D T O 2 . 0
S T U F F
• Road to 2.0 RFC
• Routable Components RFC
• Elements and Fragments RFC
• Erik is impatient

69. R E C A P
• Components are Ember’s vision of custom elements
today
• They simplify the learning curve of ember allowing a
unified interface for getting content and behaviors for UI.
• Organize Early
• Favor data down actions up
• You can coordinate between components to build
complex but compassable interfaces

70. R E C A P
• Use the {{component}} helper when you need to choose
a component at run time.
• Be on the lookout for sweet new features in Glimmer
and Ember 2.0 which are just around the corner.

71. T H A N K S !
@raytiley (github & twitter)
raytiley@gmail.com