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

Transcript

1. *0
   bͰൃද͞Εͨ
 1PMZNFS
   ͷ
   VQEBUF
   ʹݟΔ
   8FC
   $PNQPOFOUT
   ͷ
   աڈݱࡏɺͦͯ͠ະདྷ 
   ॳՆͷ+BWB4DSJQUࡇ
    ,FOJDIJSP
   ,JTIJEB
   !TJ[VIJLP

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

3. )JTUPSZ

4. 2013 Polymer v0.0.20130711

5. 2014 Polymer v0.5

6. 2015 Polymer v1.0

7. 2017 Polymer v2.0

8. 2018

9. Polymer 3.0

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

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

12. 6TF5IF1MBUGPSN

13. None

14. <iron-ajax auto url="https://www.googleapis.com/youtube/v3/search" params='{"part":"snippet", "q":"polymer", "key": "xxxx", "type": "video"}' handle-as="json"

    last-response="{{ajaxResponse}}"></iron-ajax> <template is="dom-repeat" items="[[ajaxResponse.items]]"> <div class="horizontal-section"> <h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2> <iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image> <p>[[item.snippet.description]]</p> </div> </template> https://github.com/PolymerElements/iron-ajax
15. None

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

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

    w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT EFNPTJOEFYIUNM

18. -JU&MFNFOU w 1PMZNFSϕʔεͷ௒ ܰྔ
    $VTUPN&MFNFOU ϕʔεΫϥε
    w IUUQTHJUIVCDPN 1PMZNFSMJUFMFNFOU <script src="node_modules/@webcomponents/webcomponents-bundle.js"></script>

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

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

    LJUBQQTQPUDPN

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

21. 11.28
 2017 5.19
 2018 ▶︎

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

23. Polymer CLI Versions 1.5.7 1.6.0 ▶︎ Up

24. 8IZ
    VTF
    )5.-
    *NQPSU  /FFEFE
    1PMZpMM #PXFS
     .BEF
    CZ
    1PMZNFS

25. /FFE
    1PMZpMM
    

26. UP
    &4
    .PEVMFT 

27. #PXFS
    UP
    OQN

28. 8F
    BSF
    GSJFOET https://custom-elements-everywhere.com/

29. ະདྷ

30. w$44
    4IBEPX
    1BSUT
 https://tabatkins.github.io/specs/css-shadow-parts/
    w$VTUPN
    &MFNFOU
    3FHJTUFST
 https://github.com/w3c/webcomponents/issues/716
    w1BDLBHF
    OBNF
    NBQT
 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

31. WJTJU
    NZ
    CMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp