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

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

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

# 概要

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

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

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

C4c161ae9eeeed8f161197410f7a228a?s=128

Kenichiro Kishida

January 26, 2019
Tweet

Transcript

  1. ϞϊϦγοΫͳ ΞϓϦέʔγϣϯʹ͓͚Δ ϑϩϯτΤϯυ෦඼ͷڞ௨Խ 1)1ΧϯϑΝϨϯεઋ୆ ,FOJDIJSP,JTIJEB !TJ[VIJLP

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

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

  5. w͜Ε·Ͱͷ՝୊ w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻ w࣍ੈ୅΁ w1PMZNFS1SPKFDUͷࠓޙͱ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. ͋ͳͨ͸ਓੜͰ͍ͭ͘ͷ %BUF1JDLFSΛ࡞͖ͬͯ·͔ͨ͠ʁ

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

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

  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. .BUFSJBMDPNQPOFOUT w (PPHMF*0Ͱൃද͞ Εͨ৽͍͠σβΠϯͷ 8FC$PNQPOFOUT w IUUQTHJUIVCDPN NBUFSJBMDPNQPOFOUT NBUFSJBMDPNQPOFOUT XFCDPNQPOFOUT

    w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT EFNPTJOEFYIUNM
  21. w8&#$0.10/&/5403(
 IUUQTXXXXFCDPNQPOFOUTPSH wOQN w(JU)VC 1BDLBHF3FQPTJUPSZ WBBEJOEBUFQJDLFS ΛݟͯΈΑ͏

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

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

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

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

  26. +

  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.
  28. DEMO https://github.com/sizuhiko/phpcon-2019-sendai

  29. None
  30. w͜Ε·Ͱͷ՝୊ w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻ w࣍ੈ୅΁ w1PMZNFS1SPKFDUͷࠓޙͱ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. 5IF8FC4UBDL 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࣍ੈ୅΁ w1PMZNFS1SPKFDUͷࠓޙͱ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. "CPVUUIF1PMZNFS1SPKFDU
  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
  39. WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp