Successfully reported this slideshow.

Real World Web components

9

Share

Loading in …3
×
1 of 59
1 of 59

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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

×