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

This is my talk slide I used at NodeFest Tokyo 2017

Transcript

1. WebϓϥοτϑΥʔϜ ͷͭ͘Γํ My talk will be in Japanese… I put what I plan to say in English here :)
2. Hi ! @kosamari Hi I’m Mariko, known as @kosamari on the Internet
3. Web DevRel at Google @kosamari I work at Google’s Web Developer Relations team
4. Back in 2015, I talk about knitting with JS at NodeFest. Not today tho!
5. Since then, I used my learnings from knitting project in my day job !
6. … of cause I’m still doing knit with JS as hobby.
7. new! @kosamari I’m a newbie in Web DevRel team at Google
8. “I’m on the platform team” “ϓϥοτϑΥʔϜνʔϜॴଐͰ͢” Working with Chrome team, we talk about “platform” … a lot
9. INVITE: 
 WebϓϥοτϑΥʔϜ meeting … in meeting invites
10. “X use web technology, but not on the platform” “͋Ε͸΢ΣϒςΫ࢖ͬͯΔ͚Ͳ ϓϥοτϑΥʔϜ͡Όͳ͍” … in conversations
11. “From the web platform point of view…” “ϓϥοτϑΥʔϜଆͱͯ͠͸…” … again and again
12. #UseThePlatform It’s even in the hashtag Polymer.js team use!
13. atformPlatformPlatformPlatfo mPlatformPlatformPlatformP atformPlatformPlatformPlatfo mPlatformPlatformPlatformP atformPlatformPlatformPlatfo mPlatformPlatformPlatformP atformPlatformPlatformPlatfo But I didn’t really know what “Platform” means
14. WebϓϥοτϑΥʔϜͬͯͳʹʁ Web Platform …
15. WebϓϥοτϑΥʔϜͬͯͳʹʁ Web Platform … what is it ?
16. Even though I can’t explain it, I use the word …
17. স … LOL I used it in my drawing even though I have no idea
18. WebϓϥοτϑΥʔϜͬͯͳʹʁ So I decided to ask Chrome engineers what the web platform is
19. “΢Σϒ༻ͷݴޠͰ࡞ΒΕͨϞϊ
 ྫ͑͹΢ΣϒαΠτ΍΢ΣϒΞϓϦ” “Things you build, like websites and apps out of language of the web.” One engineer gave me this …
20. “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
21. ???????????????? I had no idea what he was saying at the time, let’s investigate!
22. plat·form
 /ˈplatfôrm/
 noun So let’s start by looking at the word platform
23. I know what platform is, I used be a PM for proprietarily video platform
24. But when I started developing for the web, no one was gatekeeping
25. Open Web Platform … because web is the open platform
26. 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
27. The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. - W3C wiki Let’s start with open part
28. It’s really cool that every discussion about the web was done in public
29. There are archive of mailing lists dating back to 1991
30. BTW, this was the first message logged in the archive … LOL
31. This is where you can find historical discussion like proposal of IMG tag
32. 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 …
33. The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. - W3C wiki ΢ΣϒΛՄೳʹ͢Δ How about the other parts?
34. As the usage of web changes from click to touch
35. The web platform adopted new events to support new interaction
36. As the web moves from document to application
37. File access was added to the web platform
38. 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 …
39. “A set of interoperably implemented technologies available to developers across web browsers” “΢Σϒϒϥ΢β্Ͱ։ൃऀ͕࢖͔ͭ͑Δ
 ϒϥ΢βޓ׵ੑͷ͋ΔςΫϊϩδʔ܈” … from the Chrome engineer. Sounds similar right?
40. “A set of interoperably implemented technologies available to developers across web browsers” “΢Σϒϒϥ΢β্Ͱ։ൃऀ͕࢖͔ͭ͑Δ
 ϒϥ΢βޓ׵ੑͷ͋ΔςΫϊϩδʔ܈” But how about interoperability part?
41. “copy each other’s bugs“
 (we use to) “͓ޓ͍ͷόάΛίϐʔ͋͠͏“
 (աڈͷ࿩Ͱ͢) I asked same Chrome engineer how they maintain interoperability
42. “write spec for standards“
 (modern way) “ඪ४Խʹ޲͚ͯεϖοΫΛॻ͘“
 (ݱࡏ) This is where web standards comes in
43. For example, every web API you use, has a specification document
44. Spec defines exactly how and when to handle piece of code
45. “ͳΜͰඪ४ԽʹίϯτϦϏϡʔτ͠ͳ͍ͷʁ” “Why don't you contribute to standards?” As I was researching, one of my coworker asked me this question …
46. ͳ͍ͳ͍ no way ͳ͍Θʔ not me θολΠͳ͍ definitely not me I somehow thought standards spec writing is not for me
47. But as I keep researching, I found out it’s a lot like software development
48. Existing Spec For example, if you want to make change to existing spec …
49. … like HTML spec, which is defined by WHATWG
50. It’s all maintained on Github, they even have “good first bug”
51. Spec edits are often grammar or language change as simple as this PR
52. Web platform spec even has tests !
53. It’s all JS inside HTML file, really interesting to read BTW.
54. New Idea If you have new idea for the web platform …
55. … you can start discussion by going to WICG
56. 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
57. Every discussion starts with a thread on Discourse
58. When you make a thread, you usually include a explainer document
59. Once enough discussion was had, it moves into own repo under WICG
60. Once that’s worked enough, then they ask to move to working group
61. Once that’s done, your proposal will be a working group under W3C
62. … aaaaand within the W3C there are even more process to create spec
63. You can read it in there if you want, my point is … a lot of steps !
64. You can see status of each spec when you search APIs on MDN :)
65. So the process of creating a spec is a lot of discussions
66. And it takes time, loooooooooong time, but there is a reason
67. ޙํޓ׵ੜΛอͪͭͭ…
 Backward compatibility কདྷͷ͜ͱ΋૝ఆ͢Δ
 Future proofing Because the web has to think about the past as well as the future
68. <why-hyphenate> <dashboard> <chart data=“[1,2,3]”></chart> <table></table> <dashboard> For example, let’s see why custom element name has to be hyphenated
69. <why-hyphenate> <my-dashboard> <bar-chart data=“[1,2,3]”></bar-chart> <table></table> <my-dashboard> Like… why ? Isn’t it more clean to NOT have hyphen?
70. <body> <main>
 < > < data=“[1,2,3]”></ > </ > </main> </body> Spec authors had to think about naming of custom elements
71. <custom:element> <svg:svg width="300px" height="200px"> <svg:circle cx="150" cy="100" r="50"/> </svg:svg> One idea was to use colon name space, but that’s already taken by SVG
72. <x-customelement> <x-mytabs> <x-mytab>Tab</x-mytab> <x-mypanel>Content</x-mypanel> </x-mytabs> What about x- ? But putting x- on everything is kind of obnoxious
73. <custom-element> (native HTML : <newElement>) Thus it became hyphenated for custom and non hyphenated for native
74. Standards Body W3C WHATWG Unicode IETF Ecma Here are few standard bodies that a web browser deals with
75. ECMAScript
 (ECMA-262) ओͳࡦఆ͸ TC39 Let’s talk about JS(ECMAScript) specked by TC39 at Ecma International
76. TC39ͷϝϯόʔ TC39 attendees are often described as “member”, that’s not quite true
77. TC39ͷϛʔςΟϯάࢀՃऀ TC39ͷϝϯόʔ It’s more like a member company’s delicate to TC39 meeting
78. TC39ͷϛʔςΟϯάࢀՃऀ TC39ͷϝϯόʔ (ࢀՃࢿ֨: Ecma Internationalͷϝϯόʔاۀͱͦͷট଴ऀ) No exam/vote to attend TC39 meeting, just have to be Ecma member
79. Much like other standards, ECMAScript spec is all hosted on Github
80. … and anyone* (*more on that later) can make proposal on Github
81. Proposals are evaluated in “stage” process
82. 2ϲ݄ʹҰ౓ʢGithubʹΞδΣϯμʣ
 Every 2months (agendas on Gihub) ٞ࿦͸੍࣌ؒݶ͖ͭ Time Boxed ϏδϣϯϓϨθϯ͕ؒʹೖΔ Vision Presentation Typical meeting includes proposal discussion as well as presentations
83. ϛʔςΟϯάͰͷΈεςʔδલਐʗมߋϚʔδ Stage change & PR merge are only decided at the meeting Decisions are almost all made at the meeting, so if you have a proposal…
84. ٞ࿦ɾܾٞ͸͚ͬ͜͏ײ৘త A lot of feelings are discussed …you have to find “champion” who can present yours at the meeting
85. աڈͷٞ࿦ɾྺ࢙తഎܠ΋ٞ࿦ͷత Previous discussions & historical facts are also discussed Discussions are quite interesting, if you are history nerd like me
86. ϓϩηεͷݟ௚ٞ͠࿦΋ଟ͍ discussion about process happens often … but also a lot frustrating time to time
87. ٕज़ྗ͚ͩͰͳ͘ަবज़΋͔ͳΓॏཁ negotiation technique is important Some proposal do really well, and some stalls
88. ΰʔϧ͢Δ·Ͱ͸ͳʹ͕ى͜Δ͔Θ͔Βͳ͍ You never know what happens to a proposal Proposals in stage 0 - 3 can change or disappear at any point
89. ͢΂ͯ͸ϢʔβʔͷͨΊ all for users But at the end of the day, those discussions are for users :)
90. So if you were like me who thought web standards are not for you …
91. … I hope this talk made it a lot more approachable!
92. 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