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

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

C4c161ae9eeeed8f161197410f7a228a?s=128

Kenichiro Kishida

November 18, 2017
Tweet

Transcript

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

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

  3. )JTUPSZ

  4. ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ

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

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

  7. ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ J1IPOF͕ൃച

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

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

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

    J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ
  11. ೥ 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͕ঝೝ͞ΕΔ
  12. ೥ )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.-קࠂ
  13. 8FC$PNQPOFOUT w4IBEPX%0. w$VTUPN&MFNFOUT w)5.-*NQPSUT w)5.-5FNQMBUFT https://github.com/w3c/webcomponents

  14. 4IBEPX%0.

  15. $VTUPN&MFNFOUT 定義: class MyPolymerElement extends Polymer.Element { ... } customElements.define('my-polymer-element',

    MyPolymerElement); 利用方法: <my-polymer-element></my-polymer-element>
  16. )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>
  17. )5.-*NQPSUT <head> <link rel="import" href="/path/to/imports/stuff.html"> </head>

  18. 1PMZNFS https://www.polymer-project.org

  19. None
  20. ೥ )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.-קࠂ
  21. ೥ )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.-קࠂ
  22. 6TF5IF1MBUGPSN

  23. w1PMZNFS&MFNFOUεʔύʔΫϥε wΠϕϯτϋϯυϦϯά wσʔλγεςϜ wϔϧύʔΤϨϝϯτ w$-*πʔϧ

  24. ೔ຊͰ͸ʜ

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

  26. 5.27
 2017 11.28
 2017 ▶︎

  27. 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
  28. Polymer CLI Versions 1.1.0 1.5.7 ▶︎ Up

  29. Polyfill Versions 1.0.1 1.0.17 ▶︎ Up Bower Bower

  30. • 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
  31. 1PMZNFS4VNNJU

  32. What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5FNQMBUF 4IBEPX%0.

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

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

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

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

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

    ✅ .BOBHFT%FQFOEFODJFT ✅ 3FTPMDFT7FSTJPO$POqJDUT ✅ *OTUBMMT'MBU%FQFOEFODZ5SFF ✅ "DUJWF$PNNVOJUZ
  38. 4&04IBSJOH https://render-tron.appspot.com/

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

  40. ͦ͏ͩ1PMZNFS࢖͓͏

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