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

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

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