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

昨今ではネイティブアプリケーションや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. )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