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

モノリシックなアプリケーションにおけるフロントエンド部品の共通化/phpcon-2018

 モノリシックなアプリケーションにおけるフロントエンド部品の共通化/phpcon-2018

昨今ではネイティブアプリケーションやSPAなどフロントエンドアプリケーションと、APIを提供するバックエンドアプリケーションを分けて作ることが多くなっています。しかしまだ多くの場面でモノリシックなアプリケーションを構築することもあるでしょう。そのようなときにWebページでJavaScriptのフレームワークを使うより、画面遷移があり、jQueryのようにUI部品を埋め込むだけの使い勝手でも良い場面の方が多いのではないでしょうか?このセッションでは、こうしたときの選択肢として多くのブラウザで実装が進み実用的となった Web Components を使ったUI部品の共通化の方法、エコシステムについて解説します。

Kenichiro Kishida

December 14, 2018
Tweet

More Decks by Kenichiro Kishida

Other Decks in Technology

Transcript

  1. ϞϊϦγοΫͳ
    ΞϓϦέʔγϣϯʹ͓͚Δ
    ϑϩϯτΤϯυ෦඼ͷڞ௨Խ
    1)1ΧϯϑΝϨϯε
    ,FOJDIJSP,JTIJEB
    !TJ[VIJLP

    View full-size slide

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

    View full-size slide

  3. )5514ϦΫΤετ
    )5.-+4$44
    Ϩεϙϯε
    41"

    )5.-+4$44

    ϦΫΤετ9.-)UUQ3FRVFTU

    Ϩεϙϯε+40/

    View full-size slide

  4. wK2VFSZ
    w#PPUTUSBQ
    wFUDʜ
    w"OHVMBS
    w3FBDU
    w7VF
    wFUDʜ

    View full-size slide

  5. wK2VFSZ
    w#PPUTUSBQ
    wFUDʜ
    w"OHVMBS
    w3FBDU
    w7VF
    wFUDʜ
    ίϯϙʔωϯτࢦ޲
    ίϯϙʔωϯτ

    View full-size slide

  6. • UI Plugin
    • UI Widget
    • UI Component

    View full-size slide

  7. ͋ͳͨ͸ਓੜͰ͍ͭ͘ͷ
    %BUF1JDLFSΛ࡞͖ͬͯ·͔ͨ͠ʁ

    View full-size slide

  8. wϓϩδΣΫτͱ෦඼ͷ$44ͷিಥ
    w%0.ૢ࡞ʹΑΔ༧ظͤ͵ഁյ
    wϥΠϒϥϦ΍ϑϨʔϜϫʔΫɺϒϥ΢
    βͷόʔδϣϯҧ͍
    wෳࡶͳ%0.ߏ଄
    w஗͍

    View full-size slide

  9. w೥ʹ(PPHMF͕ఏҊ
    w4DPQFE $44%0.

    w$VTUPN&MFNFOUT
    w#SPXTFS/BUJWF%0."DDFTT
    w8$4UBOEBSE
    8FC$PNQPOFOUT

    View full-size slide

  10. w1PMZpMMඞཁͳΜͰ͠ΐʁ
    w#PXFS࢖͏ͷʁʂ
    w1PMZNFSͰͳ͍ͱ࡞Εͳ͍ΜͰ͠ΐ
    w)5.-*NQPSUͬͯ࢓༷ʹͳΔͷʁ
    8FC$PNQPOFOUT

    View full-size slide

  11. 6TF5IF1MBUGPSN

    View full-size slide

  12. !BOHVMBSFMFNFOUT
    https://angular.io/api/elements

    View full-size slide

  13. 7VF$VTUPN&MFNFOU
    https://karol-f.github.io/vue-custom-element/

    View full-size slide

  14. -JU&MFNFOU
    w 1PMZNFSϕʔεͷ௒
    ܰྔ$VTUPN&MFNFOU
    ϕʔεΫϥε
    w IUUQTMJUFMFNFOU

    QPMZNFSQSPKFDU

    PSH

    View full-size slide

  15. .BUFSJBMDPNQPOFOUT
    w (PPHMF*0Ͱൃද͞
    Εͨ৽͍͠σβΠϯͷ
    8FC$PNQPOFOUT
    w IUUQTHJUIVCDPN
    NBUFSJBMDPNQPOFOUT
    NBUFSJBMDPNQPOFOUT
    XFCDPNQPOFOUT
    w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP
    NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT
    EFNPTJOEFYIUNM

    View full-size slide

  16. w8$0.10/&/5403(

    IUUQTXXXXFCDPNQPOFOUTPSH
    wOQN
    w(JU)VC
    1BDLBHF3FQPTJUPSZ
    WBBEJOEBUFQJDLFS
    ΛݟͯΈΑ͏

    View full-size slide

  17. w$VTUPN&MFNFOUT
    w)5.-$44+BWB4DSJQU
    w$VTUPN$441SPQFSUJFT
    5FDIOJDBM3FRVJSFNFOUT

    View full-size slide

  18. $VTUPN&MFNFOU4USVDUVSF
    Πϯϙʔτ
    ΤϨϝϯτఆٛ
    Πϕϯτॲཧ
    ϓϩύςΟఆٛ
    ςϯϓϨʔτఆٛ
    ΤϨϝϯτొ࿥

    View full-size slide

  19. https://polymer-japan.github.io/polymer3-first-element/index.ja.html

    View full-size slide

  20. w -BSBWFM

    https://github.com/JeffreyWay/laravel-mix

    w "4ZNGPOZCVOEMFUIBUJOUFHSBUFT-BSBWFM.JY

    https://github.com/iulyanp/elixir-mix-bundle
    w )FMQFSUPVTFMBSBWFMNJYXJUI$BLF1)1

    https://github.com/mosaxiv/cakephp-mix
    An elegant wrapper around Webpack for the 80% use case.

    View full-size slide

  21. w8FC$PNQPOFOUT
    w"OHVMBS
    w3FBDU
    w7VF
    wFUDʜ

    View full-size slide

  22. w8FC$PNQPOFOUT
    w"OHVMBS
    w3FBDU
    w7VF
    wFUDʜ
    ίϯϙʔωϯτ
    Λڞ௨Խ͍ͨ͠

    View full-size slide

  23. w8FC$PNQPOFOUT
    w"OHVMBS
    w3FBDU
    w7VF
    wFUDʜ

    View full-size slide

  24. $VTUPN&MFNFOUT&WFSZXIFSF
    https://custom-elements-everywhere.com/
    •Angular
    •AngularJs
    •CanJs
    •Dio
    •Dojo2
    •Hybrids
    •HyperHTML
    •Mithril
    •Polymer
    •Preact
    •React
    •Skate
    •Surplus
    •Svelte
    •Vue

    View full-size slide

  25. 5IF8FC4UBDL
    Web primitives
    Built-in modules
    Frameworks
    Web Components
    Day 2 Keynote (Chrome Dev Summit 2018) https://youtu.be/SbUAkQ_s7Os

    View full-size slide

  26. As front-end engineers in the Chrome team, our
    mission is to make the web better.
    We work on libraries and tools to help
    developers unlock the web’s full potential, taking
    advantage of cutting-edge features like Web
    Components, Service Workers and HTTP/2.
    We experiment with new patterns for building
    faster, smaller web applications.
    We advocate for standards, helping ensure that
    web developers have a strong voice in the
    process.
    "CPVUUIF1PMZNFS1SPKFDU

    View full-size slide

  27. w$444IBEPX1BSUT

    https://drafts.csswg.org/css-shadow-parts/
    w$VTUPN&MFNFOU3FHJTUFST

    https://github.com/w3c/webcomponents/issues/716
    w1BDLBHFOBNFNBQT

    https://github.com/domenic/package-name-maps
    w)5.-.PEVMFT

    https://github.com/w3c/webcomponents/issues/645

    https://github.com/PolymerLabs/html-modules-toolkit
    w)5.-5FNQMBUF*OTUBOUJBUJPO

    https://github.com/w3c/webcomponents/blob/gh-pages/
    proposals/Template-Instantiation.md

    View full-size slide

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

    View full-size slide