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

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

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

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