Polymer / Web Components Update

初夏のJavaScript祭り LTスライド

Transcript

1. 1PMZNFS

   8FC$PNQPOFOUT
   6QEBUF
   ॳՆͷ+BWB4DSJQUࡇΓCZ!TJ[VIJLP
   

   View Slide

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

   View Slide

3. େࣄͳ͜ͱ͸࠷ॳʹ
   

   View Slide

4. ͦ͏ͩ1PMZNFS࢖͓͏
   1PMZNFS
   

   View Slide

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

   View Slide

6. w8FC$PNQPOFOUT
   w%BUB#JOEJOH
   w#FIBWJPST
   w)FMQFST
   w.BUFSJBM%FTJHO
   w$-*5PPMT
   

   View Slide

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

   View Slide

8. 10.15

   2016
   5.27

   2017
   ▶︎
   

   View Slide

9. Shadow DOM Native Support
   • Chrome
   • Opera
   •Chrome
   •Opera
   •Safari
   ▶︎ New
   

   View Slide

10. Custom Elements Catalog
    • polymer

    -project.org
    • open

    -elements.org
    • custom

    -elements.io
    webcomponents

    .org
    ▶︎
    

    View Slide

11. View Slide

12. Polymer Versions
    • 1.7.0

    stable
    • 2.0

    preview
    • 89

    releases
    • 1.9.1

    stable
    • 2.0.0

    stable
    • 109

    releases
    ▶︎
    Up
    

    View Slide

13. Polymer CLI Versions
    0.13.0 1.1.0
    ▶︎ Up
    

    View Slide

14. Browser Support
    • IE10
    • IE11
    • Edge
    • Chrome
    • Safari
    • Firefox
    ▶︎
    Del
    • IE10
    • IE11
    • Edge
    • Chrome
    • Safari
    • Firefox
    

    View Slide

15. Polyfill Versions
    0.7.22 1.0.1
    ▶︎ Up
    Shadow
    DOM v0
    Shadow
    DOM v1
    

    View Slide

16. Web Components Libraries
    • bosonic

    1.0
    • SkateJS

    3.1.2
    • x-tag

    1.5.11
    ▶︎
    Up
    • bosonic 1.0
    • SkateJS

    4.6.7
    • x-tag

    1.5.11
    • slim.js
    New
    

    View Slide

17. Polymer

    1.x
    Polymer

    2.x
    ▶︎
    

    View Slide

18. Polymer 2.x
    • ଞϥΠϒϥϦͱͷޓ׵ੑ޲্
    • Polymer.dom͕ഉআ͞Εͨ
    • σʔλγεςϜͷվળ
    • σόοά͕༰қʹͳΔ
    • ES6αϙʔτ
    • αΠζ͕࠷େͰ1/4ʹͳΔ
    

    View Slide

19. ࠾༻ࣄྫ
    

    View Slide

20. (PPHMF*0bʮ'VUVSF GBTUFS6OMPDLUIFQPXFSPG8FC$PNQPOFOUTXJUI1PMZNFSʯηογϣϯΑΓʢҰ෦௥Ճ͋Γʣ
    

    View Slide

21. 700 Projects
    Google Earth
    (PPHMF*0bʮ'VUVSF GBTUFS6OMPDLUIFQPXFSPG8FC$PNQPOFOUTXJUI1PMZNFSʯηογϣϯΑΓ
    

    View Slide

22. w1PMZNFSDPFEP
    w(PPHMF$PEFMBCTͷϋϯζΦϯ
    NFFUVQ -5େձ 044׆ಈ
    wQPMZNFSDPFEPEPPSLFFQFSKQ
    w1PMZNFS+"1"/ 'BDFCPPL(SPVQ
    
    2QN[OGTEQGFQ
    
    ίϛϡχςΟ׆ಈ
    

    View Slide

23. 6TF5IF1MBUGPSN
    

    View Slide

24. ͦ͏ͩ1PMZNFS࢖͓͏
    1PMZNFS
    

    View Slide

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

    View Slide