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

Polymer の update に見る Web Components の過去/現在、そして未来 / jsfes-2017-autumn

Polymer の update に見る Web Components の過去/現在、そして未来 / jsfes-2017-autumn

秋のJavaScript祭 in mixi 2017 のスライドです。
https://javascript-fes.doorkeeper.jp/events/66335

Kenichiro Kishida

November 18, 2017
Tweet

More Decks by Kenichiro Kishida

Other Decks in Technology

Transcript

  1. ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥

    J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε
  2. ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥

    J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ
  3. ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ 4BGBSJ͕4IBEPX%0.ʹରԠͨ͠ XFCDPNQPOFOUTPSH౷ҰԽ 1PMZNFS͕ൃද͞ΕΔ 1PMZNFS+BQBO͕ൃ଍ͨ͠ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ ೥ )5.-קࠂ


    9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ
  4. ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ

    ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ 4BGBSJ͕4IBEPX%0.ʹରԠͨ͠ XFCDPNQPOFOUTPSH౷ҰԽ 1PMZNFS͕ൃද͞ΕΔ 1PMZNFS+BQBO͕ൃ଍ͨ͠ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ
  5. )5.-5FNQMBUF <dom-module id="x-custom"> <template> Hello World from <span id="name"></span>! </template>

    <script> class MyElement extends Polymer.Element { static get is() { return 'x-custom' } ready() { super.ready(); this.$.name.textContent = this.tagName; } } </script> </dom-module>
  6. ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ

    ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ 4BGBSJ͕4IBEPX%0.ʹରԠͨ͠ XFCDPNQPOFOUTPSH౷ҰԽ 1PMZNFS͕ൃද͞ΕΔ 1PMZNFS+BQBO͕ൃ଍ͨ͠ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ
  7. ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ

    ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ 4BGBSJ͕4IBEPX%0.ʹରԠͨ͠ XFCDPNQPOFOUTPSH౷ҰԽ 1PMZNFS͕ൃද͞ΕΔ 1PMZNFS+BQBO͕ൃ଍ͨ͠ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ
  8. Polymer Versions • 1.9.1
 stable • 2.0.0
 stable • 109


    releases • 1.11.0
 stable • 2.2.0
 stable • 124
 releases ▶︎ Up Up Up
  9. • bosonic 1.0 • SkateJS
 5.0.7-β3 • x-tag
 1.5.11 •

    Slim.js
 3.0.6 Web Components Libraries • bosonic
 1.0 • SkateJS
 4.6.7 • x-tag
 1.5.11 • Slim.js
 2.9.9 ▶︎ Up Up
  10. What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5FNQMBUF 4IBEPX%0.

    $VTUPN&MFNFOUT )5.-*NQPSUT ✅ ✅ ✅ ✅ ✅ ‼ ✅ ✅ ✅ ‼ ✅ ‼ ✅ ✅ ✅ ✅
  11. What’s Next for Polymer (Polymer Summit 2017) ΑΓ  5PEBZ

    /BUJWF ‒ ❌ 4VQQPSUT%FFQ%FQFOEFODJFT ✅ ✅ 'JMF-FWFM /P#VOEMJOH3FRVJSFE ✅ ✅ )5.-*NQPSUT 
  12. &4.PEVMFT What’s Next for Polymer (Polymer Summit 2017) ΑΓ ✅

    /BUJWF ✅ 4VQQPSUT%FFQ%FQFOEFODJFT ✅ 'JMF-FWFM /P#VOEMJOH3FRVJSFE
  13. What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5FNQMBUF 4IBEPX%0.

    $VTUPN&MFNFOUT +4.PEVMFT ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅
  14. #PXFS What’s Next for Polymer (Polymer Summit 2017) ΑΓ 

    5PEBZ .BOBHFT%FQFOEFODJFT ✅ ✅ 3FTPMDFT7FSTJPO$POqJDUT ✅ ✅ *OTUBMMT'MBU%FQFOEFODZ5SFF ✅ ✅ "DUJWF$PNNVOJUZ ✅ ❌
  15. :BSO OQN What’s Next for Polymer (Polymer Summit 2017) ΑΓ

    ✅ .BOBHFT%FQFOEFODJFT ✅ 3FTPMDFT7FSTJPO$POqJDUT ✅ *OTUBMMT'MBU%FQFOEFODZ5SFF ✅ "DUJWF$PNNVOJUZ