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

Slide 1

Slide 1 text

1PMZNFSͷVQEBUFʹݟΔ 8FC$PNQPOFOUTͷ աڈݱࡏɺͦͯ͠ະདྷ 'VLVPLBQIQ7PM ,FOJDIJSP,JTIJEB !TJ[VIJLP

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

)JTUPSZ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

೥ 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͕ঝೝ͞ΕΔ

Slide 12

Slide 12 text

೥ )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.-קࠂ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

4IBEPX%0.

Slide 15

Slide 15 text

$VTUPN&MFNFOUT 定義: class MyPolymerElement extends Polymer.Element { ... } customElements.define('my-polymer-element', MyPolymerElement); 利用方法:

Slide 16

Slide 16 text

)5.-5FNQMBUF Hello World from ! class MyElement extends Polymer.Element { static get is() { return 'x-custom' } ready() { super.ready(); this.$.name.textContent = this.tagName; } }

Slide 17

Slide 17 text

)5.-*NQPSUT

Slide 18

Slide 18 text

https://speakerdeck.com/akase244/phpergaweb-componentsnituitekao-etemita-number-phpkansai

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

6TF5IF1MBUGPSN

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

೔ຊͰ͸ʜ

Slide 26

Slide 26 text

1PMZNFS4VNNJU

Slide 27

Slide 27 text

What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5FNQMBUF 4IBEPX%0. $VTUPN&MFNFOUT )5.-*NQPSUT ✅ ✅ ✅ ✅ ✅ ‼ ✅ ✅ ✅ ‼ ✅ ‼ ✅ ✅ ✅ ✅

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5FNQMBUF 4IBEPX%0. $VTUPN&MFNFOUT +4.PEVMFT ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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