Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

昨今ではネイティブアプリケーションやSPAなどフロントエンドアプリケーションと、APIを提供するバックエンドアプリケーションを分けて作ることが多くなっています。しかしまだ多くの場面でモノリシックなアプリケーションを構築することもあるでしょう。そのようなときにWebページでJavaScriptのフレームワークを使うより、画面遷移があり、jQueryのようにUI部品を埋め込むだけの使い勝手でも良い場面の方が多いのではないでしょうか?このセッションでは、こうしたときの選択肢として多くのブラウザで実装が進み実用的となった Web Components を使ったUI部品の共通化の方法、エコシステムについて解説します。

C4c161ae9eeeed8f161197410f7a228a?s=128

Kenichiro Kishida

December 14, 2018
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. )5514ϦΫΤετ )5.-+4$44 Ϩεϙϯε 41"
 )5.-+4$44 ϦΫΤετ9.-)UUQ3FRVFTU
 Ϩεϙϯε+40/

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

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

  7. • UI Plugin • UI Widget • UI Component

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

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

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

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

  12. /FFE1PMZpMM

  13. 6TF5IF1MBUGPSN

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

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

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

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

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

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

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

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

  22. +

  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.
  24. None
  25. w8FC$PNQPOFOUT w"OHVMBS w3FBDU w7VF wFUDʜ

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

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

  28. $VTUPN&MFNFOUT&WFSZXIFSF https://custom-elements-everywhere.com/ •Angular •AngularJs •CanJs •Dio •Dojo2 •Hybrids •HyperHTML •Mithril

    •Polymer •Preact •React •Skate •Surplus •Svelte •Vue
  29. 5IF8FC4UBDL Web primitives Built-in modules Frameworks Web Components Day 2

    Keynote (Chrome Dev Summit 2018) https://youtu.be/SbUAkQ_s7Os
  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
  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
  32. WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp