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 Slide

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

    View Slide

  3. View Slide

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

    )5.-+4$44

    ϦΫΤετ9.-)UUQ3FRVFTU

    Ϩεϙϯε+40/

    View Slide

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

    View Slide

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

    View Slide

  7. • UI Plugin
    • UI Widget
    • UI Component

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

  12. /FFE1PMZpMM

    View Slide

  13. 6TF5IF1MBUGPSN

    View Slide

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

    View Slide

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

    View Slide

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

    QPMZNFSQSPKFDU

    PSH

    View Slide

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

    View Slide

  18. w8$0.10/&/5403(

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. +

    View Slide

  23. 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 Slide

  24. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. 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 Slide

  31. 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 Slide

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

    View Slide