Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Mariko Kosaka
November 25, 2017

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

This is my talk slide I used at NodeFest Tokyo 2017

Mariko Kosaka

November 25, 2017

More Decks by Mariko Kosaka

Other Decks in Technology


  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

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

  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
 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

  44. Spec defines exactly how and when to handle piece of

  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

  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

  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

  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

  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

  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

  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