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

Transcript

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

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

3. l,JUBEFz
   ͱ͸ʁ

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

   )064&಺ͷ༷ࢠ͕౤ߘ͞ΕΔ ˓ )064&
   ʹਓ͕͍Δ͜ͱΛΞϐʔϧ

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

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

6. l,JUBEF
   8JEHFUz
   ͷ঺հ

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

   ˔ ࣮૷͍ͨ͠ػೳ ˓ ࠓ·Ͱͷग़੮ճ਺Λදࣔ

8. l,JUBEF
   8JEHFUz
   ͷ঺հ ˔ ٕज़ελοΫ ˓ 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 PS
    ZBSO
    ͰΫϥΠΞϯτίʔυΛ %FQFOEFODZʹ௥Ճ ,JUBEF
    8JEHFU
    ͸ࡁ ˓ جຊతͳ࢖͍ํ͸ެࣜͷ HSQDHSQDXFC
    Λࢀর

25. ։ൃϑϩʔ ˔ ੩తͳ8FC
    $PNQPOFOUT
    ͷϑΝΠϧΛ࡞੒ ˓ ϩʔΧϧͰ͸ ZBSO
    CVJMEDPNQPOFOU Ͱ EJTU ʹੜ੒ ˓

    NBTUFS
    ʹ QVTI
    ͞Εͨ࣌͸ɺDBNQIPSTUBUJD
    ʹ Ϗϧυ ࡁΈϑΝΠϧ͕ QVTI
    ͞ΕΔ ˔ ੩తϑΝΠϧΛ഑৴ ˓ TUBUJD͸NBTUFSʹQVTI͞Εͨ࣌ʹ EPDLFS
    JNBHF
    Λ࡞੒ ˓ 3VOEFDL ͷ KPC
    Λճ͢͜ͱͰ഑৴

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

27. ·ͱΊ

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

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

29. 5IBOL
    ZPV 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