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

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

# 概要

昨今ではネイティブアプリケーションやSPAなどフロントエンドアプリケーションと、APIを提供するバックエンドアプリケーションを分けて作ることが多くなっています。

しかしまだ多くの場面でモノリシックなアプリケーションを構築することもあるでしょう。
そのようなときにWebページでJavaScriptのフレームワークを使うより、画面遷移があり、jQueryのようにUI部品を埋め込むだけの使い勝手でも良い場面の方が多いのではないでしょうか？

このセッションでは、こうしたときの選択肢として多くのブラウザで実装が進み実用的となった Web Components を使ったUI部品の共通化の方法、エコシステムについて解説します。

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. w͜Ε·Ͱͷ՝୊
   w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़
   ͕ղܾ͢Δ͜ͱ
   wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻
   w࣍ੈ୅΁
   w1PMZNFS1SPKFDUͷࠓޙͱ8$
   4UBOEBSE
   5PEBZT
   

   View Slide

5. w͜Ε·Ͱͷ՝୊
   w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़
   ͕ղܾ͢Δ͜ͱ
   wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻
   w࣍ੈ୅΁
   w1PMZNFS1SPKFDUͷࠓޙͱ8$
   4UBOEBSE
   5PEBZT
   

   View Slide

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

   )5.-+4$44
   
   ϦΫΤετ9.-)UUQ3FRVFTU

   Ϩεϙϯε+40/
   

   View Slide

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

   View Slide

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

   View Slide

9. • UI Plugin
   • UI Widget
   • UI Component
   

   View Slide

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

    View Slide

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

    View Slide

12. w͜Ε·Ͱͷ՝୊
    w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़
    ͕ղܾ͢Δ͜ͱ
    wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻
    w࣍ੈ୅΁
    w1PMZNFS1SPKFDUͷࠓޙͱ8$
    4UBOEBSE
    5PEBZT
    

    View Slide

13. w೥ʹ(PPHMF͕ఏҊ
    w4DPQFE $44%0.
    
    w$VTUPN&MFNFOUT
    w#SPXTFS/BUJWF%0."DDFTT
    w8$4UBOEBSE
    8FC$PNQPOFOUT
    

    View Slide

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

    View Slide

15. /FFE1PMZpMM
    

    View Slide

16. 6TF5IF1MBUGPSN
    

    View Slide

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

    View Slide

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

    View Slide

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

    QPMZNFSQSPKFDU

    PSH
    

    View Slide

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

    View Slide

21. w8$0.10/&/5403(

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. w͜Ε·Ͱͷ՝୊
    w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़
    ͕ղܾ͢Δ͜ͱ
    wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻
    w࣍ੈ୅΁
    w1PMZNFS1SPKFDUͷࠓޙͱ8$
    4UBOEBSE
    5PEBZT
    

    View Slide

26. +
    

    View Slide

27. 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

28. DEMO
    https://github.com/sizuhiko/phpcon-2019-sendai
    

    View Slide

29. View Slide

30. w͜Ε·Ͱͷ՝୊
    w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़
    ͕ղܾ͢Δ͜ͱ
    wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻
    w࣍ੈ୅΁
    w1PMZNFS1SPKFDUͷࠓޙͱ8$
    4UBOEBSE
    5PEBZT
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. $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

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

    View Slide

36. w͜Ε·Ͱͷ՝୊
    w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़
    ͕ղܾ͢Δ͜ͱ
    wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻
    w࣍ੈ୅΁
    w1PMZNFS1SPKFDUͷࠓޙͱ8$
    4UBOEBSE
    5PEBZT
    

    View Slide

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.
    "CPVUUIF1PMZNFS1SPKFDU
    

    View Slide

38. 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

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

    View Slide