Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to train your dragon (web standard)

How to train your dragon (web standard)

They say there's two things you never want to see made: sausages and web standards. Sooooo I'm going to tell you about both! How do browsers work? What are web components even? Everyone's using them and maybe you should too! 🆒🐱🎉

Monica Dinculescu

November 29, 2017
Tweet

More Decks by Monica Dinculescu

Other Decks in Programming

Transcript

  1. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended
  2. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing
  3. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing <input type=“date”>
  4. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing <input type=“date”>
  5. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing <input type=“date”>
  6. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing <input type=“date”>
  7. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing <input type=“date”>
  8. intro.html standards.html vendors.html oops.html .html a useful lifecycle extensibility (maybe)

    implementation encapsulation a space suit to breathe in space
  9. intro.html standards.html vendors.html oops.html .html a useful lifecycle extensibility (maybe)

    implementation encapsulation a space suit to breathe in space (DOM)
  10. intro.html standards.html vendors.html oops.html .html <shiny-button></shiny-button> class ShinyButton extends HTMLElement

    { constructor() { } connectedCallback() { } } customElements.define(‘shiny-button’, ShinyButton)
  11. intro.html standards.html vendors.html oops.html .html class ShinyButton extends HTMLElement {

    constructor() { } connectedCallback() { } } customElements.define(‘shiny-button’, ShinyButton) a useful lifecycle extensibility
  12. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing
  13. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing
  14. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing
  15. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing
  16. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing
  17. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing
  18. intro.html standards.html vendors.html the browser already does the thing the

    thing explains existing browser magic the thing can be extended people already used and liked the thing
  19. intro.html standards.html vendors.html why isn’t it more successful? oops.html .html

    polyfills.html also.html “ why aren’t we using it? “ usually means
  20. intro.html standards.html vendors.html is it viable without polymer? oops.html .html

    polyfills.html also.html “ we’ve done bad dev rel-ing usually means
  21. intro.html standards.html vendors.html oops.html .html polyfills.html also.html new API documented

    best practices 
 explained libraries do best practices framework interop utopia
  22. intro.html standards.html vendors.html if the browser understands the semantics of

    your element it can add tools for it oops.html .html polyfills.html also.html
  23. lets-make-webs-together.html Image Credit from the Noun Project: Relationship, Complain, Holiday,

    Target, Idea, Presentation, Schedule, FAQ - Human Resource And Life Style Collection, by BomSymbols | Smile, Tubby Cat by Clara Joy | Glasses by Anton Anuchin | Hair by Vladimir Belochkin | Dead by Julien Deveaux | Traintracks by Guilhem | Balloons, Streamers by Made by Made | Mobile Calendar App by Creative Mania