Web Platform ... What is it ? (Webプラットフォームのつくり方)

Slide 1

Slide 1 text

WebϓϥοτϑΥʔϜ ͷͭ͘Γํ My talk will be in Japanese… I put what I plan to say in English here :)

Slide 2

Slide 2 text

Hi ! @kosamari Hi I’m Mariko, known as @kosamari on the Internet

Slide 3

Slide 3 text

Web DevRel at Google @kosamari I work at Google’s Web Developer Relations team

Slide 4

Slide 4 text

Back in 2015, I talk about knitting with JS at NodeFest. Not today tho!

Slide 5

Slide 5 text

Since then, I used my learnings from knitting project in my day job !

Slide 6

Slide 6 text

… of cause I’m still doing knit with JS as hobby.

Slide 7

Slide 7 text

new! @kosamari I’m a newbie in Web DevRel team at Google

Slide 8

Slide 8 text

“I’m on the platform team” “ϓϥοτϑΥʔϜνʔϜॴଐͰ͢” Working with Chrome team, we talk about “platform” … a lot

Slide 9

Slide 9 text

INVITE:   WebϓϥοτϑΥʔϜ meeting … in meeting invites

Slide 10

Slide 10 text

“X use web technology, but not on the platform” “͋Ε͸΢ΣϒςΫ࢖ͬͯΔ͚Ͳ ϓϥοτϑΥʔϜ͡Όͳ͍” … in conversations

Slide 11

Slide 11 text

“From the web platform point of view…” “ϓϥοτϑΥʔϜଆͱͯ͠͸…” … again and again

Slide 12

Slide 12 text

#UseThePlatform It’s even in the hashtag Polymer.js team use!

Slide 13

Slide 13 text

atformPlatformPlatformPlatfo mPlatformPlatformPlatformP atformPlatformPlatformPlatfo mPlatformPlatformPlatformP atformPlatformPlatformPlatfo mPlatformPlatformPlatformP atformPlatformPlatformPlatfo But I didn’t really know what “Platform” means

Slide 14

Slide 14 text

WebϓϥοτϑΥʔϜͬͯͳʹʁ Web Platform …

Slide 15

Slide 15 text

WebϓϥοτϑΥʔϜͬͯͳʹʁ Web Platform … what is it ?

Slide 16

Slide 16 text

Even though I can’t explain it, I use the word …

Slide 17

Slide 17 text

স … LOL I used it in my drawing even though I have no idea

Slide 18

Slide 18 text

WebϓϥοτϑΥʔϜͬͯͳʹʁ So I decided to ask Chrome engineers what the web platform is

Slide 19

Slide 19 text

“΢Σϒ༻ͷݴޠͰ࡞ΒΕͨϞϊ  ྫ͑͹΢ΣϒαΠτ΍΢ΣϒΞϓϦ” “Things you build, like websites and apps out of language of the web.” One engineer gave me this …

Slide 20

Slide 20 text

“A set of interoperably implemented technologies available to developers across web browsers” “΢Σϒϒϥ΢β্Ͱ։ൃऀ͕࢖͑Δ  ϒϥ΢βޓ׵ੑͷ͋ΔςΫϊϩδʔ܈” … and another one, we’re going to stick with this explanation for today

Slide 21

Slide 21 text

???????????????? I had no idea what he was saying at the time, let’s investigate!

Slide 22

Slide 22 text

plat·form  /ˈplatfôrm/  noun So let’s start by looking at the word platform

Slide 23

Slide 23 text

I know what platform is, I used be a PM for proprietarily video platform

Slide 24

Slide 24 text

But when I started developing for the web, no one was gatekeeping

Slide 25

Slide 25 text

Open Web Platform … because web is the open platform

Slide 26

Slide 26 text

The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. - W3C wiki This is a deﬁnition I copied from W3C wiki

Slide 27

Slide 27 text

The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. - W3C wiki Let’s start with open part

Slide 28

Slide 28 text

It’s really cool that every discussion about the web was done in public

Slide 29

Slide 29 text

There are archive of mailing lists dating back to 1991

Slide 30

Slide 30 text

BTW, this was the ﬁrst message logged in the archive … LOL

Slide 31

Slide 31 text

This is where you can ﬁnd historical discussion like proposal of IMG tag

Slide 32

Slide 32 text

The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. - W3C wiki So we got the open part covered, but …

Slide 33

Slide 33 text

The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. - W3C wiki ΢ΣϒΛՄೳʹ͢Δ How about the other parts?

Slide 34

Slide 34 text

As the usage of web changes from click to touch

Slide 35

Slide 35 text

The web platform adopted new events to support new interaction

Slide 36

Slide 36 text

As the web moves from document to application

Slide 37

Slide 37 text

File access was added to the web platform

Slide 38

Slide 38 text

The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. - W3C wiki ΢ΣϒΛՄೳʹ͢Δ If you think about it, this deﬁnition is parallel to the deﬁnition I got …

Slide 39

Slide 39 text

“A set of interoperably implemented technologies available to developers across web browsers” “΢Σϒϒϥ΢β্Ͱ։ൃऀ͕࢖͔ͭ͑Δ  ϒϥ΢βޓ׵ੑͷ͋ΔςΫϊϩδʔ܈” … from the Chrome engineer. Sounds similar right?

Slide 40

Slide 40 text

“A set of interoperably implemented technologies available to developers across web browsers” “΢Σϒϒϥ΢β্Ͱ։ൃऀ͕࢖͔ͭ͑Δ  ϒϥ΢βޓ׵ੑͷ͋ΔςΫϊϩδʔ܈” But how about interoperability part?

Slide 41

Slide 41 text

“copy each other’s bugs“  (we use to) “͓ޓ͍ͷόάΛίϐʔ͋͠͏“  (աڈͷ࿩Ͱ͢) I asked same Chrome engineer how they maintain interoperability

Slide 42

Slide 42 text

“write spec for standards“  (modern way) “ඪ४Խʹ޲͚ͯεϖοΫΛॻ͘“  (ݱࡏ) This is where web standards comes in

Slide 43

Slide 43 text

For example, every web API you use, has a speciﬁcation document

Slide 44

Slide 44 text

Spec deﬁnes exactly how and when to handle piece of code

Slide 45

Slide 45 text

“ͳΜͰඪ४ԽʹίϯτϦϏϡʔτ͠ͳ͍ͷʁ” “Why don't you contribute to standards?” As I was researching, one of my coworker asked me this question …

Slide 46

Slide 46 text

ͳ͍ͳ͍ no way ͳ͍Θʔ not me θολΠͳ͍ deﬁnitely not me I somehow thought standards spec writing is not for me

Slide 47

Slide 47 text

But as I keep researching, I found out it’s a lot like software development

Slide 48

Slide 48 text

Existing Spec For example, if you want to make change to existing spec …

Slide 49

Slide 49 text

… like HTML spec, which is deﬁned by WHATWG

Slide 50

Slide 50 text

It’s all maintained on Github, they even have “good ﬁrst bug”

Slide 51

Slide 51 text

Spec edits are often grammar or language change as simple as this PR

Slide 52

Slide 52 text

Web platform spec even has tests !

Slide 53

Slide 53 text

It’s all JS inside HTML ﬁle, really interesting to read BTW.

Slide 54

Slide 54 text

New Idea If you have new idea for the web platform …

Slide 55

Slide 55 text

… you can start discussion by going to WICG

Slide 56

Slide 56 text

We will develop specs/use case documents like we develop any open source software. - W3C blog  WICG: Evolving the Web from the ground up Φʔϓϯιʔειϑτ΢ΣΞΛ࡞ΔΑ͏ʹεϖοΫΛॻ͘ This is the reason why WICG was made

Slide 57

Slide 57 text

Every discussion starts with a thread on Discourse

Slide 58

Slide 58 text

When you make a thread, you usually include a explainer document

Slide 59

Slide 59 text

Once enough discussion was had, it moves into own repo under WICG

Slide 60

Slide 60 text

Once that’s worked enough, then they ask to move to working group

Slide 61

Slide 61 text

Once that’s done, your proposal will be a working group under W3C

Slide 62

Slide 62 text

… aaaaand within the W3C there are even more process to create spec

Slide 63

Slide 63 text

You can read it in there if you want, my point is … a lot of steps !

Slide 64

Slide 64 text

You can see status of each spec when you search APIs on MDN :)

Slide 65

Slide 65 text

So the process of creating a spec is a lot of discussions

Slide 66

Slide 66 text

And it takes time, loooooooooong time, but there is a reason

Slide 67

Slide 67 text

ޙํޓ׵ੜΛอͪͭͭ…  Backward compatibility কདྷͷ͜ͱ΋૝ఆ͢Δ  Future prooﬁng Because the web has to think about the past as well as the future

Slide 68

Slide 68 text

For example, let’s see why custom element name has to be hyphenated

Slide 69

Slide 69 text

Like… why ? Isn’t it more clean to NOT have hyphen?

Slide 70

Slide 70 text

  < > < data=“[1,2,3]”> > > Spec authors had to think about naming of custom elements

Slide 71

Slide 71 text

One idea was to use colon name space, but that’s already taken by SVG

Slide 72

Slide 72 text

Tab Content What about x- ? But putting x- on everything is kind of obnoxious

Slide 73

Slide 73 text

(native HTML : ) Thus it became hyphenated for custom and non hyphenated for native

Slide 74

Slide 74 text

Standards Body W3C WHATWG Unicode IETF Ecma Here are few standard bodies that a web browser deals with

Slide 75

Slide 75 text

ECMAScript  (ECMA-262) ओͳࡦఆ͸ TC39 Let’s talk about JS(ECMAScript) specked by TC39 at Ecma International

Slide 76

Slide 76 text

TC39ͷϝϯόʔ TC39 attendees are often described as “member”, that’s not quite true

Slide 77

Slide 77 text

TC39ͷϛʔςΟϯάࢀՃऀ TC39ͷϝϯόʔ It’s more like a member company’s delicate to TC39 meeting

Slide 78

Slide 78 text

TC39ͷϛʔςΟϯάࢀՃऀ TC39ͷϝϯόʔ (ࢀՃࢿ֨: Ecma Internationalͷϝϯόʔاۀͱͦͷট଴ऀ) No exam/vote to attend TC39 meeting, just have to be Ecma member

Slide 79

Slide 79 text

Much like other standards, ECMAScript spec is all hosted on Github

Slide 80

Slide 80 text

… and anyone* (*more on that later) can make proposal on Github

Slide 81

Slide 81 text

Proposals are evaluated in “stage” process

Slide 82

Slide 82 text

2ϲ݄ʹҰ౓ʢGithubʹΞδΣϯμʣ  Every 2months (agendas on Gihub) ٞ࿦͸੍࣌ؒݶ͖ͭ Time Boxed ϏδϣϯϓϨθϯ͕ؒʹೖΔ Vision Presentation Typical meeting includes proposal discussion as well as presentations

Slide 83

Slide 83 text

ϛʔςΟϯάͰͷΈεςʔδલਐʗมߋϚʔδ Stage change & PR merge are only decided at the meeting Decisions are almost all made at the meeting, so if you have a proposal…

Slide 84

Slide 84 text

ٞ࿦ɾܾٞ͸͚ͬ͜͏ײ৘త A lot of feelings are discussed …you have to ﬁnd “champion” who can present yours at the meeting

Slide 85

Slide 85 text

աڈͷٞ࿦ɾྺ࢙తഎܠ΋ٞ࿦ͷత Previous discussions & historical facts are also discussed Discussions are quite interesting, if you are history nerd like me

Slide 86

Slide 86 text

ϓϩηεͷݟ௚ٞ͠࿦΋ଟ͍ discussion about process happens often … but also a lot frustrating time to time

Slide 87

Slide 87 text

ٕज़ྗ͚ͩͰͳ͘ަবज़΋͔ͳΓॏཁ negotiation technique is important Some proposal do really well, and some stalls

Slide 88

Slide 88 text

ΰʔϧ͢Δ·Ͱ͸ͳʹ͕ى͜Δ͔Θ͔Βͳ͍ You never know what happens to a proposal Proposals in stage 0 - 3 can change or disappear at any point

Slide 89

Slide 89 text

͢΂ͯ͸ϢʔβʔͷͨΊ all for users But at the end of the day, those discussions are for users :)

Slide 90

Slide 90 text

So if you were like me who thought web standards are not for you …

Slide 91

Slide 91 text

… I hope this talk made it a lot more approachable!

Slide 92

Slide 92 text

Thank you !   Mariko Kosaka @kosamari Image credit: hourglass, coding, hand, browser, ﬁle folder, ﬁnger double tap, no money, calendar, cursor, internet, and Happy Man - Human Resource And Life Style Collection, by BomSymbols smile, smirk, laugh by Clara Joy | chick, smartphone browser by Royyan Wijaya | browser by Kimmi Studio | browsers by unlimicon, browser by Mello | app by Henrique Ourique | computer by Creative Mania spaceman by Nook Fulloption