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
140
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
410
趣味プロジェクトをリードする技術 / Technology to lead hobby projects
p1ass
21
8.9k
vercel/og-imageを使ったブログOGPの簡単自動生成 / Generate OGP easily using vercel og-image
p1ass
2
1.3k
Webアプリケーションにおける並行処理の難しさ / #Gocon_Sendai
p1ass
4
2.6k
RSSフィードをもっと便利に / Make RSS feeds more convenient #camphor_lt
p1ass
1
15k
うじまる君の生活習慣の乱れを可視化したい! / uzimaru birthday LT
p1ass
2
16k
複数サービスを運用しやすい理想のコンテナ環境をVPS上に構築する #camphor_day / Building ideal container environment on VPS
p1ass
1
8.7k
Kubernetesのイメージタグの更新を楽にするツールを作った / p1ass/mikku - make updating Kubernetes image tags easier
p1ass
1
76
ドメインロジックと 永続化処理を分離する設計改善 を行って得られた知見 / Design improvements that separate domain logic and persistence function
p1ass
1
2.1k
Other Decks in Programming
See All in Programming
Select API from Kotlin Coroutine
jmatsu
1
150
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
110
プロダクト開発でも使おう 関数のオーバーロード
yoiwamoto
0
150
SODA - FACT BOOK
sodainc
1
930
Blueskyのプラグインを作ってみた
hakkadaikon
1
550
Claude Codeの使い方
ttnyt8701
1
110
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
290
Passkeys for Java Developers
ynojima
3
860
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
360
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
780
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
160
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
170
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Six Lessons from altMBA
skipperchong
28
3.8k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Music & Morning Musume
bryan
46
6.6k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.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