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

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

ぷらす

May 12, 2019
Tweet

More Decks by ぷらす

Other Decks in Programming

Transcript

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

    ʙ ,JUBEF8JEHFUฤ ʙ

    View Slide

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

    View Slide

  3. l,JUBEFzͱ͸ʁ

    View Slide

  4. l,JUBEFzͱ͸ʁ
    ˔ $".1)03 ͷग़੮؅ཧγεςϜ
    ˓ 4MBDLͰ CPULJUBEFͱଧͭ͜ͱͰ׬ྃ
    ˓ IPVTF@BUUFOEBODF νϟϯωϧʹ
    )064&಺ͷ༷ࢠ͕౤ߘ͞ΕΔ
    ˓ )064&ʹਓ͕͍Δ͜ͱΛΞϐʔϧ

    View Slide

  5. l,JUBEFzͱ͸ʁ
    ˔ $".1)03 "DDPVOU ҎԼ"DDPVOUXFC

    ˓ <ͱ͋Δ63->
    ˓ ൒೥લ͔Β ,JUBEF༻ͷ 6*͸ଘࡏ
    ˓ l։ൃதzͷ··ͣͬͱ์ஔ
    ໓ଟʹ։͔ͳ͍ϖʔδͱԽ͍ͯͨ͠

    View Slide

  6. l,JUBEF8JEHFUzͷ঺հ

    View Slide

  7. l,JUBEF8JEHFUzͷ঺հ
    ˔ ػೳ
    ˓ 8FC͔Β LJUBEF
    ˓ ݱࡏͷग़੮ਓ਺ͷ֬ೝ
    ˓ ग़੮ऀͷҰཡΛදࣔ
    ˔ ࣮૷͍ͨ͠ػೳ
    ˓ ࠓ·Ͱͷग़੮ճ਺Λදࣔ

    View Slide

  8. l,JUBEF8JEHFUzͷ঺հ
    ˔ ٕज़ελοΫ
    ˓ 8FC$PNQPOFOUT
    ˓ H31$8FC
    ˓ 7VFKT
    .JDSP'SPOUFOETʹదͨ͠8JEHFU

    View Slide

  9. ઃܭࢥ૝

    View Slide

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

    View Slide

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

    View Slide

  12. શ஌ͷਆΛ࡞Βͳ͍

    View Slide

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

    View Slide

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

    View Slide

  15. ϝϯς͠΍͘͢
    ˔ ରԠࡦ
    ˓ ޙഐ͕෼͔ΔݴޠͰॻ͘
    ˓ ޙഐʹ෍ڭ͢Δ FY(P͸͍͍ͧ

    ˓ υΩϡϝϯτΛ੔උͯ͠ɺʮޙ͸೚ͤͨʂʯঢ়ଶʹ͢Δ
    ˓ ֎෦͸ΠϯλϑΣʔε͚ͩʹґଘ͢ΔΑ͏ʹ͢Δʹͯ͠ɺ
    ؆୯ʹ࡞Γ௚ͤΔΑ͏ʹ͢Δ ˡ࠾༻

    View Slide

  16. ϝϯς͠΍͘͢
    ˔ ࣮૷ͷৄࡉΛ஌Δඞཁ͕͋Δ΋ͷ͸ಉ͡ϦϙʹೖΕΔ
    վम࣌ʹ"DDPVOUXFCͷमਖ਼Λগͳ͘͢Δ

    View Slide

  17. ϝϯς͠΍͘͢
    ˔ .JDSP'SPOUFOET https://micro-frontends.org/

    ˓ ϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ு
    ˓ ϞϊϦγοΫϑϩϯτΤϯυ͔Βͷ୤٫Λ໨ࢦ͢

    View Slide

  18. ϝϯς͠΍͘͢
    ˔ .JDSP'SPOUFOET https://micro-frontends.org/

    ˓ ϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ு
    ˓ ϞϊϦγοΫϑϩϯτΤϯυ͔Βͷ୤٫Λ໨ࢦ͢

    View Slide

  19. ࣮૷ɾ։ൃϑϩʔ

    View Slide

  20. ࣮૷
    ˔ 8FC$PNQPOFOUT
    ˓ ೚ҙͷ)5.-λάΛఆٛ͢Δ l$VTUPN&MFNFOUz
    ˓ ΧϓηϧԽ͞Εͨ%0.Λ࡞Δ z4IBEPX%0.z
    ˓ ࠶ར༻Մೳͳ l)5.-5FNQMBUFz
    )5.- $44 +4Λ·ͱΊͨΦϦδφϧλάΛ࡞ΕΔ

    View Slide

  21. ࣮૷
    class MyAppElement extends HTMLElement {
    constructor() {
    super()
    const shadowRoot = this.attachShadow({ mode: 'open' })
    shadowRoot.innerHTML = this.template()
    }
    template() {
    return `
    <br/>p {<br/>color: #f00;<br/>}<br/>
    This is a custom element!
    `
    }
    }
    customElements.define('my-app', MyAppElement)

    ˔ ݺͼग़͢ଆ͸λάΛࢦఆ͢Δ͚ͩ

    View Slide

  22. ࣮૷
    ˔ 7VFKTˠ 8FC$PNQPOFOUT
    ˓ 8FC$PNQPOFOUTΛͦͷ··ॻ͘ͷ͸͠ΜͲ͍
    ˓ 7VFKTͷίϯϙʔωϯτϑΝΠϧΛ8FC$PNQPOFOUTʹ
    vue-cli-service build --target wc ¥
    --name kitade-widget src/KitadeWidget.vue
    ֶशίετΛܰݮ ⾪

    View Slide

  23. ࣮૷
    ˔ H31$8FC
    ˓ H31$ͷαʔϏεΛ ϒϥ΢β ͔ΒݺͿ࢓૊Έ
    ˓ QSPUPDͰ ΫϥΠΞϯτͱܕఆٛΛੜ੒ DMJFOUXFC

    ˓ &OWPZ͔ /HJOYʹΑΔϓϩΩγ͕ඞཁ &OWPZΛ࢖༻

    ˓ #''ΛݐͯΔΑΓ΋Ұ؏ੑΛ࣋ͬͨ։ൃΛߦ͑Δ

    View Slide

  24. ࣮૷
    ˔ H31$8FCͷΫϥΠΞϯτίʔυΛ࡞੒
    ˓ QSPUPͷ NBTUFSʹ QVTI͞Εͨ࣌఺Ͱɺ$*ʹΑͬͯ
    DBNQIPSDMJFOUXFC ͕ࣗಈੜ੒
    ˓ ࢖͍͍ͨαʔϏε͸ OQN PSZBSOͰΫϥΠΞϯτίʔυΛ
    %FQFOEFODZʹ௥Ճ ,JUBEF8JEHFU͸ࡁ

    ˓ جຊతͳ࢖͍ํ͸ެࣜͷ HSQDHSQDXFCΛࢀর

    View Slide

  25. ։ൃϑϩʔ
    ˔ ੩తͳ8FC$PNQPOFOUTͷϑΝΠϧΛ࡞੒
    ˓ ϩʔΧϧͰ͸ ZBSOCVJMEDPNQPOFOU Ͱ EJTU ʹੜ੒
    ˓ NBTUFSʹ QVTI͞Εͨ࣌͸ɺDBNQIPSTUBUJDʹ Ϗϧυ
    ࡁΈϑΝΠϧ͕ QVTI͞ΕΔ
    ˔ ੩తϑΝΠϧΛ഑৴
    ˓ TUBUJD͸NBTUFSʹQVTI͞Εͨ࣌ʹ EPDLFSJNBHFΛ࡞੒
    ˓ 3VOEFDL ͷ KPCΛճ͢͜ͱͰ഑৴

    View Slide

  26. ։ൃϑϩʔ
    ˔ ൪ͷΈखಈͰߦ͏ඞཁ͕͋Δ

    View Slide

  27. ·ͱΊ

    View Slide

  28. ·ͱΊ
    ˔ ,JUBEF8JEHFUΛ࡞ͬͨ
    ˓ 8FC$PNQPOFOUTͱ H31$8FCͰ.JDSP'SPOUFOETԽ
    ˓ 7VFKTʹΑͬͯ 8FC$PNQPOFOUTͷ࣮૷ίετΛ࡟ݮ
    ˓ H31$8FCͷͨΊͷ DMJFOUXFCϨϙδτϦΛ৽ͨʹ࡞੒
    ˔ ੩తϑΝΠϧ഑৴ج൫Λ࡞੒
    ˓ TUBUJDϨϙδτϦʹ QVTI͢Δ͚ͩͰ഑৴४උ͕੔͏

    View Slide

  29. 5IBOLZPV
    5XJUUFS !QBTT
    (JU)VC QBTT

    View Slide

  30. ࢀߟ

    View Slide

  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

    View Slide