Interoperable Component Patterns
•
1 like•737 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Interoperable Component Patterns
Similar to Interoperable Component Patterns (20)
More from Matthew Beale
More from Matthew Beale (15)
Recently uploaded
Recently uploaded (20)
Interoperable Component Patterns
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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>