Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Real World

Web Components
Jarrod Overson
jarrodoverson.com
a.k.a.

Web Components
outside of Google
What are

Web Components?
Web Components
Templates
Custom Elements
Shadow DOM
HTML Imports
(and more…)
HTML Templates
( traditionally )
<script type="text/x-template">
<h1>Hello World!</h1>
</script>

<div style="display:none...
HTML Templates
now(ish)!

<template>
<p>I don’t exist yet!</p>
</template>
Benefits
1. Inert
2. No .innerHTML
3. It makes sense
Custom Elements
❯ MyEl = document.registerElement('my-el');
function my-el() { [native code] }
!

❯ var el = new MyEl();
u...
OH NO!
Not XML!
Benefits
1. Legit new elements
2. Can inherit from the old
3. Make your own semantics
Shadow DOM
❯ outer = document.createElement('div');
<div></div>
!

❯ inner = document.createElement('p')
<p></p>
!

❯ inne...
Shadow DOM
Shadow DOM
Shadow DOM
Shadow DOM
Benefits
1. Proper encapsulation
2. Style boundaries
3. You can use IDs again!
❯ document.querySelector(‘#sameId’);
!

❯ el...
HTML Imports

<link rel=“import" href="external.html">
Benefits
1. It gets stuff 

out of your stuff
Support for each
<template>
Shadow DOM
registerElement
HTML Imports
Wat
Why am I even here?
Why even bother with

Web Components?
Web Components
are part of a
fundamental shift in how
the web evolves
The web learns
best from itself
getElementsBySelector
CoffeeScript
Everything CSS ever
From what you do
Spec writers make
things possible
The community’s job is
to make them easy
oi jQuery,
tip o’ the hat
Ok, so how do I use

Web Components?
Polyfills
for emerging features
and a framework
for building upon them
<polymer-element name="hello-world">
<script>
Polymer('hello-world', {});
</script>
</polymer-element>
vs Native
proto = Object.create(HTMLElement.prototype);
HelloWorld = document.registerElement(
‘hello-world', {
prototype ...
<polymer-element name="hello-world">
<template>
<div>Hello World</div>
</template>
<script>
Polymer('hello-world', {});
</...
vs Native
<template id="hw-template">
<div>Hello World</div>
</template>
!
<script>
var proto = Object.create(HTMLElement....
Yay!
“

”
- polymer-project.org
Boo!
So what’s the reality?
Parent with
crappy, leaky
styles

Sexy scoped
web component

chrome 34 with flags turned on
IE 10 with defaults
firefox 26.0 with defaults
chrome 32 with defaults
The reality?
It’s largely there
After all,
the component did render.
and you do
get useful lifecycle methods
and Polymer does
give you ...
Shadow DOM is not
very polyfillable.
Why would I use
Web Components
when I have

directives?
o!
em

D

How do

and

work together?
Web Components
are useful
and important.
The bleeding edge
is accessible
but you need excuses to use it
1. Prototypes
Make your prototypes
with the bleeding edge
Attach a cost to backwards compatibility.
2. Internal Tools
Internally,
browser compatibility
doesn’t need to matter.
IE 8 doesn’t exist when you will it away.
3. Native Apps
Do you really need
a web server?
Or do you just love
web tech?
o!
em

D

1. node-webkit
2. brackets-shell
3. CEF
4. Packaged Apps
Jarrod Overson
@jsoverson
jarrod@jsoverson.com
jsoverson.com
jsoverson.com/google+
jsoverson.com/linkedin
jsoverson.com/gi...
Real World Web components
Real World Web components
Real World Web components
Upcoming SlideShare
Loading in …5
×

Real World Web components

7,789 views

Published on

Slides for talk given at the jQuery Conference San Diego in 2014

Published in: Technology
  • Be the first to comment

Real World Web components

  1. 1. Real World Web Components Jarrod Overson jarrodoverson.com
  2. 2. a.k.a. Web Components outside of Google
  3. 3. What are Web Components?
  4. 4. Web Components Templates Custom Elements Shadow DOM HTML Imports (and more…)
  5. 5. HTML Templates ( traditionally ) <script type="text/x-template"> <h1>Hello World!</h1> </script> <div style="display:none"> <p>I am cloned over and over!</p> </div>
  6. 6. HTML Templates now(ish)! <template> <p>I don’t exist yet!</p> </template>
  7. 7. Benefits 1. Inert 2. No .innerHTML 3. It makes sense
  8. 8. Custom Elements ❯ MyEl = document.registerElement('my-el'); function my-el() { [native code] } ! ❯ var el = new MyEl(); undefined ! ❯ el.outerHTML; "<my-el></my-el>"
  9. 9. OH NO! Not XML!
  10. 10. Benefits 1. Legit new elements 2. Can inherit from the old 3. Make your own semantics
  11. 11. Shadow DOM ❯ outer = document.createElement('div'); <div></div> ! ❯ inner = document.createElement('p') <p></p> ! ❯ inner.innerText = 'Hello jqcon!'; "Hello jqcon!" ! ❯ outer.createShadowRoot().appendChild(inner); <p>Hello jqcon!</p> ! ❯ document.body.appendChild(outer); <div></div>
  12. 12. Shadow DOM
  13. 13. Shadow DOM
  14. 14. Shadow DOM
  15. 15. Shadow DOM
  16. 16. Benefits 1. Proper encapsulation 2. Style boundaries 3. You can use IDs again! ❯ document.querySelector(‘#sameId’); ! ❯ el.shadowRoot.querySelector(‘#sameId’);
  17. 17. HTML Imports <link rel=“import" href="external.html">
  18. 18. Benefits 1. It gets stuff 
 out of your stuff
  19. 19. Support for each <template> Shadow DOM registerElement HTML Imports
  20. 20. Wat
  21. 21. Why am I even here?
  22. 22. Why even bother with Web Components?
  23. 23. Web Components are part of a fundamental shift in how the web evolves
  24. 24. The web learns best from itself getElementsBySelector CoffeeScript Everything CSS ever From what you do
  25. 25. Spec writers make things possible The community’s job is to make them easy
  26. 26. oi jQuery, tip o’ the hat
  27. 27. Ok, so how do I use Web Components?
  28. 28. Polyfills for emerging features and a framework for building upon them
  29. 29. <polymer-element name="hello-world"> <script> Polymer('hello-world', {}); </script> </polymer-element>
  30. 30. vs Native proto = Object.create(HTMLElement.prototype); HelloWorld = document.registerElement( ‘hello-world', { prototype : proto }); What happened to <element>?
  31. 31. <polymer-element name="hello-world"> <template> <div>Hello World</div> </template> <script> Polymer('hello-world', {}); </script> </polymer-element>
  32. 32. vs Native <template id="hw-template"> <div>Hello World</div> </template> ! <script> var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var template = document.getElementById('hw-template'); var clone = document.importNode(template.content, true); this.createShadowRoot().appendChild(clone); }; HelloWorld = document.registerElement( 'hello-world', { prototype : proto } ); </script>
  33. 33. Yay!
  34. 34. “ ” - polymer-project.org
  35. 35. Boo!
  36. 36. So what’s the reality?
  37. 37. Parent with crappy, leaky styles Sexy scoped web component chrome 34 with flags turned on
  38. 38. IE 10 with defaults
  39. 39. firefox 26.0 with defaults
  40. 40. chrome 32 with defaults
  41. 41. The reality?
  42. 42. It’s largely there After all, the component did render. and you do get useful lifecycle methods and Polymer does give you sexy data binding
  43. 43. Shadow DOM is not very polyfillable.
  44. 44. Why would I use Web Components when I have directives?
  45. 45. o! em D How do and work together?
  46. 46. Web Components are useful and important.
  47. 47. The bleeding edge is accessible but you need excuses to use it
  48. 48. 1. Prototypes
  49. 49. Make your prototypes with the bleeding edge Attach a cost to backwards compatibility.
  50. 50. 2. Internal Tools
  51. 51. Internally, browser compatibility doesn’t need to matter. IE 8 doesn’t exist when you will it away.
  52. 52. 3. Native Apps
  53. 53. Do you really need a web server?
  54. 54. Or do you just love web tech?
  55. 55. o! em D 1. node-webkit 2. brackets-shell 3. CEF 4. Packaged Apps
  56. 56. Jarrod Overson @jsoverson jarrod@jsoverson.com jsoverson.com jsoverson.com/google+ jsoverson.com/linkedin jsoverson.com/github jsoverson.com/twitter

×