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

Polymer / Web Components Update

Polymer / Web Components Update

初夏のJavaScript祭り LTスライド

Kenichiro Kishida

May 27, 2017
Tweet

More Decks by Kenichiro Kishida

Other Decks in Technology

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