This document discusses JavaScript frameworks and web components. It provides examples of code for Dojo, Ember, Angular, React, and jQuery. It also discusses the benefits of web components, including that they are part of the DOM, future-proof, and modular. Web components include custom elements, shadow DOM, templates, and HTML imports. Browser support is improving but not yet universal. Polyfills exist to provide support in older browsers. The web components specification has changed from version 0 to version 1 to support ES6 classes.
3. JS Frameworks
⢠Some more mobile friendly than others
⢠Although hard to say that any of them truly are
⢠Jeff Atwood complains about poor Ember perf for Discourse
⢠Isomorphic/Universal Apps using server side rendering
⢠Creates faster visual content on the page
⢠But also creates a âvalley of deathâ where the page is no functional
⢠Virtual DOM can sometimes be effective
⢠Sometimes effective
⢠Sometimes not
⢠On demand loading
⢠Some frameworks support it, some donât
22. JS Frameworks + Web Components
⢠Web Components are âjust HTMLâ so they will work with all of them
⢠It may require some manual wiring, like using addEventListener
⢠With plugins, you can make use of framework template functionality
⢠https://github.com/webcomponents/react-integration
⢠https://github.com/clubajax/react-inject-change-events
24. Web Components Benefits
⢠Part of the DOM - lifecycle tools for free!
⢠Future-proof and cross-browser (web standard) for creating and extending
reusable components.
⢠Requires no library or framework to get started. Vanilla JS/HTML FTW!
⢠Provides a familiar programming model. It's just DOM/CSS/HTML.
⢠Creates a very modular system
⢠Tightly integrated with the browser's DevTools.
⢠Leverage existing accessibility features.
25. Web Components
⢠Custom Elements
⢠Shadow DOM
⢠Templates
⢠HTML Imports
All four of these items are a WC3 spec, all of which makes up Web Components
26. Custom Elements
⢠DeďŹne your own element types and functionality
⢠Provides a standard way to associate JavaScript logic with an
element
⢠Lifecycle methods
⢠No confusing context â âthisâ is the element
⢠Easy to inspect in debuggers
We could do custom elements with
IE6⌠the difference is the life cycle
methods
<x-tabs>â¨
<ul>Tab 1</ul>â¨
<ul>Tab 2</ul>â¨
<ul>Tab 3</ul>â¨
</x-tabs>
27. Shadow DOM
Content can be
âprojectedâ into
provided slots
⢠Shadow DOM refers to the ability of the browser to include a subtree of
DOM elements into the rendering of a document, but not into the main
document DOM tree.
⢠CSS style rules are constrained to the shadow tree they were deďŹned in.
⢠The DOM is also encapsulated. For example,
document.querySelectorAll('div'); will not return any results from a
custom element with Shadow DOM
28. Templates
⢠The template element is used to declare fragments of HTML
that can be cloned and inserted in the document by script.
⢠Contains a DocumentFragment in its
HTMLTemplateElement.content property
29. HTML Imports
<link rel=âimportâ href=â./my-bugger.htmlâ />â¨
<link rel=âimportâ href=â./my-zapper.htmlâ />
⢠Can import all in one ďŹle: JavaScript, HTML, and CSS
⢠Effectively, an HTML document.
⢠HTML Imports can be the dependency management system, replacing
AMD or CommonJS
⢠HTML Imports let you include and reuse HTML documents in other HTML
documents, just as script tags let you include external JavaScript in their
pages.
30. HTML Imports - CONS
The HTML Import spec does not
have consensus. Mozilla is still
holding out, after two years.
<link rel=âimportâ href=â./my-bugger.htmlâ />â¨
<link rel=âimportâ href=â./my-zapper.htmlâ />
⢠Confusing context when importing templates
⢠Spec essentially competes with ES modules
⢠Globals
34. We need to support old IE because weâŚ
⢠want to expose our servers to unsupported, insecure browsers.
⢠like to pay the extra IE development cost (8:25%, 9:10%, 10:5%).
⢠enjoy tying up QA to spend extra time testing more browser versions
https://www.xďŹve.co/blog/stop-supporting-ie10-ie9-ie8/
Seriously, management often encourages
the support of old versions because they
are not aware of the cost and risk.
35. Polyfills
⢠A polyfill for HTML Custom Elements.
⢠ShadyDOM provides a shim for ShadowDOM V1. It is less correct but less
intrusive and faster than the ShadowDOM Polyfill.
⢠ShadyCSS provides a shim for CSS Custom Properties, CSS Mixins with
@apply support, and ShadowDOM V1 style encapsulation with the ShadyDOM
library.
36. v0 vs v1*
*The differences between the old spec and the recent changes
37. v0
var proto = Object.create(HTMLElement.prototype);â¨
proto.createdCallback = function() {â¨
// invoked on creationâ¨
};â¨
proto.attachedCallback = function() {â¨
// invoked when added to the documentâ¨
};â¨
proto.detachedCallback = function() {â¨
// invoked when removed from the documentâ¨
};â¨
proto.attributeChangedCallback = function(attrName, oldVal, newVal) {â¨
// invoked when an attribute is changedâ¨
};
â¨
var MyComponent = document.registerElement('my-component', {â¨
prototype: protoâ¨
});
38. class MyComponent extends HTMLElement {â¨
static get observedAttributes() {
return ['value', 'disabled'];
}â¨
constructor ( ) {â¨
super();â¨
}â¨
connectedCallback ( ) { }â¨
disconnectedCallback ( ) { }â¨
attributeChangedCallback(attrName, oldVal, newVal) { }â¨
adoptedCallback() { }â¨
}â¨
customElements.define('my-component', MyComponent);
v1
constructor: the element is
created or upgraded
connectedCallback: the
element is inserted into the DOM
disconnectedCallback: the
element is removed from the DOM.
attributeChangedCallback:
an attribute was added, removed,
or updated
adoptedCallback the element
has been moved into a new
document
define: exposes the element
name for use in markup
39. History
Q: Why did the spec change?
A: The old spec did not work with ES6 classes
Q: Does the new spec work wth ES5?
A: uh, sort ofâŚ
Q: Who changed it?
A: Blame Apple's Ryosuke Niwa. Heâs made a few changesâŚ
Q: Should I wait to use Web Components until v1 is implemented?
A: No, not any more than you would wait for any other shim-able browser feature
40. Inheritance
class MyButton extends HTMLButtonElement {â¨
constructor () {â¨
super(...arguments);â¨
}â¨
}â¨
customElements.define('my-button', MyButton, {extends: 'button'});
Extends something other than
HTMLElement
Extra argument when deďŹning
Blocked by Apple.
Use native tag, and extended
tag in âisâ
This is what it would look like⌠if it were implemented.
41. ES6 Classes
class MyComponent extends HTMLElement {â¨
static something () { return 'something'; }â¨
constructor () {â¨
super();â¨
}â¨
connectedCallback () {â¨
//â¨
}â¨
}
always call super() ďŹrst in the
constructor. âthisâ is not established until
after
Commas are forbidden to emphasize that
class deďŹnitions are different from object
literals.
Classes are sugar for prototypal inheritance. MyComponent is a function that
inherits from the HTMLElement prototype.
static is similar to:
MyComponent.something = function () {
return âsomethingâ;
}
data properties are not allowed like in objects:
{a: true} (yet)
getters and setters must be used.
super is used as a function in the
constructor, as property references:
super.someMethod();
42. Custom Element API Considerations
⢠Sync important properties with attributes
⢠getters/setters over methods
⢠Broadcast changes via events
⢠Use standard properties and event names (âvalueâ, âchangeâ)
⢠innerHTML â what happens, before and after initialization?
⢠Appending children
⢠Use :defined or alternative
⢠Consider Shadow DOM styling pros and cons