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! 🆒🐱🎉

053e75a5b48b44d6dd0612795dfb326d?s=128

Monica Dinculescu

November 29, 2017
Tweet

Transcript

  1. title-slide-final_updated.html how to train your dragon web standard

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

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

    meownica@example.com
  4. intro.html how to train your dragon web standard

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

  6. intro.html …then wait until it’s everyone’s problem (this is very

    easy if you have dragons)
  7. intro.html complain about it around browser people

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

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

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

  11. intro.html we need web standards so that browsers don’t copy

    each other’s bugs standards.html
  12. intro.html standards.html also, standardizing things is really not new

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

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

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

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

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

  18. intro.html 2011: standards.html <input type=“date”>

  19. intro.html 2011: standards.html <input type=“date”> 2017: sigh

  20. intro.html standards.html

  21. intro.html standards.html :/

  22. intro.html standards.html “I never want to implement another date picker

    again — rob wormald, 2017
  23. intro.html web standards hindsight is 20/20 standards.html

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

    just any thing
  25. intro.html standards.html extensible web manifesto 2013:

  26. intro.html standards.html “The standards process should focus on adding new

    low-level capabilities
  27. intro.html standards.html 4 things browser vendors want in a standards

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

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

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

    thing explains existing browser magic the thing can be extended
  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
  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 <input type=“date”>
  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 <input type=“date”>
  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 <input type=“date”>
  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 <input type=“date”>
  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 <input type=“date”>
  37. intro.html standards.html vendors.html you need to standardize the right thing

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

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

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

  41. intro.html standards.html vendors.html 2012ish: learn from what all component models

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

    have in common oops.html .html xbl2 htc javascripts
  43. intro.html standards.html vendors.html standardize ideas not implementations oops.html .html

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

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

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

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

    implementation encapsulation a space suit to breathe in space
  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)
  49. intro.html standards.html vendors.html oops.html .html this was exactly the web

    components proposal
  50. intro.html standards.html vendors.html oops.html .html <shiny-button></shiny-button>

  51. intro.html standards.html vendors.html oops.html .html <shiny-button></shiny-button> (maybe) implementation encapsulation a

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

    { constructor() { } connectedCallback() { } } customElements.define(‘shiny-button’, ShinyButton)
  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
  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
  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
  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
  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
  58. intro.html standards.html vendors.html oops.html .html because they’re low level you

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

    can optimize them
  60. intro.html standards.html vendors.html oops.html .html whew.

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

    .html polyfills.html
  62. intro.html standards.html vendors.html realtalk: browsers are made by humans and

    they need to sleep oops.html .html polyfills.html
  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
  64. intro.html standards.html vendors.html oops.html .html polyfills.html people don’t trust a

    standard unless it’s shipped on browsers
  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
  66. intro.html standards.html vendors.html oops.html .html polyfills.html

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

    polyfills oops.html .html polyfills.html
  68. intro.html standards.html vendors.html oops.html .html polyfills.html polyfills teleport your browser

    into the future
  69. intro.html standards.html vendors.html oops.html .html polyfills.html unlike diamonds, polyfills aren’t

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

    forever polyfill.io
  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
  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
  73. intro.html standards.html vendors.html after 7 years, your standard will actually

    be 6 months old! oops.html .html polyfills.html
  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
  75. intro.html standards.html vendors.html oops.html .html polyfills.html 1st email 1st polyfill

    polymer 0.1 v0 spec ships
  76. intro.html standards.html vendors.html questions we get asked a lot oops.html

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

    more successful? “
  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
  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!)
  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)
  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)
  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)
  83. intro.html standards.html vendors.html oops.html .html polyfills.html also.html

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

    polyfills.html also.html “
  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
  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
  87. intro.html standards.html vendors.html do web components toss view-source overboard? oops.html

    .html polyfills.html also.html “
  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
  89. outro.html what’s next?

  90. outro.html democratize web standards

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

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

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

  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