How to train your dragon (web standard)

Slide 1

Slide 1 text

title-slide-ﬁnal_updated.html how to train your dragon web standard

Slide 2

Slide 2 text

about.html title-slide-ﬁnal_updated.html @notwaldorf

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

intro.html how to train your dragon web standard

Slide 5

Slide 5 text

intro.html ﬁrst, you need a dragon problem

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

intro.html complain about it around browser people

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

intro.html standards.html railroads use standard tracks

Slide 14

Slide 14 text

intro.html standards.html hot dogs don’t

Slide 15

Slide 15 text

intro.html standards.html hot dogs don’t

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

intro.html 2011: standards.html

Slide 19

Slide 19 text

intro.html 2011: standards.html 2017: sigh

Slide 20

Slide 20 text

intro.html standards.html

Slide 21

Slide 21 text

intro.html standards.html :/

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

intro.html standards.html extensible web manifesto 2013:

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

intro.html standards.html vendors.html 2017: why is progress so slow? oops.html .html polyﬁlls.html

Slide 62

Slide 62 text

intro.html standards.html vendors.html realtalk: browsers are made by humans and they need to sleep oops.html .html polyﬁlls.html

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

intro.html standards.html vendors.html oops.html .html polyﬁlls.html people don’t trust a standard unless it’s shipped on browsers

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

intro.html standards.html vendors.html oops.html .html polyﬁlls.html

Slide 67

Slide 67 text

intro.html standards.html vendors.html we should be waaaaaaaaaay more stoked about polyﬁlls oops.html .html polyﬁlls.html

Slide 68

Slide 68 text

intro.html standards.html vendors.html oops.html .html polyﬁlls.html polyﬁlls teleport your browser into the future

Slide 69

Slide 69 text

intro.html standards.html vendors.html oops.html .html polyﬁlls.html unlike diamonds, polyﬁlls aren’t forever

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

intro.html standards.html vendors.html after 7 years, your standard will actually be 6 months old! oops.html .html polyﬁlls.html

Slide 74

Slide 74 text

intro.html standards.html vendors.html oops.html .html polyﬁlls.html 2010 2012 2014 2017 1st email 1st polyﬁll polymer 0.1 v0 spec ships

Slide 75

Slide 75 text

intro.html standards.html vendors.html oops.html .html polyﬁlls.html 1st email 1st polyﬁll polymer 0.1 v0 spec ships

Slide 76

Slide 76 text

intro.html standards.html vendors.html questions we get asked a lot oops.html .html polyﬁlls.html also.html

Slide 77

Slide 77 text

intro.html standards.html vendors.html oops.html .html polyﬁlls.html also.html why isn’t it more successful? “

Slide 78

Slide 78 text

intro.html standards.html vendors.html why isn’t it more successful? oops.html .html polyﬁlls.html also.html “ why aren’t we using it? “ usually means

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

intro.html standards.html vendors.html oops.html .html polyﬁlls.html also.html

Slide 84

Slide 84 text

intro.html standards.html vendors.html is it viable without polymer? oops.html .html polyﬁlls.html also.html “

Slide 85

Slide 85 text

intro.html standards.html vendors.html is it viable without polymer? oops.html .html polyﬁlls.html also.html “ we’ve done bad dev rel-ing usually means

Slide 86

Slide 86 text

intro.html standards.html vendors.html oops.html .html polyﬁlls.html also.html new API documented best practices   explained libraries do best practices framework interop utopia

Slide 87

Slide 87 text

intro.html standards.html vendors.html do web components toss view-source overboard? oops.html .html polyﬁlls.html also.html “

Slide 88

Slide 88 text

intro.html standards.html vendors.html if the browser understands the semantics of your element it can add tools for it oops.html .html polyﬁlls.html also.html

Slide 89

Slide 89 text

outro.html what’s next?

Slide 90

Slide 90 text

outro.html democratize web standards

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

outro.html shaping web standards shapes the web platform

Slide 94

Slide 94 text

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