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. title-slide-final_updated.html
    how to train your dragon
    web standard

    View full-size slide

  2. about.html
    title-slide-final_updated.html
    @notwaldorf

    View full-size slide

  3. about.html
    title-slide-final_updated.html
    i built this
    Neelix
    Guest
    Manage People
    meownica
    [email protected]

    View full-size slide

  4. intro.html
    how to train your dragon
    web standard

    View full-size slide

  5. intro.html
    first, you need
    a dragon problem

    View full-size slide

  6. intro.html
    …then wait until
    it’s everyone’s problem
    (this is very easy if you have dragons)

    View full-size slide

  7. intro.html
    complain about it
    around browser people

    View full-size slide

  8. intro.html
    (browser people loooove problems)
    complain about it
    around browser people

    View full-size slide

  9. intro.html
    YAY! now it’s the
    browser’s problem!

    View full-size slide

  10. intro.html
    standards are a compromise
    between all browser vendors
    standards.html

    View full-size slide

  11. intro.html
    we need web standards
    so that browsers don’t
    copy each other’s bugs
    standards.html

    View full-size slide

  12. intro.html standards.html
    also, standardizing
    things is really not new

    View full-size slide

  13. intro.html standards.html
    railroads use
    standard tracks

    View full-size slide

  14. intro.html standards.html
    hot dogs
    don’t

    View full-size slide

  15. intro.html standards.html
    hot dogs
    don’t

    View full-size slide

  16. intro.html standards.html
    don’t be like hot dogs.

    View full-size slide

  17. intro.html
    some standards
    aren’t successful
    standards.html

    View full-size slide

  18. intro.html
    2011:
    standards.html

    View full-size slide

  19. intro.html
    2011:
    standards.html

    2017: sigh

    View full-size slide

  20. intro.html standards.html

    View full-size slide

  21. intro.html standards.html
    :/

    View full-size slide

  22. intro.html standards.html
    “I never want to implement
    another date picker again
    — rob wormald, 2017

    View full-size slide

  23. intro.html
    web standards
    hindsight is
    20/20
    standards.html

    View full-size slide

  24. intro.html standards.html
    you need to standardize
    the right thing not
    just any thing

    View full-size slide

  25. intro.html standards.html
    extensible
    web manifesto
    2013:

    View full-size slide

  26. intro.html standards.html
    “The standards process
    should focus on adding
    new low-level capabilities

    View full-size slide

  27. intro.html standards.html
    4 things browser vendors
    want in a standards proposal
    vendors.html

    View full-size slide

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

    View full-size slide

  29. intro.html standards.html vendors.html
    the browser already does the thing
    the thing explains existing browser magic

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. intro.html standards.html vendors.html
    you need to standardize
    the right thing not
    just any thing

    View full-size slide

  38. intro.html standards.html vendors.html
    you need to standardize
    the a component model not
    just a component

    View full-size slide

  39. intro.html standards.html vendors.html
    you might say a
    web…component…model

    View full-size slide

  40. intro.html standards.html vendors.html
    congratulations.
    you have become
    alex russell
    oops.html

    View full-size slide

  41. intro.html standards.html vendors.html
    2012ish:
    learn from what all
    component models have
    in common
    oops.html .html

    View full-size slide

  42. intro.html standards.html vendors.html
    2012ish:
    learn from what all
    component models have
    in common
    oops.html .html
    xbl2
    htc
    javascripts

    View full-size slide

  43. intro.html standards.html vendors.html
    standardize ideas
    not implementations
    oops.html .html

    View full-size slide

  44. intro.html standards.html vendors.html oops.html .html
    a useful lifecycle

    View full-size slide

  45. intro.html standards.html vendors.html oops.html .html
    a useful lifecycle
    extensibility

    View full-size slide

  46. intro.html standards.html vendors.html oops.html .html
    a useful lifecycle
    extensibility
    (maybe) implementation encapsulation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. intro.html standards.html vendors.html oops.html .html
    this was exactly the
    web components proposal

    View full-size slide

  50. intro.html standards.html vendors.html oops.html .html

    View full-size slide

  51. intro.html standards.html vendors.html oops.html .html

    (maybe) implementation encapsulation
    a space suit to breathe in space (DOM)

    View full-size slide

  52. intro.html standards.html vendors.html oops.html .html

    class ShinyButton extends HTMLElement {
    constructor() { }
    connectedCallback() { }
    }
    customElements.define(‘shiny-button’, ShinyButton)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. intro.html standards.html vendors.html oops.html .html
    because they’re low level
    you can build frameworks
    on top of them

    View full-size slide

  59. intro.html standards.html vendors.html oops.html .html
    because they’re low level
    browsers can optimize them

    View full-size slide

  60. intro.html standards.html vendors.html oops.html .html
    whew.

    View full-size slide

  61. intro.html standards.html vendors.html
    2017:
    why is progress so slow?
    oops.html .html polyfills.html

    View full-size slide

  62. intro.html standards.html vendors.html
    realtalk: browsers are
    made by humans and they
    need to sleep
    oops.html .html polyfills.html

    View full-size slide

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

    View full-size slide

  64. intro.html standards.html vendors.html oops.html .html polyfills.html
    people don’t trust a standard
    unless
    it’s shipped on browsers

    View full-size slide

  65. intro.html standards.html vendors.html oops.html .html polyfills.html
    browsers don’t ship a standard
    unless
    it’s been used by people

    View full-size slide

  66. intro.html standards.html vendors.html oops.html .html polyfills.html

    View full-size slide

  67. intro.html standards.html vendors.html
    we should be waaaaaaaaaay
    more stoked about polyfills
    oops.html .html polyfills.html

    View full-size slide

  68. intro.html standards.html vendors.html oops.html .html polyfills.html
    polyfills teleport your
    browser into the future

    View full-size slide

  69. intro.html standards.html vendors.html oops.html .html polyfills.html
    unlike diamonds,
    polyfills aren’t forever

    View full-size slide

  70. intro.html standards.html vendors.html oops.html .html polyfills.html
    unlike diamonds,
    polyfills aren’t forever
    polyfill.io

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  73. intro.html standards.html vendors.html
    after 7 years,
    your standard will actually
    be 6 months old!
    oops.html .html polyfills.html

    View full-size slide

  74. intro.html standards.html vendors.html oops.html .html polyfills.html
    2010 2012 2014 2017
    1st email
    1st polyfill
    polymer 0.1
    v0 spec ships

    View full-size slide

  75. intro.html standards.html vendors.html oops.html .html polyfills.html

    1st email
    1st polyfill
    polymer 0.1
    v0 spec ships

    View full-size slide

  76. intro.html standards.html vendors.html
    questions we get
    asked a lot
    oops.html .html polyfills.html also.html

    View full-size slide

  77. intro.html standards.html vendors.html oops.html .html polyfills.html also.html
    why isn’t it more successful?

    View full-size slide

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

    View full-size slide

  79. intro.html standards.html vendors.html oops.html .html polyfills.html also.html
    you might not need
    a standard component model
    (and that’s ok!)

    View full-size slide

  80. intro.html standards.html vendors.html oops.html .html polyfills.html also.html
    big companies need
    a standard component model
    (to share the same widgets)

    View full-size slide

  81. intro.html standards.html vendors.html oops.html .html polyfills.html also.html
    component libraries need
    a standard component model
    (to share the widgets with everyone)

    View full-size slide

  82. intro.html standards.html vendors.html oops.html .html polyfills.html also.html
    frameworks need
    a standard component model
    (to share the widgets with everyone)

    View full-size slide

  83. intro.html standards.html vendors.html oops.html .html polyfills.html also.html

    View full-size slide

  84. intro.html standards.html vendors.html
    is it viable without polymer?
    oops.html .html polyfills.html also.html

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  87. intro.html standards.html vendors.html
    do web components toss
    view-source overboard?
    oops.html .html polyfills.html also.html

    View full-size slide

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

    View full-size slide

  89. outro.html
    what’s next?

    View full-size slide

  90. outro.html
    democratize web standards

    View full-size slide

  91. outro.html
    https://discourse.wicg.io/

    View full-size slide

  92. outro.html
    https://github.com/wicg/

    View full-size slide

  93. outro.html
    shaping web standards
    shapes the web platform

    View full-size slide

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

    View full-size slide