Save 37% off PRO during our Black Friday Sale! »

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

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

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

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

7f68f5f85f4a39df7d8d3c81cbbfb788?s=128

ぷらす

May 12, 2019
Tweet

Transcript

  1. .JDSP'SPOUFOETº H31$8FCͷ௅ઓ $".1)03 ఆྫ-5 ΀Β͢ !QBTT ʙ ,JUBEF8JEHFUฤ ʙ

  2. l,JUBEFzͱ͸ʁ l,JUBEF8JEHFUzͷ঺հ ઃܭࢥ૝ ࣮૷ɾ։ൃϑϩʔ ·ͱΊ

  3. l,JUBEFzͱ͸ʁ

  4. l,JUBEFzͱ͸ʁ ˔ $".1)03 ͷग़੮؅ཧγεςϜ ˓ 4MBDLͰ CPULJUBEFͱଧͭ͜ͱͰ׬ྃ ˓ IPVTF@BUUFOEBODF νϟϯωϧʹ

    )064&಺ͷ༷ࢠ͕౤ߘ͞ΕΔ ˓ )064&ʹਓ͕͍Δ͜ͱΛΞϐʔϧ
  5. l,JUBEFzͱ͸ʁ ˔ $".1)03 "DDPVOU ҎԼ"DDPVOUXFC ˓ <ͱ͋Δ63-> ˓ ൒೥લ͔Β ,JUBEF༻ͷ

    6*͸ଘࡏ ˓ l։ൃதzͷ··ͣͬͱ์ஔ ໓ଟʹ։͔ͳ͍ϖʔδͱԽ͍ͯͨ͠
  6. l,JUBEF8JEHFUzͷ঺հ

  7. l,JUBEF8JEHFUzͷ঺հ ˔ ػೳ ˓ 8FC͔Β LJUBEF ˓ ݱࡏͷग़੮ਓ਺ͷ֬ೝ ˓ ग़੮ऀͷҰཡΛදࣔ

    ˔ ࣮૷͍ͨ͠ػೳ ˓ ࠓ·Ͱͷग़੮ճ਺Λදࣔ
  8. l,JUBEF8JEHFUzͷ঺հ ˔ ٕज़ελοΫ ˓ 8FC$PNQPOFOUT ˓ H31$8FC ˓ 7VFKT .JDSP'SPOUFOETʹదͨ͠8JEHFU

  9. ઃܭࢥ૝

  10. શ஌ͷਆΛ࡞Βͳ͍ɻ ϝϯς͠΍͘͢ɻ

  11. શ஌ͷਆΛ࡞Βͳ͍ ˔ "DDPVOUXFCμογϡϘʔυ ˓ ֤αʔϏεͷ৘ใ͕౷߹͞Εͯදࣔ͞ΕΔ৔ॴΛ໨ࢦ͢ ˔ ֤αʔϏε͸શ͘υϝΠϯ͕ҟͳΔผͷαʔϏε ˓ ͢΂ͯͷαʔϏεʹؔ͢Δίʔυ͕ඞཁʹ ίʔυ͕ංେԽͯ͠ϝϯςͣ͠Β͘

  12. શ஌ͷਆΛ࡞Βͳ͍

  13. શ஌ͷਆΛ࡞Βͳ͍ ˔ 8JEHFUΛಡΈࠐΉ͚ͩͰɺ࣮૷Λ࣋ͨͳ͍Α͏ʹ͢Δ 8JEHFU͸֤αʔϏεଆ͕؅ཧ͢ΔͷͰίʔυ͕͖ͬ͢Γ

  14. ϝϯς͠΍͘͢ ˔ $".1)03 ͷӡӦ͸গਓ਺ͷֶੜͷΈ ˓ ΄΅ਓ͕֤αʔϏεͷϝΠϯͷ࣮૷Λߦ͏ ˓ ࢖ΘΕ͍ͯΔݴޠ͕όϥόϥ ˓ ӡӦϝϯόʔͷٕज़ελοΫ͸͋·Γඃͬͯͳ͍

    ࣮૷ऀ͕ଔۀ͢Δͱ୭΋࣮૷͕෼͔Βͳ͘ͳΔՄೳੑ
  15. ϝϯς͠΍͘͢ ˔ ରԠࡦ ˓ ޙഐ͕෼͔ΔݴޠͰॻ͘ ˓ ޙഐʹ෍ڭ͢Δ FY(P͸͍͍ͧ ˓ υΩϡϝϯτΛ੔උͯ͠ɺʮޙ͸೚ͤͨʂʯঢ়ଶʹ͢Δ

    ˓ ֎෦͸ΠϯλϑΣʔε͚ͩʹґଘ͢ΔΑ͏ʹ͢Δʹͯ͠ɺ ؆୯ʹ࡞Γ௚ͤΔΑ͏ʹ͢Δ ˡ࠾༻
  16. ϝϯς͠΍͘͢ ˔ ࣮૷ͷৄࡉΛ஌Δඞཁ͕͋Δ΋ͷ͸ಉ͡ϦϙʹೖΕΔ վम࣌ʹ"DDPVOUXFCͷमਖ਼Λগͳ͘͢Δ

  17. ϝϯς͠΍͘͢ ˔ .JDSP'SPOUFOET https://micro-frontends.org/ ˓ ϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ு ˓ ϞϊϦγοΫϑϩϯτΤϯυ͔Βͷ୤٫Λ໨ࢦ͢

  18. ϝϯς͠΍͘͢ ˔ .JDSP'SPOUFOET https://micro-frontends.org/ ˓ ϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ு ˓ ϞϊϦγοΫϑϩϯτΤϯυ͔Βͷ୤٫Λ໨ࢦ͢

  19. ࣮૷ɾ։ൃϑϩʔ

  20. ࣮૷ ˔ 8FC$PNQPOFOUT ˓ ೚ҙͷ)5.-λάΛఆٛ͢Δ l$VTUPN&MFNFOUz ˓ ΧϓηϧԽ͞Εͨ%0.Λ࡞Δ z4IBEPX%0.z ˓

    ࠶ར༻Մೳͳ l)5.-5FNQMBUFz )5.- $44 +4Λ·ͱΊͨΦϦδφϧλάΛ࡞ΕΔ
  21. ࣮૷ 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> ˔ ݺͼग़͢ଆ͸λάΛࢦఆ͢Δ͚ͩ
  22. ࣮૷ ˔ 7VFKTˠ 8FC$PNQPOFOUT ˓ 8FC$PNQPOFOUTΛͦͷ··ॻ͘ͷ͸͠ΜͲ͍ ˓ 7VFKTͷίϯϙʔωϯτϑΝΠϧΛ8FC$PNQPOFOUTʹ vue-cli-service build

    --target wc ¥ --name kitade-widget src/KitadeWidget.vue ֶशίετΛܰݮ ⾪
  23. ࣮૷ ˔ H31$8FC ˓ H31$ͷαʔϏεΛ ϒϥ΢β ͔ΒݺͿ࢓૊Έ ˓ QSPUPDͰ ΫϥΠΞϯτͱܕఆٛΛੜ੒

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

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

    NBTUFSʹ QVTI͞Εͨ࣌͸ɺDBNQIPSTUBUJDʹ Ϗϧυ ࡁΈϑΝΠϧ͕ QVTI͞ΕΔ ˔ ੩తϑΝΠϧΛ഑৴ ˓ TUBUJD͸NBTUFSʹQVTI͞Εͨ࣌ʹ EPDLFSJNBHFΛ࡞੒ ˓ 3VOEFDL ͷ KPCΛճ͢͜ͱͰ഑৴
  26. ։ൃϑϩʔ ˔ ൪ͷΈखಈͰߦ͏ඞཁ͕͋Δ

  27. ·ͱΊ

  28. ·ͱΊ ˔ ,JUBEF8JEHFUΛ࡞ͬͨ ˓ 8FC$PNQPOFOUTͱ H31$8FCͰ.JDSP'SPOUFOETԽ ˓ 7VFKTʹΑͬͯ 8FC$PNQPOFOUTͷ࣮૷ίετΛ࡟ݮ ˓

    H31$8FCͷͨΊͷ DMJFOUXFCϨϙδτϦΛ৽ͨʹ࡞੒ ˔ ੩తϑΝΠϧ഑৴ج൫Λ࡞੒ ˓ TUBUJDϨϙδτϦʹ QVTI͢Δ͚ͩͰ഑৴४උ͕੔͏
  29. 5IBOLZPV 5XJUUFS  !QBTT (JU)VC  QBTT

  30. ࢀߟ

  31. ࢀߟ ˓ https://developer.mozilla.org/ja/docs/Web/Web_Components ˓ https://micro-frontends.org/ ˓ https://cli.vuejs.org/ ˓ https://qiita.com/ka-miyata/items/63e41e4105d7aeb44d6c