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 ʙ ,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