Web Components promise to change how we think about modularity on the web, and when combined with the structure and organization of Backbone.js we can create portable, dynamic, encapsulated UI modules that fit into any web application.

1. Web Components + Backbone
A Game-Changing Combination

2. Who Am I?
Andrew Rota
JavaScript Engineer,

3. JavaScript Modularity
By using small libraries –
components with a dedicated
purpose and a small surface
area – it becomes possible to
pick and mix, to swap parts of
our front end stack...
- Jimmy Breck-McKye, "The State of JavaScript in
2015"

4. Modularity in HTML == DOM Elements

5. <ul>
<li>First Item</li>
<li>Second Item</li>
</ul>

6. <ol>
<li>First Item</li>
<li>Second Item</li>
</ol>

7. <div class="header"></div>

8. <header></header>

9. <div id="nav"></div>

10. <nav></nav>

11. Libraries > frameworks?
- Jimmy Breck-McKye, "The State of JavaScript in
2015"

12. Libraries > frameworks?
- Jimmy Breck-McKye, "The State of JavaScript in
2015"
Native functionality > libraries
> frameworks.
- Me

13. But creating your own elements
isn't possible...

14. ... until now.

15. Web Components
usher in a new era of
web development
based on
encapsulated and
interoperable custom
elements that extend
HTML itself. - Polymer Project
Web Components

16. Web Component Technologies
Custom Elements
HTML Templates
HTML Imports
Shadow DOM

17. Web Component Technologies
Custom Elements
HTML Templates
HTML Imports
Shadow DOM

18. Custom Elements
<my‐element>Hello World.</my‐element>
var MyElement = document.registerElement('my‐element', {
prototype: Object.create(HTMLElement.prototype)
});

19. Web Component Technologies
Custom Elements
HTML Templates
HTML Imports
Shadow DOM

20. 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
);

21. Web Component Technologies
Custom Elements
HTML Templates
HTML Imports
Shadow DOM

22. HTML Imports
<link rel="import" href="/imports/my‐component.html">

23. Web Component Technologies
Custom Elements
HTML Templates
HTML Imports
Shadow DOM

24. Browser Shadow DOM

25. Shadow DOM
<div id="my‐element"></div><p>Light DOM.</p>
// Create Shadow Root
var s = document.getElementById('my‐element').createShadowRoot();
// Add Styles and Text
s.innerHTML += '<style>p { color: crimson; }</style>';
s.innerHTML += '<p>Shadow DOM.</p>';
Shadow DOM.
Light DOM.

26. <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.

27. Web Component Technologies
Custom Elements
HTML Templates
HTML Imports
Shadow DOM

28. What Web Components Lack...
Application Structure
Server Interface
URL Router
Models/Collections + Events

29. ...We Gain with Backbone
Application Structure
Server Interface
URL Router
Models/Collections + Events

30. Using Web
Component
Technologies
+
Backbone

31. Backbone + Custom Elements
document.registerElement('my‐custom‐element', {
prototype: Object.create(HTMLElement.prototype)
});
Backbone.View.extend({
tagName: 'my‐custom‐element'
});

32. Backbone + HTML Templates
Backbone.View.extend({
template: document.importNode(
document.getElementById('my‐template').content,
true
),
render: function() {
this.el.innerHTML = this.template;
}
});

33. Backbone + HTML Imports
<link rel="import" href="my‐custom‐component.html">

34. Backbone + Shadow DOM
Backbone.View.extend({
initialize: function() {
this.el.createShadowRoot();
}
});

35. Using Web
Component
Technologies
+
Backbone

36. Using Web
Components
+
Backbone

37. polymer-project.org/docs/elements

38. x-tags.org

39. component.kitchen

40. customelements.io

41. Backbone View
+
Web Component

42. <paper‐toast>

43. <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

44. 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();
}
});

45. <google‐map>

46. <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);

47. 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();
}
});

48. 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'));
}
});

50. Building Web Components
for Backbone (or anything else)

51. ├── hello‐world
├──── hello‐world.html
├──── hello‐world.js
└──── bower.json

52. <template id="my‐template">
Hello, <content></content
</template>
<script src="hello‐world.js

53. 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
});

54. <link
rel="import"
href="components/hello‐world/hello‐world.html
>
<!‐‐ [...] ‐‐>
<hello‐world>I'm a web component</

55. How It All Fits Together

56. Application + Components
Application
Component Component Component Component Component
Component Component Component Component Component
Component Component Component Component Component

57. Application + Components

58. Application + Components

59. Application + Components
< X >
< X >

60. Web Component All the Things??
<backboneconf‐app>
<backboneconf‐menu></backboneconf‐menu>
<backboneconf‐content></backboneconf‐content>
<backboneconf‐footer></backboneconf‐footer>
</backboneconf‐app>

61. Probably Not (and that's OK)
I don't ever see us going all in
on Custom Elements for every
possible thing ... Use native
elements and controls when
possible and supplement with
custom elements.
- Joshua Peek, Github Programmer

62. 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?

63. Small
Open for Extension
Documented
Unit Tested
Accessible
Idempotent
Best Practices

64. Can I Use???
Custom
Elements
HTML
Templates
HTML
Imports
Shadow
DOM
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
Flag ✓ Flag Flag
X ✓ X X
X X X X

65. Can I Use???
Custom
Elements
HTML
Templates
HTML
Imports
Shadow
DOM
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
webcomponents.js

66. Towards a Component Driven Web

67. 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, HTML
Templates, HTML Imports, and the Custom Element <slide‐content>
using Web Component Slides.