Save 37% off PRO during our Black Friday Sale! »

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に圧縮して紹介します

C4c161ae9eeeed8f161197410f7a228a?s=128

Kenichiro Kishida

May 19, 2018
Tweet

Transcript

  1. *0bͰൃද͞Εͨ
 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. .BUFSJBMDPNQPOFOUT 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. 8IZVTF)5.-*NQPSU  /FFEFE1PMZpMM #PXFS .BEFCZ1PMZNFS

  25. /FFE1PMZpMM

  26. UP&4.PEVMFT 

  27. #PXFSUPOQN

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

  29. ະདྷ

  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
  31. WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp