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

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

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

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

)5514ϦΫΤετ )5.-+4$44 Ϩεϙϯε 41"  )5.-+4$44 ϦΫΤετ9.-)UUQ3FRVFTU  Ϩεϙϯε+40/

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

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

• UI Plugin • UI Widget • UI Component

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

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

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

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

/FFE1PMZpMM

6TF5IF1MBUGPSN

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

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

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

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

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

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

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

https://polymer-japan.github.io/polymer3-ﬁrst-element/index.ja.html

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.

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

w8FC$PNQPOFOUT w"OHVMBS w3FBDU w7VF wFUDʜ

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

w8FC$PNQPOFOUT w"OHVMBS w3FBDU w7VF wFUDʜ

$VTUPN&MFNFOUT&WFSZXIFSF https://custom-elements-everywhere.com/ •Angular •AngularJs •CanJs •Dio •Dojo2 •Hybrids •HyperHTML •Mithril
•Polymer •Preact •React •Skate •Surplus •Svelte •Vue

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

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

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

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

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

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

More Decks by Kenichiro Kishida

Other Decks in Technology

Featured

Transcript