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.
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
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
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
30.
31.
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
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
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
81. ~~ Pattern #1 ~~
Use Custom
Elements via a
polyfill
~~ Pattern #3 ~~
Communicate
with events
~~ Pattern #2 ~~
Pass attributes, then
deserialize them to
properties
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