$30 off During Our Annual Pro Sale. View Details »

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

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

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

# 概要

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

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

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

Kenichiro Kishida

January 26, 2019
Tweet

More Decks by Kenichiro Kishida

Other Decks in Technology

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