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 definition 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 first message logged in the archive … LOL
Slide 31
Slide 31 text
This is where you can find 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 definition is parallel to the definition 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 specification document
Slide 44
Slide 44 text
Spec defines 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
θολΠͳ͍ definitely 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 defined by WHATWG
Slide 50
Slide 50 text
It’s all maintained on Github, they even have “good first 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 file, 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 proofing
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 find “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, file folder, finger 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