![Page 1: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/1.jpg)
Web Components + BackboneA Game-Changing Combination
![Page 2: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/2.jpg)
Who Am I?
Andrew RotaJavaScript Engineer,
![Page 3: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/3.jpg)
JavaScript Modularity
By using small libraries –components with a dedicatedpurpose and a small surfacearea – it becomes possible topick and mix, to swap parts ofour front end stack... - Jimmy Breck-McKye, "The State of JavaScript in2015"
![Page 4: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/4.jpg)
Modularity in HTML == DOM Elements
![Page 5: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/5.jpg)
<ul> <li>First Item</li> <li>Second Item</li></ul>
![Page 6: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/6.jpg)
<ol> <li>First Item</li> <li>Second Item</li></ol>
![Page 7: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/7.jpg)
<div class="header"></div>
![Page 8: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/8.jpg)
<header></header>
![Page 9: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/9.jpg)
<div id="nav"></div>
![Page 10: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/10.jpg)
<nav></nav>
![Page 11: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/11.jpg)
Libraries > frameworks?- Jimmy Breck-McKye, "The State of JavaScript in2015"
![Page 12: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/12.jpg)
Libraries > frameworks?- Jimmy Breck-McKye, "The State of JavaScript in2015"
Native functionality > libraries> frameworks.- Me
![Page 13: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/13.jpg)
But creating your own elementsisn't possible...
![Page 14: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/14.jpg)
... until now.
![Page 15: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/15.jpg)
Web Componentsusher in a new era ofweb developmentbased onencapsulated andinteroperable customelements that extendHTML itself. - Polymer Project
Web Components
![Page 16: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/16.jpg)
Web Component Technologies
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 17: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/17.jpg)
Web Component Technologies
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 18: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/18.jpg)
Custom Elements
<my‐element>Hello World.</my‐element>
var MyElement = document.registerElement('my‐element', { prototype: Object.create(HTMLElement.prototype)});
![Page 19: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/19.jpg)
Web Component Technologies
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 20: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/20.jpg)
HTML Templates<template id="my‐template"> <p>Hello World.</p> <!‐‐ This image won't be downloaded on page load ‐‐> <img src="example.jpg" alt="Example"></template>
document.importNode( document.getElementById('my‐template').content, true);
![Page 21: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/21.jpg)
Web Component Technologies
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 22: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/22.jpg)
HTML Imports<link rel="import" href="/imports/my‐component.html">
![Page 23: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/23.jpg)
Web Component Technologies
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 24: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/24.jpg)
Browser Shadow DOM
![Page 25: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/25.jpg)
Shadow DOM<div id="my‐element"></div><p>Light DOM.</p>
// Create Shadow Rootvar s = document.getElementById('my‐element').createShadowRoot();// Add Styles and Texts.innerHTML += '<style>p { color: crimson; }</style>';s.innerHTML += '<p>Shadow DOM.</p>';
Shadow DOM.
Light DOM.
![Page 26: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/26.jpg)
<content><div id="my‐element"><p>Hello!</p></div>
var s = document.getElementById('my‐element').createShadowRoot();s.innerHTML += '<p>Shadow DOM Start.</p>';s.innerHTML += '<style>p { color: crimson; }</style>';s.innerHTML += '<content></content>';s.innerHTML += '<p>Shadow DOM End.</p>';
Shadow DOM Start.Hello!
Shadow DOM End.
![Page 27: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/27.jpg)
Web Component Technologies
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 28: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/28.jpg)
What Web Components Lack...
Application Structure
Server Interface
URL Router
Models/Collections + Events
![Page 29: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/29.jpg)
...We Gain with Backbone
Application Structure
Server Interface
URL Router
Models/Collections + Events
![Page 30: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/30.jpg)
Using WebComponent
Technologies+
Backbone
![Page 31: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/31.jpg)
Backbone + Custom Elementsdocument.registerElement('my‐custom‐element', { prototype: Object.create(HTMLElement.prototype)});
Backbone.View.extend({ tagName: 'my‐custom‐element'});
![Page 32: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/32.jpg)
Backbone + HTML TemplatesBackbone.View.extend({ template: document.importNode( document.getElementById('my‐template').content, true ), render: function() { this.el.innerHTML = this.template; }});
![Page 33: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/33.jpg)
Backbone + HTML Imports<link rel="import" href="my‐custom‐component.html">
![Page 34: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/34.jpg)
Backbone + Shadow DOMBackbone.View.extend({ initialize: function() { this.el.createShadowRoot(); }});
![Page 35: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/35.jpg)
Using WebComponent
Technologies+
Backbone
![Page 36: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/36.jpg)
Using WebComponents
+Backbone
![Page 37: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/37.jpg)
polymer-project.org/docs/elements
![Page 38: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/38.jpg)
x-tags.org
![Page 39: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/39.jpg)
component.kitchen
![Page 40: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/40.jpg)
customelements.io
![Page 41: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/41.jpg)
Backbone View+
Web Component
![Page 42: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/42.jpg)
<paper‐toast>
![Page 43: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/43.jpg)
<paper‐toast> API
<paper‐toast text="Your toast is ready!" duration="5000" autoCloseDisabled opened></paper‐toast>
Element.show();Element.dismiss();Element.toggle();
Element.addEventListener('core‐overlay‐open‐completed', doSomething
![Page 44: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/44.jpg)
Backbone.View.extend({ tagName: 'paper‐toast', attributes: { text: 'Your toast is ready!', autoCloseDisabled: true, duration: '5000', opened: true }, events: { 'core‐overlay‐open‐completed': 'doSomething' }, toggle: function() { this.el.toggle(); }});
![Page 45: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/45.jpg)
<google‐map>
![Page 46: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/46.jpg)
<google‐map> API
<google‐map zoom="10" latitude="42.3581" longitude="‐71.0636"></google‐map>
Element.resize();Element.clear();
Element.addEventListener('google‐map‐ready', doSomething);
![Page 47: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/47.jpg)
Backbone.View.extend({ tagName: 'google‐map', attributes: { latitude: '42.3581', longitude: '‐71.0636', zoom: '10' }, events: { 'google‐map‐ready': 'doSomething' }, resize: function() { this.el.resize(); }});
![Page 48: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/48.jpg)
Backbone.View.extend({ initialize: function() { this.listenTo(this.model, 'change', this.moveMap ); }, tagName: 'google‐map', moveMap: function(model) { this.el.setAttribute('latitude', this.model.get('lat')); this.el.setAttribute('longitude', this.model.get('long')); this.el.setAttribute('zoom', this.model.get('zoom')); }});
![Page 49: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/49.jpg)
![Page 50: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/50.jpg)
Building Web Componentsfor Backbone (or anything else)
![Page 51: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/51.jpg)
├── hello‐world├──── hello‐world.html├──── hello‐world.js└──── bower.json
![Page 52: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/52.jpg)
<template id="my‐template"> Hello, <content></content</template><script src="hello‐world.js
![Page 53: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/53.jpg)
var element = Object.create(HTMLElement.prototype);
element.createdCallback = function() {};
element.attachedCallback = function() {};
element.attributeChangedCallback = function(attr, oldVal, newVal) {}
element.detachedCallback = function() {};
document.registerElement('hello‐world', { prototype: element});
![Page 54: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/54.jpg)
<link rel="import" href="components/hello‐world/hello‐world.html>
<!‐‐ [...] ‐‐>
<hello‐world>I'm a web component</
![Page 55: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/55.jpg)
How It All Fits Together
![Page 56: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/56.jpg)
Application + Components
Application
Component Component Component Component Component
Component Component Component Component Component
Component Component Component Component Component
![Page 57: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/57.jpg)
Application + Components
![Page 58: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/58.jpg)
Application + Components
![Page 59: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/59.jpg)
Application + Components
< X >
< X >
![Page 60: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/60.jpg)
Web Component All the Things??<backboneconf‐app> <backboneconf‐menu></backboneconf‐menu> <backboneconf‐content></backboneconf‐content> <backboneconf‐footer></backboneconf‐footer></backboneconf‐app>
![Page 61: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/61.jpg)
Probably Not (and that's OK)
I don't ever see us going all inon Custom Elements for everypossible thing ... Use nativeelements and controls whenpossible and supplement withcustom elements. - Joshua Peek, Github Programmer
![Page 62: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/62.jpg)
Should I Componentize?Does it encapsulate component-level logic?
Does it take the place of a native element?
Should it be portable?
Is it context independent?
Can the API be represented as attributes, methods, and events?
![Page 63: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/63.jpg)
Small
Open for Extension
Documented
Unit Tested
Accessible
Idempotent
Best Practices
![Page 64: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/64.jpg)
Can I Use???Custom
ElementsHTML
TemplatesHTML
ImportsShadow
DOM
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
Flag ✓ Flag Flag
X ✓ X X
X X X X
![Page 65: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/65.jpg)
Can I Use???Custom
ElementsHTML
TemplatesHTML
ImportsShadow
DOM
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
webcomponents.js
![Page 66: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/66.jpg)
Towards a Component Driven Web
![Page 67: Web Components + Backbone: a Game-Changing Combination](https://reader034.vdocuments.mx/reader034/viewer/2022052215/55a20a141a28aba5368b463f/html5/thumbnails/67.jpg)
Thanks!
Resources- WebComponents.org- Web Components: A Tectonic Shift for Web Development by Eric Bidelman- Web Components by Jarrod Overson and Jason Strimpel- Ten Principles for Great General Purpose Web Components
Colophon
This presentation was built with Backbone.js, Shadow DOM, HTMLTemplates, HTML Imports, and the Custom Element <slide‐content>using Web Component Slides.