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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

l,JUBEFzͱ͸ʁ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

l,JUBEFzͱ͸ʁ ˔ $".1)03 "DDPVOU ҎԼ"DDPVOUXFC ˓ <ͱ͋Δ63-> ˓ ൒೥લ͔Β ,JUBEF༻ͷ 6*͸ଘࡏ ˓ l։ൃதzͷ··ͣͬͱ์ஔ ໓ଟʹ։͔ͳ͍ϖʔδͱԽ͍ͯͨ͠

Slide 6

Slide 6 text

l,JUBEF8JEHFUzͷ঺հ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ઃܭࢥ૝

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

શ஌ͷਆΛ࡞Βͳ͍

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ϝϯς͠΍͘͢ ˔ ରԠࡦ ˓ ޙഐ͕෼͔ΔݴޠͰॻ͘ ˓ ޙഐʹ෍ڭ͢Δ FY(P͸͍͍ͧ ˓ υΩϡϝϯτΛ੔උͯ͠ɺʮޙ͸೚ͤͨʂʯঢ়ଶʹ͢Δ ˓ ֎෦͸ΠϯλϑΣʔε͚ͩʹґଘ͢ΔΑ͏ʹ͢Δʹͯ͠ɺ ؆୯ʹ࡞Γ௚ͤΔΑ͏ʹ͢Δ ˡ࠾༻

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

࣮૷ɾ։ൃϑϩʔ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

࣮૷ class MyAppElement extends HTMLElement { constructor() { super() const shadowRoot = this.attachShadow({ mode: 'open' }) shadowRoot.innerHTML = this.template() } template() { return ` p { color: #f00; }

This is a custom element!

` } } customElements.define('my-app', MyAppElement) ˔ ݺͼग़͢ଆ͸λάΛࢦఆ͢Δ͚ͩ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

࣮૷ ˔ H31$8FC ˓ H31$ͷαʔϏεΛ ϒϥ΢β ͔ΒݺͿ࢓૊Έ ˓ QSPUPDͰ ΫϥΠΞϯτͱܕఆٛΛੜ੒ DMJFOUXFC ˓ &OWPZ͔ /HJOYʹΑΔϓϩΩγ͕ඞཁ &OWPZΛ࢖༻ ˓ #''ΛݐͯΔΑΓ΋Ұ؏ੑΛ࣋ͬͨ։ൃΛߦ͑Δ

Slide 24

Slide 24 text

࣮૷ ˔ H31$8FCͷΫϥΠΞϯτίʔυΛ࡞੒ ˓ QSPUPͷ NBTUFSʹ QVTI͞Εͨ࣌఺Ͱɺ$*ʹΑͬͯ DBNQIPSDMJFOUXFC ͕ࣗಈੜ੒ ˓ ࢖͍͍ͨαʔϏε͸ OQN PSZBSOͰΫϥΠΞϯτίʔυΛ %FQFOEFODZʹ௥Ճ ,JUBEF8JEHFU͸ࡁ ˓ جຊతͳ࢖͍ํ͸ެࣜͷ HSQDHSQDXFCΛࢀর

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

·ͱΊ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

5IBOLZPV 5XJUUFS !QBTT (JU)VC QBTT

Slide 30

Slide 30 text

ࢀߟ

Slide 31

Slide 31 text

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