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

Polymer Summit 2017 にて Polymer 3.0 の tech プレビュー版が発表/公開されました。そこで見えてきたのはブラウザサポートにおける Web Components 仕様の変化でした。
本セッションではそれらを含めたWeb Componentsの過去から未来まで解説します。

Transcript

1. 1PMZNFS
   ͷ
   VQEBUF
   ʹݟΔ
   8FC
   $PNQPOFOUT
   ͷ
   աڈݱࡏɺͦͯ͠ະདྷ 'VLVPLBQIQ
   7PM ,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
   &YUFOTJCMF
   8FC
   .BOJGFTUP
   ͕ൃද
   
   1PMZNFS
   W
   ϦϦʔε ೥
   
   )5.-
   
   קࠂ

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

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

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

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

    9.-)UUQ3FRVFTU
    ͕
    *&
    ʹ࣮૷͞ΕΔ ೥
    
    "KBY
    ͕༗໊ʹͳΔ
    
    8FC
    ͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥
    
    J1IPOF
    ͕ൃച ೥
    
    8FC
    $PNQPOFOUT
    Λ
    (PPHMF
    ͕ఏҊ ೥
    
    5IF
    &YUFOTJCMF
    8FC
    .BOJGFTUP
    ͕ൃද
    
    1PMZNFS
    W
    ϦϦʔε ೥
    
    )5.-
    קࠂ
    
    1PMZNFS
    
    ͕ϦϦʔε͞ΕΔ ೥
    
    1PMZNFS
    
    ͕ϦϦʔε͞ΕΔ
    
    )551
    ͕ঝೝ͞ΕΔ ೥
    
    1PMZNFS
    
    ͕ϦϦʔε͞ΕΔ
    
    4BGBSJ
    ͕
    4IBEPX
    %0.
    ʹରԠͨ͠
    
    XFCDPNQPOFOUTPSH
    ౷ҰԽ
    
    1PMZNFS
    
    ͕ൃද͞ΕΔ
    
    1PMZNFS
    +BQBO
    ͕ൃ଍ͨ͠
    
    4FSWJDF
    8PSLFS
    ͕
    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. https://speakerdeck.com/akase244/phpergaweb-componentsnituitekao-etemita-number-phpkansai
19. 1PMZNFS https://www.polymer-project.org
21. ೥
    
    )5.-
    
    קࠂ

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

    9.-)UUQ3FRVFTU
    ͕
    *&
    ʹ࣮૷͞ΕΔ ೥
    
    "KBY
    ͕༗໊ʹͳΔ
    
    8FC
    ͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥
    
    J1IPOF
    ͕ൃച ೥
    
    8FC
    $PNQPOFOUT
    Λ
    (PPHMF
    ͕ఏҊ ೥
    
    5IF
    &YUFOTJCMF
    8FC
    .BOJGFTUP
    ͕ൃද
    
    1PMZNFS
    W
    ϦϦʔε ೥
    
    )5.-
    קࠂ
    
    1PMZNFS
    
    ͕ϦϦʔε͞ΕΔ ೥
    
    1PMZNFS
    
    ͕ϦϦʔε͞ΕΔ
    
    )551
    ͕ঝೝ͞ΕΔ ೥
    
    1PMZNFS
    
    ͕ϦϦʔε͞ΕΔ
    
    4BGBSJ
    ͕
    4IBEPX
    %0.
    ʹରԠͨ͠
    
    XFCDPNQPOFOUTPSH
    ౷ҰԽ
    
    1PMZNFS
    
    ͕ൃද͞ΕΔ
    
    1PMZNFS
    +BQBO
    ͕ൃ଍ͨ͠
    
    4FSWJDF
    8PSLFS
    ͕
    8FCLJU
    Ͱ։ൃதʹ
    
    )5.-
    
    קࠂ
23. 6TF5IF1MBUGPSN
24. w1PMZNFS&MFNFOU
    εʔύʔΫϥε
    wΠϕϯτϋϯυϦϯά
    wσʔλγεςϜ
    wϔϧύʔΤϨϝϯτ
    w$-*πʔϧ
25. ೔ຊͰ͸ʜ
26. 1PMZNFS
    4VNNJU
    
27. What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5FNQMBUF 4IBEPX
    %0. $VTUPN
    &MFNFOUT )5.-
    *NQPSUT ✅ ✅ ✅ ✅ ✅ ‼ ✅ ✅ ✅ ‼ ✅ ‼ ✅ ✅ ✅ ✅
28. What’s Next for Polymer (Polymer Summit 2017) ΑΓ  5PEBZ /BUJWF ‒ ❌ 4VQQPSUT
    %FFQ
    %FQFOEFODJFT ✅ ✅ 'JMF-FWFM
    /P
    #VOEMJOH
    3FRVJSFE ✅ ✅ )5.-
    *NQPSUT 
29. &4
    .PEVMFT What’s Next for Polymer (Polymer Summit 2017) ΑΓ ✅ /BUJWF ✅ 4VQQPSUT
    %FFQ
    %FQFOEFODJFT ✅ 'JMF-FWFM
    /P
    #VOEMJOH
    3FRVJSFE
30. What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5FNQMBUF 4IBEPX
    %0. $VTUPN
    &MFNFOUT +4
    .PEVMFT ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅
31. #PXFS What’s Next for Polymer (Polymer Summit 2017) ΑΓ  5PEBZ .BOBHFT
    %FQFOEFODJFT ✅ ✅ 3FTPMDFT
    7FSTJPO
    $POqJDUT ✅ ✅ *OTUBMMT
    'MBU
    %FQFOEFODZ
    5SFF ✅ ✅ "DUJWF
    $PNNVOJUZ ✅ ❌
32. :BSO
    
    OQN What’s Next for Polymer (Polymer Summit 2017) ΑΓ ✅ .BOBHFT
    %FQFOEFODJFT ✅ 3FTPMDFT
    7FSTJPO
    $POqJDUT ✅ *OTUBMMT
    'MBU
    %FQFOEFODZ
    5SFF ✅ "DUJWF
    $PNNVOJUZ
33. 4&0
    
    4IBSJOH https://render-tron.appspot.com/
34. WJTJU
    NZ
    CMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp