Though component and custom element patterns have become the standard for web application architecture, communicating from one solution to another remains fogged by guesswork and opinion. How should you write a web component that needs to be compatible with Ember and other frameworks? Where are the tradeoffs between purity of design and ergonomics? In a talk touching on libraries and standards, come learn how to write component code useful across many environments.

1. Interoperable
Component Patterns
EmberConf 2016

2. twitter.com/mixonic
Ember.js Core Team
madhatted.com

6. twitter.com/mixonic
Ember.js Core Team
madhatted.com

8. >1,800 people!!

9. emberjs.com/ember-community-survey-2016

10. emberjs.com/ember-community-survey-2016

11. “The elements of this language are
entities called patterns. Each pattern
describes a problem that occurs over
and over again in our environment, and
then describes the core of the solution
to that problem, in such a way that you
can use this solution a million times
over, without ever doing it the same
way twice.”
–Christopher Alexander

12. User-centric

13. Designed based on
experience

14. A pattern is a not a guide
to implementation

15. ~~ Prelude ~~
What we talk about
when we talk about
interoperability.
and web components

16. Rails server builds an HTML string
Browser parses HTML string
Component boots in the browser
Possible Consumer #1

17. Rails server builds an HTML string
Browser parses HTML string
Component boots in the browser
Possible Consumer #1

18. React template builds some DOM
Component boots in the browser
Component is implemented w/Vue.js
Possible Consumer #2

19. Possible Consumer #2
React template builds some DOM
Component boots in the browser
Component is implemented w/Vue.js

20. Riot template is rendered Server-side
Component boots on the server
Component renders and resulting
HTML goes back in the HTTP response
Possible Consumer #3

21. Riot template is rendered Server-side
Component boots on the server
Component renders and resulting
HTML goes back in the HTTP response
Possible Consumer #3

22. A component usable
from any client-side
consumer.

23. A component usable
from any client-side
consumer.

25. Ember Template
React/JSX
Angular 1.x Template
Angular 2 Template
DOM
HTML

26. ~~ Pattern #1 ~~
Use Custom Elements
via a polyfill

27. document.createElement(
'my-component'
);
<my-component>
</my-component>
DOM
HTML

28. Angular 2 TemplateEmber Template
<my-component>
</my-component>
React/JSX
Angular 1.x Template
document.createElement(
'my-component'
);
<my-component>
</my-component>
DOM
HTML
<my-component>
</my-component>
<my-component>
</my-component>
<my-component>
</my-component>

29. 1 class MyComponent extends HTMLElement {
2 attachedCallback() {
3 console.log('Now attached to the document');
4 }
5 };
6 document.registerElement('my-component', MyComponent);
Custom Elements Working Draft, 26 February 2016

32. 1 class MyComponent extends HTMLElement {
2 attachedCallback() {
3 console.log('Now attached to the document');
4 }
5 };
6 window.customElements.define('my-component', MyComponen
Custom Elements Working Draft, 29 March 2016

33. webcomponents.org/polyfills/custom-elements
x-tag.github.io
www.polymer-project.org

34. Angular 2 TemplateEmber Template
React/JSX
Angular 1.x Template
DOM
HTML
<my-component>
</my-component>
document.createElement(
'my-component'
);
<my-component>
</my-component>
<my-component>
</my-component>
<my-component>
</my-component>
<my-component>
</my-component>

35. ~~ Pattern #2 ~~
Pass attributes, then
deserialize them to
properties

36. ~~ Pattern #2 ~~
Pass attributes, then
deserialize them to
properties on change

37. Component author concerns

38. <div id="wrapper"></div>

39. <div id="wrapper"></div>
let d = document.createElement('div');
d.setAttribute('id', 'wrapper');

40. <div id="wrapper"></div>
let d = document.createElement('div');
d.setAttribute('id', 'wrapper');
d.getAttribute('id'); // => 'wrapper'
d.id; // => 'wrapper'

41. let d = document.createElement('div');
d.setAttribute('wrapper-id', 'main');
<div wrapper-id="main"></div>

42. let d = document.createElement('div');
d.setAttribute('wrapper-id', 'main');
d.getAttribute('wrapper-id'); // => 'main'
d['wrapper-id']; // => undefined
<div wrapper-id="main"></div>

43. let d = document.createElement('div');
d.setAttribute('hidden', '');
<div hidden></div>

44. d.getAttribute('hidden'); // => ''
d.hidden; // => true
let d = document.createElement('div');
d.setAttribute('hidden', '');
<div hidden></div>

45. <div id="wrapper" wrapper-id="main" hidden></div>
attribute and
property
attribute and
boolean property
attribute, no
property

46. <div id="wrapper" wrapper-id="main" hidden></div>
attribute and
property
attribute and
boolean property
attribute, no
property

55. <div id="wrapper" wrapper-id="main" hidden></div>
<select tabindex="3" multiple="" size="-4" form="login"></select>

56. 1 <my-component count="3" running></my-component>
1 class MyComponent extends HTMLElement {
2 attachedCallback() {
3 console.log('Now attached to the document');
4 }
5 };
6 window.customElements.define('my-component', MyComponen

57. Component consumer concerns

58. DOM
Angular 2 TemplateEmber Template
let c = document.createElement(
‘my-component'
);
c.setAttribute('count', '5');
<my-component count=“5">
</my-component>
<my-component count=“5">
</my-component>
<my-component count=“5">
</my-component>
<my-component count=“5">
</my-component>
<my-component count=“5">
</my-component>
React/JSX
Angular 1.x TemplateHTML

59. DOM
Angular 2 TemplateEmber Template
<my-component count={count}>
</my-component>
<my-component count={{count}}>
</my-component>
<my-component count={{count}}>
</my-component>
<my-component [attr.count]="coun
</my-component>
React/JSX
Angular 1.x TemplateHTML
let c = document.createElement(
‘my-component'
);
c.setAttribute('count', '5');
<my-component count=“5">
</my-component>

60. Back to author concerns

61. ~~ Pattern #2 ~~
Pass attributes, then
deserialize them to
properties

62. Polymer: reflecting between an attribute and property
1 Polymer({
2 is: 'my-component',
3 properties: {
4 count: Number
5 }
6 });

63. 1 xtag.register('my-component', {
2 accessors: {
3 count: {
4 attribute: {},
5 get() {
6 let stringCount = this.getAttribute('count');
7 return parseInt(stringCount, 10);
8 },
9 set(numericValue) {
10 let value = ''+numericValue;
11 this.setAttribute('count', value);
12 return value;
13 }
14 }
15 }
16 });
x-tag: reflecting between an attribute and property

64. ~~ Pattern #3 ~~
Communicate with
events

65. Consumer concerns

66. <AReactComponent log={function(){ console.log('baz'); }} />
{{an-ember-component log=(action 'log' 'baz')}}
Framework components

67. Custom Elements
<my-component log="function() { console.log('log') }"></my-component>

68. HTML Elements
div.setAttribute('onclick', ‘console.log("clicked")');
div.onclick = function() { console.log("clicked"); };
div.addEventListener('click', function(e){
window.event = e;
try {
div.onclick.call(event.target);
} finaly() {
window.event = null;
}
}
<div onclick="console.log('clicked')"></div>

69. Pass an attribute? A string of a function has
no context (this is lost)
Pass a property? No way to do this in HTML
and some frameworks
Add an event listener? No way to add an event
listener in HTML

70. Pass an attribute? A string of a function has
no context (this is lost)
Pass a property? No way to do this in HTML
and some frameworks
Add an event listener? No way to add an event
listener in HTML

71. ~~ Pattern #3 ~~
Communicate with
events

72. Events are how HTML Elements communicate
so
Custom Elements should behave the same way
Why Events? #1

73. <div></div>
<my-component></my-component>
1 let event = document.createEvent('Event');
2 event.initEvent('click', true, true); // canBubble, cancelable
3 element.dispatchEvent(event);
1 let event = document.createEvent('Event');
2 event.initEvent('click', true, true); // canBubble, cancelable
3 element.dispatchEvent(event);

74. Events have a somewhat common interface
Why Events? #2

75. Event Listener
1 element.addEventListener('click', function(e) {
2 e.target; // What element dispatched the event
3 e.currentTarget; // What element the handler is attached to
4 e.timeStamp; // When the event started
5 // Plus properties and methods about phases
6 });
1 element.callbackFunction = function() {
2 // What are the arguments this time?
3 };
Callback as property

76. <my-component></my-component>
1 let event = document.createEvent('CustomEvent');
2 event.initCustomEvent('mousewobble', true, true, {direction: 'vertical'});
3 element.dispatchEvent(event);
1 element.addEventListener('mousewobble', function(e) {
2 e.detail.direction; // 'vertical'
3 });

77. Events are compatible with alternative
consumer patterns (delegation)
Why Events? #3

78. Component consumer concerns

79. Angular 2 Template
1 <my-component (mousewobble)="methodOnComponent($event)">
2 </my-component>
3
4 <my-component on-mousewobble="methodOnComponent($event)">
5 </my-component>

80. ~~ Pattern #3 ~~
Communicate with
events

81. ~~ Pattern #1 ~~
Use Custom
Elements via a
polyfill
~~ Pattern #3 ~~
Communicate
with events
~~ Pattern #2 ~~
Pass attributes, then
deserialize them to
properties

82. Practical recommendations for interoperable component authors

83. use x-tag or Polymer
Practical recommendations for interoperable component authors

84. use x-tag or Polymer
Practical recommendations for interoperable component authors
document usage in several environments

85. use x-tag or Polymer
Practical recommendations for interoperable component authors
document usage in several environments
punt on Shadow DOM

86. use x-tag or Polymer
Practical recommendations for interoperable component authors
document usage in several environments
punt on Shadow DOM
don’t expose implementation details

87. ~~ Coda ~~
Ember

88. <my-component count="5"></my-component>

89. <my-component count="5"></my-component>
<my-component {{attribute count=5}}></my-component>

90. <my-component count="5"></my-component>
<my-component {{attribute count=5}}></my-component>
<my-component {{property count=5}}></my-component>

91. <my-component count="5"></my-component>
<my-component {{attribute count=5}}></my-component>
<my-component {{property count=5}}></my-component>
<my-component {{style color="red" width=(max a b)}}></my-component>

92. <my-component count="5"></my-component>
<my-component {{attribute count=5}}></my-component>
<my-component {{property count=5}}></my-component>
<my-component {{style color="red" width=(max a b)}}></my-component>
<my-component {{add-event-listener 'mousewobble' (action 'wobble')}}></my-component>

95. twitter.com/mixonic
Ember.js Core Team
madhatted.com