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

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

Transcript

1. ϞϊϦγοΫͳ
   ΞϓϦέʔγϣϯʹ͓͚Δ
   ϑϩϯτΤϯυ෦඼ͷڞ௨Խ 
   1)1ΧϯϑΝϨϯε
    ,FOJDIJSP
   ,JTIJEB
   !TJ[VIJLP
2. ,FOJDIJSP
   ,JTIJEB
   5PLZP
   +"1"/
   TJ[VIJLP!HNBJMDPN
   
   !TJ[VIJLP
   IUUQTHJUIVCDPNTJ[VIJLP
   IUUQCMPHPQFOUPLZPKQ
   
4. )5514
   ϦΫΤετ )5.-+4$44
   Ϩεϙϯε 41"
 )5.-+4$44 ϦΫΤετ9.-)UUQ3FRVFTU
 Ϩεϙϯε+40/
5. wK2VFSZ
   w#PPUTUSBQ
   wFUD
   ʜ w"OHVMBS
   w3FBDU
   w7VF
   wFUD
   ʜ
6. wK2VFSZ
   w#PPUTUSBQ
   wFUD
   ʜ w"OHVMBS
   w3FBDU
   w7VF
   wFUD
   ʜ ίϯϙʔωϯτࢦ޲ ίϯϙʔωϯτ
7. • UI Plugin • UI Widget • UI Component
8. ͋ͳͨ͸ਓੜͰ͍ͭ͘ͷ
   %BUF
   1JDLFSΛ࡞͖ͬͯ·͔ͨ͠ʁ
9. wϓϩδΣΫτͱ෦඼ͷ$44ͷিಥ
   w%0.ૢ࡞ʹΑΔ༧ظͤ͵ഁյ
   wϥΠϒϥϦ΍ϑϨʔϜϫʔΫɺϒϥ΢ βͷόʔδϣϯҧ͍
   wෳࡶͳ%0.ߏ଄
   w஗͍
10. w೥ʹ(PPHMF͕ఏҊ
    w4DPQFE
    $44%0.
    w$VTUPN
    &MFNFOUT
    w#SPXTFS
    /BUJWF
    %0.
    "DDFTT
    w8$
    4UBOEBSE 8FC
    $PNQPOFOUT
11. w1PMZpMM
    ඞཁͳΜͰ͠ΐʁ
    w#PXFS
    ࢖͏ͷʁʂ
    w1PMZNFS
    Ͱͳ͍ͱ࡞Εͳ͍ΜͰ͠ΐ
    w)5.-
    *NQPSU
    ͬͯ࢓༷ʹͳΔͷʁ 8FC
    $PNQPOFOUT
    
12. /FFE
    1PMZpMM
    
13. 6TF5IF1MBUGPSN
14. !BOHVMBSFMFNFOUT https://angular.io/api/elements
15. 7VF
    $VTUPN
    &MFNFOU https://karol-f.github.io/vue-custom-element/
16. -JU&MFNFOU w 1PMZNFSϕʔεͷ௒ ܰྔ
    $VTUPN&MFNFOU ϕʔεΫϥε
    w IUUQTMJUFMFNFOU
 QPMZNFSQSPKFDU
 PSH
17. .BUFSJBM
    DPNQPOFOUT w (PPHMF
    *0
    Ͱൃද͞ Εͨ৽͍͠σβΠϯͷ 8FC
    $PNQPOFOUT
    w IUUQTHJUIVCDPN NBUFSJBMDPNQPOFOUT NBUFSJBMDPNQPOFOUT XFCDPNQPOFOUT
    w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT EFNPTJOEFYIUNM
18. w8&#$0.10/&/5403(
 IUUQTXXXXFCDPNQPOFOUTPSH
    wOQN
    w(JU)VC 1BDLBHF
    3FQPTJUPSZ WBBEJOEBUFQJDLFS
    ΛݟͯΈΑ͏
19. w$VTUPN
    &MFNFOUT
    w)5.-$44+BWB4DSJQU
    w$VTUPN
    $44
    1SPQFSUJFT 5FDIOJDBM
    3FRVJSFNFOUT
20. $VTUPN
    &MFNFOU
    4USVDUVSF Πϯϙʔτ ΤϨϝϯτఆٛ Πϕϯτॲཧ ϓϩύςΟఆٛ ςϯϓϨʔτఆٛ ΤϨϝϯτొ࿥
21. https://polymer-japan.github.io/polymer3-first-element/index.ja.html
22. +
23. w -BSBWFM
 https://github.com/JeffreyWay/laravel-mix
    w "
    4ZNGPOZ
    CVOEMF
    UIBU
    JOUFHSBUFT
    -BSBWFM
    .JY
 https://github.com/iulyanp/elixir-mix-bundle
    w )FMQFS
    UP
    VTF
    MBSBWFMNJY
    XJUI
    $BLF1)1
 https://github.com/mosaxiv/cakephp-mix An elegant wrapper around Webpack for the 80% use case.
25. w8FC
    $PNQPOFOUT w"OHVMBS
    w3FBDU
    w7VF
    wFUD
    ʜ
26. w8FC
    $PNQPOFOUT w"OHVMBS
    w3FBDU
    w7VF
    wFUD
    ʜ ίϯϙʔωϯτ
    Λڞ௨Խ͍ͨ͠
27. w8FC
    $PNQPOFOUT w"OHVMBS
    w3FBDU
    w7VF
    wFUD
    ʜ
28. $VTUPN
    &MFNFOUT
    &WFSZXIFSF https://custom-elements-everywhere.com/ •Angular •AngularJs •CanJs •Dio •Dojo2 •Hybrids •HyperHTML •Mithril •Polymer •Preact •React •Skate •Surplus •Svelte •Vue
29. 5IF
    8FC
    4UBDL Web primitives Built-in modules Frameworks Web Components Day 2 Keynote (Chrome Dev Summit 2018) https://youtu.be/SbUAkQ_s7Os
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. "CPVU
    UIF
    1PMZNFS
    1SPKFDU
31. w$44
    4IBEPX
    1BSUT
 https://drafts.csswg.org/css-shadow-parts/
    w$VTUPN
    &MFNFOU
    3FHJTUFST
 https://github.com/w3c/webcomponents/issues/716
    w1BDLBHF
    OBNF
    NBQT
 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
32. WJTJU
    NZ
    CMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp