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

このスライドはPHPカンファレンス仙台2019の登壇資料です。

# 概要

昨今ではネイティブアプリケーションや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. w͜Ε·Ͱͷ՝୊
   w8FC
   $PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ
   wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻
   w࣍ੈ୅΁
   w1PMZNFS
   1SPKFDUͷࠓޙͱ8$
   4UBOEBSE 5PEBZT
5. w͜Ε·Ͱͷ՝୊
   w8FC
   $PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ
   wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻
   w࣍ੈ୅΁
   w1PMZNFS
   1SPKFDUͷࠓޙͱ8$
   4UBOEBSE 5PEBZT
6. )5514
   ϦΫΤετ )5.-+4$44
   Ϩεϙϯε 41"
 )5.-+4$44 ϦΫΤετ9.-)UUQ3FRVFTU
 Ϩεϙϯε+40/
7. wK2VFSZ
   w#PPUTUSBQ
   wFUD
   ʜ w"OHVMBS
   w3FBDU
   w7VF
   wFUD
   ʜ
8. wK2VFSZ
   w#PPUTUSBQ
   wFUD
   ʜ w"OHVMBS
   w3FBDU
   w7VF
   wFUD
   ʜ ίϯϙʔωϯτࢦ޲ ίϯϙʔωϯτ
9. • UI Plugin • UI Widget • UI Component
10. ͋ͳͨ͸ਓੜͰ͍ͭ͘ͷ
    %BUF
    1JDLFSΛ࡞͖ͬͯ·͔ͨ͠ʁ
11. wϓϩδΣΫτͱ෦඼ͷ$44ͷিಥ
    w%0.ૢ࡞ʹΑΔ༧ظͤ͵ഁյ
    wϥΠϒϥϦ΍ϑϨʔϜϫʔΫɺϒϥ΢ βͷόʔδϣϯҧ͍
    wෳࡶͳ%0.ߏ଄
    w஗͍
12. w͜Ε·Ͱͷ՝୊
    w8FC
    $PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ
    wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻
    w࣍ੈ୅΁
    w1PMZNFS
    1SPKFDUͷࠓޙͱ8$
    4UBOEBSE 5PEBZT
13. w೥ʹ(PPHMF͕ఏҊ
    w4DPQFE
    $44%0.
    w$VTUPN
    &MFNFOUT
    w#SPXTFS
    /BUJWF
    %0.
    "DDFTT
    w8$
    4UBOEBSE 8FC
    $PNQPOFOUT
14. w1PMZpMM
    ඞཁͳΜͰ͠ΐʁ
    w#PXFS
    ࢖͏ͷʁʂ
    w1PMZNFS
    Ͱͳ͍ͱ࡞Εͳ͍ΜͰ͠ΐ
    w)5.-
    *NQPSU
    ͬͯ࢓༷ʹͳΔͷʁ 8FC
    $PNQPOFOUT
    
15. /FFE
    1PMZpMM
    
16. 6TF5IF1MBUGPSN
17. !BOHVMBSFMFNFOUT https://angular.io/api/elements
18. 7VF
    $VTUPN
    &MFNFOU https://karol-f.github.io/vue-custom-element/
19. -JU&MFNFOU w 1PMZNFSϕʔεͷ௒ ܰྔ
    $VTUPN&MFNFOU ϕʔεΫϥε
    w IUUQTMJUFMFNFOU
 QPMZNFSQSPKFDU
 PSH
20. .BUFSJBM
    DPNQPOFOUT w (PPHMF
    *0
    Ͱൃද͞ Εͨ৽͍͠σβΠϯͷ 8FC
    $PNQPOFOUT
    w IUUQTHJUIVCDPN NBUFSJBMDPNQPOFOUT NBUFSJBMDPNQPOFOUT XFCDPNQPOFOUT
    w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT EFNPTJOEFYIUNM
21. w8&#$0.10/&/5403(
 IUUQTXXXXFCDPNQPOFOUTPSH
    wOQN
    w(JU)VC 1BDLBHF
    3FQPTJUPSZ WBBEJOEBUFQJDLFS
    ΛݟͯΈΑ͏
22. w$VTUPN
    &MFNFOUT
    w)5.-$44+BWB4DSJQU
    w$VTUPN
    $44
    1SPQFSUJFT 5FDIOJDBM
    3FRVJSFNFOUT
23. $VTUPN
    &MFNFOU
    4USVDUVSF Πϯϙʔτ ΤϨϝϯτఆٛ Πϕϯτॲཧ ϓϩύςΟఆٛ ςϯϓϨʔτఆٛ ΤϨϝϯτొ࿥
24. https://polymer-japan.github.io/polymer3-first-element/index.ja.html
25. w͜Ε·Ͱͷ՝୊
    w8FC
    $PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ
    wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻
    w࣍ੈ୅΁
    w1PMZNFS
    1SPKFDUͷࠓޙͱ8$
    4UBOEBSE 5PEBZT
26. +
27. 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.
28. DEMO https://github.com/sizuhiko/phpcon-2019-sendai
30. w͜Ε·Ͱͷ՝୊
    w8FC
    $PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ
    wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻
    w࣍ੈ୅΁
    w1PMZNFS
    1SPKFDUͷࠓޙͱ8$
    4UBOEBSE 5PEBZT
31. w8FC
    $PNQPOFOUT w"OHVMBS
    w3FBDU
    w7VF
    wFUD
    ʜ
32. w8FC
    $PNQPOFOUT w"OHVMBS
    w3FBDU
    w7VF
    wFUD
    ʜ ίϯϙʔωϯτ
    Λڞ௨Խ͍ͨ͠
33. w8FC
    $PNQPOFOUT w"OHVMBS
    w3FBDU
    w7VF
    wFUD
    ʜ
34. $VTUPN
    &MFNFOUT
    &WFSZXIFSF https://custom-elements-everywhere.com/ •Angular •AngularJs •CanJs •Dio •Dojo2 •Hybrids •HyperHTML •Mithril •Polymer •Preact •React •Skate •Surplus •Svelte •Vue
35. 5IF
    8FC
    4UBDL Web primitives Built-in modules Frameworks Web Components Day 2 Keynote (Chrome Dev Summit 2018) https://youtu.be/SbUAkQ_s7Os
36. w͜Ε·Ͱͷ՝୊
    w8FC
    $PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ
    wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻
    w࣍ੈ୅΁
    w1PMZNFS
    1SPKFDUͷࠓޙͱ8$
    4UBOEBSE 5PEBZT
37. 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
38. 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
39. WJTJU
    NZ
    CMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp