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

Micro Frontends × gRPC-Web の挑戦 / The challenge...

Micro Frontends × gRPC-Web の挑戦 / The challenge of micro frontends and gRPC-Web

CAMPHOR- の定例LTの資料です。

Twitter: https://twitter.com/p1ass
GitHub: https://github.com/p1ass

ぷらす

May 12, 2019
Tweet

More Decks by ぷらす

Other Decks in Programming

Transcript

  1. l,JUBEFzͱ͸ʁ ˔ $".1)03 "DDPVOU ҎԼ"DDPVOUXFC ˓ <ͱ͋Δ63-> ˓ ൒೥લ͔Β ,JUBEF༻ͷ

    6*͸ଘࡏ ˓ l։ൃதzͷ··ͣͬͱ์ஔ ໓ଟʹ։͔ͳ͍ϖʔδͱԽ͍ͯͨ͠
  2. ࣮૷ ˔ 8FC$PNQPOFOUT ˓ ೚ҙͷ)5.-λάΛఆٛ͢Δ l$VTUPN&MFNFOUz ˓ ΧϓηϧԽ͞Εͨ%0.Λ࡞Δ z4IBEPX%0.z ˓

    ࠶ར༻Մೳͳ l)5.-5FNQMBUFz )5.- $44 +4Λ·ͱΊͨΦϦδφϧλάΛ࡞ΕΔ
  3. ࣮૷ class MyAppElement extends HTMLElement { constructor() { super() const

    shadowRoot = this.attachShadow({ mode: 'open' }) shadowRoot.innerHTML = this.template() } template() { return ` <style> p { color: #f00; } </style> <p>This is a custom element!</p> ` } } customElements.define('my-app', MyAppElement) <my-app></my-app> ˔ ݺͼग़͢ଆ͸λάΛࢦఆ͢Δ͚ͩ
  4. ࣮૷ ˔ H31$8FC ˓ H31$ͷαʔϏεΛ ϒϥ΢β ͔ΒݺͿ࢓૊Έ ˓ QSPUPDͰ ΫϥΠΞϯτͱܕఆٛΛੜ੒

    DMJFOUXFC  ˓ &OWPZ͔ /HJOYʹΑΔϓϩΩγ͕ඞཁ &OWPZΛ࢖༻ ˓ #''ΛݐͯΔΑΓ΋Ұ؏ੑΛ࣋ͬͨ։ൃΛߦ͑Δ
  5. ࣮૷ ˔ H31$8FCͷΫϥΠΞϯτίʔυΛ࡞੒ ˓ QSPUPͷ NBTUFSʹ QVTI͞Εͨ࣌఺Ͱɺ$*ʹΑͬͯ DBNQIPSDMJFOUXFC ͕ࣗಈੜ੒ ˓

    ࢖͍͍ͨαʔϏε͸ OQN PSZBSOͰΫϥΠΞϯτίʔυΛ %FQFOEFODZʹ௥Ճ ,JUBEF8JEHFU͸ࡁ ˓ جຊతͳ࢖͍ํ͸ެࣜͷ HSQDHSQDXFCΛࢀর
  6. ։ൃϑϩʔ ˔ ੩తͳ8FC$PNQPOFOUTͷϑΝΠϧΛ࡞੒ ˓ ϩʔΧϧͰ͸ ZBSOCVJMEDPNQPOFOU Ͱ EJTU ʹੜ੒ ˓

    NBTUFSʹ QVTI͞Εͨ࣌͸ɺDBNQIPSTUBUJDʹ Ϗϧυ ࡁΈϑΝΠϧ͕ QVTI͞ΕΔ ˔ ੩తϑΝΠϧΛ഑৴ ˓ TUBUJD͸NBTUFSʹQVTI͞Εͨ࣌ʹ EPDLFSJNBHFΛ࡞੒ ˓ 3VOEFDL ͷ KPCΛճ͢͜ͱͰ഑৴
  7. ·ͱΊ ˔ ,JUBEF8JEHFUΛ࡞ͬͨ ˓ 8FC$PNQPOFOUTͱ H31$8FCͰ.JDSP'SPOUFOETԽ ˓ 7VFKTʹΑͬͯ 8FC$PNQPOFOUTͷ࣮૷ίετΛ࡟ݮ ˓

    H31$8FCͷͨΊͷ DMJFOUXFCϨϙδτϦΛ৽ͨʹ࡞੒ ˔ ੩తϑΝΠϧ഑৴ج൫Λ࡞੒ ˓ TUBUJDϨϙδτϦʹ QVTI͢Δ͚ͩͰ഑৴४උ͕੔͏