Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Micro Frontends × gRPC-Web の挑戦 / The challenge...
Search
ぷらす
May 12, 2019
Programming
0
110
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
Share
More Decks by ぷらす
See All by ぷらす
AWSの認定資格を受けた話
p1ass
1
330
趣味プロジェクトをリードする技術 / Technology to lead hobby projects
p1ass
21
8.7k
vercel/og-imageを使ったブログOGPの簡単自動生成 / Generate OGP easily using vercel og-image
p1ass
2
1.2k
Webアプリケーションにおける並行処理の難しさ / #Gocon_Sendai
p1ass
4
2.5k
RSSフィードをもっと便利に / Make RSS feeds more convenient #camphor_lt
p1ass
1
14k
うじまる君の生活習慣の乱れを可視化したい! / uzimaru birthday LT
p1ass
2
16k
複数サービスを運用しやすい理想のコンテナ環境をVPS上に構築する #camphor_day / Building ideal container environment on VPS
p1ass
1
8.3k
Kubernetesのイメージタグの更新を楽にするツールを作った / p1ass/mikku - make updating Kubernetes image tags easier
p1ass
1
54
ドメインロジックと 永続化処理を分離する設計改善 を行って得られた知見 / Design improvements that separate domain logic and persistence function
p1ass
1
2k
Other Decks in Programming
See All in Programming
REXML改善のその後
naitoh
0
190
Rubyのobject_id
qnighy
6
1.3k
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
640
開発を加速する共有Swift Package実践
elmetal
PRO
0
410
実践!難読化ガイド
mitchan
0
160
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
390
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
150
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
540
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Featured
See All Featured
Fireside Chat
paigeccino
31
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Unsuck your backbone
ammeep
667
57k
Code Review Best Practice
trishagee
62
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Into the Great Unknown - MozCon
thekraken
29
1.4k
Typedesign – Prime Four
hannesfritz
39
2.3k
Being A Developer After 40
akosma
84
590k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Transcript
.JDSP'SPOUFOETº H31$8FCͷઓ $".1)03 ఆྫ-5 Β͢ !QBTT ʙ ,JUBEF8JEHFUฤ ʙ
l,JUBEFzͱʁ l,JUBEF8JEHFUzͷհ ઃܭࢥ ࣮ɾ։ൃϑϩʔ ·ͱΊ
l,JUBEFzͱʁ
l,JUBEFzͱʁ ˔ $".1)03 ͷग़੮ཧγεςϜ ˓ 4MBDLͰ CPULJUBEFͱଧͭ͜ͱͰྃ ˓ IPVTF@BUUFOEBODF νϟϯωϧʹ
)064&ͷ༷ࢠ͕ߘ͞ΕΔ ˓ )064&ʹਓ͕͍Δ͜ͱΛΞϐʔϧ
l,JUBEFzͱʁ ˔ $".1)03 "DDPVOU ҎԼ"DDPVOUXFC ˓ <ͱ͋Δ63-> ˓ લ͔Β ,JUBEF༻ͷ
6*ଘࡏ ˓ l։ൃதzͷ··ͣͬͱ์ஔ ໓ଟʹ։͔ͳ͍ϖʔδͱԽ͍ͯͨ͠
l,JUBEF8JEHFUzͷհ
l,JUBEF8JEHFUzͷհ ˔ ػೳ ˓ 8FC͔Β LJUBEF ˓ ݱࡏͷग़੮ਓͷ֬ೝ ˓ ग़੮ऀͷҰཡΛදࣔ
˔ ࣮͍ͨ͠ػೳ ˓ ࠓ·Ͱͷग़੮ճΛදࣔ
l,JUBEF8JEHFUzͷհ ˔ ٕज़ελοΫ ˓ 8FC$PNQPOFOUT ˓ H31$8FC ˓ 7VFKT .JDSP'SPOUFOETʹదͨ͠8JEHFU
ઃܭࢥ
શͷਆΛ࡞Βͳ͍ɻ ϝϯς͘͢͠ɻ
શͷਆΛ࡞Βͳ͍ ˔ "DDPVOUXFCμογϡϘʔυ ˓ ֤αʔϏεͷใ͕౷߹͞Εͯදࣔ͞ΕΔॴΛࢦ͢ ˔ ֤αʔϏεશ͘υϝΠϯ͕ҟͳΔผͷαʔϏε ˓ ͯ͢ͷαʔϏεʹؔ͢Δίʔυ͕ඞཁʹ ίʔυ͕ංେԽͯ͠ϝϯςͣ͠Β͘
શͷਆΛ࡞Βͳ͍
શͷਆΛ࡞Βͳ͍ ˔ 8JEHFUΛಡΈࠐΉ͚ͩͰɺ࣮Λ࣋ͨͳ͍Α͏ʹ͢Δ 8JEHFU֤αʔϏεଆ͕ཧ͢ΔͷͰίʔυ͕͖ͬ͢Γ
ϝϯς͘͢͠ ˔ $".1)03 ͷӡӦগਓͷֶੜͷΈ ˓ ΄΅ਓ͕֤αʔϏεͷϝΠϯͷ࣮Λߦ͏ ˓ ΘΕ͍ͯΔݴޠ͕όϥόϥ ˓ ӡӦϝϯόʔͷٕज़ελοΫ͋·Γඃͬͯͳ͍
࣮ऀ͕ଔۀ͢Δͱ୭࣮͕͔Βͳ͘ͳΔՄೳੑ
ϝϯς͘͢͠ ˔ ରԠࡦ ˓ ޙഐ͕͔ΔݴޠͰॻ͘ ˓ ޙഐʹڭ͢Δ FY(P͍͍ͧ ˓ υΩϡϝϯτΛඋͯ͠ɺʮޙͤͨʂʯঢ়ଶʹ͢Δ
˓ ֎෦ΠϯλϑΣʔε͚ͩʹґଘ͢ΔΑ͏ʹ͢Δʹͯ͠ɺ ؆୯ʹ࡞ΓͤΔΑ͏ʹ͢Δ ˡ࠾༻
ϝϯς͘͢͠ ˔ ࣮ͷৄࡉΛΔඞཁ͕͋Δͷಉ͡ϦϙʹೖΕΔ վम࣌ʹ"DDPVOUXFCͷमਖ਼Λগͳ͘͢Δ
ϝϯς͘͢͠ ˔ .JDSP'SPOUFOET https://micro-frontends.org/ ˓ ϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ு ˓ ϞϊϦγοΫϑϩϯτΤϯυ͔Βͷ٫Λࢦ͢
ϝϯς͘͢͠ ˔ .JDSP'SPOUFOET https://micro-frontends.org/ ˓ ϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ு ˓ ϞϊϦγοΫϑϩϯτΤϯυ͔Βͷ٫Λࢦ͢
࣮ɾ։ൃϑϩʔ
࣮ ˔ 8FC$PNQPOFOUT ˓ ҙͷ)5.-λάΛఆٛ͢Δ l$VTUPN&MFNFOUz ˓ ΧϓηϧԽ͞Εͨ%0.Λ࡞Δ z4IBEPX%0.z ˓
࠶ར༻Մೳͳ l)5.-5FNQMBUFz )5.- $44 +4Λ·ͱΊͨΦϦδφϧλάΛ࡞ΕΔ
࣮ 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> ˔ ݺͼग़͢ଆλάΛࢦఆ͢Δ͚ͩ
࣮ ˔ 7VFKTˠ 8FC$PNQPOFOUT ˓ 8FC$PNQPOFOUTΛͦͷ··ॻ͘ͷ͠ΜͲ͍ ˓ 7VFKTͷίϯϙʔωϯτϑΝΠϧΛ8FC$PNQPOFOUTʹ vue-cli-service build
--target wc ¥ --name kitade-widget src/KitadeWidget.vue ֶशίετΛܰݮ ⾪
࣮ ˔ H31$8FC ˓ H31$ͷαʔϏεΛ ϒϥβ ͔ΒݺͿΈ ˓ QSPUPDͰ ΫϥΠΞϯτͱܕఆٛΛੜ
DMJFOUXFC ˓ &OWPZ͔ /HJOYʹΑΔϓϩΩγ͕ඞཁ &OWPZΛ༻ ˓ #''ΛݐͯΔΑΓҰ؏ੑΛ࣋ͬͨ։ൃΛߦ͑Δ
࣮ ˔ H31$8FCͷΫϥΠΞϯτίʔυΛ࡞ ˓ QSPUPͷ NBTUFSʹ QVTI͞Εͨ࣌Ͱɺ$*ʹΑͬͯ DBNQIPSDMJFOUXFC ͕ࣗಈੜ ˓
͍͍ͨαʔϏε OQN PSZBSOͰΫϥΠΞϯτίʔυΛ %FQFOEFODZʹՃ ,JUBEF8JEHFUࡁ ˓ جຊతͳ͍ํެࣜͷ HSQDHSQDXFCΛࢀর
։ൃϑϩʔ ˔ ੩తͳ8FC$PNQPOFOUTͷϑΝΠϧΛ࡞ ˓ ϩʔΧϧͰ ZBSOCVJMEDPNQPOFOU Ͱ EJTU ʹੜ ˓
NBTUFSʹ QVTI͞Εͨ࣌ɺDBNQIPSTUBUJDʹ Ϗϧυ ࡁΈϑΝΠϧ͕ QVTI͞ΕΔ ˔ ੩తϑΝΠϧΛ৴ ˓ TUBUJDNBTUFSʹQVTI͞Εͨ࣌ʹ EPDLFSJNBHFΛ࡞ ˓ 3VOEFDL ͷ KPCΛճ͢͜ͱͰ৴
։ൃϑϩʔ ˔ ൪ͷΈखಈͰߦ͏ඞཁ͕͋Δ
·ͱΊ
·ͱΊ ˔ ,JUBEF8JEHFUΛ࡞ͬͨ ˓ 8FC$PNQPOFOUTͱ H31$8FCͰ.JDSP'SPOUFOETԽ ˓ 7VFKTʹΑͬͯ 8FC$PNQPOFOUTͷ࣮ίετΛݮ ˓
H31$8FCͷͨΊͷ DMJFOUXFCϨϙδτϦΛ৽ͨʹ࡞ ˔ ੩తϑΝΠϧ৴ج൫Λ࡞ ˓ TUBUJDϨϙδτϦʹ QVTI͢Δ͚ͩͰ৴४උ͕͏
5IBOLZPV 5XJUUFS !QBTT (JU)VC QBTT
ࢀߟ
ࢀߟ ˓ https://developer.mozilla.org/ja/docs/Web/Web_Components ˓ https://micro-frontends.org/ ˓ https://cli.vuejs.org/ ˓ https://qiita.com/ka-miyata/items/63e41e4105d7aeb44d6c