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
Tweet

More Decks by Mariko Kosaka

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. INVITE: 

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. WebϓϥοτϑΥʔϜͬͯͳʹʁ
    Web Platform …

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  19. “΢Σϒ༻ͷݴޠͰ࡞ΒΕͨϞϊ

    ྫ͑͹΢ΣϒαΠτ΍΢ΣϒΞϓϦ”
    “Things you build, like websites and apps
    out of language of the web.”
    One engineer gave me this …

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  22. plat·form

    /ˈplatfôrm/

    noun
    So let’s start by looking at the word platform

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. Open Web Platform
    … because web is the open platform

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  29. There are archive of mailing lists dating back to 1991

    View full-size slide

  30. BTW, this was the first message logged in the archive … LOL

    View full-size slide

  31. This is where you can find historical discussion like proposal of IMG tag

    View full-size slide

  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 …

    View full-size slide

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

    View full-size slide

  34. As the usage of web changes from click to touch

    View full-size slide

  35. The web platform adopted new events to support new interaction

    View full-size slide

  36. As the web moves from document to application

    View full-size slide

  37. File access was added to the web platform

    View full-size slide

  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 …

    View full-size slide

  39. “A set of interoperably implemented technologies available to
    developers across web browsers”
    “΢Σϒϒϥ΢β্Ͱ։ൃऀ͕࢖͔ͭ͑Δ

    ϒϥ΢βޓ׵ੑͷ͋ΔςΫϊϩδʔ܈”
    … from the Chrome engineer. Sounds similar right?

    View full-size slide

  40. “A set of interoperably implemented technologies available to
    developers across web browsers”
    “΢Σϒϒϥ΢β্Ͱ։ൃऀ͕࢖͔ͭ͑Δ

    ϒϥ΢βޓ׵ੑͷ͋ΔςΫϊϩδʔ܈”
    But how about interoperability part?

    View full-size slide

  41. “copy each other’s bugs“

    (we use to)
    “͓ޓ͍ͷόάΛίϐʔ͋͠͏“

    (աڈͷ࿩Ͱ͢)
    I asked same Chrome engineer how they maintain interoperability

    View full-size slide

  42. “write spec for standards“

    (modern way)
    “ඪ४Խʹ޲͚ͯεϖοΫΛॻ͘“

    (ݱࡏ)
    This is where web standards comes in

    View full-size slide

  43. For example, every web API you use, has a specification document

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. ͳ͍ͳ͍ no way
    ͳ͍Θʔ not me
    θολΠͳ͍ definitely not me
    I somehow thought standards spec writing is not for me

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. … like HTML spec, which is defined by WHATWG

    View full-size slide

  50. It’s all maintained on Github, they even have “good first bug”

    View full-size slide

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

    View full-size slide

  52. Web platform spec even has tests !

    View full-size slide

  53. It’s all JS inside HTML file, really interesting to read BTW.

    View full-size slide

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

    View full-size slide

  55. … you can start discussion by going to WICG

    View full-size slide

  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

    View full-size slide

  57. Every discussion starts with a thread on Discourse

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  67. ޙํޓ׵ੜΛอͪͭͭ…

    Backward compatibility
    কདྷͷ͜ͱ΋૝ఆ͢Δ

    Future proofing
    Because the web has to think about the past as well as the future

    View full-size slide






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

    View full-size slide






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

    View full-size slide



  70. < >
    < data=“[1,2,3]”> >
    >


    Spec authors had to think about naming of custom elements

    View full-size slide





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

    View full-size slide



  72. Tab
    Content

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  75. ECMAScript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  81. Proposals are evaluated in “stage” process

    View full-size slide

  82. 2ϲ݄ʹҰ౓ʢGithubʹΞδΣϯμʣ

    Every 2months (agendas on Gihub)
    ٞ࿦͸੍࣌ؒݶ͖ͭ
    Time Boxed
    ϏδϣϯϓϨθϯ͕ؒʹೖΔ
    Vision Presentation
    Typical meeting includes proposal discussion as well as presentations

    View full-size slide

  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…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide