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

I/O ‘18で発表された
Polymer の update に見る Web Components の 過去/現在、そして未来/Jsfes-2018-summer

I/O ‘18で発表された
Polymer の update に見る Web Components の 過去/現在、そして未来/Jsfes-2018-summer

I/O ‘18で発表された
Polymer の発表を5分のLTに圧縮して紹介します

Kenichiro Kishida

May 19, 2018
Tweet

More Decks by Kenichiro Kishida

Other Decks in Technology

Transcript

  1. *0bͰൃද͞Εͨ

    1PMZNFSͷVQEBUFʹݟΔ
    8FC$PNQPOFOUTͷ
    աڈݱࡏɺͦͯ͠ະདྷ
    ॳՆͷ+BWB4DSJQUࡇ
    ,FOJDIJSP,JTIJEB
    !TJ[VIJLP

    View Slide

  2. ,FOJDIJSP,JTIJEB
    5PLZP +"1"/
    TJ[VIJLP!HNBJMDPN !TJ[VIJLP
    IUUQTHJUIVCDPNTJ[VIJLP
    IUUQCMPHPQFOUPLZPKQ

    View Slide

  3. )JTUPSZ

    View Slide

  4. 2013
    Polymer v0.0.20130711

    View Slide

  5. 2014
    Polymer v0.5

    View Slide

  6. 2015
    Polymer v1.0

    View Slide

  7. 2017
    Polymer v2.0

    View Slide

  8. 2018

    View Slide

  9. Polymer
    3.0

    View Slide

  10. w ࠷৽ͷόʔδϣϯ͸
    w όʔδϣϯ΋·ͩ·ͩݱ໾
    w (PPHMFͷ$ISPNFνʔϜ͕։ൃ
    w 1PMZpMMͰ͸ͳ͍
    1PMZNFS

    View Slide

  11. 8FC$PNQPOFOUT
    w4IBEPX%0.
    w$VTUPN&MFNFOUT
    w)5.-*NQPSUT
    w)5.-5FNQMBUFT
    https://github.com/w3c/webcomponents

    View Slide

  12. 6TF5IF1MBUGPSN

    View Slide

  13. View Slide

  14. url="https://www.googleapis.com/youtube/v3/search"
    params='{"part":"snippet", "q":"polymer", "key": "xxxx", "type": "video"}'
    handle-as="json" last-response="{{ajaxResponse}}">


    [[item.snippet.title]]
    sizing="cover" preload fade>
    [[item.snippet.description]]

    https://github.com/PolymerElements/iron-ajax

    View Slide

  15. View Slide

  16. w8FC$PNQPOFOUTΛ࡞ΔͨΊͷܰྔ'8
    wΞϓϦέʔγϣϯ΋࡞ΕΔ
    wঢ়ଶ؅ཧͱ͔͸ίϯϙʔωϯτ΍ผͷϥ
    ΠϒϥϦ͕ඞཁ
    wϑϧελοΫͰ͸ͳ͍
    w5ZQF4DSJQUαϙʔτ

    View Slide

  17. .BUFSJBMDPNQPOFOUT
    w (PPHMF*0Ͱൃද͞
    Εͨ৽͍͠σβΠϯͷ
    8FC$PNQPOFOUT
    w IUUQTHJUIVCDPN
    NBUFSJBMDPNQPOFOUT
    NBUFSJBMDPNQPOFOUT
    XFCDPNQPOFOUT
    w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP
    NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT
    EFNPTJOEFYIUNM

    View Slide

  18. -JU&MFNFOU
    w 1PMZNFSϕʔεͷ௒
    ܰྔ$VTUPN&MFNFOU
    ϕʔεΫϥε
    w IUUQTHJUIVCDPN
    1PMZNFSMJUFMFNFOU

    <br/>import {LitElement, html} from '@polymer/lit-element';<br/>class MyElement extends LitElement {<br/>static get properties() { return { mood: String }}<br/>_render({mood}) {<br/>return html`<style> .mood { color: green; } </style><br/>Web Components are <span class="mood">${mood}</span>!`;<br/>}<br/>}<br/>customElements.define('my-element', MyElement);<br/>

    View Slide

  19. 18"4UBSUFS,JU
    w 1PMZNFSͰ࡞ΒΕͨ
    18"σϞΞϓϦ
    w IUUQTHJUIVCDPN
    1PMZNFSQXB
    TUBSUFSLJU
    w IUUQTQXBTUBSUFS
    LJUBQQTQPUDPN

    View Slide

  20. https://polymer-jp.org/

    View Slide

  21. 11.28

    2017
    5.19

    2018
    ▶︎

    View Slide

  22. Polymer Versions
    • v1.11.0
    • v2.2.0
    • v3 (Preview)
    • 124

    releases
    • v1.11.3
    • v2.6.0
    • v3.0.2
    • 140

    releases
    ▶︎
    Up

    View Slide

  23. Polymer CLI Versions
    1.5.7 1.6.0
    ▶︎ Up

    View Slide

  24. 8IZVTF)5.-*NQPSU

    /FFEFE1PMZpMM
    #PXFS
    .BEFCZ1PMZNFS

    View Slide

  25. /FFE1PMZpMM

    View Slide

  26. UP&4.PEVMFT

    View Slide

  27. #PXFSUPOQN

    View Slide

  28. 8FBSFGSJFOET
    https://custom-elements-everywhere.com/

    View Slide

  29. ະདྷ

    View Slide

  30. w$444IBEPX1BSUT

    https://tabatkins.github.io/specs/css-shadow-parts/
    w$VTUPN&MFNFOU3FHJTUFST

    https://github.com/w3c/webcomponents/issues/716
    w1BDLBHFOBNFNBQT

    https://github.com/domenic/package-name-maps
    w)5.-.PEVMFT

    https://github.com/w3c/webcomponents/issues/645

    https://github.com/PolymerLabs/html-modules-toolkit
    w)5.-5FNQMBUF*OTUBOUJBUJPO

    https://github.com/w3c/webcomponents/blob/gh-pages/
    proposals/Template-Instantiation.md

    View Slide

  31. WJTJUNZCMPHHJUIVC
    https://github.com/sizuhiko
    http://blog.open.tokyo.jp

    View Slide